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

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

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


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


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.


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.


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