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

{% block title %}
<div class="row align-items-center">
    <div class="col-9">
        Please answer the questions 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="row d-none">
    <div class="col">
        {{ formfield_errors "compQ_1" }}
        <input type="hidden" id="compQ_1" name="compQ_1" value="-9999"></input>

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

<div class="container-fluid bg-light my-3 px-3 py-3 rounded border">
<div class="row">
    <div class="col">
        Suppose the following option pair was in 
        your Envelope {{player.participant.type}}.
        (It is not. The option pair is only an example.)
    </div>
</div>
<hr>

<div class="row">
    <div class="col-10 offset-1">
        <h5>Exemplary choice situation</h5>
        <table class="table table-bordered border-dark" style="background-color: white">
            <tbody>
                <tr>
                    <td id="option1_header" class="clickable text-center" style="width: 50%">
                        <strong>Risk</strong>
                    </td>
                    <td id="option2_header" class="clickable text-center" style="width: 50%">
                        <strong>Safe amount</strong> 
                    </td>
                </tr>
                <tr>
                    <td id="option1">
                        <div class="riskPicture"></div>
                    </td>
                    <td id="option2">
                        <div id="emptyAmount" class="d-flex align-items-center justify-content-center"
                            style="
                            width: 100%;
                            left: 0px;
                            top: 0px;
                            margin: 0 auto;
                            font-size: 500%;
                            font-weight: 200;"
                        >    
                        £1.00
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>

    </div>
</div>


<hr>

<!--
<div class="row">
    <div class="col">
        <h5>Comprehension questions:</h5>
    </div>
</div>
-->
<div class="row">
    <div class="col">
        <div id="compQ"></div>
    </div>
</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" >Okay. What's next?</button>
    </div>
</div>

</div>


{% if testing %}
{{ formfield 'feedback_compQuestion' }}
{% 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" src="{% static 'js/shellGameResolution.js' %}"></script>

<script type="text/babel">
    ReactDOM.render(
        <ShellGame
            payoffs = {js_vars.payoffs}
            probabilities = {[0.5, 0,5]}
        />, document.querySelector('.riskPicture'))

    class Page extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                q1_correct:false,
                q2_correct:false,
                q3_correct:false,
                q1_answers:[],
                q2_answers:[],
                q3_answers:[],
            },
            this.allCorrect = this.allCorrect.bind(this);
            this.suppliedAnswer = this.suppliedAnswer.bind(this);
        }

        allCorrect(question) {
            let {q1_correct, q2_correct, q3_correct, q1_answers, q2_answers, q3_answers} = this.state

            if (question == "compQ_1") {
                q1_correct = true;
            } else if (question == "compQ_2") {
                q2_correct = true;
            } else if (question == "compQ_3") {
                q3_correct = true;
            }

            if (q1_correct && q2_correct && q3_correct) {
                document.getElementById("next_page_btn").classList.remove("d-none")
                this.props.numReplies(q1_answers, q2_answers, q3_answers)
            }

            this.setState({
                q1_correct, q2_correct, q3_correct
            })
        }

        suppliedAnswer (question, answer) {
            let {q1_answers, q2_answers, q3_answers} = this.state

            if (question == "compQ_1") {
                q1_answers.push(answer);
            } else if (question == "compQ_2") {
                q2_answers.push(answer);
            } else if (question == "compQ_3") {
                q3_answers.push(answer);
            }

            this.setState({
                q1_answers, q2_answers, q3_answers
            })

        }

        render() {
            let Question_1_data = {
                "QuestionText": "1. How many instructions determine your bonus from this experiment?",
                "Options": [[
                    1, "1"
                ],
                [
                    2, "11"
                ],
                [
                    3, "21"
                ]
                ],
                "CorrectText": <div>
                    Correct. While you give instructions for  
                    21 different option pairs, 
                    your bonus will solely be based on 
                    the option pair contained in your 
                    Envelope {{player.participant.type}}.
                    {{if showVerify}}
                        <br></br>
                        <strong>Note:</strong> Verification.pdf shows the option pair contained in each 
                        of the 21 envelopes. 
                        You can thus verify that the option pair in 
                        your Envelope {{player.participant.type}} is selected fairly, exactly as described.
                    {{endif}}
                    </div>
                ,
                "WrongText": <div>
                        No. Please read the explanation below and answer the question again.
                        <br></br>
                        <br></br>
                        In this experiment, you 
                        give instructions for 21 different option pairs. 
                        Your bonus will be determined based on your instruction for the 
                        option pair contained in your Envelope {{player.participant.type}}.
                        Therefore, one of your 21 instructions determines your bonus.
                        Because you do not yet know which option pair is in your 
                        Envelope {{player.participant.type}}, 
                        you should think about each instruction carefully. 
                        It could determine your entire bonus!
                </div>,
                "CorrectAnswer": 1,
                "OtreeID": "compQ_1",
            }

            let Question_2_data = {
                "QuestionText": "2. What is the chance that you receive the high outcome if your bonus is determined by the risk?",
                "Options": [[
                    1, "100%"
                ], [
                    2, "50%"
                ], [
                    3, "20%"
                ], [
                    4, "0%"
                ]],
                "CorrectText": <div>
                    50% is correct. If the risk determines your bonus, you will only 
                    receive the high outcome if you click the shell under which the slip 
                    showing the high outcome is 
                    hidden. 
                    {{if showVerify}}
                        <br></br>
                        <strong>Note:</strong> For the risk that may determine 
                        your bonus, Verification.pdf shows the outcome that 
                        is under the left and right shell, respectively. 
                        By inspecting Verification.pdf, you can thus verify that 
                        each outcome is indeed equally likely.
                    {{endif}}
                    </div>
                ,
                "WrongText": <div>
                        No. If the risk determines your bonus, you will only 
                        receive the high outcome if you click the shell under which the slip 
                        showing the high outcome is 
                        hidden. 
                        Because there are two shells, each outcome is 
                        equally likely. 
                        Please correct your answer.
                </div>,
                "CorrectAnswer": 2,
                "OtreeID": "compQ_2",
            }
           
            let Question_3_data = {
                "QuestionText": "3. Suppose you instructed us to give you the safe amount. Your bonus would be...",
                "Options": [[
                    1, "...the outcome of the risk."
                ], [
                    2, "...the safe amount (£1.00)."
                ], [
                    3, "...the outcome of the risk or the safe amount, depending on chance."
                ]],
                "CorrectText": <div>
                    Correct. 
                    We follow your instruction when determining your bonus and give you the safe amount if
                    you instruct us to do so.
                    {{if showVerify}}
                        <br></br>
                        <strong>Note:</strong> Verification.pdf shows the option pair contained in each envelope. 
                        You can thus verify that the option pair in your 
                        Envelope {{player.participant.type}} is 
                        selected fairly, exactly as described.
                    {{endif}}
                    </div>
                ,
                "WrongText": <div>
                        No. Remember that we follow your instructions and give you what you want.
                </div>,
                "CorrectAnswer": 2,
                "OtreeID": "compQ_3",
            }


            return (
                <div>
                    <CompCheck data={Question_1_data} allCorrect ={this.allCorrect} suppliedAnswer={this.suppliedAnswer}/>
                    <hr></hr>
                    <CompCheck data={Question_2_data} allCorrect = {this.allCorrect} suppliedAnswer={this.suppliedAnswer}/>
                    <hr></hr>
                    <CompCheck data={Question_3_data} allCorrect = {this.allCorrect} suppliedAnswer={this.suppliedAnswer}/>
                </div>
            )
        }
    }

    ReactDOM.render(<Page 
        numReplies = {numReplies}
    />, document.getElementById('compQ'));

    function numReplies (q1_answers, q2_answers, q3_answers) {
        document.getElementById("compQ_1").val = q1_answers
        document.getElementById("compQ_2").val = q2_answers
        document.getElementById("compQ_3").val = q3_answers
    }


</script>



{% endblock %}