| Expand | ||
|---|---|---|
| ||
|
The Layout menu contains numerous functions for designing the questionnaire. In the Standard editor, which is opened automatically in the content area when entering the Layout menu, you can modify the system layout provided by TIVIAN, without requiring any knowledge of HTML or web design. If there are already layouts available on the EFS installation you use, you can integrate them in your questionnaire in the Layout templates menu. Choose the layout you need and click on the Select layout button to implement it in your questionnaire. In the Save settings in template menu, you can save the layout settings of your project. That way, you will be able to use the saved template again later e.g. for other projects on the same EFS Survey installation.
...
In the Layout menu, you will find different features which offer both users without HTML and webdesign knowledge of HTML and web design professionals diverse options for editing the layout. |
...
Background color
...
Background behind the proper question area. If a background image is uploaded, the background color will be irrelevant because the image will be used instead.
...
Background image
...
The image will be tiled across the entire background.
The Standard editor’s color picker checks the uploaded background image automatically and offers fitting color suggestions for texts, form elements etc.
...
Position of
background image
...
Question area: Background color
...
Optionally the questions of a page can be displayed inside a separate area. The design reminds of a sheet of paper. This is the background color for the “sheet”.
...
Answer container: Background color
...
Optionally, the area containing the answer options or the matrix grid itself can have a separate design. This is the background color for this area.
...
Answer container: Border color
Fonts
On the Fonts tab, you can change the font style to be used and specify the font size for various text types depending on the device.
...
Option
...
Meaning
...
Font style
...
You can choose among the font styles offered.
...
Font size: Default font size
...
Please choose a font size between 10px and 30px.
...
Font size: Default font size for mobile devices
...
Please choose a font size between 10px and 30px.
...
Font size: Question
text
...
Please choose a value between 0.2em an 5em. 1em is equal to the default font size. 2em means 2 times the size of the default font size.
...
Font size: Fill-in instruction
...
Please choose a value between 0.2em an 5em. 1em is equal to the default font size. 2em means 2 times the size of the default font size.
Form Elements
On the Form elements tab, you can deactivate graphical form elements if necessary, select a different color variant and fine-tune the appearance of buttons and boxes.
...
...
Logos
In the Logos tab, you can upload up to four logos and insert them into your layout. In the system layout, the first logo will be displayed above the questionnaire, while the second logo will be displayed below the questionnaire. If you upload a third and fourth logo, the page structure of your project will be modified by the system to make room for these logos. You will normally want to edit the page structure to achieve optimum placement of the logosOn the Logos tab, you can upload your own logo.
As long as only one logo is uploaded for display either on top of or below the questionnaire, it is positioned centrally.
If you upload two logos for display either on top of or below the questionnaire, they are positioned in the left- and right-hand corners.
If you want to remove a logo, click on the Delete button.
You will need the logos in a web-enabled format, i.e. as GIF (preferably for drawings and figures with few colors), JPEG (preferably photos, and figures with many colors) or PNG. Pay attention to the file size. All images in one questionnaire page should under no circumstances exceed 30 to 40 kilobytes.
Pages
On the Pages tab, you can modify the general settings for text colors and background.
...
Option
...
Meaning
...
Page fade-in
Duration: Default 500ms, a value between 100 and 1000 ms is recommended
...
linear: The animation has the same speed from start to end.
ease: Default value. The animation has a slow start, then fast,
before it ends slowly.
ease-in: The animation has a slow start (default).
ease-out: The animation has a slow end.
ease-in-out: The animation has both a slow start and a slow end.
...
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.
...
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.
Layout templates
You can find a list of all existing templates available to you in the Layout templates menu on the Layout list tab.
...
Saving the layout setting as a template
First, save the desired layout as a template in the EFS installation in which you set it up. To do so, choose Layout → Save settings in template from the menu of the respective project.
You can either overwrite an old template or create a new template. If you wish to create a new template, enter the name and a short description for your orientation.
Click on Save. A green text bar will indicate the successful performance of the action.
Exporting the layout template from the original EFS installation
Switch to the Layout templates menu.
Select the desired template from the Layout list tab and click on the Export icon.
The “File download” dialog will open. Check that “Save file to disk” is selected, and confirm by clicking on OK.
In the window that will then opens, select the folder on your hard disk to which you want to store the layout file, and specify the name of the file.
The layout template will now be stored on your hard disk as a zip file. The export operation is completed.
Importing the layout template into another EFS installation
To use the exported layout template for a project in another EFS installation, select the respective project, switch to the Layout → Layout templates menu.
Subsequently select the Import template button.
In the “File” field, you can enter the file path where the file you exported under the first step is located on your computer. Alternatively, you can also find and insert the file using the Browse button.
If you wish to use your layout for the current project, tick the “Activate template” checkbox.
Complete the work process by clicking on Upload file.
A green text bar containing the text “The template was successfully added” will inform you about the successful transfer of the template. On the Layout list tab, it will now also be available for all projects located on this second EFS installation. If you have decided to directly activate the template under Step 9, a second green text bar will report the successful activation.
...
...
The Tivian library, the project-specific library (Current project) and the optional installation-wide library (Common library) are arranged on successive tabs.
Using ready-made Tivian visuals
The Tivian library provides ready-made visuals, made available by Tivian for free. This includes, among others, a comprehensive repertoire of icons and other image files for the new question types. The Tivian library content is read-only: the used content will only be referenced in an effective, resource-saving manner instead of copying it into the project.
Managing project-specific media
The project-related media library on the Current project tab offers the following options:
You can use not only images, but SVG graphics, flash and video formats as e.g. RealVideo or Quicktime. To access a detailed list of the permitted file types, click on the Question mark icon in the Upload file dialog.
The uploaded files are stored in the project directory in the directory /images.
Directories can be created within /images to improve the overview.
The maximum file size is installation-specific. If you exceed the threshold value, a note will be displayed.
You can upload zip files and unpack them directly if you wish. Thus multimedia files which exceed the maximum file size can be uploaded if it is possible to compress them to allowed size. The upload of a high number of files or the creation of a directory with sub directories is made easier by compression, too: You can sort the files as required in a parent directory and subdirectories, compress these, and then, in one operation, upload them to the server and have them unpacked.
Managing media installation-wide (optional)
Customers with their own server can have Tivian Support activate an installationwide library on the Common library tab.
Uploaded files are saved in the /images directory of the installation.
It is possible to create sub directories in /images.
| Info |
|---|
Please use the installation-wide media library economically. The following guiding values provide orientation:
|
Managing multimedia files
Uploading files
Click on the Upload file button.
Locate the file on your hard disk using the Browse function.
If you are uploading a zip file, you can have the system unpack it and automatically create subdirectories in one operation. To do so, tick the “Unpack ZIP file” checkbox.
You have the option of defining a wildcard. You can use the characters a-z, A-Z and 0-9. The wildcards must be enclosed in two hash signs (#).
If you want to overwrite files in your own media library with an updated version, simply activate the new “Overwrite file(s)” checkbox during upload.
Confirm by clicking on Upload.
Viewing and editing the uploaded files
The directory structure contains all uploaded files.
If you search for a specific file, you may either skip through the directories or use the search form. It offers full text search for the file name, which means it is enough to enter a part of the name to find a file.
For each file the following information is listed:
Thumbnails for the files that contain images: Clicking on a thumbnail allows you to open a detail view of the respective image. This contains the image, height and width information, and the appropriate img tags with absolute and relative paths.
Description (filled automatically with the file name)
| Info |
|---|
Height and width of the images and an alternative text are defined when inserting the images into the Multimedia question type. |
Editing individual files
If you scroll over a row or activate a checkbox, the following action icons are displayed:
Info: In a pop-up window, you can find the img tag that can be used to incorporate a file into the questionnaire, with both absolute and relative path. Furthermore, the absolute path is displayed separately for copy&paste.
Edit file: Opens an entry form in which you can change the file name and description.
Move file: Opens a drop-down list from which you can choose a different category for the file.
Delete
Editing several files at the same time
Using the icons above the file list, you can download, move or delete several or all files. Just activate the desired files and click on the appropriate icon.
| Note |
|---|
The media library is not a secure storage location! It is recommended to save only logos and/or data that do not need to be protected (e.g. by a security query). The saved logos and/or data are publicly accessible. |
Using categories to organize files
You can create categories in the media library, i.e. in the project-related directory / images, which help to improve the overview.
Creating new categories
Click on the category below which you wish to create the new category.
Click on the Create category icon.
Enter the name.
Confirm by clicking on OK.
Renaming categories
Click on the category you wish to rename.
Click on the Rename category icon.
Enter the new name.
Confirm by clicking on OK.
Deleting categories
Click on the category you wish to delete.
Click on the Delete category icon.
Affirm the confirmation window.
| Info |
|---|
When deleting a category, all files in it will be removed as well. The iomages category cannot be deleted. |
Downloading files from Media library
Individual or several files can be downloaded. For this purpose, a Download icon is available on every level of the category structure on the Current project and Common library tabs. If you select the desired files and click this icon, a zip file will be generated that contains the content of the current folder including its subfolders. You can save this file locally to a PC, open it and then view or edit the images.
| Info |
|---|
When working in the installation-wide media library, in particular, take care to select only reasonable amounts of data for download, i.e. less than 10 MB and not more than 30 files. Otherwise, the download process can affect the performance of the EFS installation. |
Protecting images
Customers running product or cover tests frequently ask for a better protection against illegal copying and screenshotting of their content. A dedicated image protection feature makes storing or screenshotting of images considerably more difficult.
In the questionnaire, participants will see only the silhouette and outline of the protected image, plus an instruction for display.
If the participants press the key combination specified in the instruction, the image will be displayed. (They have to keep the blank key pressed and click on the image with the left key of the mouse pointer.)
...