> For the complete documentation index, see [llms.txt](https://doc.lucky-cycle.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doc.lucky-cycle.com/games/index/tinder.md).

# Tinder

{% hint style="warning" %}
Demo: <https://campaigns.lucky-cycle.com/utils/games?game=tinder>
{% endhint %}

1. [#configuration](#configuration "mention")
2. [#options](#options "mention")
3. [#assets](#assets "mention")

### Configuration

<details>

<summary>JSON</summary>

```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&nbsp;?",
          "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&nbsp;?",
          "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&nbsp;!",
      "bad": "Non&nbsp;!"
    },
    "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": {}
  }
}
```

</details>

### Options

<table><thead><tr><th>Key</th><th>Type</th><th>Explanation</th><th>Default</th></tr></thead><tbody><tr><td><pre><code>background_color
</code></pre></td><td>String</td><td>Background color of the game.</td><td>"transparent"</td></tr><tr><td><pre><code>background_image
</code></pre></td><td>String</td><td>Background image of the game <em>(will be on top of the bg_color)</em>.</td><td>""</td></tr><tr><td><pre><code>half_shadow
</code></pre></td><td>Boolean</td><td>Display a shadow overlay on the right half of the card.</td><td>false</td></tr><tr><td><pre><code>display_arrows
</code></pre></td><td>Boolean</td><td>Display the arrows icons on the answers area.</td><td>true</td></tr><tr><td><pre><code>display_thumbs
</code></pre></td><td>Boolean</td><td>Display the thumbs visuals (after a submission).</td><td>true</td></tr><tr><td><pre><code>thumbs_duration
</code></pre></td><td>Integer</td><td>Duration of the thumbs' animation (in milliseconds). <em>Only used if "display_thumbs" is set to <mark style="color:yellow;">true</mark>.</em></td><td>1500</td></tr><tr><td><p></p><pre><code>randomize
</code></pre></td><td>Boolean</td><td>Randomize the order of questions.</td><td>false</td></tr><tr><td><p></p><pre><code>display_explanation
</code></pre></td><td>Boolean</td><td>Display an explanation of the answer (if not empty).</td><td>false</td></tr><tr><td><p></p><pre><code>explanation_duration
</code></pre></td><td>Int</td><td>Delay before the explanation is over and the game switches to the next question (if <em>display_explanation</em> set to true, an explanation isn't empty).</td><td>15000</td></tr><tr><td><pre><code>questions > id
</code></pre></td><td>Int</td><td>Id of the question (should be <mark style="color:$danger;">unique</mark>).</td><td>1</td></tr><tr><td><pre><code>questions > q
</code></pre></td><td>String</td><td>Question to be asked to the player.</td><td>"..."</td></tr><tr><td><pre><code>questions > r
</code></pre></td><td>String</td><td>Indicate the good answer (can either be "left", "right" or "both").</td><td>"both"</td></tr><tr><td><pre><code>questions > left
</code></pre></td><td>String</td><td>Left answer (displayed on the clickable zone).</td><td>"..."</td></tr><tr><td><pre><code>questions > right
</code></pre></td><td>String</td><td>Right answer (displayed on the clickable zone).</td><td>"..."</td></tr><tr><td><pre><code>card_front_background_color / _right_background_color
</code></pre></td><td>String</td><td>Background color of the card(s).</td><td>white / ""</td></tr><tr><td><pre><code>question_color / _background_color
</code></pre></td><td>String</td><td>Color / background color of the question.</td><td>white / rgb(...)</td></tr><tr><td><pre><code>button_color / _background_color
</code></pre></td><td>String</td><td>Color / background color of the answers zone.</td><td>white / rgb(...)</td></tr><tr><td><p></p><pre><code>explanation
</code></pre></td><td>String</td><td>Explanation of the answer (only displayed if <em>display_explanation</em> is set to true).</td><td>/</td></tr><tr><td><p></p><pre><code>texts > good / bad
</code></pre></td><td>String</td><td>Title of the explanation screen (if <em>use_explanation</em> set to true).</td><td>"Correct!" / "Nope!"</td></tr></tbody></table>

### Assets

<table><thead><tr><th>Key</th><th>Size</th><th>Explanation</th><th>Default</th></tr></thead><tbody><tr><td><pre><code>questions > card_front_url / _right_url
</code></pre></td><td>550 x 580px (full card) <mark style="color:red;">or</mark> 275 x 580px (half card).</td><td>Visual(s) of the card. Can either be single, or two halves (vertically).</td><td><a href="https://statics.lucky-cycle.com/files/_games/tinder/question1-1.png">/question1-1.png</a> / <a href="https://statics.lucky-cycle.com/files/_games/tinder/question2-1.png">/question2-1.png</a></td></tr><tr><td><pre><code>arrow_left / arrow_right
</code></pre></td><td>150 x 150px <em>(can have other sizes)</em></td><td>Visuals on the sides of the labels.</td><td><a href="https://statics.lucky-cycle.com/files/_games/tinder/arrow_left.png">/arrow_left.png</a> /<br><a href="https://statics.lucky-cycle.com/files/_games/tinder/arrow_right.png">/arrow_right.png</a></td></tr><tr><td><pre><code>thumbs_up / thumbs_down
</code></pre></td><td>220 x 220px <em>(can have other sizes)</em></td><td>Visuals displayed after submitting an answer.</td><td><a href="https://statics.lucky-cycle.com/files/_games/tinder/good.png">/good.png</a> / <a href="https://statics.lucky-cycle.com/files/_games/tinder/bad.png">/bad.png</a></td></tr></tbody></table>