{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}
    Rätselaufgabe
{% endblock %}

{% block content %}
    <style>
    .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    }
    </style>

    <p>Ihre letzte Aufgabe in diesem Experiment besteht darin, einige Bilderrätsel zu lösen. Diese Aufgabe wird manchmal dazu verwendet einen Aspekt von Intelligenz zu messen.
    Die Bilderrätsel unterscheiden sich in ihrem Schwierigkeitsgrad. Insgesamt gibt es 10 verschiedene Bilderrätsel. Unten sehen Sie ein Beispiel für ein solches Bilderrätsel.</p>
    <p>Ihre Aufgabe ist es, aus den angezeigten Graphiken diejenige zu finden, die das Bild richtig vervollständigt. Sobald Sie die richtige Graphik gefunden haben, wählen Sie diese bitte per Mausklick aus.
        Diese Alternative wird dann mit einem grünen Rahmen hervorgehoben.</p>
    <p>Bitte bestätigen Sie Ihre Antwort, indem Sie auf "Nächstes Rätsel" klicken.
        Anschließend erscheint ein neues Rätsel. Sobald Sie einmal Ihre Eingabe bestätigt haben, können Sie nicht mehr zum vorherigen Bilderrätsel zurückgehen.
    Sie haben maximal {{ Constants.minutes_to_complete_raven }} Minuten Zeit um alle Bilderrätsel zu lösen. Die verbleibende Zeit wird Ihnen auf dem Bildschirm angezeigt.</p>
    <p>Bitte klicken Sie auf "Weiter", um zum ersten Bilderrätsel zu gelangen. Erst dann beginnt die Zeit.</p>
    <img src="{% static "my_images/sampleraven1.bmp" %}" style="width:450px;height:500px;" class="center"/> </br> </br>

    {% next_button %}

{% endblock %}