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
• 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
• Optionally adds placeholder text
• Optionally adds prefixes or suffixes
• Works with in-page display logic

Here is a quick video demonstration:

Here is a quick video demonstration with inputs of unselected choices hidden:

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

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-textbreak="false">Choice text</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-textph="placeholder text">Choice text</span>

Default: "" (empty)

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

<span data-textprefix="prefix text">Choice text</span>

Default: "" (empty)

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

Default: true

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

<span data-textsuffix="suffix text">Choice text</span>

Default: "" (empty)

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-texthgt="specify height">Choice text</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-textwidth="specify width">Choice text</span>

Default: "100%"

Note on mobile phones (screen width ⇐ 480px): Qualtrics includes a css media rule “width:100%!important” that can't be overridden by the mcTextEntry function. It can be overridden by using a more specific rule (or rules). For example:

@media (max-width:480px) { .Skin .MC .QuestionBody .TextEntryBox { width:auto!important; } }

Qualtrics Wiki