Difficulty level: Difficult
What does the functionality do?
You use this functionality when, after selecting a colour from a single response question, a participant should see the next question(s) incl. answer options in the colour he/she has selected. The colour selected by a participant can then be specified for each question in the survey.
Use case and how to set it up?
Suppose you have included a single response question in the survey in which you ask the survey participant to select a colour in which to display the text of the next question. For example, this question could be designed as follows:
Each colour is included at a separate answer option; a value is assigned to each colour, e.g. Red = 1; Emerald green = 2; Blue = 3; Light black = 4 and Orange = 5.
For example, before you start creating the question whose text should be displayed in the colour selected by the participant, you need to include a value assignment in the survey. This can be added to the survey AFTER the first selection question.
An IF-THEN-ELSE statement should be included in this value assignment, where a hexadecimal colour code should be entered for each text colour, e.g. Red = #ff0000; Emerald green = #4fc978; Blue = #0000ff; Light black = #454545 and Orange = #ffa500. If no colour is selected in the question by a respondent, the text of the next question will be shown in the colour Brown (hex code: #964b00). This colour is specified in the ELSE statement in the value assignment.
This value assignment requires the following data to be setup:
- Survey variable: TextColor is a variable name chosen by you.
- Data type: The data type of the variable TextColor must be String.
- Execute: the option Anytime (immediately after every change to an involved variable) must be selected.
This value assignment can be interpreted as follows:
- If a participant selects answer option 1 (= Red) for question q1, the text of the subsequent question(s) to be defined by you will be displayed in the colour Red (hex code #ff0000)
- If a participant selects answer option 2 (= Emerald green) for question q1, the text of the subsequent question(s) to be defined by you will be displayed in the colour Emerald green (hex code #4fc978).
- If a participant selects answer option 3 (= Blue) for question q1, the text of the subsequent question(s) to be defined by you will be displayed in the colour Blue (hex code #0000ff).
- If a participant selects answer option 4 (= Light black) for question q1, the text of the subsequent question(s) to be defined by you will be displayed in the colour Light black (hex code #454545).
- If a participant selects answer option 5 (= Orange) for question q1, the text of the subsequent question(s) to be defined by you will be displayed in the colour Orange (hex code #ffa500).
- If a participant does not select a colour for question q1, the text of the subsequent question(s) to be defined by you will be displayed in the colour Brown (hex code #964b00).
Note: Please observe the notation method, such as the double equal sign in the IF statement.
After the value assignment, you can include a question whose text should be displayed in the colour selected by the participant. In this example, we will take a single response question as a starting point. The text of the question and the corresponding answer options must be provided with the following HTML code:
- <span style=”color: {{custom.TextColor}};”>Text</span>, where Text can be replaced by the text of the question, the corresponding answer option
The procedure is as follows:
- Click in the text box of the new single response question so that the Rich text editor link is displayed at the top right of this box.
- Click this link to go to the RTE window.
- Click the Code View icon in this window.
- Copy the HTML code above and paste it into the Code view window.
- Replace the word Text by the desired question.
- Click the green Save changes button.
Note: For the answer options, the same procedure can be carried out using the RTE window.
After the question and corresponding answer options are provided with HTML code, the survey can be activated. Once, for example, the colour Orange is selected in the selection question, the subsequent question will be displayed as follows:
