Multiple Choice Question | JavaScript Help | XM Community
Skip to main content

Hi Everyone

Hope you’re well.

I have a multiple choice question (allow one answer) with some custom JavaScript.

This is the JavaScript.

Qualtrics.SurveyEngine.addOnload(function()
{
	/*Place your JavaScript here to run when the page loads*/

});

Qualtrics.SurveyEngine.addOnReady(function()
{
jQuery("#"+this.questionId+" .TextEntryBox").css("width", "100%");
jQuery("#"+this.questionId+" .InputText").css("width", "100%");

var qid = this.questionId;	

jQuery('#'+qid+' .TextEntryBox').css({"visibility":"hidden"});
jQuery('#'+qid+' input:text').css({"visibility":"hidden"});

jQuery("#"+qid+" "type='radio']").change(function(){

jQuery('#'+qid+' .TextEntryBox').css({"visibility":"hidden"});
jQuery('#'+qid+' input:text').css({"visibility":"hidden"});

  if(jQuery(this).prop("checked") == true){
  var v1 = jQuery(this).attr("id");
  jQuery("(id*='"+v1+"~TEXT']").css({"visibility":"visible"});
  }else{
  var v1 = jQuery(this).attr("id");
   jQuery("(id*='"+v1+"~TEXT']").val('');
  jQuery("(id*='"+v1+"~TEXT']").css({"visibility":"hidden"});
  }

 });


});

Qualtrics.SurveyEngine.addOnUnload(function()
{
	/*Place your JavaScript here to run when the page is unloaded*/

});

The JavaScript enables the Other option to only appear when selected, like this.

  1. How can I insert placeholder text in the box below Other?
  2. How can I change the colour of the placeholder text?
  3. How can I remove the border of the box below Other?

The same questions also apply for a multiple choice question (allow multiple answers).

This is the JavaScript for that.

Qualtrics.SurveyEngine.addOnload(function()
{
	/*Place your JavaScript here to run when the page loads*/

});

Qualtrics.SurveyEngine.addOnReady(function()
{

jQuery("#"+this.questionId+" .TextEntryBox").css("width", "100%");
jQuery("#"+this.questionId+" .InputText").css("width", "100%");

var qid = this.questionId;

jQuery('#'+qid+' .TextEntryBox').css({"visibility":"hidden"});
jQuery('#'+qid+' input:text').css({"visibility":"hidden"});

 jQuery("#"+qid+" +type='checkbox']").change(function(){

 if(jQuery(this).prop("checked") == true){
 var v1 = jQuery(this).attr("id");
 jQuery("yid*='"+v1+"~TEXT']").css({"visibility":"visible"});
 }else{
 var v1 = jQuery(this).attr("id");
  jQuery("yid*='"+v1+"~TEXT']").val('');
 jQuery("yid*='"+v1+"~TEXT']").css({"visibility":"hidden"});
 }

 });


});

Qualtrics.SurveyEngine.addOnUnload(function()
{
	/*Place your JavaScript here to run when the page is unloaded*/

});

As always thanks for your help.

👊

Hi, to insert placeholder text to the Other write in on a Multiple Choice question, try the below:

jQuery("#"+this.questionId+" .TextEntryBox").attr("placeholder", "INSERT TEXT");
jQuery("#"+this.questionId+" .InputText").attr("placeholder", "INSERT TEXT");

To change the color of the placeholder text, try adding the below CSS to the Style section of the survey’s Look & Feel:

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: red;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: red;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: red;
}

To remove the border from the Other write in on a Multiple Choice question, try adding the below CSS to the Style section of the survey’s Look & Feel:

.Skin label.MultipleAnswer.q-checked+input, .Skin label.MultipleAnswer.q-checked+textarea, .Skin label.SingleAnswer.q-checked+input, .Skin label.SingleAnswer.q-checked+textarea {
    border: 0 !important;
}

 

Leave a Reply


Terms & Conditions