How to create 'prefer not to answer' checkbox beside free text fields | XM Community
Solved

How to create 'prefer not to answer' checkbox beside free text fields

  • 25 June 2020
  • 6 replies
  • 423 views
G

Hello,
I am currently creating a survey whereby we have a question asking for multiple types of numeric data (e.g. number of staff, average age, average tenure etc.) with text entry fields.
For each text entry field, I would like to also add a corresponding checkbox in the event the respondent prefers not to answer.

From other posts I know people have recommended using a multiple choice question type and for each radio button to allow text entry but I'm not sure this would completely work as I would like to have the checkbox text say: "prefer not to answer" but also for each text entry box to have a description for data required (e.g. number of staff, average age, average tenure etc.).

Does anyone have any suggestions to help?

Thanks.

icon

Best answer by SurajK 25 June 2020, 19:10

View original

6 replies

rondev
Rank
Userlevel 7
Badge +22

If you want to have only one "Prefer not to answer" option for all the other options, then you can make prefer not to answer option "Mutually exclusive" using choice option.
But, if you want "Prefer not to answer" option for each option, then you need to create separate single choice questions for each options.

Ron Dev (DM for any request. Freelancer, surveysolution.in)
SurajK
Rank
Userlevel 5
Badge +4

You can create side by side question like below,
image.pngand add the some custom css in addOnLoad function to format it in a better way , see below.
jQuery('.QuestionBody').find('thead').find('.Answers').css('display','none')
jQuery('.QuestionBody').find('thead').find('.Headings').css('display','none')
jQuery('.QuestionBody thead').find('tr').find('.BorderColor').css('border','none')
jQuery('.ChoiceStructure tbody').find('tr').find('.BorderColor').css('border','none')
jQuery('.SBS2').append(jQuery('.checkboxTxt').html()) // checkboxTxt class of prefer not answer
jQuery('.Choice').find('th').css('width','160px')
jQuery('.SBS1').css('width','180px')
jQuery('.SBS2').css('width','200px')

G

https://www.qualtrics.com/community/discussion/comment/27188#Comment_27188Thank you SurajK,

Is there an opportunity to make the 2 columns side by side without needing to use Java?

SurajK
Rank
Userlevel 5
Badge +4

yes, you can remove that JS code and it will display like the below, also make sure to add the validation such that they can either enter the value in box or they can select the checkbox
image.png

G

https://www.qualtrics.com/community/discussion/comment/27193#Comment_27193Is there a way you could kindly attach a screenshot with the validation logic Suraj?

SurajK
Rank
Userlevel 5
Badge +4

https://www.qualtrics.com/community/discussion/comment/27213#Comment_27213Try the below code to validate,
jQuery("#NextButton").hide();
jQuery("#Buttons").append("")
var qid = this.questionId;


jQuery('#FakeNextButton').click(function(){
var errCnt=0
var totalOp = jQuery('.QuestionBody').find('tbody tr').find('input[type="text"]');

for(var i=0;i {


if(jQuery('input[type="text"]').eq(i).val().length > 0 && jQuery('input[type="checkbox"]').eq(i).is(':checked'))
{
errCnt+=1
}


}


if (errCnt > 0){
jQuery("div[id='QR~"+qid+"~VALIDATION']").css("display","block")
jQuery("div[id='QR~"+qid+"~VALIDATION']").html("Either enter value in box or select checkbox.")
jQuery("div[id='"+qid+"']").addClass("Highlight")
}
else{
jQuery("#NextButton").click();
};


});

Leave a Reply


Terms & Conditions