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

{% block title %}
Repeated risks in your bonus task
{% endblock %}

{% block content %}
<div class="col d-none">
    {{ form.compQ_3.errors }}
    {{ form.compQ_4.errors }}
    <input type="hidden" id="compQ_3" name="compQ_3" value="-9999"></input>
    <input type="hidden" id="compQ_4" name="compQ_4" 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>
                Taking the same single risk 
                over money repeatedly (up to five times) works 
                as before:
            </strong> Each single risk is resolved using a 
            coin toss. 
            If you win the coin toss, your accumulated earnings increase 
            by W = {{upTick}}. If you lose, your 
            accumulated earnings decrease by L = {{upTick}}.
        </p>
        
        <p>
            <strong>Please resolve the single risk – 
                taken repeatedly – at least five times.</strong>
            </p>
    </div>
    </div>
    
    <!-- REACT component loaded here -->
    <div class="component-container"></div>

    <div id="triangleExplainSec" class="collapse row" style="margin:0;">
        <div class="col alert alert-info">
            <p>
                We depict repeated risks 
                using the ball triangle on the right.
                You start at the left-most ball. If you take the first single risk and win, 
                you move one step up and to the right; if you take the first single risk and 
                lose, you move one step down and to the right, and so on: whenever you win a single risk, 
                you move up; whenever you lose, you move down. 
            </p>
            
            The various balls therefore represent your accumulated earnings. 
            Please hover your mouse over the balls to see the accumulated earnings at 
            each ball.
            
        </div>
    </div>

    <!-- Comprehension questions -->
    <div id="compQuestSec" class="collapse">
        <hr></hr>
        <div class="row">
            <div class="col">
                <strong>
                    Before we proceed, please answer the following questions:
                </strong>
                <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"> 
            Proceed with further comprehension questions
        </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/triangleExplain.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(<TriangleExplain
        treeCompleted = {() => {triangleCompleted()}}
        />, document.querySelector('.component-container'))

    function triangleCompleted() {
        $('#triangleExplainSec').collapse('show')
        $('#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. What are the accumulated earnings at the middle ball in the fifth column of the repeated risk shown above?",
                    "CorrectText": <div>
                        Your answer was correct. You can verify that, whenever there is a middle ball, the accumulated earnings at this ball are zero.
                    </div>,
                    "WrongText": <div>
                        Your answer was not correct. Please hover over the respective ball to check the accumulated earnings and read the explanations once more.
                    </div>,
                    "CorrectAnswer": 0,
                    "OtreeID": "compQ_3",
                },
                Question_2_data : {
                    "QuestionText": "2. How often has the risk been repeated when you reach a ball in the third column of the ball triangle?",
                    "Options": [[
                        1, "Once"
                    ],
                    [
                        2, "Twice"
                    ],
                    [
                        3, "Thrice"
                    ]
                    ],
                    "CorrectText": "Correct. The single risk has been taken twice when you reach a ball in the third column.",
                    "WrongText": [
                        "This is not correct. Please read the explanations again.",
                        "DUMMY for correct answer -> Should never be visible.",
                        "This is not correct. Please read the explanations again and consider that a single risk always starts at a white ball."
                    ],
                    "CorrectAnswer": 2,
                    "OtreeID": "compQ_4",
                },
            },
            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_3") {
                q1_correct = true;
            } else if (question == "compQ_4") {
                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_3") {
                q1_answers.push(answer);
            } else if (question == "compQ_4") {
                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>
                    <CompQuestionMC 
                        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_3").val = q1_answers
        document.getElementById("compQ_4").val = q2_answers
    }
</script>

{% endblock %}