{% extends "global/Base.html" %}
{% load staticfiles otree_tags %}

{% block title %}
    Jouw keuze
{% endblock %}

{% block content %}

<p>
Je moet kiezen voor één van de onderstaande zes opties (gok1, gok 2, gok 3 gok 4, gok 5 of gok 6). Elke optie kan twee resultaten hebben: een Laag Resultaat of een Hoog Resultaat. In het schema hieronder zie je voor elke gok staan wat de beloning is die hoort bij het Resultaat. De beloning die je krijgt, zal bepaald worden door de optie waarvoor je kiest en het Resultaat dat vervolgens voor je wordt bepaald door de computer.
</p>
    <p>

Bijvoorbeeld, als je kiest voor Gok 4 en de computer geeft je daarbij Hoog Resultaat dan is jouw beloning voor deze taak 52 munten. Maar als de computer kies voor Laag Resultaat dan krijg je 12 munten. Deze munten worden later omgerekend naar een geldbedrag dat je zult krijgen. De computer kiest willekeurig, net als wanneer je een dobbelsteen zou rollen.
    </p>


<div class='subsubheader'>De opties </div>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 15px;
}
</style>
    <table style = "width:75%">

    <tr>
        <th>

        </th>

        <th>
            Resultaat
        </th>

        <th>
            Beloning
        </th>

        <th>
            Kans
        </th>
    </tr>
        <tbody>
        <tr>
            <th rowspan="2" scope="rowgroup">Gok  1</th>
            <td> Laag: </td> <td>  28 </td> <td> 50% </td>
        </tr>
        <tr>
            <td> Hoog: </td> <td>  28 </td> <td> 50% </td>
        </tr>

        <tr>
            <th rowspan="2" scope="rowgroup">Gok  2</th>
            <td> Laag: </td> <td>  24 </td> <td> 50% </td>
        </tr>
        <tr>
            <td> Hoog: </td> <td>  36 </td> <td> 50% </td>
        </tr>

        <tr>
            <th rowspan="2" scope="rowgroup">Gok  3</th>
            <td> Laag: </td> <td>  20 </td> <td> 50% </td>
        </tr>
        <tr>
            <td> Hoog: </td> <td>  44 </td> <td> 50% </td>
        </tr>

        <tr>
            <th rowspan="2" scope="rowgroup">Gok  4</th>
            <td> Laag: </td> <td>  16 </td> <td> 50% </td>
        </tr>
        <tr>
            <td> Hoog: </td> <td>  52 </td> <td> 50% </td>
        </tr>

        <tr>
            <th rowspan="2" scope="rowgroup">Gok  5</th>
            <td> Laag: </td> <td>  12 </td> <td> 50% </td>
        </tr>
        <tr>
            <td> Hoog: </td> <td>  60 </td> <td> 50% </td>
        </tr>

        <tr>
            <th rowspan="2" scope="rowgroup">Gok 6</th>
            <td> Laag: </td> <td>  2 </td> <td> 50% </td>
        </tr>
        <tr>
            <td> Hoog: </td> <td>  70 </td> <td> 50% </td>
        </tr>

        </tbody>

    </table>

{% formfield player.risk_choice with label="Welke Optie kies jij?" %}


    {% next_button %}

{% endblock %}