Skip to main content

Search

Highlighter questions

  • Updated

The highlighter question lets respondents interactively highlight words or sentences to express preferences. Highlighters are created with the type: highlighter tag.

Details

  • To create a highlighter exercise you need a set of states for the highlighter scale (like, dislike, etc.), and a set of phrases to evaluate.
  • There are two ways to present this exercise to respondents. By default, format: menu is used to show menu buttons on screen. The respondent picks a color from the buttons and then selects the phrase(s). Changing it to format: toggle removes the menu buttons, and the respondent clicks the phrase(s) as many times as needed to cycle through the choices.
  • There are four default highlighter colors: light green, pink, yellow, teal. The colors are assigned  to the states in the order they are programmed. Light green is assigned to the first state; pink is assigned to the state, and so on.
  • If more than four colors are needed, or to assign different colors, include them as element decorators labeled 'COLOR', e.g., 3. I don't like it {COLOR: red}. Colors recognized by CSS color properties and HEX numbers can be used.
  • Use PRE and POST element decorators for HTML tags that force line breaks (e.g., <br>, <p>, <div>) before or after text. They can also optionally insert non-selectable text, or elements such as punctuation or formatting tags (e.g., <b>, </b>).
  • Highlighters require at least one selection. Add decline to answer to allow respondents to skip the exercise without highlighting any text.
  • Answer states collect data like a multiple choice question, while the phrase(s) being evaluated collect data like a single choice question.

Tags

Tag Description
clear button

Accepts 'y' (default) and 'n' input. Applying clear button: n hides the button.

Note, the clear button is displayed by default regardless of the format used.
clear button text Specifies the clear button text. "Clear all" is default." Input any text to change it.
format

format: menu (default) allows picking the highlighter color from buttons at the top of the screen.

format: toggle allows clicking the words to change the highlighted color.

Additional examples

Using the 'toggle' format

Q2 uses a toggle format. Clicking a phrase cycles through the states in the order they are programmed. The final click resets the phrase to "blank." The clear button: n tag removes the "Clear All" button.

Adding non-selectable text with HTML tags

In QP1 below, the POST element decorator adds line breaks by placing <p> and </p> around each statement group. PRE isn't necessary here, as both the opening and closing <p> tags appear on the same line. Additionally, decline to answer lets respondents skip the question without selecting text.

Then, in Q3, PRE and POST add HTML tags for a bulleted list before and after each phrase. PRE inserts the HTML content before the phrase, and POST inserts it after.

Customizing highlighter colors

Here, Q4A and Q4B show two ways to assign new colors to states using the element decorator 'COLOR'. The input can be a color name or a HEX code.

Related to

Related articles

Comments

0 comments

Please sign in to leave a comment.