====== 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
  * 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:\\
{{ ::mcTextEntry.mp4?800 |mcTextEntry Demonstration}}

Here is a quick video demonstration with inputs of unselected choices hidden:\\
{{ ::mcTextEntry_hide.mp4?800 |mcTextEntry Demonstration}}

This function is available for a reasonable fee. Contact **[[https://community.qualtrics.com/inbox/conversation?with=373|TomG]]** on the Qualtrics Community to learn more.
===== Set-up Instructions =====
==== Survey Header ====
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 -> {{::icon_source.jpg?20|}} and paste the provided mcTextEntry function JS:
<code>
<script>/*Paste mcTextEntry function JS here*/</script>
</code>
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:
<code>
Qualtrics.SurveyEngine.addOnload(function() {
	mcTextEntry(this);
});
</code>

To override the default options, specify the desired **[[mctextentry#options|options]]** in the second function argument as an object. For example:
<code>
Qualtrics.SurveyEngine.addOnload(function() {
	mcTextEntry(this,{placeholder:"please specify"});
});
</code>
===== 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:\\
<code>
<span data-textbreak="false">Choice text</span>
</code>

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:\\
<code>
<span data-textph="placeholder text">Choice text</span>
</code>

Default: %%""%% (empty)
==== prefix ====
**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:\\
<code>
<span data-textprefix="prefix text">Choice text</span>
</code>

Default: %%""%% (empty)
==== reqText ====
**reqText** automatically de-select multi-select choices if the text entry box is empty.

Default: true
==== suffix ====
**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:\\
<code>
<span data-textsuffix="suffix text">Choice text</span>
</code>

Default: %%""%% (empty)
==== 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:\\
<code>
<span data-texthgt="specify height">Choice text</span>
</code>

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:\\
<code>
<span data-textwidth="specify width">Choice text</span>
</code>

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: 
<code>
@media (max-width:480px) { .Skin .MC .QuestionBody .TextEntryBox { width:auto!important; } }
</code> 
====== Qualtrics Wiki ======
[[start|Qualtrics Wiki]]