How to Add Description to Free Text Entry Box | XM Community
Solved

How to Add Description to Free Text Entry Box

  • 26 June 2020
  • 9 replies
  • 402 views
G

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.

Box and Free Text Picture.pngThank You.

icon

Best answer by TomG 26 June 2020, 19:06

View original

9 replies

TomG
Rank
Userlevel 7
Badge +27

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.

SurajK
Rank
Userlevel 5
Badge +4

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")

G

https://www.qualtrics.com/community/discussion/comment/27240#Comment_27240Thanks SurajK.

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

TomG
Rank
Userlevel 7
Badge +27

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

SurajK
Rank
Userlevel 5
Badge +4

https://www.qualtrics.com/community/discussion/comment/27241#Comment_27241These 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.

G

https://www.qualtrics.com/community/discussion/comment/27244#Comment_27244Is 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.

Box and Free Text Picture 2.png

SurajK
Rank
Userlevel 5
Badge +4

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..

G

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 ")

SurajK
Rank
Userlevel 5
Badge +4

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

Leave a Reply


Terms & Conditions