Change the color of radio button (before selection) but only for the last response.

Question

I want to change the color of just one of the radio buttons on a multiple choice question, but only for the last response (i.e., don't know response).      For example for the following question, I'd like to make the circle under "don't know" a red circle instead of black, and if "don't know" is selected I'd like the fill color to become red.  Ideally, I'd like it to work in either a horizontal or vertical position, but horizontal is higher priority.  Is there a JavaScript I could use for this?

ahmedA · Accepted Answer

This is a little more tricky than the matrix one, as there Qualtrics would assign the class last to the last statement. But the following code should work. It should work for all combinations of single/multiple choice with horizontal/vertical display. Qualtrics.SurveyEngine.addOnReady(function(){ch=this.getChoiceContainer();all_buttons=ch.querySelectorAll("[class^=q-]");all_buttons[all_buttons.length-1].id="last_button";last_button=ch.getElementsBySelector("#last_button")[0];//Setbordertoredlast_button.style.borderColor="red";//Checkforaclickinthequestionthis.questionclick=function(){//Ifselected,setbackgroundColortored,elseclearif(last_button.className.includes("checked")){last_button.style.backgroundColor="red";}else{last_button.style.backgroundColor="";}};});Standard caveat: Performance will depend on the theme used. And if you use it multiple times on a page, you'll need to change the variable names and ids.

Annie · Answer

This is perfect. Thank you!  Example of horizontal application.Example of Vertical application.

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded