This code pulls in data from an external source and turns it into a patch of "highlightable" text that a user can select words (or groups of words if the paragraph is longer than 200 words)

qualtrics_highlight_text.js

Qualtrics.SurveyEngine.addOnload(function()
{
	/*Place your JavaScript here to run when the page loads*/
    var $this = jQuery(this.questionContainer);
    var question_text = $this.find('.QuestionText').text().split("|end_question|");
	
	var question_stem = question_text[0]
	
	// remove the piped-in text from the question stem by replacing it with just the original question_stem
	$this.find('.QuestionText').text(question_stem);

	// Split the text into individual words
	var words = question_text.length > 1 ? question_text[1].split(" ") : '';

	// Calculate the number of words per chunk
	var wordsPerChunk = Math.ceil(words.length / 200); // Maximum amount of chunks is 200 - Qualtrics restriction

	// Create an array to hold the chunks
	var chunked_user_response = [];

	// Loop through the words and create chunks
	for (let i = 0; i < words.length; i += wordsPerChunk) {
		// Slice the words array to get a chunk and join it back into a string
		const chunk = words.slice(i, i + wordsPerChunk).join(' ');
		chunked_user_response.push(chunk);
	}
	
	for (var i = 0; i < chunked_user_response.length; i++) {
		// Find the i-th .HLTextWord within .QuestionBody .HLTextWords and update its text
		jQuery(".QuestionBody .HLTextWords .HLTextWord:eq(" + i + ")", $this).text(chunked_user_response[i]);
	};
	
   /* hide all the extra placeholders (if there were less than 200 words/chunks */
    jQuery('.QuestionBody .HLTextWords .HLTextWord', $this).each(function() {
        // Check if the element's text content is exactly a period
        if (jQuery(this).text() === '.') {
            // Hide the element
            jQuery(this).hide();
        }
    });
		
});

Qualtrics.SurveyEngine.addOnReady(function()
{
	/*Place your JavaScript here to run when the page is fully displayed*/	
	// Add a border to show users they can highlight the text
	var $this = jQuery(this.questionContainer);
    var $highlightableText = jQuery('.QuestionBody', $this);
    $highlightableText.wrap('<fieldset style="border: 1px solid #cecece; padding: 10px; border-radius: 5px;"></fieldset>');
    $highlightableText.parent().prepend('<legend style="color: #cecece; width:auto;">Text Below Can Be Highlighted</legend>');		
});

Qualtrics.SurveyEngine.addOnUnload(function()
{
	/*Place your JavaScript here to run when the page is unloaded*/
    var discuss = [];
	var actOn = [];
	var combinedHighlightedText = ''; // Initialize an empty string
	
    // Use this.questionContainer to query for .HLTextWord elements within the question container
    var highlightedWords = this.questionContainer.querySelectorAll('.HLTextWord');

    // Loop through the elements and check their background-color
    highlightedWords.forEach(function(word) {
        var style = word.getAttribute('style');
        if (style && style.includes('background-color: rgb(44, 123, 182)')) { // Blue (act on)
            // Collect the word's text content
            actOn.push(word.textContent.trim());
			combinedHighlightedText += '<act_on>' + word.textContent.trim() + '</act_on>';
        } else {
            // Otherwise, append the text as is
            combinedHighlightedText += word.textContent.trim();
        };
        // Adding a space for readability between words
        combinedHighlightedText += ' ';
    });

    // Join all collected texts into a single string
    var selectedActOn = actOn.join("; ");
	
	// Now clean up the combined highlighted text for easier readability
	combinedHighlightedText = combinedHighlightedText.replace(/<\/act_on>\s<act_on>/g, ' ');
	combinedHighlightedText = combinedHighlightedText.replace(/<act_on>/g, "{--start act_on highlight} ");
	combinedHighlightedText = combinedHighlightedText.replace(/<\/act_on>/g, " {--end act_on highlight}");
	combinedHighlightedText = combinedHighlightedText.replace(/( \.)+$/g, ''); // remove any extra placeholders if the text was less than 200 words long.

    // Save to embedded fields
    Qualtrics.SurveyEngine.setEmbeddedData('Reproduce_1_Act_On', selectedActOn);
	Qualtrics.SurveyEngine.setEmbeddedData('Reproduce_1_CombinedHighlightedText', combinedHighlightedText.trim());
	
});