Tinder
Configuration
JSON
{
"options": {
"background_color": "transparent",
"background_image": "",
"half_shadow": false,
"display_arrows": true,
"display_thumbs": true,
"thumbs_duration": 1500,
"randomize": false,
"display_explanation": false,
"explanation_duration": 15000,
"questions": {
"en": [
{
"id": 1,
"q": "Do you like this?",
"r": "both",
"left": "I like 👍",
"right": "I don't like 👎",
"card_front_url": GAME_URL + "/question1-1.png",
"card_front_background_color": "white",
"card_front_right_url": "",
"card_front_right_background_color": "",
"question_color": "white",
"question_background_color": "rgba(14, 52, 16, .25)",
"button_color": "white",
"button_background_color": "rgba(14, 52, 16, .75)",
"explanation": []
},
{
"id": 2,
"q": "Which do you prefer?",
"r": "right",
"left": "💕💕",
"right": "🤫🐑",
"card_front_url": GAME_URL + "/question2-1.png",
"card_front_background_color": "white",
"card_front_right_url": GAME_URL + "/question2-2.png",
"card_front_right_background_color": "white",
"question_color": "white",
"question_background_color": "rgba(173, 85, 14, .75)",
"button_color": "white",
"button_background_color": "rgba(173, 85, 14, .25)",
"explanation": []
}
],
"fr": [
{
"id": 1,
"q": "Aimez-vous ceci ?",
"r": "both",
"left": "J'aime 👍",
"right": "Je n'aime pas 👎",
"card_front_url": GAME_URL + "/question1-1.png",
"card_front_background_color": "white",
"card_front_right_url": "",
"card_front_right_background_color": "",
"question_color": "white",
"question_background_color": "rgba(14, 52, 16, .25)",
"button_color": "white",
"button_background_color": "rgba(14, 52, 16, .75)",
"explanation": []
},
{
"id": 2,
"q": "Que préférez-vous ?",
"r": "right",
"left": "💕💕",
"right": "🤫🐑",
"card_front_url": GAME_URL + "/question2-1.png",
"card_front_background_color": "white",
"card_front_right_url": GAME_URL + "/question2-2.png",
"card_front_right_background_color": "white",
"question_color": "white",
"question_background_color": "rgba(173, 85, 14, .75)",
"button_color": "white",
"button_background_color": "rgba(173, 85, 14, .25)",
"explanation": []
}
],
"nl": [
{
"id": 1,
"q": "Vind je dit leuk?",
"r": "both",
"left": "Ja 👍",
"right": "Nee 👎",
"card_front_url": GAME_URL + "/question1-1.png",
"card_front_background_color": "white",
"card_front_right_url": "",
"card_front_right_background_color": "",
"question_color": "white",
"question_background_color": "rgba(14, 52, 16, .25)",
"button_color": "white",
"button_background_color": "rgba(14, 52, 16, .75)",
"explanation": []
},
{
"id": 2,
"q": "Wat heb je liever?",
"r": "right",
"left": "💕💕",
"right": "🤫🐑",
"card_front_url": GAME_URL + "/question2-1.png",
"card_front_background_color": "white",
"card_front_right_url": GAME_URL + "/question2-2.png",
"card_front_right_background_color": "white",
"question_color": "white",
"question_background_color": "rgba(173, 85, 14, .75)",
"button_color": "white",
"button_background_color": "rgba(173, 85, 14, .25)",
"explanation": []
}
]
}
},
"texts": {
"en": {
"good": "Correct!",
"bad": "Nope!"
},
"fr": {
"good": "Correct !",
"bad": "Non !"
},
"nl": {
"good": "Correct!",
"bad": "Fout!"
}
},
"images": {
"arrow_left": GAME_URL + "/arrow_left.png",
"arrow_right": GAME_URL + "/arrow_right.png",
"thumbs_up": GAME_URL + "/good.png",
"thumbs_down": GAME_URL + "/bad.png",
"rewards": {}
}
}Options
String
Background color of the game.
"transparent"
String
Background image of the game (will be on top of the bg_color).
""
Boolean
Display a shadow overlay on the right half of the card.
false
Boolean
Display the arrows icons on the answers area.
true
Boolean
Display the thumbs visuals (after a submission).
true
Integer
Duration of the thumbs' animation (in milliseconds). Only used if "display_thumbs" is set to true.
1500
Boolean
Randomize the order of questions.
false
Boolean
Display an explanation of the answer (if not empty).
false
Int
Delay before the explanation is over and the game switches to the next question (if display_explanation set to true, an explanation isn't empty).
15000
Int
Id of the question (should be unique).
1
String
Question to be asked to the player.
"..."
String
Indicate the good answer (can either be "left", "right" or "both").
"both"
String
Left answer (displayed on the clickable zone).
"..."
String
Right answer (displayed on the clickable zone).
"..."
String
Background color of the card(s).
white / ""
String
Color / background color of the question.
white / rgb(...)
String
Color / background color of the answers zone.
white / rgb(...)
String
Explanation of the answer (only displayed if display_explanation is set to true).
/
String
Title of the explanation screen (if use_explanation set to true).
"Correct!" / "Nope!"
Assets
550 x 580px (full card) or 275 x 580px (half card).
Visual(s) of the card. Can either be single, or two halves (vertically).
150 x 150px (can have other sizes)
Visuals on the sides of the labels.
Last updated