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

{% block title %}
    게임 선택
{% endblock %}
{% block styles %}
<style>
    .center {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
    }
        .centerT {
            margin: auto;
            width: 90%;
            border: 3px solid #73AD21;
            text-align: center;
        }
        table#t01 {
            width: 100%;
        }
        table#t01 td, th {
            border: 1px solid #000000;
            padding: 10px;
            border-collapse: collapse;
        }
        table#t01 tr:nth-child(even) {
            background-color: #dddddd;
        }

</style>
{% endblock %}
{% block content %}
<div class="card bg-light instructions">
    <div class="card-body">

    <h3>
        지시문
    </h3>

    <p>
        이 세션에서, 귀하는 5가지 서로 다른 게임 중 귀하가 하고싶은 게임을 선택할 것입니다. 5가지의 서로 
        다른 게임들은 아래의 표에 나열되어 있습니다. 귀하는 이 게임들 중 반드시 오직 하나의 게임을 선택해야 
        합니다. 각 게임은 발생 확률이 각각 지정된 두 개의 가능한 결과(사건 A 또는 사건 B)를 가지고 있습니다. 
        귀하가 받게 되는 보상은 1) 귀하가 어떤 게임을 선택하는지와 2) 두 가지 가능한 사건 중 어떤 것이 
        발생하는지에 의해 결정됩니다. 예를 들어, 만약 귀하가 4번 게임을 선택하고 사건 A가 발생한다면, 귀하는 40 점을 
        받을 것입니다. 만약 사건 B가 발생한다면, 귀하는 4 점을 받을 것입니다. 각각의 게임에 대해서, 각
        사건은 50%의 확률로 발생할 수 있습니다. 여기서 귀하가 받게 될 최종 보수는 점수로
        표시되는데, <strong> 10점당 1,000원의 교환 비율</strong>로 계산될 것입니다.

    </p>
        <div class="centerT"><table id="t01">
            <tr>
                <th>게임</th>
                <th>사건</th>
                <th>보수</th>
                <th>확률</th>
                <th>귀하의 선택</th>
            </tr>
            <tr>
                <td rowspan="2" bgcolor="#E2E2E2">1</td>
                <td>A</td>
                <td>16</td>
                <td>50%</td>
                <td rowspan="2" bgcolor="white">{{ form.gamble_number.0 }}</td>
            </tr>
            <tr>
                <td>B</td>
                <td>16</td>
                <td>50%</td>
            </tr>
            <tr>
                <td rowspan="2" bgcolor="#E2E2E2">2</td>
                <td>A</td>
                <td>24</td>
                <td>50%</td>
                <td rowspan="2" bgcolor="white">{{ form.gamble_number.1 }}</td>
            </tr>
            <tr>
                <td>B</td>
                <td>12</td>
                <td>50%</td>
            </tr>
            <tr>
                <td rowspan="2" bgcolor="#E2E2E2">3</td>
                <td>A</td>
                <td>32</td>
                <td>50%</td>
                <td rowspan="2" bgcolor="white">{{ form.gamble_number.2 }}</td>
            </tr>
            <tr>
                <td>B</td>
                <td>8</td>
                <td>50%</td>
            </tr>
            <tr>
                <td rowspan="2" bgcolor="#E2E2E2">4</td>
                <td>A</td>
                <td>40</td>
                <td>50%</td>
                <td rowspan="2" bgcolor="white">{{ form.gamble_number.3 }}</td>
            </tr>
            <tr>
                <td>B</td>
                <td>4</td>
                <td>50%</td>
            </tr>
            <tr>
                <td rowspan="2" bgcolor="#E2E2E2">5</td>
                <td>A</td>
                <td>48</td>
                <td>50%</td>
                <td rowspan="2" bgcolor="white">{{ form.gamble_number.4 }}</td>
            </tr>
            <tr>
                <td>B</td>
                <td>0</td>
                <td>50%</td>
            </tr>
        </table>
    {{ form.gamble_number.errors }}
</div>
</div>
</div>
    <div align="center">{% next_button %}</div>

{% endblock %}