This is an old revision of the document!
Table of Contents
mcTextEntry - Improve the look & feel of MC text entry boxes
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.
Set-up Instructions
Survey Header
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.
Question JavaScript
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"});
});
Options
bgColor
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
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">Choice text</span>
Default: true
hideUnselected
hideUnselected specifies if the text entry boxes should be hidden when choice is not selected (true) or always visible (false).
Default: false
horizPad
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
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
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">Choice text</span>
Default: “” (empty)
reqText
reqText automatically de-select multi-select choices if the text entry box is empty.
Default: true
textHeight
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">Choice text</span>
Default: “”
textWidth
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">Choice text</span>
Default: “100%”
