Highlight question with the text from previous piped text

Hi Wen
Here's the link which is similar to what you need, there's no need to use javascript.
https://www.qualtrics.com/community/discussion/1811/editing-piped-text

https://www.qualtrics.com/community/discussion/comment/35072#Comment_35072Hi ChiragK !
Thanks for the reply. However, this is not what I am looking for. I should describe my questions clearer.

I am creating a survey for text annotation and I have thousands of comments that need to be annotated. At the beginning of the survey, I create an MC question with thousands of choices (each comment as a choice) and randomly select one and hide the question. And the following questions are related to the selected comment (I used piped text to display where it is needed). My problem is the highlight question. I would like the participant to highlight some words in the selected comment, so I need to create a highlight question with the selected comment.

https://www.qualtrics.com/community/discussion/comment/35118#Comment_35118Thank you so much ChiragK. It did work! I changed the split from ',' to a space to separate words. However, I have still encountered one problem. Every comment has a different length, so if I want to predefine the placeholder text (in this.questionContainer), is there a way to set a placeholder text as the same length as the comment? One simple solution I have now is to set a universal placeholder text to be a sentence with ". " with the length of the longest comment. In this way, each shorter comment will be displayed with several ". . ." at the end. I was wondering if there is an elegant way to fulfill this through JS code.
I really appreciate your help!!

Does anyone have a follow-up to Wen’s question regarding a universal placeholder and where to put this within the following code? I have a participant responses of different lengths that I’d like them to revisit and highlight. Any help would be much appreciated! 

Qualtrics.SurveyEngine.addOnReady(function () {
    var $this = jQuery(this.questionContainer);
    var choices = "${q://QID2/ChoiceGroup/DisplayedChoices}".split(",");
    jQuery(".QuestionBody .HLTextWords .HLTextWord", $this).each(function (i) {
        jQuery(this).text(choices[i].trim());
    });
});

Hi David,

As far has having universal placeholder, Qualtrics limits “highlight-able” text to just 200 different highlights. So I made 200 “.” (period) highlights as placeholders, then I figure out the length of the text that I’m piping in, and make it into 200 “chunks” (if there is less than 200 words, each word is highlightable) and then replace the placeholders with the chunks/text.

One thing to note is that on the reporting side of things, the selected words just show up as the placeholder, so I’m not sure if that is what you want. If you want to record which text is highlighted, you’ll probably have to send the selected text to a hidden text field and save it as an additional question on your survey (this example doesn’t do that)

So my question stem looks like this:
“Question stem text |end_question| ${q://QID17/ChoiceTextEntryValue}”
The |end_question| delimiter helps to split the stem text from the piped in text.
Then I parse the piped-in text, chunk it into 200 (or less) chunks, replace the placeholders with the chunks, hide the piped-in text, and hide any unused placeholders.

Hope this helps!

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]
    var user_response = question_text.length > 1 ? question_text[1].split(".") : '';

	$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*/

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
	/*Place your JavaScript here to run when the page is unloaded*/

});