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

{% block title %}
Comprehension questions 1/2
{% endblock %}

{% block content %}


<div class="row"></div>
<div class="my-3 bg-light px-3 py-3 rounded border">
    <div class="container">
        <div class="row ">
            <div class="col-6">
                {{ formfield_errors "attention_check_1" }}
                <input type="hidden" id="attention_check_1" name="attention_check_1" value="-9999"></input>

                {{ formfield_errors "attention_check_1_b" }}
                <input type="hidden" id="attention_check_2" name="attention_check_1_b" value="-9999"></input>

                {{ formfield_errors "attention_check_1_c" }}
                <input type="hidden" id="attention_check_3" name="attention_check_1_c" value="-9999"></input>

                {{ formfield_errors "attention_check_1_d" }}
                <input type="hidden" id="attention_check_4" name="attention_check_1_d" value="-9999"></input>

                <div id="root"></div>
            </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">
                <button id="next_page_btn" class="btn btn-primary" disabled>Next</button>
            </div>
        </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 Page extends React.Component {
        render() {
            let Question_1_data = {
                "QuestionText": "How many decisions determine your bonus from this experiment?",
                "CorrectText": `That’s correct. While you will make 15 decisions in the experiment, your bonus will be based on only one of them. Your bonus will be based on the decision in which Option 1 is identical to Option 1 in your bonus file, ${js_vars.user_chosen_decision}.pdf.`,
                "WrongText": <div>
                    <p>
                        No. Please read the explanation below and answer the question again.
                    </p>
                    <p>
                        In this experiment, you are asked to make 15 decisions. In each of these decisions, Option 1 is different. Your bonus will be based on the decision in which Option 1 is identical to Option 1 in your bonus file (i.e., in {{ user_chosen_decision }}.pdf). Therefore, only one decision will matter for your bonus payment. However, because you do not know yet which decision matters for your bonus payment, you should think about each and every single decision very carefully. It could determine your entire payment from the experiment!
                    </p>
                </div>,
                "CorrectAnswer": 1,
                "OtreeID": "attention_check_1"
            }

            let Question_2_data = {
                "QuestionText": "How much does the risk pay on average?",
                "CorrectText": "Correct. On average, the risk pays a bonus of £0. Note: All risks in this experiment pay, on average, zero.",
                "WrongText": <div>
                    <p>
                        No, on average, the risk pays a bonus of £0. Note: All risks in this experiment pay, on average, zero.
                    </p>
                </div>,
                "CorrectAnswer": 0,
                "OtreeID": "attention_check_2"
            }

            let Question_3_data = {
                "QuestionText": "Which of the following is true?",
                "Options": [[
                    1, "The chance of winning is larger."
                ],
                [
                    2, "The chance of losing is larger."
                ],
                [
                    3, "It is equally likely to win and to lose."
                ]
                ],
                "CorrectText": "Correct. Both outcomes, winning £3.00 and losing £3.00, are equally likely.",
                "WrongText": <div>
                    <p>
                        Your answer was not correct. Please read the explanation below and answer the question again.
                    </p>
                    <p>
                        Both outcomes, winning £3.00 and losing £3.00, have a probability of 50%. That is, both outcomes are equally likely.                </p>
                </div>,
                "CorrectAnswer": 3,
                "OtreeID": "attention_check_3",
            }

            let Question_4_data = {
                "QuestionText": "If this risk determines your bonus, what is the probability that your final bonus is positive?",
                "Options": [[
                    1, "100%"
                ], [
                    2, "50%"
                ], [
                    3, "20%"
                ], [
                    4, "0%"
                ]],
                "CorrectText": "100% is correct, because an endowment will always be added such that your overall bonus is positive. Including an endowment of £5.00, for example, your bonus would be £8.00 with 50% probability and £2.00 with 50% probability.",
                "WrongText": <div>
                    <p>
                        No. Remember that an endowment is always part of your bonus.
                    </p>
                </div>,
                "CorrectAnswer": 1,
                "OtreeID": "attention_check_4",
            }


            return (
                <div>
                    <AttentionCheck data={Question_1_data} />
                    <p>
                        For the remaining comprehension questions, please look at the risk displayed to the right.
                    </p>
                    <AttentionCheckMultipleChoice data={Question_3_data} />
                    <hr></hr>
                    <AttentionCheck data={Question_2_data} />
                    <hr></hr>
                    <AttentionCheckMultipleChoice data={Question_4_data} />
                </div>
            )
        }
    }

    ReactDOM.render(<Page />, 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 %}