Highlighting phrases instead of words with data stored for each phrase

Question

I tried using the "Highlighting: Words" free format question and the method described in this post https://legacy.sawtoothsoftware.com/forum/25611/possible-question-library-highlighting-custom-ranges-devices?show=25611#q25611
but the data isn't stored in a way that works for my needs. I need count data for each phrase so I would like the data to tell me which phrases (instead of which words) were selected. Here's an example:

 <span class="highlightingSpan">Here is</span> <span class="highlightingSpan"> an example</span> of a sentence </span> <span class="highlightingSpan"> that uses phrases </span> <span class="highlightingSpan">instead of words</span> 

So in this example, if I selected "an example" and "instead of words" I would like my data to show me a "[2, 5]" since I selected the second and fifth phrase.

Is this possible?

Comments

I believe that is what is happening.  When I use your example text and select "an example" and "instead of words," my _MasterData variable records [2,4].  I noticed that your example has a "</span>" without a corresponding "<span>".  When I add in another opening span, my _MasterData variable ends up recording [2,5].  Is that missing HTML tag perhaps what has caused this mix up?

---

Hi Zachary! You're right that I was missing a corresponding <span> but even after adding it in, I'm still not getting the desired output. When I select "an example" and "instead of words" it records "[4,5,15,16]" for the HighlightingWords_MasterData variable and a "4" for the HighlightingWords_HighlightCount variable. It also seems to be recording the individual words as well as the phrases that I select for the HighlightingWords_Highlight1-HighlightingWords_Highlight4 variables. Here is the entirety of my code:

<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++) {
    $html .= '<input name="' . QUESTIONNAME() . '_Highlight' . $i . '" id="' . QUESTIONNAME() . '_Highlight' . $i . '" class="highlightInput" type="hidden" value=""/>'
}
return $html;
End Unverified %]

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

    <p>

 <span class="highlightingSpan">Here is</span> <span class="highlightingSpan"> an example</span><span class="highlightingSpan"> of a sentence </span> <span class="highlightingSpan"> that uses phrases </span> <span class="highlightingSpan">instead of words</span>

    </p>

</div>

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

<style>
#[% QuestionName() %]_Text {
    border: 1px solid black;
    border-radius: 18px;
    padding: 9px;
    background-color: #F6F6F6;
}

.highlightingButtonContainer {
    text-align: center;
}

.highlighted {
    background-color: lime;
}
</style>

<script>
$(document).ready(function(){
    // Add highlighting spans


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

---

I've put your exact code into my free format question, but still see [2, 5] recorded in the _MasterData variable when I click "an example" and "instead of words."  Is there any other script on the page that might be affecting the behavior?

If there's nothing apparent, would it be possible for you to share a .ssi demonstrating the issue with our support team?

---

Hi Zachary, it appears to be working now! Not sure why it wasn't before but I'm seeing [2,5] now in my data when I click on those phrases. Thank you so much for your help!!