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

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

{% block content %}
<style>
    table.table-bordered {
        border: 1px solid black;
        margin-top: 20px;
    }

    table.table-bordered>thead>tr>th {
        border: 1px solid black;
    }

    table.table-bordered>tbody>tr>td {
        border: 1px solid black;
    }
</style>

<div class="row"></div>
<div class="my-3 bg-light px-3 py-3 rounded border">
    <div class="container">
        <div class="row">
            <div class="col">
                <p>
                    Consider the following exemplary decision.
                </p>
            </div>
        </div>
        <hr>
        <div class="row ">
            <div class="col">
                <p>
                    Suppose the endowment and Option 1 in your bonus file are as follows:
                </p>

                <p class="text-center">
                    Your endowment is £{{base_endwoment}}.
                </p>

                <table class="table table-bordered border-dark" style="background-color: white;">
                    <tbody>
                        <tr>
                            <td style="width: 50%" class="text-center">
                                <strong>Option 1: Take the risk</strong> <br>
                                (i.e., adjust my endowment by the outcome of):
                            </td>
                            <td style="width: 50%" class="text-center">
                                <strong>Option 2: Take amount</strong> <br>
                                (i.e., adjust my endowment by):
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <img class="img-fluid mx-auto d-block" src="{% static image_path %}" width="90%" />
                            </td>
                            <td class="align-middle text-center">
                                <span style="font-size: 500%; font-weight: 100;">
                                    £x
                                </span>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <p>
                    <strong>
                        Your decision:
                    </strong>
                    “Please give me Option 2 (the amount) if it is £
                    <input type="number" max=99 min=-99 step="0.01" id="example_question" name="example_question"
                        oninput="trunc_to_two(this.value)" onkeyup="update_text_input()" style="width: 3em"></input>
                    or more and Option 1 (the risk) otherwise.”
                </p>
                <script>
                    function trunc_to_two(value) {
                        let with2Decimals = value.toString().match(/^-?\d+(?:\.\d{0,2})?/)[0]
                        // rounded.value = with2Decimals
                        document.getElementById("example_question").value = with2Decimals

                    }
                </script>
                <div id="on_page_feedback" class="d-none">
                    <p>
                        <strong>As you wish:</strong>
                        If {{user_chosen_decision}}.pdf shows Option 1 as above, then:
                    <ul>
                        <li>
                            We give you <span id="highlight_span"> Option 1 if the amount is less than
                                £<span id="in_text_display"></span></span>.
                        </li>
                        <li>
                            Otherwise, we give you Option 2.
                        </li>
                    </ul>
                    </p>
                </div>
            </div>
        </div>
        <hr>
        <div class="row ">
            <div class="col">

                {{ formfield_errors "attention_check_1_e" }}
                <input type="hidden" id="attention_check_1_e" name="attention_check_1_e" value="-9999"></input>
                {{ formfield_errors "attention_check_1_f" }}
                <input type="hidden" id="attention_check_1_f" name="attention_check_1_f" value="-9999"></input>
                {{ formfield_errors "attention_check_1_g" }}
                <input type="hidden" id="attention_check_1_g" name="attention_check_1_g" value="-9999"></input>

                <div id="root"></div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col">

            <button id="next_page_btn" class="btn btn-primary" disabled>Next</button>
        </div>
    </div>
</div>

<script>
    let past_inputs = []
    function update_text_input() {
        cur_val = document.getElementById("example_question").value
        past_inputs.push(parseFloat(cur_val))

        document.getElementById("example_question").classList.add("blink-bg")
        setTimeout(function () { document.getElementById("example_question").classList.remove("blink-bg") }, 7 * 1000)
        document.getElementById("highlight_span").classList.add("blink-bg")
        setTimeout(function () { document.getElementById("highlight_span").classList.remove("blink-bg") }, 7 * 1000)

        console.log(past_inputs)
        if (cur_val.length == 0) {
            document.getElementById("in_text_display").innerHTML = '[Please enter your threshold value.]'
        } else {
            document.getElementById("in_text_display").innerHTML = cur_val
        }
        document.getElementById("on_page_feedback").classList.remove("d-none")
        // Must be manually updated if the testvalues in the text change
        // Seems unnecessary here
        if (past_inputs.includes(-0.52) && past_inputs.includes(0.13) && past_inputs.includes(18.0) && past_inputs.includes(-4.7)) {
            document.getElementById("example_question_check").value = "True"
            console.log("check--True")
        } else { console.log("check--False") }
    }
</script>
<!--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 'global/compr_modules.js' %}"></script>


<script type="text/babel">
    class Page extends React.Component {
        render() {
            let Question_1_data = {
                "QuestionText": "Suppose the amount in Option 2 of your bonus file is £0.23 and you decided for a threshold value of £0.50.Your bonus is the endowment and ...",
                "CorrectText": "Correct. You wanted Option 2 (the amount) only if the amount is £0.50 or more. Because it is less – it is £0.23 – we give you Option 1 (just as you instructed us to).",
                "WrongText": [
                    "DUMMY for correct answer -> Should never be visible.",
                    "Incorrect. You wanted Option 2 only if the amount is £0.50 or more. Because it is less – it is £0.23 – we give you Option 1 (just as you instructed us to).",
                    "Incorrect. We give you what you want us to give you (depending on the amount in your bonus file). Please try again and read the explanation carefully."
                ],
                "Options": [[
                    1, "... Option 1 (the outcome of the risk)."
                ], [
                    2, "... Option 2 (the £0.23)."
                ], [
                    3, "... Option 1 or Option 2 (depends on chance)."
                ]],
                "CorrectAnswer": 1,
                "OtreeID": "attention_check_1_e",
            }

            let Question_2_data = {
                "QuestionText": "Suppose the amount in Option 2 of your bonus file is £0.50 and you decided for a threshold value of £0.50. Your bonus is the endowment and ...",
                "CorrectText": "Correct. You wanted Option 2 if the amount is £0.50 or more. Because it is £0.50, we give it to you.",
                "WrongText": [
                    "Incorrect. You wanted Option 2 (the amount) if it is £0.50 or more. Because it is £0.50, we give it (and not the risk) to you, just as you instructed us to.",
                    "DUMMY for correct answer -> Should never be visible.",
                    "Incorrect. We give you what you want us to give you (depending on the amount in your bonus file)."
                ],
                "Options": [[
                    1, "... Option 1 (the outcome of the risk)."
                ], [
                    2, "... Option 2 (the £0.50)."
                ], [
                    3, "... Option 1 or Option 2 (depends on chance)."
                ]],
                "CorrectAnswer": 2,
                "OtreeID": "attention_check_1_f",
            }

            let Question_3_data = {
                "QuestionText": "Suppose the amount in Option 2 of your bonus file is £-1.30 and you decided for a threshold value of £-2.00. Your bonus is the endowment and ...",
                "CorrectText": "Correct. Because the threshold value (-£2.00) is smaller than the amount in your bonus file (£-1.30), your bonus is determined by Option 2.",
                "WrongText": [
                    "Incorrect. You wanted Option 2 (the amount) if it is £-2.00 or more. Because it is more, namely £-1.30, we give it (and not the risk) to you, just as you instructed us to.",
                    "DUMMY for correct answer -> Should never be visible.",
                    "Incorrect. You wanted Option 2 (the amount) if it is £-2.00 or more. Because it is more, namely £-1.30, we give it (and not the risk) to you, just as you instructed us to.",
                ],
                "Options": [[
                    1, "... Option 1 (the outcome of the risk)."
                ], [
                    2, "... Option 2 (the £-1.30)."
                ], [
                    3, "... Option 1 or Option 2 (depends on chance)."
                ]],
                "CorrectAnswer": 2,
                "OtreeID": "attention_check_1_g",
            }


            return (
                <div>
                    <p>
                        For the following three questions, suppose Option 1 in your bonus file is as shown above. (It is not, this is just an example.)
                    </p>
                    <div>
                        <AttentionCheckMultipleChoiceVarOutcomes data={Question_1_data} />
                        <hr></hr>
                        <AttentionCheckMultipleChoiceVarOutcomes data={Question_2_data} />
                        <hr></hr>
                        <AttentionCheckMultipleChoiceVarOutcomes data={Question_3_data} />
                    </div>
                </div>
            )
        }
    }

    ReactDOM.render(<Page />, document.getElementById('root'));


</script>

<script>
    let min_time_on_page = js_vars.min_time_on_page
    // Enables the next button after set time
    setTimeout(
        function () {
            document.getElementById("next_page_btn").removeAttribute("disabled")
            // document.getElementById("next_btn_info").style.display = "none"
        },
        min_time_on_page * 1000
    );
</script>

{% endblock %}