How to Add Description to Free Text Entry Box

GKL999GKL999 CanadaCommunity Member Qubie ✭

How to Add Description to Free Text Entry Box

Hello,

I am creating a survey question where I'm contemplating using a multiple choice type question as shown below and adding free text entry boxes for each checkbox.


The purpose of the checkbox will be for the user to select in case the respondent prefers not to answer otherwise they will be expected to enter in an answer in the free text space.

I'm wondering whether it is possible to add descriptions to the free text boxes (e.g. one box represents age, another represents years in job etc.) and if I can align the checkbox a little better with the 'Prefer Not To Answer' text.


Thank You.

Best Answers

  • TomGTomG Raleigh, NCCommunity Member Wizard ✭✭✭✭✭
    Accepted Answer

    You can add placeholder attributes to the text input fields such as:

    jQuery(".InputText").eq(0).attr("placeholder","age");
    

    For your second question, it is theme dependent. Preview the question, then use your browser's Inspect feature to determine what to adjust.

  • SurajKSurajK IndiaCommunity Member Sage ✭✭✭
    Accepted Answer

    You can add placeholder for each text box, like if you want to add the age for the first text box and year for next text box then use the below code,

    jQuery("input[type='text']").eq(0).attr('placeholder','Age') 
    jQuery("input[type='text']").eq(1).attr('placeholder','Year') 
    

    For alignment use the below code,

    jQuery(".TextEntryBox").closest(".LabelWrapper").css("display","inline-flex")
    jQuery(".TextEntryBox").closest(".LabelWrapper").find(".MultipleAnswer").css("display","table")
    

Answers

  • GKL999GKL999 CanadaCommunity Member Qubie ✭

    Thanks SurajK.


    What does the eq(0) and eq(1) mean? how do we know which checkbox has which corresponding #?

  • TomGTomG Raleigh, NCCommunity Member Wizard ✭✭✭✭✭

    0 is the first text input, 1 is the second text input, etc.

  • SurajKSurajK IndiaCommunity Member Sage ✭✭✭

    These are index of textbox as per their appearance. In your choices if you have added the text entry for 2nd choice then eq(0) will get assign to that box and so on.

  • GKL999GKL999 CanadaCommunity Member Qubie ✭

    Is there any easy way to see the index values of all text boxes across questions?


    eq(0) is associated with the first text entry in the first question of my survey.

    The custom code I'm trying to put in is for a question further down in the survey.


    Also when I put in the code and execute a preview, I notice the text is in the box and not beside it.



  • SurajKSurajK IndiaCommunity Member Sage ✭✭✭
    edited June 2020

    If you want to add the text beside the text box you can use before or after.

    jQuery("input[type='text']").after("age")
    jQuery("input[type='text']").before("Age")
    

    Index values won't be any difficult task, these are just 0 to the number of text box -1.

    Like if you have 5 text boxes and then first text box will be referred as eq(0), second one will be eq(1), third one will be eq(2) and so on..

  • GKL999GKL999 CanadaCommunity Member Qubie ✭
    edited June 2020

    Ok I think I'm getting closer..

    But I notice that the 'Field 1' text pushes the text box to another line.


    Qualtrics.SurveyEngine.addOnload(function()

    {

    /*Place your JavaScript here to run when the page loads*/

    jQuery("input[type='text']").eq(4).before(" Field 1 ")

  • SurajKSurajK IndiaCommunity Member Sage ✭✭✭

    Add the below code, it will take care of all question types, you can also add this in header, so it will be applicable for overall survey.

    if (jQuery(".TextEntryBox").length > 0){
    	jQuery(".TextEntryBox").closest(".LabelWrapper").css("display","inline-flex")
    	jQuery(".TextEntryBox").closest(".LabelWrapper").find(".MultipleAnswer").css("display","table")
    	jQuery(".TextEntryBox").closest(".LabelWrapper").find(".SingleAnswer").css("display","table")
    };
    
Sign In to Comment