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

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

{% block content %}

<div class="col-6 d-none">
    {{ form.compQ_1.errors }}
    {{ form.compQ_2.errors }}
    {{ form.compQ_3.errors }}
    {{ form.compQ_4.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>
    <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">
            For answering the questions on this page, suppose that your bonus file contains the
            "Decoloring Task" and that you instructed the computer as shown on the right.
        </div>
    </div>

    <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">
                Let me start
            </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>
<script type="text/babel" src="{% static 'js/ballTriangle.js' %}"></script>
<script type="text/babel" src="{% static 'js/nodeDecision.js' %}"></script>

<!--React component-->
<script type="text/babel">
    ReactDOM.render(
        <ChoiceSituationWrapper 
            show = {true}
            whatToShow = {4}
            />
    , 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,
                q1_answers:[],
                q2_answers:[],
                q3_answers:[],
                q4_answers:[],
                Question_1_data : {
                    "QuestionText": "1. The black ball in the second column instructs the computer to...",
                    "Options": [[
                        1, "... continue risk-taking."
                    ],
                    [
                        2, "... stop risk-taking and give you the accumulated earnings of £-0.10."
                    ],
                    [
                        3, "... decide randomly what to do."
                    ]
                    ],
                    "CorrectText": "That's correct. Coloring a ball black instructs the computer to stop risk-taking at this ball and give you the accumulated earnings.",
                    "WrongText": [
                        "That is not correct. Please note that black balls instruct the computer to stop risk-taking.",
                        "That is not correct. Please note that black balls instruct the computer to stop risk-taking.",
                        "That is not correct. Please note that black balls instruct the computer to stop risk-taking.",
                    ],
                    "CorrectAnswer": 2,
                    "OtreeID": "compQ_1",
                },
                Question_2_data : {
                    "QuestionText": "2. What are the highest accumulated earnings that you could get if the single risk was taken repeatedly following the instructions shown above?",
                    "Options": [[
                        1, "£0.30"
                    ],
                    [
                        2, "£0.40"
                    ],
                    [
                        3, "£0.50"
                    ],
                    [
                        4, "£0.60"
                    ]
                    ],
                    "CorrectText": "Your answer is correct. The highest accumulated earnings are obtained when the single risk is won four times. This yields accumulated earnings of £0.40.",
                    "WrongText": [
                        "Your answer is not correct. The decoloring shown above instructs the computer to take at most four single risks. Please reconsider your answer.",
                        "Your answer is not correct. The decoloring shown above instructs the computer to take at most four single risks. Please reconsider your answer.",
                        "Your answer is not correct. The decoloring shown above instructs the computer to take at most four single risks. Please reconsider your answer.",
                        "Your answer is not correct. The decoloring shown above instructs the computer to take at most four single risks. Please reconsider your answer.",
                    ],
                    "CorrectAnswer": 2,
                    "OtreeID": "compQ_2",
                },
                Question_3_data : {
                    "QuestionText": "3. How often will the single risk be repeated at most according to the instructions shown above?",
                    "Options": [[
                        1, "Four times."
                    ],
                    [
                        2, "Two times."
                    ],
                    [
                        3, "Three times."
                    ],
                    [
                        4, "I cannot say, as it depends on the outcome of single risks."
                    ]
                    ],
                    "CorrectText": "Correct! The single risk will be taken four times at most.",
                    "WrongText": [
                        "Your answer is not correct. Please note that, whenever a black ball is reached, risk-taking stops. If a white ball is reached, risk-taking continues.",
                        "Your answer is not correct. Please note that, whenever a black ball is reached, risk-taking stops. If a white ball is reached, risk-taking continues.",
                        "Your answer is not correct. Please note that, whenever a black ball is reached, risk-taking stops. If a white ball is reached, risk-taking continues.",
                        "Your answer is not correct. Please note that, whenever a black ball is reached, risk-taking stops. If a white ball is reached, risk-taking continues.",
                    ],
                    "CorrectAnswer": 1,
                    "OtreeID": "compQ_3",
                },
                Question_4_data : {
                    "QuestionText": "4. Please consider the path shown below. For this path, the white-black-gradient ball in the third column instructs the computer to ...",
                    "Options": [[
                        1, "... continue risk-taking."
                    ],
                    [
                        2, "... stop risk-taking and give you the accumulated earnings of £0.00."
                    ],
                    [
                        3, "... decide randomly what to do."
                    ]
                    ],
                    "CorrectText": 'Your answer is correct. The instruction at the white-black-gradient ball is to continue risk-taking for the path "first up, then down," and to stop risk-taking for the path "first down, then up."',
                    "WrongText": [
                        'Your answer is not correct. The instruction at the white-black-gradient ball is shown on the right. Specifically, the instruction is to continue risk-taking for the path "first up, then down," and to stop risk-taking for the path "first down, then up." Please reconsider your answer.',
                        'Your answer is not correct. The instruction at the white-black-gradient ball is shown on the right. Specifically, the instruction is to continue risk-taking for the path "first up, then down," and to stop risk-taking for the path "first down, then up." Please reconsider your answer.',
                        'Your answer is not correct. The instruction at the white-black-gradient ball is shown on the right. Specifically, the instruction is to continue risk-taking for the path "first up, then down," and to stop risk-taking for the path "first down, then up." Please reconsider your answer.',
                        ],
                    "CorrectAnswer": 1,
                    "OtreeID": "compQ_4",
                },
                pdStop: {
                    "choice_4_0":"Continue",
                    "choice_4_1":"Stop",
                },
                currentNode: 4,
            },
            this.allCorrect = this.allCorrect.bind(this);
            this.suppliedAnswer = this.suppliedAnswer.bind(this);
            this.componentDidMount = this.componentDidMount.bind(this);
        }

        componentDidMount(){
            document.getElementById("exemplaryPath").style.cursor = 'default'; 

            let balls = document.getElementById("exemplaryPath").getElementsByClassName("ball")
            for (var i = 0; i < balls.length; i++) {
                balls[i].style.cursor = 'default';
            }

            // Remove footer from node choice
            const footer = document
                .getElementById("pdInstructCol")
                .getElementsByClassName("card-footer")
                
            footer[0].classList.add("d-none")

            // Disable radio buttons for node choice
            const radioButtons = document
                .getElementById("pdInstructCol")
                .getElementsByClassName("largerRadio")

            for (let i=0; i<radioButtons.length; i++) {
                radioButtons[i].disabled = true;
            }

            this.setState({keyNum:4}, () => {console.log(this.state.keyNum)})
        }

        allCorrect(question) {
            let {q1_correct, 
                q2_correct, 
                q3_correct, 
                q4_correct, 
                q1_answers, 
                q2_answers,
                q3_answers,
                q4_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;
            } else if (question == "compQ_4") {
                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_1") {
                q1_answers.push(answer);
            } else if (question == "compQ_2") {
                q2_answers.push(answer);
            } else if (question == "compQ_3") {
                q3_answers.push(answer);
            } else if (question == "compQ_4") {
                q4_answers.push(answer);
            }
            
            this.setState({
                q1_answers, q2_answers, q3_answers, q4_answers
            })
        }

        voidFunction() {
            return
        }

        render() {
            // Styles need to be defined here - Not working otherwise
            const cardHeight= {
                minHeight: "400px",
                }
            
            const cardBodyStyle = {
                height: "250px",
                width: "300px",
                position: "relative",
                margin: "0 auto",
                padding: "0 0 0 0"
                }

            const svgStyle = {
                position: "absolute",
                left: "0",
                top:"0",
                height: "250px",
                width: "300px",
                }

            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>

                    <div className="row">
                        <div className="col pr-3 pl-1">
                            <CompQuestionMC 
                                data={this.state.Question_4_data} 
                                allCorrect ={this.allCorrect} 
                                suppliedAnswer={this.suppliedAnswer}/>
                        </div>
                    </div>
                    
                    <div className="row mb-3">
                        <div className="col-md-6 pr-3 pl-1">
                            <div className="card" style={cardHeight}>
                                <h5 className="card-header  bg-dark text-white text-center">Path</h5>
                                <div id="exemplaryPath" className="card-body" style={cardBodyStyle}>
                                    <svg id="lineSVG" style={svgStyle}/>
                                    <DecisionTree
                                        upTick = {js_vars.upTick} 
                                        isClicked={[
                                            true,
                                            true, true,
                                            true, true, true,
                                            true, true, true, true,
                                            true, true, true, true, true
                                        ]}
                                        currentRound = {2}
                                        drawn={[0,1, 4]}
                                        continuationDec={[100,100,100,100,"Stop"]}
                                        //currentNode = {this.state.currentNode}
                                        continuation={[
                                            100,
                                            100, 0,
                                            100, -100, 0,
                                            100, 0, 100, 100,
                                            0, 0, 0, 0, 0,
                                            0, 0, 0, 0, 0, 0,
                                           ]} 
                                        pulse={false}
                                        mouseEnter = {this.voidFunction}
                                        mouseLeave = {this.voidFunction}
                                        ClickHandler = {this.voidFunction}
                                    />
                                </div>
                            </div>
                        </div>    
                        <PathNodeChoice
                            show = {true}
                            pdStop = {this.state.pdStop}
                            header = {"My instruction at the selected ball"}
                            currentNode = {this.state.currentNode}
                            radioClick = {this.voidFunction}
                            closeMe = {this.voidFunction}
                        />
                    </div>
                </>
            )
        }
    }

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

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

{% endblock %}