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

{% block title %}
Example of how your bonus file could look like
{% endblock %}

{% block content %}

<div class="row"></div>
<div class="my-3 bg-light px-3 py-3 rounded border">
    <div class="row">
        <div class="container">
            <p>
                The following picture shows an example of the content of a bonus file. Note:
            <ul>
                <li>
                    The very risk shown in Option 1 will not be in your bonus file. It is only an example.
                </li>
                <li>
                    Similarly, the amount in Option 2 can take many values. It can be positive or negative, larger or
                    smaller.
                </li>
            </ul>
            </p>
            <!-- <div class="embed-responsive embed-responsive-customsmall">
                <embed src="{#static pdf_path #}" class="embed-responsive-item" width="100%" height="100%"
                    type="application/pdf">
            </div> -->
            <div class="embed-responsive-customsmall">
                <embed id="showPDF" src="{{static pdf_path }}" type="application/pdf">
            </div>
            <br>
            <p>
                As mentioned, you will get one of the options in your {{user_chosen_decision}}.pdf (plus the endowment)
                as your bonus. The endowment is stated above the two options.
            </p>

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

            <div id="root"></div>
            <p>
                <strong>
                    In the experiment, you make 15 decisions.
                </strong>
                Each decision is for a different possible content of {{user_chosen_decision}}.pdf and you must
                decide about which of the two options therein you want.
            </p>

            <button id="next_page_btn" class="btn btn-primary" disabled>OK. How do I make these decisions?</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 Page extends React.Component {
        render() {
            let Question_1_data = {
                "QuestionText": "If Option 2 above were to determine your bonus, how large would it be?",
                "CorrectText": "That’s correct. The option gives you £0.50. Including the endowment, your bonus is £5.50.",
                "WrongText": <div>
                    <p>
                        Your answer was not correct. Please read the explanations below and answer the question again.
                    </p>
                    <p>
                        Keep in mind that – regardless of whether Option 1 or Option 2 determines your bonus – an endowment is added. The endowment is shown in the first line of the bonus file (above the two options).
                    </p>
                    <p>
                        Please correct your answer.
                    </p>
                </div>,
                "CorrectAnswer": 5.5,
                "OtreeID": "attention_check_4"

            }

            return (
                <div>
                    <AttentionCheck data={Question_1_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 %}