How to add a check box with text to a Highlighter question | XM Community
Skip to main content

I am hoping to add an option to a Highlighter question so that if the respondent does not wish to answer the question they can check a box "do not wish to answer" instead. How would I create the code for this? Thanks in advance!

Hi there, if you still need, this can be put in place by adding an HTML checkbox to the Question Text and saving to an Embedded Data field if the checkbox is selected or not. Additionally, using JavaScript, selecting the checkbox can disable the ability to interact with the highlighting.
Highlight_NA.pngTo give it a try, first create a Highlighting Question and then use the Rich Content Editor's HTML/Source View "<>" to include CSS and the checkbox HTML within the Question Text:

Click to write question text.





Next, replace the question's JavaScript with the below:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/

});

Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/

var qid = this.questionId;
var na = document.getElementById('NA');

jQuery(na).click(function () {

if( jQuery(na).is(":checked") )
    {
      jQuery("#"+qid+" .QuestionBody").css("pointer-events","none");
    }
 else
    {
      jQuery("#"+qid+" .QuestionBody").css("pointer-events","auto");
    }
});

});

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

});

Qualtrics.SurveyEngine.addOnPageSubmit(function()
{

var na = document.getElementById('NA');

if( jQuery(na).is(":checked") )
    {
      Qualtrics.SurveyEngine.setEmbeddedData("NotApplicable", "yes");
    }
 else
    {
      Qualtrics.SurveyEngine.setEmbeddedData("NotApplicable", "no"); 
    };
});
Finally, head over to the Survey Flow and created an Embedded Data field called "NotApplicable" and put it at the top of the Survey Flow. This field will indicated "yes" if the Not Applicable checkbox was selected and "no" if it was not.

I was working on a similar thread and found that the CSS in the question text was no longer working, so below is updated code that sets the CSS with JavaScript.
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/

});


Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/

var qid = this.questionId;
var na = document.getElementById('NA');

jQuery(na).css({
    "position": "relative",
    "opacity": "1",
    "z-index": "999",
    "height": "20px",
    "width": "20px",
});

jQuery(na).click(function () {

if( jQuery(na).is(":checked") )
    {
      jQuery("#"+qid+" .QuestionBody").css("pointer-events","none");
    }
 else
    {
      jQuery("#"+qid+" .QuestionBody").css("pointer-events","auto");
    }
});

});


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

});


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

var na = document.getElementById('NA');

if( jQuery(na).is(":checked") )
    {
      Qualtrics.SurveyEngine.setEmbeddedData("NotApplicable", "yes");
    }

});

Leave a Reply


Terms & Conditions