{{ block styles }}
<link href="{{ static 'bret/css/custom.css' }}" rel="stylesheet"/>
{{ endblock }}


{{ block title }}
<div style="text-align: center;">
Game Instructions: Avoid the Bomb! 💣
</div>
{{ endblock }}

{{ block content }}

<div class="consent">
    <p>
        Next, you will see a {{ NUM_ROWS }} × {{ NUM_COLS }} matrix
        with a total of {{ num_boxes }} boxes on your screen.
    </p><br>

    <div style="text-align:center;">
        <img src="{{ static 'BRET_Blank_Matrix_Copy.png' }}" width="240">
        <p><strong><p style="color: blue;">{{ NUM_ROWS }} × {{ NUM_COLS }} matrix in the game</p></strong></p>
    </div>
    <br>

    <p>
        To start the game, you can select any box you want.
        You may choose as many boxes as you like.
        Selected boxes will be marked with a checkmark.
        For each box you select, you will earn Rp {{ BOX_VALUE }}.
    </p><br>

    <div style="text-align:center;">
        <img src="{{ static 'BRET_Chosen_Matrix_2_Copy.png' }}" width="240">
        <p><strong><p style="color: blue;">Select boxes by clicking on them.</p></strong></p>
    </div><br>

    <p>
        If you change your mind, you can click on a selected box again
        to undo your selection.
   </p>

    <div style="text-align:center;">
        <img src="{{ static 'BRET_Undo_Matrix_2_Copy.png' }}" width="240">
        <p><strong><p style="color: blue;">You can undo your selection by clicking the box again.</p></strong></p>
    </div><br>


    <p>
        <span style="color: red;">
            However, one of the boxes contains <strong>a bomb</strong>
            that will destroy all the boxes you have collected.
        </span>
        The bomb is placed randomly with equal probability
        across all boxes. Its position is reshuffled in every round.
    </p>

    <div style="text-align:center;">
        <img src="{{ static 'BRET_Bomb_Matrix_Copy.png' }}" width="240">
        <p><strong><p style="color: blue;">The image above shows that the bomb 💣 was selected.</p></strong></p>
    </div><br>

    <p>
        Your task is to select any boxes you want.
        Once you are satisfied with your choices, press the <strong style="color: blue;"><em>"Stop"</em></strong>
        button at any time. Then press <strong style="color: blue;"><em>"Solve"</em></strong> to reveal
        what is behind the selected boxes.
        If the box containing the bomb is among your selections,
        the bomb will explode and you will receive nothing.
        However, if you only select boxes without the bomb,
        you will receive a bonus equal to the total value you have collected.
    </p>

    <p>
        There is no time limit for this game, so you can take your time
        to think before making your selections.
    </p>

    <div style="text-align:center;">
        <img src="{{ static 'BRET_Stop_Matrix_Copy.png' }}" width="240">
        <p><strong><p style="color: blue;">After selecting your boxes, click "Stop".</p></strong></p>
    </div>

    <div style="text-align:center;">
        <img src="{{ static 'BRET_Solved_Matrix_Copy.png' }}" width="240">
        <p><strong><p style="color: blue;">After pressing "Stop", click "Solve" to reveal the boxes.</p></strong></p>
    </div><br>

    <p>
        You will be given two (2) practice rounds to try the game
        before starting the actual rounds.
        The results from the practice rounds will <strong>not</strong> be included
        in your final payment.
    </p>

    <p>Click "Next" to proceed to the practice rounds.</p>

</div>

<button class="btn btn-primary btn-lg" type="submit">
Start Practice Rounds
</button>

{{ endblock }}