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

{% block title %}
A single risk over money
{% endblock %}

{% block content %}
<div class="col-6 d-none">
    {{ form.compQ_1.errors }}
    {{ form.compQ_2.errors }}
    <input type="hidden" id="compQ_1" name="compQ_1" value="-9999"></input>
    <input type="hidden" id="compQ_2" name="compQ_2" value="-9999"></input>
</div>

<div class="row my-3 bg-light px-3 py-3 rounded border">
<div class="col">
    <div class="row">
        <div class="col">
            <p>
                <strong>This experiment is about taking a single risk 
                    over money repeatedly (up to five times)</strong>. 
                Each single risk in this experiment has two equally likely outcomes: 
                winning or losing an amount of money. On average, each risk pays zero. 
            </p>
    
            <p>
                <strong>Each single risk is resolved as follows:</strong> 
                Please toss a coin and enter whether heads ('H') or tails ('T') came up.
                (Alternatively, you can 
                simply enter 'H' or 'T' according to your choice).
                Each coin toss has a winning side, which
                you can 
                view in Verification.pdf after the experiment (if you downloaded it).
                If the coin toss outcome you enter equals the winning side, you win
                the single risk. 
                Otherwise, you lose the single risk. 
                Thus, your chance of winning the single risk is 
                50 percent.
            </p>
    
            <p>
                <strong>We
                depict single risks using the graphic below on the right. </strong> 
                When taking a single risk, imagine starting from the left white ball.
                Winning the risk moves you up and you receive W = {{upTick}}. 
                Losing the risk moves 
                you down and you pay L = {{downTick}}. These amounts 
                differ for your actual tasks. 
            </p>
    
            <p>
                <b>Please resolve at least four single risks.</b>
            </p>
        </div>
    </div>

    <!-- REACT component loaded here -->
    <div class="component-container"></div>

    <!-- Verification information -->
    <div id="verificationInfo" class="row d-none">
        <div class="col">
        <div class="alert alert-info"> 
            <b>Note:</b> Verification.pdf shows the winning side for all 
            risks that determine your bonus. 
            All risks during the experiment are resolved fairly and exactly as described. 
            </br>
            During the explanations, risks may not be resolved randomly for illustrative purposes. 
        </div>
        <button type="button" id="noExplanationsBtn" class="btn btn-primary px-3" 
            onClick="showCompQuestions()"> Proceed with comprehension questions
        </button>
        </div>
    </div>

    <!-- Comprehension questions -->
    <div id="compQuestSec" class="collapse">
        <hr></hr>
        <div class="row">
            <div class="col">
                <strong>
                    Please answer two short questions below. 
                </strong>
                    If you answer a question wrong, you will have to wait for a certain time.
                <div id="compQ"></div>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col">
            <button id="next_page_btn" class="btn btn-primary px-3 d-none">
                What are repeated risks?
            </button>
        </div>
    </div>
</div>
</div>

{% if testing %}
    <button id="skipBtn" class="btn btn-secondary px-3">
    Skip for testing</button>
{% endif %}

<!--Load Components-->
<script type="text/babel" src="{% static 'js/coinTossExplain.js' %}"></script>
<script type="text/babel" src="{% static 'js/ballTriangle.js' %}"></script>
<script type="text/babel" src="{% static 'js/compr_modules.js' %}"></script>

<script type="text/babel">

    ReactDOM.render(
        <CoinTossPanel
            fourCoinTosses = {() => {fourCoinTosses()}}
            />, document.querySelector('.component-container'))

    function fourCoinTosses() {
        document.getElementById("verificationInfo").classList.remove("d-none")
        document.getElementById("verificationInfo").scrollIntoViewIfNeeded({
                    block: "end", 
                    inline: "nearest",
                    behaviour: "smooth",
                })
    }
    
    function showCompQuestions() {
        document.getElementById("noExplanationsBtn").classList.add("d-none")
        $('#compQuestSec').collapse('show')
    }
</script>

<!--Comprehension questions-->
<script type="text/babel">
    class Page extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                q1_correct:false,
                q2_correct:false,
                q1_answers:[],
                q2_answers:[],
                Question_1_data : {
                    "QuestionText": "1. How much do single risks in this experiment pay on average?",
                    "CorrectText": <div>
                        That's correct. All risks that may be in your bonus file pay zero on average.
                    </div>,
                    "WrongText": <div>
                        That is not correct. All risks in this experiment pay zero on average.
                    </div>,
                    "CorrectAnswer": 0,
                    "OtreeID": "compQ_1",
                },
                Question_2_data : {
                    "QuestionText": "2. What is the probability (in percent) that you win a single risk?",
                    "CorrectText": <div>
                        Your answer was correct. Please click the button below to proceed.
                    </div>,
                    "WrongText": <div>
                        Your answer was not correct. Please read the explanations once more and answer the question again.
                    </div>,
                    "CorrectAnswer": 50,
                    "OtreeID": "compQ_2",
                },
            },
            this.allCorrect = this.allCorrect.bind(this);
            this.suppliedAnswer = this.suppliedAnswer.bind(this);
        }
        
        shouldComponentUpdate(nextProps, nextState) {
            return false
        }

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

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

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

            
            this.setState({
                q1_correct, q2_correct
            })
            
        }
        
        suppliedAnswer (question, answer) {
            let {q1_answers, q2_answers} = this.state
            
            if (question == "compQ_1") {
                q1_answers.push(answer);
            } else if (question == "compQ_2") {
                q2_answers.push(answer);
            }
            
            this.setState({
                q1_answers, q2_answers
            })
        }

        render() {
            return (
                <>
                    <CompQuestion 
                        data={this.state.Question_1_data} 
                        allCorrect ={this.allCorrect} 
                        suppliedAnswer={this.suppliedAnswer}/>
                    <hr></hr>
                    <CompQuestion 
                        data={this.state.Question_2_data} 
                        allCorrect = {this.allCorrect} 
                        suppliedAnswer={this.suppliedAnswer}/>
                </>
            )
        }
    }

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

    function numReplies (q1_answers, q2_answers) {
        document.getElementById("compQ_1").val = q1_answers
        document.getElementById("compQ_2").val = q2_answers
    }
</script>

{% endblock %}