Table of Contents
tinderStyle - Tinder Type Multiple Choice Question
The tinderStyle function and associated css formats a multiple choice question in the same style as a Tinder question.
Functionality includes:
- Animation when choice selected
- Automatically adjusts to window size
- Answer by swipe or click
- Supports two or three choices
- Optional timeout capability
- Conditionally turn on or off (e.g., tinder on mobile, multiple choice on desktop)
- Customize formatting of directional arrows
Here is a quick video demonstration:
This function is available for a reasonable fee. Contact TomG on the Qualtrics Community to learn more.
Set-up Instructions
Survey Header
The tinderStyle function uses a stylesheet and JavaScript loaded in the survey header. The function itself can also be added to the header to make it available to any question in the survey. Go to Look & Feel → General → Header edit → and paste:
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" /> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="https://cdn.jsdelivr.net/combine/npm/hammerjs@2,npm/jquery-hammerjs@2"></script> <script>/*Paste the provided tinderStyle function JS here*/<script>
Custom CSS
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 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:
opacity0 = opacity:0;
Loop & Merge Block
Tinder style questions are best suited for situations where you want to ask the same question about different items in quick succession. Therefore, it is most common to place a tinder question inside a Qualtrics loop & merge block and pipe in information about the items as loop & merge fields.
tinderStyle Question
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:
<div class="tinderQt">The question text goes here.</div> <div id="tinderEl">${lm://Field/1}</div> <style>.Skin { ${e://Field/opacity0} }</style>
JavaScript Function Call
To apply tinderStyle to a question, call the function from the question's JavaScript. For example:
Qualtrics.SurveyEngine.addOnload(function() { tinderStyle(this); });
To override the default options, specify the desired options in the second function argument as an object. For example:
Qualtrics.SurveyEngine.addOnload(function() { tinderStyle(this,{timed:true,timeout:5}); });
Options
aniMs
aniMs specifies the duration of animations in milliseconds.
Default: 300 (milliseconds)
arrow
arrow is an object that specifies the characters to use for directional arrow icons. For example:
arrow:{left:"◄",right:"►",down:"▼"}
down
The down arrow icon character or characters. Down only applies to questions with 3 choices.
Default: "▼"
left
The down arrow icon character or characters.
Default: "◄"
right
The right arrow icon character or characters.
Default: "►"
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 displayed to the respondent.
Default: false
timeout
timeout specifies the number of seconds the respondent has to answer the question when timed is true.
Default: 3
tinderFlag
tinderFlag specifies whether or not Tinder style should be applied to the question. For example, if Tinder style should only be applied to mobile devices and there was an embedded data field set to 1 for mobile devices, then the tinderStyle function could be called like this:
tinderStyle(this, {tinderFlag: !!+"${e://Field/mobileFlag}"});
Default: true