tinderstyle
Differences
This shows you the differences between two versions of the page.
| Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
| tinderstyle [2023/03/17 14:42] – [Survey Flow] admin | tinderstyle [2024/04/01 13:38] (current) – admin | ||
|---|---|---|---|
| Line 36: | Line 36: | ||
| === Question Type === | === Question Type === | ||
| The tinderStyle function __must__ added to a single answer multiple choice question with 2 or 3 choices. The function checks to make sure this requirement is met. It also checks to make sure the question is the only answerable question on the page (the only other questions on the page must be descriptive text, meta info, or timer). If these requirements are not met, the function exits without performing any actions. | The tinderStyle function __must__ added to a single answer multiple choice question with 2 or 3 choices. The function checks to make sure this requirement is met. It also checks to make sure the question is the only answerable question on the page (the only other questions on the page must be descriptive text, meta info, or timer). If these requirements are not met, the function exits without performing any actions. | ||
| + | === Question HTML === | ||
| + | The question text should be set up as follows: | ||
| + | < | ||
| + | <div class=" | ||
| + | <div id=" | ||
| + | < | ||
| + | </ | ||
| === JavaScript Function Call === | === JavaScript Function Call === | ||
| To apply tinderStyle to a question, call the function from the question' | To apply tinderStyle to a question, call the function from the question' | ||
| Line 46: | Line 53: | ||
| < | < | ||
| Qualtrics.SurveyEngine.addOnload(function() { | Qualtrics.SurveyEngine.addOnload(function() { | ||
| - | tinderStyle(this, | + | tinderStyle(this, |
| }); | }); | ||
| </ | </ | ||
| Line 66: | Line 73: | ||
| Default: %%"&# | Default: %%"&# | ||
| === right === | === right === | ||
| - | The down arrow icon character or characters. | + | The right arrow icon character or characters. |
| Default: %%"&# | Default: %%"&# | ||
| Line 73: | Line 80: | ||
| Default: beside | Default: beside | ||
| + | ==== color ==== | ||
| + | **color** is an object that specifies the text and background colors of the choice buttons. For example:\\ | ||
| + | %%color: | ||
| + | === down === | ||
| + | The text and background color of the down (middle) choice. Down only applies to questions with 3 choices. | ||
| + | |||
| + | Default: %%{text:"# | ||
| + | === left === | ||
| + | The text and background color of the left choice. | ||
| + | |||
| + | Default: %%{text:"# | ||
| + | === right === | ||
| + | The text and background color of the right choice. | ||
| + | |||
| + | Default: %%{text:"# | ||
| ==== timed ==== | ==== timed ==== | ||
| **timed** specifies whether or not the question should timeout. Setting timed to true turns on timeout. When timing is turned on, the time remaining is displayed to the respondent. | **timed** specifies whether or not the question should timeout. Setting timed to true turns on timeout. When timing is turned on, the time remaining is displayed to the respondent. | ||
| Line 78: | Line 100: | ||
| Default: false | Default: false | ||
| ==== timeout ==== | ==== timeout ==== | ||
| - | **timeout** specifies the number of seconds the respondent has to answer the question when [[tinderStyle# | + | **timeout** specifies the number of seconds the respondent has to answer the question when **[[tinderStyle# |
| Default: 3 | Default: 3 | ||
tinderstyle.1679078577.txt.gz · Last modified: by admin