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

{% block title %}
Option 1 in your bonus file
{% endblock %}

{% block content %}
<div class="row"></div>
<div class="my-3 bg-light px-3 py-3 rounded border">
    <div class="row">
        <div class="col-6">
            {{ formfield_errors "attention_check_2" }}
            <input type="hidden" id="attention_check_2" name="attention_check_2" value="-9999"></input>
            {{ formfield_errors "attention_check_2_a" }}
            <input type="hidden" id="attention_check_2_a" name="attention_check_2_a" value="-9999"></input>
            {{ formfield_errors "attention_check_2_b" }}
            <input type="hidden" id="attention_check_2_b" name="attention_check_2_b" value="-9999"></input>

            <p>
                <strong> Option 1 </strong> in your bonus file describes a <strong> risk over money</strong>. It has two
                possible outcomes, one positive and one negative. On average, it pays zero.
            </p>
            <p>
                <strong> An example of a risk over money is shown on the right. </strong>
                There is an urn with 100 balls, 20 red and 80 blue. The probability of drawing a red ball is thus 20%
                (20 out of 100) and the probability of drawing a blue ball is 80% (80 out of 100). If a red ball is
                drawn from the urn, you win £6.00. If a blue ball is drawn from the urn, you lose £1.50. This risk is
                not a risk that could be in your bonus file – it is just an example – but suppose for now that it is and
                determines your bonus.
            </p>
            <p>
                <strong>
                    The outcome of the risk (£6.00 or £-1.50) is determined at the end of the experiment, through a
                    “virtual draw”:
                </strong>
            <ul>
                <li>
                    You enter a number between 1 and 100. If you enter 72, for example, you virtually draw ball 72 from
                    the (well-shuffled) urn on the right.
                </li>
                <li>
                    Verification.pdf will reveal whether ball 72 of this urn is red (so that you win £6.00) or blue (so
                    that you lose £1.50).
                </li>
                <li>
                    As you will see, 20 numbers in Verification.pdf are winning numbers (i.e., refer to red balls) and
                    80 numbers are losing numbers (i.e., refer to blue balls). Therefore, your chance of entering a
                    winning number is indeed 20%. </li>
            </ul>
            </p>
        </div>
        <div class="col">
            <img class="img-fluid mx-auto d-block" src="{% static image_path %}"
                class="rounded border border-white mx-auto d-block" />
        </div>
    </div>
    <div class="row">
        <div class="col">
            <div id="root"></div>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <button id="next_page_btn" class="btn btn-primary px-3" disabled>OK. What about Option 2 in my bonus
                file?</button>
        </div>
    </div>
</div>


<!--Load React-->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!--Load Babel-->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<!-- Load Comprehension questions -->
<script type="text/babel" src="{% static 'global/compr_modules.js' %}"></script>

<script type="text/babel">
    class GenButton extends React.Component {
        render() {
            let Question_1_data = {
                "QuestionText": "1. How much does the risk in this example pay on average?",
                "CorrectText": <div>
                    That's correct. This risk &mdash; just as all risks that may be in your bonus file  &mdash; pays zero on average.
                </div>,
                "WrongText": <div>
                    This is not correct. The risk  &mdash; just as all risks that may be in your bonus file  &mdash; pays zero on average.
                </div>,
                "CorrectAnswer": 0,
                "OtreeID": "attention_check_2"
            }

            let Question_2_data = {
                "QuestionText": "2. What is the probability (in percent) that the outcome of the risk is £6.00?",
                "CorrectText": <div>
                    Your answer is correct.
                </div>,
                "WrongText": <div>
                    Your answer was not correct. Please read the explanations once more and answer the question again.
                </div>,
                "CorrectAnswer": 20,
                "OtreeID": "attention_check_2_a"
            }

            let Question_3_data = {
                "QuestionText": "3. Suppose that you determine the outcome of the risk by virtually drawing ball 39. What is the probability (in percent) that the outcome is £6.00?",
                "CorrectText": <div>
                    Your answer is correct. Each number has the same chance of being a winning number.
                </div>,
                "WrongText": <div>
                    Your answer was not correct. Note that each number has the same chance of being a winning number. Please read the explanations once more and answer the question again.
                </div>,
                "CorrectAnswer": 20,
                "OtreeID": "attention_check_2_b"
            }

            return (
                <div>
                    <p>
                        <strong>
                            Verification.pdf lists the winning numbers for all risks that you will face in the experiment and that could be in your bonus file. </strong>
                        For a risk with a 30% probability of winning, for example, Verification.pdf lists 30 winning numbers.
                    </p>
                    <p>
                        <strong>
                            Before we continue, three questions:
                        </strong>
                    </p>
                    <AttentionCheck data={Question_1_data} />
                    <hr></hr>
                    <AttentionCheck data={Question_2_data} />
                    <hr></hr>
                    <AttentionCheck data={Question_3_data} />

                </div >
            )
        }
    }

    ReactDOM.render(<GenButton />, document.getElementById('root'));


</script>

<script>
    let min_time_on_page = js_vars.min_time_on_page
    // Enables the next button after set time
    setTimeout(
        function () {
            document.getElementById("next_page_btn").removeAttribute("disabled")
            // document.getElementById("next_btn_info").style.display = "none"
        },
        min_time_on_page * 1000
    );
</script>

{% endblock %}