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

{% block title %}
<div class="row align-items-center">
    <div class="col-9">
        Please answer the question below.
    </div>
    <div id="selectedEveTxt" class="col-3 d-flex justify-content-center align-items-right"
        style="font-size: 16px; font-weight: normal;">
        
        <div class="row">
            <div class="col-6 d-flex align-items-center justify-content-center" style="padding: 0;">
                You selected:
            </div>
            <div class="col-6 d-flex justify-content-center align-items-right">
                <svg class="envelopeHeader"
                    viewBox="0 0 200 100" 
                    stroke="rgb(86,86,86)" stroke-width="2">

                    <!--Outer frame-->
                    <polyline 
                        points="0,0 0,100 200,100 200,0 0,0"
                        style="fill: #fff8ef;"/>

                    <!--Inner lines-->
                    <line x1="0" y1="0" x2="100" y2="35"/>
                    <line x1="200" y1="0" x2="100" y2="35"/>
                    
                    <text 
                        font-size="1.8em"
                        text-anchor="end" 
                        x="95%" y="90%" 
                        fill="black">
                        {{player.participant.type}}
                    </text>
                </svg>
            </div>
        </div>  
    </div>
</div>
{% endblock %}


{% block content %}
<div class="container-fluid bg-light my-3 px-3 py-3 rounded border">
<div class="row">
    <div class="col">
        <p>
            <strong>Important:</strong> If you 
            fail to answer the question correctly, 
            you will not be allowed to participate in the experiment. 
        </p>
        <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 violet 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>


{% if testing %}
{{ formfield 'feedback_attentionQuestion' }}
{% endif %}

<!--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 your favorite color?",
                "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": "violet",
                "OtreeID": "attention_check"
            }

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

    function atnSubmit (correct) {
        if (correct) {
            // 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")
        }

        // 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")
    }

</script>



{% endblock %}