Text Highlighting

Overview

Clients use text highlighting to test individual words or phases of copy. We've developed a custom script and template file to support this functionality.

The text is placed inside an HTML anchor tag, when a respondent clicks on that anchor we alter it's css properties, and record the state to an IntelliSurvey variable.

Here is the latest demo of this code in action.

Preparation

Step 1: Upload the .tx file to your theme directory

To enable use of this JavaScript you will need to download the attached text_highlight.tx file and upload it to your study's local theme directory. 

Step 2: Setup your word/phrase list

Break your copy up by word or phrase as needed. Any HTML, punctuation, or unselectable text can be integrated using option data PRE and POST. Using these option data will keep these elements out of the reports:

set list: WORDS_LIST
1.  Whan
2.  that
3.  Aprill {{POST:,}}
4.  with
5.  his
6.  shoures
7.  soote
8.  The
9.  droghte
10. of
11. March{{PRE: <b>}}{{POST: </b>}}
12. hath
13. perced
14. to
15. the
16. roote

Step 3: Setup the highlight exercise HTML and IntelliSurvey questions

The following code includes the following:

• (UPDATE) The text to be shown above the text highlight exercise
• A text widget that is used to pull in the "text_highlight.tx" template that we setup earlier
  • We feed the text and highlight colors to the script through "template_data"
  • "states" is the name of the hash we're creating
  • "s1" are the text and hover highlight colors for an un-clicked word
  • "s2" are the text and highlight colors for the first click
  • "s3" are the text and highlight colors for the second click
  • States "s1" and "s2" should always exist
  • This can be extended beyond "s3" so long as the corresponding options are added to the final storage variable (4R%%ID%%X in this example) 
• (UPDATE) A block widget that sets up the following items. Update the list reference. The block has "bare: y" to prevent any extra HTML from mucking with the highlighter.
  • The HTML anchor elements
    • %%PRE%% pipes in the PRE option data
    • The nohref attribute keeps the anchor from trying to navigate
    • The class attribute is set to "s1" so it uses the initial colors defined, as the anchor is clicked the script will rotate this through the states defined at template_data
    • (UPDATE) text4R%%ID%% The id attribute is set to the hidden storage variable with "text" instead of "Q". You will need to update the "4R" in the example below to your question id.
    • (UPDATE) Q4R%%ID%% The data-varname attribute is set to the hidden storage variable with a leading "Q". You will need to update the "4R" in the example below to your question id.
    • (UPDATE) The onClick event attribute references the prior ids. You will need to update the "4R" in the example below to your question id.
    • %%TEXT%% pipes in the text from the list
    • %%POST%% pipes in the POST option data
  • (UPDATE) The hidden click storage variable. Update the id. 
    • This stores the numeric value of the state, e.g. 1, 2, 3, etc. 
    • This has a dvalue of "1" so items not clicked will be marked "No opinion" at the next variable
  • (UPDATE)The final storage variable. Update the id, the cvalue, and the options. 
    • For the demo there is HTML around options 2 and 3 so they stand out on the follow up pages, this is not necessary for live code.

html: <p>One click for Like, two for Dislike:</p><hr>

text: Place this on same page as highlighter exercises (this text is never shown)
template: text_highlight
template_data: { states => ({ s1 => ["black","gray"], s2 => ["black","lightgreen"] , s3 => ["black","pink"]}) }

block: <<END

html: %%PRE%%<a nohref class="s1" id="text4R%%ID%%" data-varname="Q4R%%ID%%" onClick="javascript:HL.toggleText('text4R%%ID%%', 'Q4R%%ID%%')">%%TEXT%%</a>%%POST%%

4R%%ID%%. %%TEXT%%
type: hidden
ap: n
dvalue: 1

4R%%ID%%X. %%TEXT%%
type: radio
invisible: y
ap: n
cvalue: $Q4R%%ID%%
1. No opinion
2. <em style="background-color:lightgreen">Positive</em>
3. <em style="background-color:pink">Negative</em>

END
list: WORDS_LIST
inline:y
bare:y

Additional examples

The example above is probably one of the most common where a respondent will indicate liked and disliked items. The code is somewhat flexible in that we can use more or less states. The demo link above illustrates some of these other methodologies.

The demo code has inline comments documenting each example.