{{ block title }}Lottery task{{ endblock }}

{{ block style }}
<style>
    p {
        text-align:justify
    }
    td, tr {
        text-align: center;
    }
</style>
{{ endblock }}

{% block content %}

    <p>
        In the following task, <b>6 different lotteries</b> are presented on your screen.
        In each of these lotteries, <b>both rewards</b> A and B are <b>equally likely</b>,
        i.e. have a probability of exactly 50%.
        The rewards are denoted in points.
    </p>
    <p>
        You are asked to <b>choose exactly one</b> of the lotteries, which subsequently will be implemented.
        A random generator will determine whether you win reward A or reward B, respectively.
        At the end of the experiment, your reward will be added to you earnings.
    </p>

    <div class="wrapper">
        <div class="card">
            <table class="table">
                <!-- --- Table Header --- -->
                <thead>
                    <tr class="header1">
                        <th>Reward A</th>
                        <th>Reward B</th>
                        <th></th></tr>
                    <tr class="header2">
                        <th>50% Probability</th>
                        <th>50% Probability</th>
                        <th>Your Choice:</th>
                    </tr>
                </thead>
                <!-- --- Table Body --- -->
                <tbody>
                        <tr>
                            <td>{{C.risk_low.0}}</td>
                            <td>{{C.risk_high.0}}</td>
                            <td><input type="radio" name="risk" value="0" required></td>
                        </tr>
                        <tr>
                            <td>{{C.risk_low.1}}</td>
                            <td>{{C.risk_high.1}}</td>
                            <td><input type="radio" name="risk" value="1" required></td>
                        </tr>
                        <tr>
                            <td>{{C.risk_low.2}}</td>
                            <td>{{C.risk_high.2}}</td>
                            <td><input type="radio" name="risk" value="2" required></td>
                        </tr>
                        <tr>
                            <td>{{C.risk_low.3}}</td>
                            <td>{{C.risk_high.3}}</td>
                            <td><input type="radio" name="risk" value="3" required></td>
                        </tr>
                        <tr>
                            <td>{{C.risk_low.4}}</td>
                            <td>{{C.risk_high.4}}</td>
                            <td><input type="radio" name="risk" value="4" required></td>
                        </tr>
                </tbody>
            </table>
        </div>
    </div>

<button class="otree-btn-next btn btn-primary next-button otree-next-button">Submit Choice</button>


{% endblock %}