Trying to Get One | XM Community
Skip to main content

Hi,

I’m new to this, so please be patient! I’m trying to get a single response option for a matrix table to appear as a radio button instead of a fill in the blank option as a “don’t know” option. But I can only seem to get qualtrics to give me all fill in the blank response options or all radio buttons.

 

The rest of the responses for that question need to be validated as numbers so I need to use a matrix table so I can have the custom validations. I think my question id is ${q://QID91}. I’m having trouble understanding if that’s the correct way to insert a question id into javascript options in Qualtrics. Could someone help give me an example of the code with the question id already in there so I don’t have to replace the question id? I tried generating some code from chatgpt but it hasn’t worked at all.

 

Basically, I’d like it to look like the below except the “last” response option would be the radio circle button. Please help I’ve been stuck for hours.

 

 

(also I’m sorry I can’t seem to edit the post title after it posted)

 

 

Insert the question id in your JavaScript as this.questionId. For example:

Qualtrics.SurveyEngine.addOnload(function() {
var q = jQuery("#"+this.questionId);
});

As for what you are trying to do, you can’t mixed radio buttons and text inputs in a Matrix. You can add your own checkbox (it will work better than a radio button) with JavaScript and hide the text input, then update the text input to 1 if the checkbox is clicked. 


Insert the question id in your JavaScript as this.questionId. For example:

Qualtrics.SurveyEngine.addOnload(function() {
var q = jQuery("#"+this.questionId);
});

As for what you are trying to do, you can’t mixed radio buttons and text inputs in a Matrix. You can add your own checkbox (it will work better than a radio button) with JavaScript and hide the text input, then update the text input to 1 if the checkbox is clicked. 

Hi! Thanks for responding to me!

I’m sorry. I’m having trouble understanding your response about how to replace the “this.questionId” with my actual question id. I’m not sure about which formatting transfers over. So if this is my question id ${q://QID91} would the code look like what’s below?

var q = jQuery("#"+QID91);

 

Also, I think your idea about the checkbox sounds great! You mentioned that I could add my own checkbox with JavaScript and hide the text input, then update the text input to 1 if the checkbox is clicked. But I don’t know how to do this. Do you have example code that I could copy and paste?

 


For QID91, if you attach JavaScript to the question then this.questionId = “QID91”. There is never a need to hard code question ids in JavaScript.  The only time you need hardcoded question ids in JS is if you are piping a value from another question into your JS and the id is part of the piped string.

I don’t have an example of the exact code you would need, and I’m not going to write it for you.

 


For QID91, if you attach JavaScript to the question then this.questionId = “QID91”. There is never a need to hard code question ids in JavaScript.  The only time you need hardcoded question ids in JS is if you are piping a value from another question into your JS and the id is part of the piped string.

I don’t have an example of the exact code you would need, and I’m not going to write it for you.

 

Thanks for responding again. I’m very new to this and learning so I would appreciate patience and kindness.

 

I didn’t know that about the question id numbers. So thank you for the info that makes the process for making changes clearer.

 

I think your idea of replacing it with a checkbox is good. But I’m having trouble implementing it. What I have so far is not working. Could you offer any constructive suggestions?

 

Qualtrics.SurveyEngine.addOnload(function() {
// question id?
var qid = this.questionId;

// Hide the text input for the last option
jQuery("#" + qid + " .InputText").last().hide();

// Create a checkbox for the last option
var checkbox = jQuery("<input type='checkbox'>");
checkbox.attr("id", qid + "~Other~Checkbox");

// Add the checkbox to the matrix table
jQuery("#" + qid + " .Selection").last().append(checkbox);

// Update the text input to 1 if the checkbox is clicked
checkbox.on("click", function() {
if (jQuery(this).is(":checked")) {
jQuery("#" + qid + " .InputText").last().val(1);
} else {
jQuery("#" + qid + " .InputText").last().val("");
}
});
});

 

 

 

 


@jmc02 -  What layout are you using?

 


Hi, I was able to follow TomG's recommendation to hide the last text input and update its value with "1" if an inserted checkbox is selected. To give it a try, set the survey to Flat layout and create a Matrix question that is set to Text Entry, has 4 statements, 1 scale point, and text box size set to large. Then, add the below to the question's JavaScript in the OnReady section:

var qid = this.questionId;

//increase Matrix Text Entry size//
jQuery("#"+qid+" td input").css({
"width": "90%"
});

//identify last text input//
jQuery("#"+qid+" td input:last").attr('id','lasttext');
var lasttext = document.getElementById('lasttext');

//create checkbox and append after last text input//
jQuery('<input type="checkbox" name="NA" id="NA" class="NAclass">').insertAfter(lasttext);

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

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

jQuery(lasttext).css({
"display": "none"
});

//default value to 0//
jQuery(lasttext).val("0");

//change to 1 when checkbox is clicked//
jQuery(na).click(function () {

if( jQuery(na).is(":checked") )
{
jQuery(lasttext).val("1");
}
else
{
jQuery(lasttext).val("0");
}
});

 


Hi, I was able to follow TomG's recommendation to hide the last text input and update its value with "1" if an inserted checkbox is selected. To give it a try, set the survey to Flat layout and create a Matrix question that is set to Text Entry, has 4 statements, 1 scale point, and text box size set to large. Then, add the below to the question's JavaScript in the OnReady section:

var qid = this.questionId;

//increase Matrix Text Entry size//
jQuery("#"+qid+" td input").css({
"width": "90%"
});

//identify last text input//
jQuery("#"+qid+" td input:last").attr('id','lasttext');
var lasttext = document.getElementById('lasttext');

//create checkbox and append after last text input//
jQuery('<input type="checkbox" name="NA" id="NA" class="NAclass">').insertAfter(lasttext);

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

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

jQuery(lasttext).css({
"display": "none"
});

//default value to 0//
jQuery(lasttext).val("0");

//change to 1 when checkbox is clicked//
jQuery(na).click(function () {

if( jQuery(na).is(":checked") )
{
jQuery(lasttext).val("1");
}
else
{
jQuery(lasttext).val("0");
}
});

 

Oh my god it worked! Thank you both! Thank you thank you! I’m testing and implementing it now!

 

(In case anyone Googles this later to try the same thing, it worked for me even when I had to add a fifth answer option. And you can currently check that your qualtrics layout is set to “Flat” by clicking on the “look and feel” left menu bar option and then clicking layout.)


Leave a Reply