Differences

This shows you the differences between two versions of the page.

--- tinderstyle [2020/10/14 12:17] – created admin
+++ tinderstyle [2024/04/01 13:38] (current) – admin
@@ Line 12: / Line 12: @@
 Here is a quick video demonstration:\\
-{{ ::eq-vas.mp4?600 |EQ-VAS Demo}}
+{{ ::tinderstyle_demo.mp4?600 |tinderStyle Demo}}
+This function is available for a reasonable fee. Contact [[https://community.qualtrics.com/XMcommunity/messages/add/TomG|TomG]] on the Qualtrics Community to learn more.
 ===== Set-up Instructions =====
 ==== Survey Header ====
@@ Line 25: / Line 27: @@
 The tinderStyle function uses custom CSS for formatting. Go to Look & Feel -> Style -> Custom CSS edit and paste the provided tinderStyle CSS rules.
 ==== Survey Flow ====
-Add the padTopHide embedded data field to the top of the survey flow. It prevents the question from being momentarily seen by the respondent before it is completely formatted by the JavaScript.  Set padTopHide as follows:
+Add the opacity0 embedded data field to the top of the survey flow. It prevents the question from being momentarily seen by the respondent before it is completely formatted by the JavaScript.  Set opacity as follows:
 <code>
-padTopHide = padding-top:2500px;
+opacity0 = opacity:0;
 </code>
 ==== Loop & Merge Block ====
@@ Line 34: / Line 36: @@
 === 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.
+=== Question HTML ===
+The question text should be set up as follows:
+<code>
+<div class="tinderQt">The question text goes here.</div>
+<div id="tinderEl">${lm://Field/1}</div>
+<style>.Skin { ${e://Field/opacity0} }</style>
+</code>
 === JavaScript Function Call ===
 To apply tinderStyle to a question, call the function from the question's JavaScript. For example:
@@ Line 44: / Line 53: @@
 <code>
 Qualtrics.SurveyEngine.addOnload(function() {
-	tinderStyle(this,{{timed:true,timeout:5}});
+	tinderStyle(this,{timed:true,timeout:5});
 });
 </code>
 ===== Options =====
 ==== aniMs ====
-**aniMs** specifies the duration of animations is milliseconds.
+**aniMs** specifies the duration of animations in milliseconds.
 Default: 300 (milliseconds)
 ==== arrow ====
-**arrow** is an object that specifies the characters the use for directional arrow icons. For example:\\
+**arrow** is an object that specifies the characters to use for directional arrow icons. For example:\\
-arrow:{left:"&#9668;",right:"&#9658;",down:"&#9660;"}
+%%arrow:{left:"&#9668;",right:"&#9658;",down:"&#9660;"}%%
 === down ===
 The down arrow icon character or characters. Down only applies to questions with 3 choices.
-Default: &#9660;
+Default: %%"&#9660;"%%
 === left ===
 The down arrow icon character or characters.
-Default: &#9668;
+Default: %%"&#9668;"%%
 === right ===
-The down arrow icon character or characters.
+The right arrow icon character or characters.
-Default: &#9658;
+Default: %%"&#9658;"%%
 ==== arrowPosition ====
 **arrowPosition** specifies the position of the arrow icons relative to the choice text. Valid arrow positions are "above", "below", and "beside".
 Default: beside
+==== color ====
+**color** is an object that specifies the text and background colors of the choice buttons. For example:\\
+%%color:{left:{text:"#ffffff",bg:"#ff0000"},right:{text:"#ffffff",bg:"#2ea44f"},down:{text:"#ffffff",bg:"#f2d818"}}%%
+=== down ===
+The text and background color of the down (middle) choice. Down only applies to questions with 3 choices.
+Default: %%{text:"#ffffff",bg:"#f2d818"}%%
+=== left ===
+The text and background color of the left choice.
+Default: %%{text:"#ffffff",bg:"#ff0000"}%%
+=== right ===
+The text and background color of the right choice.
+Default: %%{text:"#ffffff",bg:"#2ea44f"}%%
 ==== 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 display 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.
 Default: false
 ==== timeout ====
-**timeout** specifies the number of seconds the respondent has to answer the question when timed[[tinderStyle#timed|tinderStyle timed]] is true.
+**timeout** specifies the number of seconds the respondent has to answer the question when **[[tinderStyle#timed|timed]]** is true.
 Default: 3
@@ Line 86: / Line 110: @@
 Default: true
+====== Qualtrics Wiki ======
+[[start|Qualtrics Wiki]]