The mcTextEntry function improves the look & feel of multiple choice text entry boxes in the following ways:

• Places text entry boxes inside choice boxes
• Automatically clears entered text from de-selected choices as needed based on choice exclusivity
• Focuses on text input fields when associated choice is selected
• Adds placeholder text
• Removes white space from beginning and end of entered text
• Sets specified or auto-detected background color
• Optionally hides text inputs of unselected choices
• Optionally sets text input heights and widths
• Works with in-page display logic

This function is available for a reasonable fee. Contact TomG on the Qualtrics Community to learn more.

To make the function available to all questions in the survey, copy the function to the Survey Header inside a script tag: Add the mcTextEntry function to the survey header to make it available to any question in the survey. Go to Look & Feel → General → Header edit → and paste the provided mcTextEntry function JS:

<script>/*Paste mcTextEntry function JS here*/</script>

Alternatively, paste the mcTextEntry function JS into a question's JS outside the existing Qualtrics functions to make it available to questions on the page.

Add JS to call the mcTextEntry function to apply it to the Multiple Choice question as follows:

Qualtrics.SurveyEngine.addOnload(function() {
	mcTextEntry(this);
});

To override the default options, specify the desired options in the second function argument as an object. For example:

Qualtrics.SurveyEngine.addOnload(function() {
	mcTextEntry(this,{placeholder:"please specify"});
});

bgColor specifies the background color of the text entry boxes. If empty (“”), the background color is automatically matched to the survey theme.

Default: “” (empty)

breakBeforeText specifies if the text entry boxes should be below (true) or on the same line (false) as the choice label text. The global break can be overridden for individual choices by adding the following html to the choice label text:

<span data-inputbreak="false"></span>

Default: true

hideUnselected specifies if the text entry boxes should be hidden when choice is not selected (true) or always visible (false).

Default: false

horizPad is used to reduce the amount of label/text box left/right padding from the default for multiple choice questions in a horizontal position. Leave empty “” to use default padding.

Default: 5px

multiColPad is used to reduce the amount of label/text box left/right padding from the default for multiple choice questions with columns. Leave empty “” to use default padding.

Default: 5px

placeholder sets a global placeholder for all text entry boxes in the question. Set to empty (“”) for no global placeholder. The global placeholder can be overridden for individual choices by adding the following html to the choice label text:

<span data-inputph="placeholder text"></span>

Default: “” (empty)

reqText automatically de-select multi-select choices if the text entry box is empty.

Default: true

textHeight specifies the global height of the text entry boxes. Empty (“”) uses default height. The global height can be overridden for individual choices by adding the following html to the choice label text:

<span data-inputhgt="specify height"></span>

Default: “”

textWidth specifies the global width of the text entry boxes. The global width can be overridden for individual choices by adding the following html to the choice label text:

<span data-inputwidth="specify width"></span>

Default: “100%”

Qualtrics Wiki