Prepend Text to Multiple Choice Question Options | Experience Community
Skip to main content
Solved

Prepend Text to Multiple Choice Question Options

  • May 8, 2021
  • 4 replies
  • 38 views
W
Forum|alt.badge.img

I have many multiple-choice questions with four options. I need to update them all to have the prefixes A., B., C., D. before each option. I'm thinking the easiest way to do this en masse would be to paste javascript into each question instead of updating all of the choice texts.
How can I add A, B, C, and D to the options in my multiple choice questions using JS?

Best answer by ahmedA

If you want to apply it to all questions, then add this to your header:
Qualtrics.SurveyEngine.addOnReady(function () {
    let choices = document.querySelectorAll("span [for].MultipleAnswer,span [for].SingleAnswer");
    let alphabet = new Array(26).fill(1).map((_, i) => String.fromCharCode(65 + i));


    choices.forEach((choice) => {
        let pos = parseInt(choice.id.split("-")[1]) - 1;
        choice.innerText = alphabet[pos] + ". " + choice.innerText;
    }); 
});

If its just for some questions, then you'll need to add it to each question individually, and replace 

document
with 
this.questionContainer

If you want to use lower case then change 65 to 97

4 replies

A
Level 7 ●●●●●●●
Forum|alt.badge.img+22
  • ahmedA
  • Level 7 ●●●●●●●
  • Answer
  • May 8, 2021

If you want to apply it to all questions, then add this to your header:
Qualtrics.SurveyEngine.addOnReady(function () {
    let choices = document.querySelectorAll("span [for].MultipleAnswer,span [for].SingleAnswer");
    let alphabet = new Array(26).fill(1).map((_, i) => String.fromCharCode(65 + i));


    choices.forEach((choice) => {
        let pos = parseInt(choice.id.split("-")[1]) - 1;
        choice.innerText = alphabet[pos] + ". " + choice.innerText;
    }); 
});

If its just for some questions, then you'll need to add it to each question individually, and replace 

document
with 
this.questionContainer

If you want to use lower case then change 65 to 97

    W
    Forum|alt.badge.img

    ahmedA I have a few questions in my survey that have images as answer choices. In this example, the letters are replacing the images. Do you have any advice on how to handle these? I tried setting 

    innerText
    to 
    innerHTML
    with no luck.

    A
    Level 7 ●●●●●●●
    Forum|alt.badge.img+22
    • ahmedA
    • Level 7 ●●●●●●●
    • May 9, 2021

    innerHTML
    should work, you could also try 
    outerHTML
    , but that may change the formatting. If it doesn't share the survey link without the code applied, maybe I'm missing something.

    W
    Forum|alt.badge.img

    I was able to solve the image HTML problem by setting both parts to `innerHTML`
      choices.forEach((choice) => {
        let pos = parseInt(choice.id.split("-")[1]) - 1;
        choice.innerHTML = alphabet[pos] + ". " + choice.innerHTML;
      }); 

    Terms & ConditionsAccessibility statement