You can highlight words in rich content editor if that's needed

Thank you for your answer but that’s not what I meant… 

In the highlight question, I would like to add a frame around the text that can be selected.

I know it’s possible to underline each word with java script (link below)

But I wanted a frame around the whole text in order to differentiate between the interactive words and the question itself. 

Are you looking for this:

jQuery("#"+this.questionId+" span.HLTextWord").css("border", "solid");

If not can you provide an example.

Just to add with the above answer:

1. You can add any color after “solid XXX” to change the color.
2. Doing only this will result in messy look and feel (the words will seems to be sticking together). Add below code to the question text (in HTML view) and update value accordingly:

<style>
.HLTextWord {
    padding-left: .14em;
    padding-right: .14em;
    margin-left: -.14em;
    margin-right: 0.6em;
}
</style>

In highlight questions, you select a word of a text (or multiple) and you’re able to give them a certain color. (Example below)

What I want is to add a frame around the overall text that can be selected, like this: 

So it’s easier for the people answering to know what text can be selected to highlight. 

(The examples are in Portuguese but that’s irrelevant since it’s only a styling matter)

In highlight questions, you select a word of a text (or multiple) and you’re able to give them a certain color. (Example below)

 

 

What I want is to add a frame around the overall text that can be selected, like this: 

 

 

So it’s easier for the people answering to know what text can be selected to highlight. 

 

(The examples are in Portuguese but that’s irrelevant since it’s only a styling matter)

Try this

jQuery("#"+this.questionId+" span.HLTextWords").css("border", "solid");

Ok, I will try it! I’ll give feedback later! 

Below code is working:

jQuery("#"+this.questionId+" div.HLTextWords").css("border", "solid");

1. jQuery("#"+this.questionId+" div.HLTextWords").css("border", "solid yellow");
2. jQuery("#"+this.questionId+" span.HLTextWord").css("border", "solid yellow");

for spacing, add below code in Question text (in HTML view):

<style>
.HLTextWord {
    padding-left: .14em;
    padding-right: .14em;
    margin-left: -.14em;
    margin-right: 0.6em;
}
</style>

Let me know if you need any more help on this :) 

It worked, thank you so much!

In case anyone needs it, I slightly adjusted the code shared above to add padding to all 4 margins:

Qualtrics.SurveyEngine.addOnReady(function()

{

jQuery("#"+this.questionId+" div.HLTextWords").css({ "border": "solid black", "padding": "0.1em"

});

});

Adjust padding as needed, e.g., '0.2em'