How to remove a radio button for the text entry within multiple choice question and keep the radio buttons for the other options
I would like to make my multiple choice question look similar to this (this was made using another survey software).
The text entry should not have a radio button. The other responses should have radio buttons.
I want to ensure the text entry still acts as a exclusive response (i.e., you should NOT have to click another response in addition to fill out the text entry)
Thanks!
Page 1 / 1
Hi @Makgomes ,
For hiding the label, add JavaScript to your question.
Qualtrics.SurveyEngine.addOnload(function() { /*Change this WORD to the choice text above the text entry*/ /*jQuery("#" + this.questionId + " label:contains('WORD')").hide();*/ var qid = this.questionId; jQuery("#" + qid + " label:contains('WORD')").hide(); jQuery("#" + qid + " inputptype='text']").removeAttr("title"); });
Note: it searches for label that contain the term, so it may hide other choices if other choices contain the same term.
However, there will be an error message (You have added text into an unselected answer choice. Please select the answer choice or remove the text.) if the text entry is not cleared and another choice is selected.
I am unsure on how to clear the text entry to make it exclusive.
Thank you. That worked!
I added additional code so that when someone starts typing in the box, it deselects the other options. However, if I write something in the box and then select another response (e.g., “don’t know), the text remains.
Is there a way to program the question so the text deletes if another option (e.g., “don’t know”) is chosen after someone writes in the box? If people write in the box and then click another option, they get an error (i.e., qualtrics doesn’t allow it) , but I rather have it so that the text is deleted to avoid confusion.
This is the code:
Qualtrics.SurveyEngine.addOnload(function() { /* 'postal_code' is the hidden keyword for Qualtrics to know which option to hide the radio button. Whatever text you put before the text entry is what you should put here. The text will be hidden in preview */ jQuery("#" + this.questionId + " label:contains('Postal_code')").hide(); });
Qualtrics.SurveyEngine.addOnload(function() { // Get the text entry field var textEntryField = document.querySelector('inputotype="text"]');
// Ensure the text entry field exists if (textEntryField) { // Adjust the size using inline styles textEntryField.setAttribute("style", "width: 100px; height: 30px;"); // Set width and height }
// Get the radio buttons for the other two responses var radioButtons = document.querySelectorAll('inputrtype="radio"]');
// Add an event listener to the text entry field textEntryField.addEventListener('input', function() { // Loop through the radio buttons and uncheck them radioButtons.forEach(function(radioButton) { radioButton.checked = false; }); }); });
This is what I am trying to avoid:
Hi @Makgomes ,
With ChatGPT’s help and some trial and error,
Qualtrics.SurveyEngine.addOnload(function() { var qid = this.questionId;
// Get the text entry field var textEntryField = document.querySelector("#" + qid + " input type='text']");
// Get all radio buttons var radioButtons = document.querySelectorAll("#" + qid + " input type='radio']");
// When user types in the text field, uncheck all radio buttons if (textEntryField) { // Adjust the size using inline styles textEntryField.setAttribute("style", "width: 100px; height: 30px;"); // Set width and height textEntryField.addEventListener('input', function() { radioButtons.forEach(function(radioButton) { radioButton.checked = false; }); }); }
// When any radio button is selected, clear the text field radioButtons.forEach(function(radioButton) { radioButton.addEventListener('change', function() { if (textEntryField) { textEntryField.value = ''; } }); }); });