Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Highlighting images from the Highlighting words library question

I'm using the highlighting words library question which is working fine but there are two images at the bottom of the text which I'd like the respondent to be able to select and store. e.g. image1.jpg, image2.jpg
Is this possible?
cheers,
Paul
asked Aug 16, 2020 by Paul Kallis (250 points)

1 Answer

0 votes
 
Best answer
Please try this modified version of the free format 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>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </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: yellow;
}
</style>

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

    var html = $('#[% QuestionName() %]_Text').html();
    var len = html.length;
    var inHtmlTag = false;
    for (var h = 0; h < len; h++) {
        var p = html[h - 1];
        var c = html[h];
        var n = html[h + 1];
        
        if (c == '>') {
            inHtmlTag = false;
            continue;
        }
        
        if (c == '<' || inHtmlTag) {
            inHtmlTag = true;
            continue;
        }
        
        if (c.match(/\S/) && (p === undefined || p == '>' || p.match(/\s/))) {
            html = html.slice(0, h) + openSpan + html.slice(h);
            h += openSpan.length;
            len += openSpan.length;
        }
        
        if (c.match(/\S/) && (n === undefined || n == '<' || n.match(/\s/))) {
            html = html.slice(0, h + 1) + closeSpan + html.slice(h + 1);
            h += closeSpan.length;
            len += closeSpan.length;
        }
    }
    $('#[% QuestionName() %]_Text').html(html);

    $('#[% 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++) {
            var html = $('#[% QuestionName() %]_Text .highlightingSpan[data-word=' + highlightedWords[i] + ']').html();
            html = html.replace(/</g, '&lt;').replace(/>/g, '&gt;');
            $('#[% QuestionName() %]_Highlight' + (i + 1)).val(html);
        }
    }
    
    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(){
        $('#[% QuestionName() %]_Text .highlighted').removeClass('highlighted');
        $('#[% QuestionName() %]_MasterData').val('[]');
        $('#[% QuestionName() %]_HighlightCount').val('0');
        $('#[% QuestionName() %]_div .highlightInput').val('');
    });
});
</script>


When adding images to the text, please surround them with spans like this:

<span class="highlightingSpan"><img src="..."/></span>


I'm not sure how to best visually indicate that an image has been selected, but here's an example of CSS that can be added to the page to give selected images a special border:

<style>
#[% QuestionName() %]_div .highlighted img {
    border: 1px solid red;
}
</style>
answered Aug 17, 2020 by Zachary Platinum Sawtooth Software, Inc. (171,950 points)
selected Aug 18, 2020 by Paul Kallis
...