Highlight Question - Adding a frame to the text to be highlighted | XM Community
Skip to main content

Hello, 

 

I wanted to add a frame to the text that is selectable to highlight in order to differentiate it from the question. I know it’s possible to underline it with java script but it would be better for us to have a frame around the entirety of the text instead of word by word. 

 

Thank you so much! 

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. 


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.


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'


Leave a Reply