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

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

<!--Instruction Quiz -->
<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>
{{ include '_static/tables/payoff_tables/stage_1/investor_advisor.html' }}
<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" class="quiz-input-num">
            <li>What is the payoff for a Investor who invested? <label><input size="3" name="Q1a" type="number"></label><span id="errorQ1a"></span></li>
            <li>What is the payoff for a Investor who kept the endowment? <label><input size="3" name="Q1b" type="number"></label><span id="errorQ1b"></span></li>
            <li>What is the payoff for the Advisor? <label><input size="3" name="Q1c" type="number"></label><span id="errorQ1c"></span></li>
        </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"  class="quiz-input-num">
            <li>What is the payoff for a Investor who invested? <label><input size="3" name="Q2a" type="number"></label><span id="errorQ2a"></span></li>
            <li>What is the payoff for a Investor who kept the endowment? <label><input size="3" name="Q2b" type="number"></label><span id="errorQ2b"></span></li>
            <li>What is the payoff for the Advisor? <label><input size="3" name="Q2c" type="number"></label><span id="errorQ2c"></span></li>
        </ol>
        <li>Suppose that the <i>Quality</i> in a round is Medium.</li>
        <ol type="a" class="quiz-input-bol">
            <li>The estimate of investment quality that the Advisor receives Medium is 5/6 chance.
                <label>
                    <select name="Q3a">
                        <option></option>
                        <option value="True">True</option>
                        <option value="False">False</option>
                    </select>
                </label>
                <span id="errorQ3a"></span>
            </li>
            <li>The estimate of investment quality that the Advisor receives will never be High.
                <label>
                    <select name="Q3b">
                        <option></option>
                        <option value="True">True</option>
                        <option value="False">False</option>
                    </select>
                </label>
                <span id="errorQ3b"></span>
            </li>
            <li>The Investors can see what estimate the Advisor has received when they make their choices.
                <label>
                    <select name="Q3c">
                        <option></option>
                        <option value="True">True</option>
                        <option value="False">False</option>
                    </select>
                </label>
                <span id="errorQ3c"></span>
            </li>
        </ol>
        <li class="quiz-input-bol">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.
            <label>
                <select name="Q4">
                    <option></option>
                    <option value="True">True</option>
                    <option value="False">False</option>
                </select>
            </label>
            <span id="errorQ4"></span>
        </li>
    </ol>
</div>

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

{{ endblock }}