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

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

  • June 25, 2020
  • 6 replies
  • 798 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.

Best answer by SurajK

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

    6 replies

    rondev
    Level 6 ●●●●●●
    Forum|alt.badge.img+22
    • rondev
    • Level 6 ●●●●●●
    • June 25, 2020

    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. XM Technology Consultant, surveysolution.in)
    SurajK
    QPN Level 3 ●●●
    Forum|alt.badge.img+4
    • SurajK
    • QPN Level 3 ●●●
    • June 25, 2020

    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
    • GKL999
    • Author
    • June 25, 2020

    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
    QPN Level 3 ●●●
    Forum|alt.badge.img+4
    • SurajK
    • QPN Level 3 ●●●
    • Answer
    • June 25, 2020

    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
    G
    • GKL999
    • Author
    • June 25, 2020

    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
    QPN Level 3 ●●●
    Forum|alt.badge.img+4
    • SurajK
    • QPN Level 3 ●●●
    • June 25, 2020

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


    });

    Terms & ConditionsAccessibility statement