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

{% block title %}
Please read carefully
{% endblock %}


{% block content %}
<div class="container-fluid bg-light my-3 px-3 py-3 rounded border">
<div class="row">
    <div class="col">
        <p>
        Most modern theories of decision making recognize the fact that decisions 
        do not take place in a vacuum. 
        Individual preferences and knowledge, along with situational variables can 
        greatly impact the decision process. 
        In order to facilitate our research we are interested in 
        knowing certain factors about you. 
        Specifically, we are interested in whether you actually take the time to read the explanations. 
        So, in order to demonstrate that you have read the explanation, please 
        type 'I read the explanation' (no quotes) in the text box and ignore 
        the exact question being asked.
        </p>
    </div>
</div>

<div class="row">
    <div class="col-6">
        <!--Coin picture-->
        <div class="card" style="min-height: 400px">
            <h5 class="card-header bg-dark text-white text-center">
                Single risk</h5>
            <div class="card-body">
                <table class="table table-borderless" 
                    style="
                        width:100%; 
                        align-self: center; 
                        position: relative; 
                        margin: 0 auto;
                        top: 35%;">
                    <thead>
                        <tr>
                            <th class="text-center">
                                The winning side
                            </th>
                            <th class="text-center">
                                Coin toss outcome
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td id="coinTossGuess" class="align-middle text-center" style="width:50%;">
                                <img src='/static/img/coin_questionmark.png' 
                                style="height:100px;"/>
                            </td>
                            <td id="coinTossOutcome" class="align-middle text-center" style="width:50%;">
                                <img src='/static/img/coin_questionmark.png' 
                                    style="height:100px;"/>
                            </td>
                        </tr>
                                       
                        <tr>
                            <td colSpan="1" style="text-align: right">
                                Win the single risk:
                            </td>
                            <td style="text-align: center">
                            +£{{upTick}}
                            </td>
                        </tr>
                        <tr>
                            <td colSpan="1" style="text-align: right">
                                Lose the single risk:
                            </td>
                            <td style="text-align: center">
                            -£{{upTick}}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div id="atnQ" class="col-6"></div>
</div>

<div class="row mt-3">
    <div class="col center center-align" width="100%">
        <button id="next_page_btn" class="btn btn-primary px-3 d-none" >Continue</button>
        <button id="exit_btn" class="btn btn-primary px-3 d-none" >Okay</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 'js/compr_modules.js' %}"></script>

<script type="text/babel">
    let Question_1_data = {
                "QuestionText": "By how much do your accumulated earnings increase if you win a single risk?",
                "CorrectText": `That’s correct.`,
                "WrongText": `That’s not correct. You therefore did not pass the attention check and will be excluded from the experiment.`,
                "CorrectAnswer": "I read the explanation",
                "OtreeID": "attention_check"
            }

    ReactDOM.render(
        <AttentionCheck 
        data={Question_1_data} 
        submitted={atnSubmit}
        stopEntry = {js_vars.stopEntry}
        />, 
        document.getElementById('atnQ'));

    function atnSubmit (correct) {
        // Prevent re-load of page
        liveSend(correct);
    }

    if (js_vars.submittedAnswer == "True") {
        // Next page button
        document.getElementById("next_page_btn").classList.remove("d-none")
        document.getElementById("attention_check_correct").classList.remove("d-none")
        document.getElementById("attention_check_correct").classList.add("alert", "alert-success")
    } else if (js_vars.submittedAnswer == "False") {
        // Exit page button
        document.getElementById("exit_btn").classList.remove("d-none")
        document.getElementById("attention_check_wrong").classList.remove("d-none")
        document.getElementById("attention_check_wrong").classList.add("alert", "alert-danger")

        // Prevent new input
        document.getElementById("attention_checkinput").disabled = true
    }

    function liveRecv(data) {
        if (data) {
            // Next page button
            document.getElementById("next_page_btn").classList.remove("d-none")
            $("#next_page_btn").click()
        } else {
            // Exit page button
            document.getElementById("exit_btn").classList.remove("d-none")
        }
    }

</script>



{% endblock %}