Custom Code to put a red box around a multiple choice option | XM Community
Skip to main content
Hi,



I am looking for custom code to put a red frame around one of 6 choices in a multiple choice question. The multiple choice question includes 6 images (all of which are graphics) to choose from. To start, I want one of the options to have a red frame around it (so that I can reference it in the question stem). Then, I want to carry forward these six options to a subsequent multiple choice question and for this question, I want the red box to be removed. This would be easy to do (without custom code) if the multiple choice questions always included the same 6 options, but they don't. The 6 options included for a given participant are drawn from a larger pool of 40 options and then once drawn, the order of these options is randomized. And, I need the same six options to be present in the second multiple choice question (the one without the red box) and I also need them to be in the same order as in the first question.

I am assuming that this should be pretty easy to do with javascript, but it's far beyond my capabilities.



Thank you!
Alternatively, is there a way to add text that is independent of the graphic response option? The 6 response options will be photos in a 3 column x 2 row array and I would like to label the three graphics in row 1 as "1", "2", "3", and the three graphics in row 2 as "4", "5", and "6".



Thank you in advance for the assistance!

@Andrew22 , It’s been a few years, so you may have found a workaround already. If so, you can mark the answer as accepted, and close the question. If not, there is this you can try for the red box part of your question: 

 

Qualtrics.SurveyEngine.addOnload(function() {
  // Set the index of the choice to highlight
  const highlightedChoiceIndex = 2; // Change this to the index of the choice you want to highlight (0-based index)

  // Get the question container element
  const questionContainer = document.getElementById('QID1'); // Replace 'QID1' with the actual question ID

  // Get the choice elements within the question container
  const choiceElements = questionContainer.querySelectorAll('.ChoiceStructure tbody tr');

  // Loop through the choice elements
  choiceElements.forEach(function(choiceElement, index) {
    if (index === highlightedChoiceIndex) {
      // Add a red border to the highlighted choice
      choiceElement.style.border = '2px solid red';
    }
  });
});
 

In the code above, make sure to replace 'QID1' with the actual question ID of your multiple choice question. Also, adjust the highlightedChoiceIndex variable to the index of the choice you want to highlight (0-based index).

This code assumes that the choices in your multiple choice question are structured within a table (.ChoiceStructure). It selects the choice element at the specified index and applies a red border to it using the style.border property.

Remember to place this code within the appropriate location in your Qualtrics survey script, such as the JavaScript section of the question or the survey header/footer.

Leave a Reply


Terms & Conditions