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

{% block title %}
Another question
{% endblock %}


{% block content %}
<div class="container-fluid bg-light my-3 px-3 py-3 rounded border">
<div class="row">
    <div class="col">
        <p>
        The question below is about the following problem. 
        In experiments like ours, there are sometimes participants 
        who do not carefully read the questions and just quickly click through the experiment. 
        This means that there are a lot of random answers which compromise the 
        results of research studies. 
        To show that you read our questions carefully, 
        please enter 'enough' (no quotes) as your answer to the next question.
        </p>
    </div>
</div>

<div id="atnQ"></div>

<div class="row">
    <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": "What is the probability (in percent) that 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": "enough",
                "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")
    }

    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 %}