Glad to see you've found that earlier forum post. Sounds like you've done your research. :)

It may take a minute to setup all the quota questions, but I think I've got this working. I started by adding a new checkbox variable named \"_WordSelected\" to the free format question and set its number of checkboxes to the same value used in the \"$maxListItems\" variable. Then I replaced the HTML with this modified version:

[js]
<input name=\"[% QuestionName() %]_MasterData\" id=\"[% QuestionName() %]_MasterData\" type=\"hidden\" value=\"\"/>
<input name=\"[% QuestionName() %]_HighlightCount\" id=\"[% QuestionName() %]_HighlightCount\" type=\"hidden\" value=\"\"/>
[% Begin Unverified Perl
# Parameters
my $maxListItems = 100;

# Run
my $html;
for (my $i = 1; $i <= $maxListItems; $i++) {
\tmy $highlightVariable = QUESTIONNAME() . '_Highlight' . $i;
\t$html .= '<input name=\"' . $highlightVariable . '\" id=\"' . $highlightVariable . '\" class=\"highlightInput\" type=\"hidden\" value=\"\"/>';
\tmy $wordSelectedVariable = QUESTIONNAME() . '_WordSelected_' . $i;
\t$html .= '<input name=\"' . $wordSelectedVariable . '\" id=\"' . $wordSelectedVariable . '\" type=\"hidden\" value=\"\"/>';
}
return $html;
End Unverified %]

<div id=\"[% QuestionName() %]_Text\">

\t<p>
\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
\t\tUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
\t\tDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
\t\tExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
\t</p>

</div>

<br/>
<div class=\"highlightingButtonContainer\">
\t<button type=\"button\" id=\"[% QuestionName() %]_ResetAllHighlighting\">Reset All Highlighting</button>
</div>

<style>
#[% QuestionName() %]_Text {
\tborder: 1px solid black;
\tborder-radius: 18px;
\tpadding: 9px;
\tbackground-color: #F6F6F6;
}

.highlightingButtonContainer {
\ttext-align: center;
}

.highlighted {
\tbackground-color: yellow;
}
</style>

<script>
$(document).ready(function(){
\t// Add highlighting spans
\tvar openSpan = '<span class=\"highlightingSpan\">';
\tvar closeSpan = '</span>';

\tvar html = $('#[% QuestionName() %]_Text').html();
\tvar len = html.length;
\tvar inHtmlTag = false;
\tfor (var h = 0; h < len; h++) {
\t\tvar p = html[h - 1];
\t\tvar c = html[h];
\t\tvar n = html[h + 1];
\t\t
\t\tif (c == '>') {
\t\t\tinHtmlTag = false;
\t\t\tcontinue;
\t\t}
\t\t
\t\tif (c == '<' || inHtmlTag) {
\t\t\tinHtmlTag = true;
\t\t\tcontinue;
\t\t}
\t\t
\t\tif (c.match(/\\S/) && (p === undefined || p == '>' || p.match(/\\s/))) {
\t\t\thtml = html.slice(0, h) + openSpan + html.slice(h);
\t\t\th += openSpan.length;
\t\t\tlen += openSpan.length;
\t\t}
\t\t
\t\tif (c.match(/\\S/) && (n === undefined || n == '<' || n.match(/\\s/))) {
\t\t\thtml = html.slice(0, h + 1) + closeSpan + html.slice(h + 1);
\t\t\th += closeSpan.length;
\t\t\tlen += closeSpan.length;
\t\t}
\t}
\t$('#[% QuestionName() %]_Text').html(html);

\t$('#[% QuestionName() %]_Text .highlightingSpan').each(function(index){
\t\t$(this).attr('data-word', index + 1);
\t});
\t
\t// Set initial highlighting
\tvar highlightedWords = JSON.parse($('#[% QuestionName() %]_MasterData').val() || '[]');
\thighlightedWords.forEach(function(highlightedWord){
\t\t$('#[% QuestionName() %]_Text .highlightingSpan[data-word=' + highlightedWord + ']').addClass('highlighted');
\t});
\t
\t// Save
\tvar save = function(highlightedWords) {
\t\t$('#[% QuestionName() %]_MasterData').val(JSON.stringify(highlightedWords));
\t\t$('#[% QuestionName() %]_HighlightCount').val(highlightedWords.length)
\t\t$('#[% QuestionName() %]_div .highlightInput').val('');
\t\t$('[id^=\"[% QuestionName() %]_WordSelected_\"]').val(0);
\t\tfor (var i = 0; i < highlightedWords.length; i++) {
\t\t\t$('#[% QuestionName() %]_Highlight' + (i + 1)).val($('#[% QuestionName() %]_Text .highlightingSpan[data-word=' + highlightedWords[i] + ']').text());
\t\t\t$('#[% QuestionName() %]_WordSelected_' + highlightedWords[i]).val(1);
\t\t}
\t}
\t
\tvar highlightedWords = JSON.parse($('#[% QuestionName() %]_MasterData').val() || '[]');
\tsave(highlightedWords);
\t
\t// Select / Deselect\t
\t$('#[% QuestionName() %]_Text .highlightingSpan').click(function(){
\t\t// Selecting
\t\tif (!$(this).hasClass('highlighted')) {
\t\t\t$(this).addClass('highlighted');
\t\t\tvar highlightedWord = Number($(this).data('word'));
\t\t\thighlightedWords.push(highlightedWord);
\t\t\thighlightedWords.sort(function(a, b) { return a - b; });
\t\t\tsave(highlightedWords);
\t\t}
\t\t
\t\t// Deselecting
\t\telse {
\t\t\t$(this).removeClass('highlighted');
\t\t\tvar highlightedWord = Number($(this).data('word'));
\t\t\thighlightedWords.splice(highlightedWords.indexOf(highlightedWord), 1);
\t\t\tsave(highlightedWords);
\t\t}
\t});
\t
\t// Reset all
\t$('#[% QuestionName() %]_ResetAllHighlighting').click(function(){
\t\t$('#[% QuestionName() %]_Text .highlighted').removeClass('highlighted');
\t\t$('#[% QuestionName() %]_MasterData').val('[]');
\t\t$('#[% QuestionName() %]_HighlightCount').val('0');
\t\t$('#[% QuestionName() %]_div .highlightInput').val('');
\t\t$('[id^=\"[% QuestionName() %]_WordSelected_\"]').val(0);
\t});
});
</script>
[/js]

On the next page, we'll need to create a collection of quota questions, one for each word. The cell limit can be set to 99999 or similar. Each quota question needs one quota cell with this qualification logic:


HighlightingWords_WordSelected_X = 1

\"HighlightingWords\" being the name of the free format question and \"X\" being the current word we want to count with this quota question.

Generating counts for highlighted words/phrases