The Pro editor addresses advanced users with HTML or CSS knowledge. The following contains a detailed introduction to functions found on the various tabs:
Structure: changes to the page structure of the layout, the border layout for individual pages, the output for individual questions and the structure of the progress bar and plausibility checks.
Debug mode: display of table borders to facilitate debugging.
Upload: upload of files required for project layout.
Wildcards: definition of wildcards for the application of dynamic contents.
Progress bar: You can disable automatic calculation and specify a value for each page.
Structure
EFS uses a so-called template system for ssytem layout. A template is an HTML file with wildcards inserted. These wildcards are used to apply “business logic” to the HTML page, for example necessary HTML code printed to an output page which is required by EFS for processing plausibility checks. With a few exceptions, you can freely restructure the HTML code. The templates of a specific project are customized in the Layout → Pro editor menu on the Structure tab. The following information can be found in the overview table:
For each template, there is a list containing the title as well as the file name, size, date of the last change and person who edited it.
The search function allows you to capture not only the template name and file name, but also the template content and related comments.
You can make notes on individual templates: By clicking on the Marker icon, you can open a pop-up window containing a comment field, enter your comment and save it.
Editing templates
You have the following options for editing or creating templates:
By clicking on the title, you can open a template and edit its content.
If you insert the wildcard {debug} into a template (e.g. main.tpl), Save and then invoke a questionnaire page, variables will be displayed in a pop-up window. Please note that the usual wildcards of EFS cannot be used in the Smarty templates.
Click on the Create template button to create a new template.
You can duplicate templates that already exist by clicking on the Copy icon.
You can delete newly created and duplicated templates, but not system templates.
If you wish to restore the original state of a template during project creation, click on the Restore icon in the “Function” column.
Editing templates externally and uploading them
You can export templates for further use on other EFS Survey installations or for local processing. To do so, click on the Export button. Similarly, you can use the Import button to upload external templates to the server, both individual templates and zip files containing several templates.
Debug mode
EFS layouts work with invisible tables to position texts on a page. For debugging, it is often desirable to make table boundary lines temporarily visible. On the Debug mode tab, you can activate the table borders for all those who see the survey. Alternatively, you can make table borders visible only for those participants with a special IP address. Assume that your project is already in the field and you want to make changes to it on short notice. Naturally, you do not want your participants to see the table borders, so you restrict the view to yourself.
Upload
When designing the layout it is often necessary to load files up to the server, occasionally also to other directories than the directory /images used by the media library. To do this use the Upload function on the tab of the same name in the Pro editor. Here, you can also specify zip files, which will be unpacked to the desired directory.
| Info |
|---|
The file size for importing data is limited. If your file exceeds the installations-specific threshold, a warning message will be displayed. |
Uploading a new file
Select the character set.
Select the target directory.
Locate the desired file on the hard disk.
Confirm by clicking on Upload file.
The directories of the project
Directory | Use |
|---|---|
JavaScript | JavaScript files for the “Responsive Layout”. |
project directory/images | Images which were added to a project by the user, e.g. via the media library, are stored in this directory. |
Layout | All images supplied with a survey layout, e.g. graphical form elements, standard logos, are stored in this directory. |
CSS | CSS files. |
Wildcards
On the Wildcards tab, you can easily define dynamic contents for each questionnaire page outside of the actual questionnaire. You can use this feature, for example, to divide your survey into topic blocks and then to visualize this division in the layout. To do so, proceed as follows:
Click on the Wildcards tab.
Click on the page title of the first page of your project.
A form will appear, in which you can insert a maximum of five wildcards for this page. Type an arbitrary text into the Text 1 field, e.g. “Demographic questions”
Click on Save changes.
Repeat Steps 1 through 4 for one or two further pages.
Now tell the layout where you would like to use the defined wildcards: In the questionnaire editor, for example, you can reference the wildcards from questions using the wildcards “#r_text1#”, “#r_text2#”, “#r_text3#”, “#r_text4#”, “#r_text5#”.
You can alternatively modify the structure of your layout.
Switch to the Structure tab.
For example, edit the main.tpl template, to place the wildcards in the general page structure file.
Insert the {$r_text1} system variable anywhere on the page.
Take a look at the project in the preview. You will see that {$r_text1} has been replaced with the corresponding text from the database.
Wrap the wildcard in HTML code to achieve the desired appearance.
Progress bar
The progress bar automatically activated by default calculates an estimated value for the as yet estimated remaining questionnaire length. This procedure has two disadvantages:
As already explained above, this is an estimation algorithm, as a precise prediction of the course of the questionnaire is usually not possible for a given respondent.
Automatic calculation evaluates all questionnaire pages. In practice, however, there is often the wish for an option to exclude the opening pages (containing, for example, the welcome, an introduction to the subject or a language selection question) from the count.
Alternatively, you can therefore deactivate the automatic calculation and determine a value the progress bar should take on for each page.
Progress bar algorithm
When a participant begins filling out a questionnaire it cannot usually be predicted how many questionnaire pages and which pages precisely they will actually see. To do so you would have to know in advance what filter branches the participant will pass - however filtering is mostly dependent on answers only given during the course of the questionnaire.
The progress bar values are therefore calculated in EFS via an estimation algorithm, which steadily approaches actual final length throughout the course of the questionnaire. Here, unavoidable jumps in the value, caused for example by filters, are kept to a minimum.
The formula is:
| Code Block |
|---|
progress value (page x) = progress value (page x-1) + [{100- {progress value (page x-1)} / {denominator (page x) - numerator (page x)} ] |
where:
denominator (page x) = (sum of pages submitted to date + 1) + (sum of all pages still anticipated after page x) and
numerator (page x) = number of all pages actually submitted to date
The progress value on the first page of the questionnaire is:
progress value (page 1) = 100 / sum of all pages in the questionnaire
The progress value on the final page is:
Progress value (final page) = 100
Changing progress bar texts and values manually
The progress bar is usually activated, otherwise please activate it in Standard editor on the Progress bar tab. Switch to Pro editor and open the expert Progress bar tab. Deactivate “Calculate progress automatically” and confirm with Save settings. In projects with traditional system layout: The progress bar is usually deactivated. Please activate it in Standard editor on the Progress bar tab. Deactivate “Calculate progress automatically” and confirm with Save settings. Then, click on the newly-displayed Detailed settings link.
First, determine how many pages a respondent is shown on average. For a project with no filters, this number corresponds to the number of survey pages. For a project with filters, count the number of pages a respondent will see, add the rounded mean value from the sum of filter branches and enter the value into the “Total number of pages” field.
Now you can indirectly determine a value for the progress bar for each page: you define the page number for each individual page from the respondent’s point of view.
If the opening pages of the project are to be ignored, enter a value of 0 for these pages. Then, the pages will be excluded from the calculation, and a progress bar will not be displayed on them.
| Info |
|---|
In the case of random blocks, the page-defined progress bar jumps. Therefore, for projects with “Random order” or “Random selection” branches, it is recommended that you use the automatically calculated display. |
Modifying the progress bar
The progress bar is output via the “progressbar.tpl” template. In detail, the display works as follows:
EFS checks to see whether a user-defined progress bar value is to be output for this page; if not, the number of pages already viewed will be used for the calculation.
EFS calculates the percentage for the page and saves it to the sys_progress system variable. The maximum size the progress bar can reach will be transferred in the sys_maxprogress system variable (default value: 100).
Depending on the progress bar type, the output template will now use sys_progress as the width of the progress bar or calculate from the transferred values, how large the bars for the progress bar must be (see example 2).
The message text (“You have already completed n percent of the survey”) will be read from the database, and the percentage will be dynamically inserted.
Example 1
In a test project, open the Typ2 progress bar via Standard editor → Progress bar.
Switch to Pro editor → Structure.
Choose the “progressbar.tpl” template.
| Code Block |
|---|
{* Version 1-0 2002-09-25 *}<table width="{$layout_width}" border="{$sys_border}" class="progress" cellpadding=2 cellspacing=0>
<tr>
<td width=100% class="progresstext">{$msg_progress}
<img src="{$baseurl}layout/s1.gif" height="13"><img
src="{$baseurl}layout/s2.gif" height="13"><img
src="{$baseurl}layout/s3.gif" height="13" width="{$sys_progress}"><img
src="{$baseurl}layout/s4.gif" height="13"><img
src="{$baseurl}layout/s5.gif" height="13" width="{math equation="x – y" x=$sys_maxprogress y=$sys_progress}"><img
src="{$baseurl}layout/s6.gif" height="13" width="1"
> {$sys_progress}%</td>
</tr>
</table> |
Example 2
Some progress bar types require calculations with the system variables for output. An example of this is progress bar type 6.
| Code Block |
|---|
{* Version 1-0 2002-09-25 *}
<table width="{$layout_width}" border="{$sys_border}" cellpadding=2 cellspacing=0>
<tr>
<td align="right">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="{$baseurl}layout/pbar_start.gif"></td>
<td background="{$baseurl}layout/pbar_bg.gif" width="{$sys_maxprogress}" align="right"><img src="{$baseurl}layout/pbar_scale.gif" height="13" width="{math equation="x – y" x=$sys_maxprogress y=$sys_progress}"></td>
<td><img src="{$baseurl}layout/pbar_end.gif"></td>
</tr>
</table>
</td>
</tr>
</table> |
This will build a table that is completely filled with the progress bar image (large bar). A single-color image will be placed over this table so that only a part of the background will be visible. The length of this image is calculated from the maximum overall length of the progress bar by subtracting the current percentage.