Content Comparison

kmkmkokmkoUse the various setting options to customize the layout of the questionnaire.

Center single logos

By default, single logos are alinged to the left. Use this option to center the logos.

First top logo

The Tivian logo is displayed by default. To change the first top logo click on the upload button and select the logo you want.

Second top logo

Add a second logo in the upper right-hand corner of your questionnaire. To upload the logo you want, click the upload button.

First bottom logo

Add a logo in the bottom left-hand corner of your questionnaire. To upload the logo you want, click the upload button.

Second bottom logo

Add a logo in the bottom right-hand corner of your questionnaire. To upload the logo you want, click the upload button.

Enabled

This option is enabled by default.

Duration

Default 500ms, a value between 100 and 1000 ms is recommended.

Function used to fade in the page

New pages in the questionnaire will fade in to prevent ‘visual distractions’ whilst the new page is being loaded.

• 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.

Page fade-in

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

• repeat (by default)

• center top

• center-top-repeat-x

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”.

Distance to border

Specify the distance between the questions and the border of the questionnaire. Select a value between 0rem and 10rem.

Display answer container

The answer options will be framed by activating this option.

• The option is deactivated by default

Background color

Use the option to change the color of the answer container.

Padding

Space between the actual question and the border of the question container. Please select a value between 0rem and 5rem.

Top padding

Use the option to change the margin-top of the answer container. Please select a value between 0rem and 5rem.

Primary font style

You can choose among the font styles offered to change the font style of the question text and the fill-in instruction.

Secondary font style

You can choose among the font styles offered

to change, for example, the font style of the answer options or the dimensions.

Mark title and instruction text as completely bold

When this checkbox is activated, title and subtitle are printed in bold. The editor does not contain a bold button.

Base font size

Please

select a

value between 10px and 30px.

Base line-height

This line-hight is used as a basis in calculations for many layout elements. Please select a value between 1rem and 5rem.

General text line-height

Please select a value between 1rem and 5rem.

Question title font size

Please select a value between 1rem and 5rem.

Question title line-height

Please select a value between 1rem and 5rem.

Instruction font size

Please select a value between 1rem and 5rem.

Instruction line-height

Please select a value between 1rem and 5rem.

Help text font size

Please select a value between 1rem and 5rem.

Help text line-height

Please select a value between 1rem and 5rem.

Control element size

Size of control elements like radio buttons and checkboxes. Please select a value between 1rem and 10rem.

Input field height 

Please select a value between 1rem and 5rem.

Button font size

Please select a value between 1rem and 5rem.

Button line-height

Please select a value between 1rem and 5rem.

Base font size

Please select a value between 10px and 30px.

Base line-height

This line-hight is used as a basis in calculations for many layout elements. Please select a value between 1rem and 5rem.

General text line-height

Please select a value between 1rem and 5rem.

Question title font size

Please select a value between 1rem and 5rem.

Question title line-height

Please select a value between 1rem and 5rem.

Instruction font size

Please select a value between 1rem and 5rem.

Instruction line-height

Please select a value between 1rem and 5rem.

Help text font size

Please select a value between 1rem and 5rem.

Help text line-height 

Please select a value between 1rem and 5rem.

Control element size

Size of control elements like radio buttons and checkboxes. Please select a value between 1rem and 10rem.

Input field height 

Please select a value between 1rem and 5rem.

Button font size

Please select a value between 1rem and 5rem.

Button line-height

Please select a value between 1rem and 5rem.

General

Use the option to change the general color scheme, e.g. the dimension text and scale options.

Question title

Use the option to change the color of the question text.

Instruction

Use the option to change the color of the fill-in instruction.

Help text

Use the option to change the color of the help text.

Help text background color

Use the option to change the background color of the help text.

Row color

Use the option to change the row colors (e.g. of a matrix question). You will change the color of the first, third, and fifth row of a matrix question, for example.

Row color alternating

Use the option to change the row colors (e.g. of a matrix question). You will change the color of the second, forth, and sixth row 2,4,6.

Enable row hover

Enable the option to highlight rows by hovering over with the mouse cursor

Row hover background color

Use the option to change the color of hovered rows.

Row hover text color

Use the option to change the text color of hovered rows

Error text color

Change the color of the error text.

Warning text color

Change the color of the warning text.

Background color

Use the option to change the background colors of the buttons (e.g. continue button).

Hover background color

Use the option to change the hover background color of the button.

Background color on activate

Use the option to change the background color on activation.

Text color

Use the option to change the text color of the buttons.

Text color on hover

Use this option to change the text color of the buttons on hovering.

Text color on activate

Use the option to change the text color on activation.

Border color

Use the option to change the border color of the buttons.

Border color on hover

Use the option to change the border color on hovering

Border color on activate

Use this option to change the button border color on activation.

Control elements type

• front-based

• CSS-based (filled)

  • (by default)

• CSS-based (checkmarks)

Color

Use the option to change the color of the radio buttons and checkboxes.

Background color

Use the option to change the background color of the select boxes.

Text field width

Default width of text fields is 100% (1000rem).

• Select a value between 0% and 100% or 0rem and 1000rem.

Focus highlight border color

Use the option to change the color of the focus highlight border.

Focus highlight border width

Adjust the width of the focus highlight border. Please select a value between 0px and 20px.

Focus highlight shadow

A shadow will be added to the focus highlight border.

Override browser styles for text fields

Use the custom styles for text fields instead of the browsers default styles.

Activate progress bar

Use the checkbox to activate the progress bar.

• Default setting: active.

Background color

Use the option to change the background colour of the progress bar.

Top border color

Use the option to change the top border color of the progress bar.

Bar height 

Please choose a value between 0em and 5em. 1em is equal to the default font size. 2em means 2 times the size of the default font size.

• Default setting: 0.5rem

Bar background color

Use the option to change the background color of the progress bar.

Bar progress color

Use the option to change the bar progress color of the progress bar

Text color

Use the option to change the text color of the progress bar.