{{ block title }}
    Part 1: Pattern Puzzles
{{ endblock }}
{{ block content }}
    <style>
        .otree-title {
            background: #EEF5FF;
            font-size: 40px;
            text-align: center;
            padding: 5% 0% 2% 0%;
        }
        .otree-body {
            max-width:1200px
        }
        .otree-btn-next {
            float: right;
            margin-right: 1%;
        }
        p {
            font-size: 20px;
        }

    </style>
    <p>Introduction: You will complete a set of puzzles. On the screen, you will see a set of abstract
    pictures with one piece missing. Among a set of possible choices, you must select which one
    completes the pattern. For example, in the figure below, <b>choice 8</b> completes the pattern and
    would be the correct answer.</p>

    <table style="margin-top:2%; margin-bottom:2%">
        <tr>
            <td style="padding-right:1%"> <img class="image" src="{{ static 'ravens_test/Explanation_q.png' }}" style="width:100%;"/> </td>
            <td style="padding-left:3%">
                <img class="image" src="{{ static 'ravens_test/Explanation_a.png' }}" style="width:100%;"/>
                <p style="font-size:14px;">(During the actual quiz, you will click on the correct answer, this is simply an example to show what it will look like)</p>
            </td>
        </tr>

    </table>

    <p>You will have 8 minutes to complete 12 such puzzles. A timer will be shown in the upper righthand corner as you complete the puzzles.
    </p>

    <p>Payment: After the 8 minutes allocated for this part, time will end. At the end of the experiment,
    the computer will randomly choose 2 puzzles from the 12. Each puzzle has the same chance of
    being chosen. For each of these two puzzles you solved correctly, you will earn 100LD.
    </p>

    <p>Click “next” when you are finished reading to continue to the puzzles.</p>

    {{ formfields }}
    {{ next_button }}

{{ endblock }}