Add Read-Only Placeholder Text to Text Entry Boxes on Single Answer and Multiple Answer Questions | XM Community
Solved

Add Read-Only Placeholder Text to Text Entry Boxes on Single Answer and Multiple Answer Questions

  • 17 June 2020
  • 7 replies
  • 136 views
ambrubaker
Rank
Userlevel 1
Badge +2

I have a survey where I want a definition to display as read-only when the user selects that specific item. I have successfully added the placeholder text to each text entry field but have been unsuccessful in making the placeholder text unique to each option in the list.
The three questions that I am requesting assistance with are:

  • Select the type of credential that you think best fits. (single answer)

  • Select the teaching method that you think best fits. (single answer)

  • Which soft skills are you seeking in new employees? (multiple answer)

I have attached a .QSF file of the survey for your reference.
Any assistance and/or guidance is greatly appreciated.
Credentialing_Survey.qsf

icon

Best answer by rondev 17 June 2020, 22:09

View original

7 replies

rondev
Rank
Userlevel 7
Badge +22

You can just create an array of placeholder text and use that in the code. So for "Type of credentials", the code will be as below:
var arr = ["badge defination","CD","DD","LD","MBD","MCCD","MCCD2","MDD","MMD"];
jQuery("#"+this.questionId+" .InputText").each(function(index) {
  jQuery(this).attr("placeholder", arr[index]);
});

Ron Dev (DM for any request. Freelancer, surveysolution.in)
ambrubaker
Rank
Userlevel 1
Badge +2

rondev This is fantastic. However, some of the definitions are longer than the viewable space in the text entry box and the placeholder text does not appear to wrapping. Is there a way to make the text wrap?
Also, is it possible to control/modify the formatting (e.g., font color, size, style, etc.) of the placeholder text?
I have attached an updated .QSF file for review.
Credentialing_Survey-20200618_0812.qsf

rondev
Rank
Userlevel 7
Badge +22

You can change the text entry size using 'Text entry size' option.
OR
Instead of adding definition in the placeholder, you can use tooltip, and add instruction in question to hover over option text to view the definition.

Ron Dev (DM for any request. Freelancer, surveysolution.in)
ambrubaker
Rank
Userlevel 1
Badge +2

When I change the text entry size, it seems to break the jQuery('input:text').hide() function that hides the text entry field until the item is selected.
The tooltip option isn't obvious enough. It only appears to work on desktop (not mobile) and only when the user mouses over the text. Ideally, a "tooltip" would display when a user mouses over any portion of the choice item. If I can make the tooltip appear more like this https://osvaldas.info/elegant-css-and-jquery-tooltip-responsive-mobile-friendly, then I would be more comfortable with using tooltip instead.

rondev
Rank
Userlevel 7
Badge +22

When I change the text entry size, it seems to break the jQuery('input:text').hide() function that hides the text entry field until the item is selected. -> Use this:
jQuery('.TextEntryBox').hide() ;

Regarding tooltip, yes we can implement it in qualtrics. from the Link - Put the css code in the look and feel -> custom CSS. Paste the Javascript part in the Look and feel -> general -> Header(edit) -> source view, inside the

Scanning file for viruses.

Sorry, we're still checking this file's contents to make sure it's safe to download. Please try again in a few minutes.

OK

This file cannot be downloaded

Sorry, our virus scanner detected that this file isn't safe to download.

OK