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

{% block title %}
<div class="row align-items-center">
    <div class="col-9">
        How you can verify that your bonus is 
        </br>determined fairly, exactly as described
    </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_4" }}
        <input type="hidden" id="compQ_4" name="compQ_4" value="-9999"></input>

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

<div class="bg-light my-3 px-3 py-3 rounded border">
    <div class="row">
        <div class="col">
            Verification.pdf shows ...
            <ol style="margin-top:16px; margin-bottom: 16px;">
                <li> ... the option pair 
                    in each 
                    envelope that you could have selected. 
                    </br>
                    <strong>
                        Thus, the option pair 
                        in your Envelope {{player.participant.type}}
                        was selected fairly.
                    </strong>
                </li>
                </br>
                <li> ... the lifted shells (i.e., which outcome is under which shell). 
                    </br>
                    <strong>
                        Thus, the outcome of the risk is determined fairly 
                        and  
                        both outcomes are equally likely.
                    </strong>
                </li>
            </ol>  

            <p>
                Because you could download Verification.pdf before 
                selecting an envelope, before giving instructions, 
                and before lifting a shell, its content 
                cannot depend on your envelope, on your instructions,
                or on the shell that you lift.
            </p>
        </div>
    </div>  


    <div class="row">
        <div class="col">
            <hr></hr>
            <div id="pleaseSelect" class="alert alert-info">
                Please answer the questions below before continuing.
            </div>
            <div id="compQ"></div>
        </div>
    </div>

    <button id="next_page_btn" 
        class="btn btn-primary mt-2">
        Continue
    </button>

</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">
    class Page extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                q4_correct:false,
                q5_correct:false,
                q4_answers:[],
                q5_answers:[],
            },
            this.allCorrect = this.allCorrect.bind(this);
            this.suppliedAnswer = this.suppliedAnswer.bind(this);
        }

        allCorrect(question) {
            let {q4_correct, q5_correct, q4_answers, q5_answers} = this.state

            if (question == "compQ_4") {
                q4_correct = true;
            } else if (question == "compQ_5") {
                q5_correct = true;
            }

            if (q4_correct && q5_correct) {
                document.getElementById("next_page_btn").classList.remove("d-none")
                this.props.numReplies(q5_answers, q4_answers)
            }

            this.setState({
                q4_correct, q5_correct
            })
        }

        suppliedAnswer (question, answer) {
            let {q4_answers, q5_answers} = this.state

            if (question == "compQ_4") {
                q4_answers.push(answer);
            } else if (question == "compQ_5") {
                q5_answers.push(answer);
            }

            this.setState({
                q4_answers, q5_answers
            })

        }

        render() {
            let Question_4_data = {
                "QuestionText": "1. Can you verify that we do not give you an option pair with a low safe amount on purpose?",
                "Options": [[
                    1, "Yes, I can. I could download Verification.pdf before selecting an envelope and it shows the option pair belonging to each envelope."
                ], [
                    2, "Yes, I can. I could download Verification.pdf before selecting a shell and it shows the lifted shells."
                ], [
                    3, "No, I cannot and must trust you."
                ]],
                "CorrectText": <div>
                    Correct. 
                    Verification.pdf shows the option pairs belonging to each envelope. 
                    If we would give you an option pair with a low safe amount regardless of the envelope that you selected, 
                    this untruthfulness would become apparent. 
                    </div>
                ,
                "WrongText": <div>
                        No. Please read the explanation above and answer the question again.
                        Remember that the safe amount depends on the option pair in 
                        your Envelope {{player.participant.type}}.
                </div>,
                "CorrectAnswer": 1,
                "OtreeID": "compQ_4",
            }

            let Question_5_data = {
                "QuestionText": "2. Can you verify that we do not give you the lower outcome from the risk on purpose?",
                "Options": [[
                    1, "Yes, I can. I could download Verification.pdf before selecting an envelope and it shows the option pair belonging to each envelope."
                ], [
                    2, "Yes, I can. I could download Verification.pdf before selecting a shell and it shows the lifted shells."
                ], [
                    3, "No, I cannot and must trust you."
                ]],
                "CorrectText": <div>
                    Correct. 
                    Verification.pdf shows the lifted shells. If 
                    we would give you the low outcome regardless of the 
                    shell that you lift, this untruthfulness would become apparent. 
                    </div>
                ,
                "WrongText": <div>
                        No. Please read the explanation above and answer the question again.
                        Remember that the outcome of the risk is determined by 
                        the shell game.
                </div>,
                "CorrectAnswer": 2,
                "OtreeID": "compQ_5",
            }
           
            return (
                <div>
                    <CompCheck data={Question_4_data} allCorrect ={this.allCorrect} suppliedAnswer={this.suppliedAnswer}/>
                    <hr></hr>
                    <CompCheck data={Question_5_data} allCorrect = {this.allCorrect} suppliedAnswer={this.suppliedAnswer}/>
                </div>
            )
        }
    }

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

    function numReplies (q4_answers, q5_answers) {
        document.getElementById("compQ_4").val = q4_answers
        document.getElementById("compQ_5").val = q5_answers
    }

</script>


{% endblock %}