{{ load static }}
{{ block content }}
<!--External CSS & js-->
<link rel="stylesheet" href="{{ static 'style_sheets/stage_1.css' }}" type="text/css">
<script src="{{ static 'java_scripts/stage_1.js' }}"></script>

{{ block title }}
<b><u>Instructions Quiz</u></b>
{{ endblock }}

<!--Instruction Quiz Body-->
<p>To make sure that everyone understands the instructions for Stage I, please take a moment to answer the following questions. Once everyone has responded correctly, we will proceed to the first round of Stage 1.</p>

<!--Payoff Tables-->
<div class="tables-container">
    <div>
        <p class="payofftableheader">Investors Payoff Table</p>
        <table class="playerpayofftable" style="display: flex; margin: unset">
            <tr>
                <td style="width: 75px;"></td>
                <td class="header" colspan="5">Total Investors (including you)</td>
            </tr>
            <tr>
                <td style="font-style: italic; width: 75px;">Quality</td>
                <td class="row1">1</td>
                <td class="row1">2</td>
                <td class="row1">3</td>
                <td class="row1">4</td>
                <td class="row1">5</td>
            </tr>
            <tr>
                <td class="column1">Low</td>
                {{ for p in pb_table.1 }}
                <td>{{ p }}</td>
                {{ endfor }}
            </tr>
            <tr>
                <td class="column1">Medium</td>
                {{ for p in pb_table.2 }}
                <td>{{ p }}</td>
                {{ endfor }}
            </tr>
            <tr>
                <td class="column1">High</td>
                {{ for p in pb_table.3 }}
                <td>{{ p }}</td>
                {{ endfor }}
            </tr>
        </table>
    </div>
    <div style="margin: 20px"></div>
    <div>
        <p class="payofftableheader">Advisor's Payoff Table</p>
        <table class="playerpayofftable" style="display: flex; margin: unset">
            <tr>
                <td style="width: 75px;"></td>
                <td class="header" colspan="6">Total Investors</td>
            </tr>
            <tr>
                <td  style="font-style: italic; width: 75px;">Quality</td>
                <td class="row1">0</td>
                <td class="row1">1</td>
                <td class="row1">2</td>
                <td class="row1">3</td>
                <td class="row1">4</td>
                <td class="row1">5</td>
            </tr>
            <tr>
                <td class="column1">Low</td>
                {{ for p in pa_table.1 }}
                <td>{{ p }}</td>
                {{ endfor }}
            </tr>
            <tr>
                <td class="column1">Medium</td>
                {{ for p in pa_table.2 }}
                <td>{{ p }}</td>
                {{ endfor }}
            </tr>
            <tr>
                <td class="column1">High</td>
                {{ for p in pa_table.3 }}
                <td>{{ p }}</td>
                {{ endfor }}
            </tr>
        </table>
    </div>
</div>

<!--Instruction Quiz Form Fields-->
<div class="quiz">
    <ol>
        <li>Suppose that the <i>Quality</i> of the investment opportunity in a round is Low. Suppose that the total number of Investors who invested (<i>Total Investors</i>) is 2.</li>
        <ol type="a">
            <li>What is the payoff for a Investor who invested?</li>
            <label><input name="Q1a" type="number"></label>
            <span id="errorQ1a"></span>
            <li>What is the payoff for a Investor who kept the endowment?</li>
            <label><input name="Q1b" type="number"></label>
            <span id="errorQ1b"></span>
            <li>What is the payoff for the Advisor?</li>
            <label><input name="Q1c" type="number"></label>
            <span id="errorQ1c"></span>
        </ol>
        <li>Suppose that the <i>Quality</i> of the investment opportunity in a round is High. Suppose that the total number of Investors who invested (<i>Total Investors</i>) is 4.</li>
        <ol type="a">
            <li>What is the payoff for a Investor who invested?</li>
            <label><input name="Q2a" type="number"></label>
            <span id="errorQ2a"></span>
            <li>What is the payoff for a Investor who kept the endowment?</li>
            <label><input name="Q2b" type="number"></label>
            <span id="errorQ2b"></span>
            <li>What is the payoff for the Advisor?</li>
            <label><input name="Q2c" type="number"></label>
            <span id="errorQ2c"></span>
        </ol>
        <li>Suppose that the <i>Quality</i> in a round is Medium.</li>
        <ol type="a">
            <li>The estimate of investment quality that the Advisor receives Medium is 5/6 chance.</li>
            <label><input name="Q3a" type="radio" value="True"> True</label>
            <br><label><input name="Q3a" type="radio" value="False"> False</label>
            <span id="errorQ3a"></span>
            <li>The estimate of investment quality that the Advisor receives will never be High.</li>
            <label><input name="Q3b" type="radio" value="True"> True</label>
            <br><label><input name="Q3b" type="radio" value="False"> False</label>
            <span id="errorQ3b"></span>
            <li>The Investors can see what estimate the Advisor has received when they make their choices.</li>
            <label><input name="Q3c" type="radio" value="True"> True</label>
            <br><label><input name="Q3c" type="radio" value="False"> False</label>
            <span id="errorQ3c"></span>
        </ol>
        <li>The Advisor will first make their choices for all possible values of <i>Quality</i>, and then the computer will play out the round for them based on their choices and the randomly drawn investment quality and quality estimate.</li>
        <label><input name="Q4" type="radio" value="True"> True</label>
        <br><label><input name="Q4" type="radio" value="False"> False</label>
        <span id="errorQ4"></span>
    </ol>
</div>

<!--Next Button-->
<div class="button">
    <button type="button" onclick="checkAnswers()">Continue</button>
</div>

{{ endblock }}