Text entry box only shows if selected in multiple choice question | XM Community
Solved

Text entry box only shows if selected in multiple choice question

  • 29 January 2019
  • 13 replies
  • 751 views
S
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:

!
!
icon

Best answer by Anonymous 29 January 2019, 22:31

View original

13 replies

MsIreen
Rank
Userlevel 7
Badge +23
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?
S
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
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
S
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
> @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
S
Thank you!! This worked 😃

You are clearly a Qualtrics and JS genius!
dlively
Rank
Badge +2
Can this be done with display logic or in the survey flow?
U
Rank
Userlevel 6
Badge +5
Hi @Shashi

Is there a way to apply this to multiple questions on the same page? It seems to be only working for the first question on the page for me.
A

As a new Qualtrics user, I'm really surprised by some of the obvious things that are missing in Qualtrics.

J
Badge +2

I like to use 

setInterval()
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
});

J
Badge

https://community.qualtrics.com/XMcommunity/discussion/comment/46254#Comment_46254How would I add prefixes and suffixes that appear when selected to the MC text entry boxes to the following code below:

var QID= this.questionId;
jQuery("#" + QID + " .InputText ").hide();
jQuery("#" + QID + " input[type='radio']").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='radio']").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();
}
});
});


J
Badge +2

https://community.qualtrics.com/XMcommunity/discussion/comment/53227#Comment_53227I don't understand what you mean by "prefixes and suffixes that appear when selected to the MC text entry boxes". Can you give us an example?

J
Badge

https://community.qualtrics.com/XMcommunity/discussion/23210/static-text-for-text-entry-on-single-choice-mc-qLike this post. I have no coding knowledge and just need help.

Leave a Reply


Terms & Conditions