Hi,
Still a bit new here, and I haven't been able to find my answer in the community site, so sorry if this is already been asked earlier!
I have a few multiple choice questions where I need there to be an option for text entry.
I am able to add the text entry box, but I would like it to only show (so a type of display logic?) if the participant chooses that option.
Is this possible?
Note: I have already added a custom validation to the text entry to ensure that the character count does not exceed 30. Not sure if this is important to note, but figured it would be best to know the whole situation just in case.
Also, here are a few screenshots in case that helps:
!
!
Best answer by Anonymous
> @Sascha said:
> Thanks!
>
> I couldn't get it to work, but this is the first time I'm using js in Qualtrics so it's most likely my fault!
Please see the attached QSF
Do you consider having them as a follow-up question that would appear when the option is selected (e.g., Website selected, a follow-up question appears "On which website blabla?"), or you need it exactly where it is in the screenshots?
Hi,
Yes, this is my back up plan, but I was hoping that it might be possible to do it this way too. The survey is quite long, so any way of avoiding adding any more questions is preferable.
Thanks!
A
Anonymous
0 replies
January 29, 2019
Hello @Sascha ,
Paste the below code in the js(onReady) of the "Multi-choice" -> "Multiple Answer" question
var QID= this.questionId;
jQuery("#" + QID + " .InputText ").hide();
jQuery("#" + QID + " input[type='checkbox']").each(function(){
if(jQuery(this).prop("checked") == true)
{
var v1 = jQuery(this).attr("id");
jQuery("[id*='"+v1+"~TEXT']").show();
}
else
{
var v1 = jQuery(this).attr("id");
jQuery("[id*='"+v1+"~TEXT']").val('');
jQuery("[id*='"+v1+"~TEXT']").hide();
}
});
jQuery("#" + QID + " .Selection ").on("click change",function(){
jQuery("#" + QID + " input[type='checkbox']").each(function(){
if(jQuery(this).prop("checked") == true)
{
var v1 = jQuery(this).attr("id");
jQuery("[id*='"+v1+"~TEXT']").show();
}
else
{
var v1 = jQuery(this).attr("id");
jQuery("[id*='"+v1+"~TEXT']").val('');
jQuery("[id*='"+v1+"~TEXT']").hide();
}
});
});
To make the above code work with "Multi-choice" -> "Single Answer" question - Change `checkbox` to `radio `in above code
Thanks!
I couldn't get it to work, but this is the first time I'm using js in Qualtrics so it's most likely my fault!
This is what I did:
Open JavaScript in question:
!
Pasted what you posted above:
!
Tested it:
!
As you see, it still showed the text boxes in the question.
A
Anonymous
0 replies
Answer
January 29, 2019
> @Sascha said:
> Thanks!
>
> I couldn't get it to work, but this is the first time I'm using js in Qualtrics so it's most likely my fault!
Please see the attached QSF
to hide/show the text entry element. I find this solution less convoluted than the accepted answer here. For small procedures like these,
setInterval()
should have a negligible overhead on the client's machine. Qualtrics.SurveyEngine.addOnload(function() { /*Place your JavaScript here to run when the page loads*/ });
Qualtrics.SurveyEngine.addOnReady(function() { /*Place your JavaScript here to run when the page is fully displayed*/
myVar = setInterval(() => {
// element ID let elName = "QR~QID12~5~"
// text entry to be hid/shown, just add ~TEXT to element ID let inputTxtEntry = jQuery($(elName + "~TEXT"))
// choice in which condition needs to be checked for action let qId = jQuery($(elName))
if(qId.prop("checked") == true){
// show if choice element is checked inputTxtEntry.show();
}else{
// else remove any text from text entry box and hide text entry element inputTxtEntry.val('');
inputTxtEntry.hide();
}
}, 200) // setInterval() will run this function every 200 miliseconds
});
Qualtrics.SurveyEngine.addOnUnload(function() { /*Place your JavaScript here to run when the page is unloaded*/ clearInterval(); // flush setInterval() on unload });