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

{% block title %}
Comprehension questions
{% endblock %}

{% block content %}

<div class="col-6 d-none">
    {{ form.compQ_5.errors }}
    {{ form.compQ_6.errors }}as
    {{ form.compQ_7.errors }}
    {{ form.compQ_8.errors }}
    <input type="hidden" id="compQ_5" name="compQ_5" value="-9999"></input>
    <input type="hidden" id="compQ_6" name="compQ_6" value="-9999"></input>
    <input type="hidden" id="compQ_7" name="compQ_7" value="-9999"></input>
    <input type="hidden" id="compQ_8" name="compQ_8" 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">
            <div id="choiceSituation"></div>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <h4> Questions:</h4>
            <div id="compQ"></div>
        </div>
    </div>

    <div class="row">
        <div class="col">
            <button id="next_page_btn" class="btn btn-primary px-3 d-none">
                Please continue
            </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/compr_modules.js' %}"></script>
<script type="text/babel" src="{% static 'js/decisionPanelInstr.js' %}"></script> <!--Note: Important component that shows the choice panel with different pre-made decolorings-->
<script type="text/babel" src="{% static 'js/ballTriangle.js' %}"></script>

<!--React component-->
<script type="text/babel">
    ReactDOM.render(
        <ChoiceSituationWrapper 
            key = {0}
            show = {true}
            whatToShow = {0}
            />
    , document.getElementById('choiceSituation'));
</script>
<!--Comprehension questions-->
<script type="text/babel">
    class Page extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                q1_correct:false,
                q2_correct:false,
                q3_correct:false,
                q4_correct:false,
                q5_correct:false,
                q1_answers:[],
                q2_answers:[],
                q3_answers:[],
                q4_answers:[],
                q5_answers:[],
                Question_1_data : {
                    "QuestionText": "1. How much does the single risk shown above pay if it is won?",
                    "Options": [
                    [
                        1, "£0.10"
                    ],  
                    [
                        2, "£0.20"
                    ],
                    [
                        3, "£0.30"
                    ]
                    ],
                    "CorrectText": "That's correct.",
                    "WrongText": [
                        "That is not correct. Please inspect the risk and correct your answer.",
                        "That is not correct. Please inspect the risk and correct your answer.",
                        "That is not correct. Please inspect the risk and correct your answer.",
                    ],
                    "CorrectAnswer": 1,
                    "OtreeID": "compQ_5",
                },
                Question_2_data : {
                    "QuestionText": "2. How many tasks determine your bonus from the experiment?",
                    "Options": [[
                        1, "1"
                    ],
                    [
                        2, "4"
                    ],
                    [
                        3, "11"
                    ],
                    [
                        4, "I cannot say, as you have not told me yet."
                    ]
                    ],
                    "CorrectText": "That’s correct. While you will complete 11 tasks in the experiment, your bonus will be based on only one of them.",
                    "WrongText": [
                        "No. Please read the following explanations and answer the question again: In this experiment, you are asked to complete 11 tasks. Each of these tasks will be different. Your bonus will be based on the tasks that is identical to the task described in your bonus file. Therefore, only one task matters for your bonus payment. However, because you do not know yet which one this is, you should think about each and every one task very carefully. It could determine your entire bonus from the experiment!",
                        "No. Please read the following explanations and answer the question again: In this experiment, you are asked to complete 11 tasks. Each of these tasks will be different. Your bonus will be based on the tasks that is identical to the task described in your bonus file. Therefore, only one task matters for your bonus payment. However, because you do not know yet which one this is, you should think about each and every one task very carefully. It could determine your entire bonus from the experiment!",
                        "No. Please read the following explanations and answer the question again: In this experiment, you are asked to complete 11 tasks. Each of these tasks will be different. Your bonus will be based on the tasks that is identical to the task described in your bonus file. Therefore, only one task matters for your bonus payment. However, because you do not know yet which one this is, you should think about each and every one task very carefully. It could determine your entire bonus from the experiment!",
                        "No. Please read the following explanations and answer the question again: In this experiment, you are asked to complete 11 tasks. Each of these tasks will be different. Your bonus will be based on the tasks that is identical to the task described in your bonus file. Therefore, only one task matters for your bonus payment. However, because you do not know yet which one this is, you should think about each and every one task very carefully. It could determine your entire bonus from the experiment!",
                    ],
                    "CorrectAnswer": 1,
                    "OtreeID": "compQ_6",
                },
                Question_3_data : {
                    "QuestionText": "3. What are the highest accumulated earnings that you could get when taking the single risk shown above repeatedly for five times?",
                    "Options": [[
                        1, "£0.50"
                    ],
                    [
                        2, "£1.00"
                    ],
                    [
                        3, "£1.50"
                    ],
                    [
                        4, "£2.00"
                    ]
                    ],
                    "CorrectText": "Correct! The highest ball that can be reached corresponds to moving up five times and hence to accumulated earnings of £0.50.",
                    "WrongText": [
                        "Your answer is not correct. The highest balls that can be reached correspond to five up moves in the triangle. Please correct your answer.",
                        "Your answer is not correct. The highest balls that can be reached correspond to five up moves in the triangle. Please correct your answer.",
                        "Your answer is not correct. The highest balls that can be reached correspond to five up moves in the triangle. Please correct your answer.",
                        "Your answer is not correct. The highest balls that can be reached correspond to five up moves in the triangle. Please correct your answer.",
                    ],
                    "CorrectAnswer": 1,
                    "OtreeID": "compQ_7",
                },
                Question_4_data : {
                    "QuestionText": "4. Suppose you moved down at the first ball. What is the probability (in percent) that you will now move up to arrive at the middle node in the third column?",
                    "CorrectText": <div>
                        Your answer is correct. For each single risk, the probability to move up or down is 50 percent (regardless of whether you moved up or down before).
                    </div>,
                    "WrongText": <div>
                        Your answer is not correct. The probability to move up is always 50 percent, at every ball, regardless of whether you moved up or down before.
                    </div>,
                    "CorrectAnswer": 50,
                    "OtreeID": "compQ_8",
                },
            },
            this.allCorrect = this.allCorrect.bind(this);
            this.suppliedAnswer = this.suppliedAnswer.bind(this);
        }
        
        shouldComponentUpdate(nextProps, nextState) {
            return false
        }

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

            if (question == "compQ_5") {
                q1_correct = true;
            } else if (question == "compQ_6") {
                q2_correct = true;
            } else if (question == "compQ_7") {
                q3_correct = true;
            } else if (question == "compQ_8") {
                q4_correct = true;
            }

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

            this.setState({
                q1_correct, q2_correct, q3_correct, q4_correct
            })
            
        }
        
        suppliedAnswer (question, answer) {
            let {q1_answers, 
                q2_answers,
                q3_answers,
                q4_answers,
            } = this.state
            
            if (question == "compQ_5") {
                q1_answers.push(answer);
            } else if (question == "compQ_6") {
                q2_answers.push(answer);
            } else if (question == "compQ_7") {
                q3_answers.push(answer);
            } else if (question == "compQ_8") {
                q4_answers.push(answer);
            }
            
            this.setState({
                q1_answers, q2_answers, q3_answers, q4_answers
            })
        }

        render() {
            return (
                <>
                    <CompQuestionMC 
                        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}/>
                    <hr></hr>
                    <CompQuestionMC 
                        data={this.state.Question_3_data} 
                        allCorrect ={this.allCorrect} 
                        suppliedAnswer={this.suppliedAnswer}/>
                    <hr></hr>
                    <CompQuestion 
                        data={this.state.Question_4_data} 
                        allCorrect = {this.allCorrect} 
                        suppliedAnswer={this.suppliedAnswer}/>
                </>
            )
        }
    }

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

    function numReplies (q1_answers, q2_answers, q3_answers, q4_answers) {
        document.getElementById("compQ_5").val = q1_answers
        document.getElementById("compQ_6").val = q2_answers
        document.getElementById("compQ_7").val = q3_answers
        document.getElementById("compQ_8").val = q4_answers
    }
</script>

{% endblock %}