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

{% block title %}
Option 2 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_2_a" }}
            <input type="hidden" id="attention_check_2_2_a" name="attention_check_2_2_a" 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 mt-2">
        <div class="col">
            <button id="next_page_btn" class="btn btn-primary px-3" disabled>Got it. Option 1 is risky and Option 2 is
                safe. Could I see <br> a concrete example of what the content of {{user_chosen_decision}}.pdf could
                be?</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": "The safe amount in Option 2 of my bonus file …",
                "Options": [[
                    1, "... is positive."
                ],
                [
                    2, "... is negative."
                ],
                [
                    3, "... can be positive or negative."
                ]
                ],
                "CorrectText": "Correct. The amount can be positive or negative. You will only know the amount at the end of the experiment when you receive the password to your bonus file.",
                "WrongText": "Please read the explanations again and correct your answer.",
                "CorrectAnswer": 3,
                "OtreeID": "attention_check_2_2_a"
            }

            return (
                <div>
                    <p>
                        <strong> Option 2 </strong> is a <strong> safe amount of money</strong>, which can be positive or negative. An example is shown on the right. In this example, the amount is positive.
                        </p>
                    <p>
                        <strong>
                            Before we continue, please complete the following sentence:
                            </strong>
                    </p>
                    <AttentionCheckMultipleChoice data={Question_1_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 %}