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

{% block title %}
Option 1 in the remaining four decisions is about taking several risks
{% endblock %}

{% block content %}
<div class="row"></div>
<div class="my-3 bg-light px-3 py-3 rounded border">
    <div class="row">
        <div class="container">
            <p>
                Here is an example. (Option 1 in the example is not in your bonus file. It merely illustrates the
                format.) </p>
            <!-- <p>
                In the remaining four decisions of the experiment,
                <strong>
                    Option 1 is a bit different. Option 1 specifies that you will take a given risk multiple times
                    according to a “continue-when-winning” fashion.
                </strong>
                Here is an example of how the next four decisions in the experiment look like, conceptually.
            </p> -->
        </div>
    </div>
    <hr />
    <div class="row">
        <div class="container">
            <h4><strong>Example decision</strong></h4>
            <p>
                Suppose the endowment and Option 1 in your bonus file are as follows:
            </p>
            <p class="text-center">
                Your endowment is £{{base_endowment_init}}.
            </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 single risk
                                <span id="highlight_span_title" class="blinkfade-bg">
                                    4 (four) times or until losing the first time,
                                </span>
                                whichever happens first
                            </strong> <br>
                            (and add the outcome to my endowment):
                        </td>
                        <td style="width: 50%" class="text-center">
                            <strong>Option 2: Take amount</strong> <br>
                            (i.e., adjust my endowment by):
                        </td>
                    </tr>
                    <script>
                        window.onload = setTimeout(function () { document.getElementById("highlight_span").className = "" }, 20 * 1000)

                    </script>
                    <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" id="player_choice_input" name="player_choice" step="0.01"
                    oninput="trunc_to_two(this.value)" onkeyup="update_text_input()" style="width: 3em" />
                or more and Option 1 (the risk up to {{repetitions}} times) otherwise.”
            </p>
            <script>
                function trunc_to_two(value) {
                    let with2Decimals = value.toString().match(/^-?\d+(?:\.\d{0,2})?/)[0]
                    // rounded.value = with2Decimals
                    document.getElementById("player_choice_input").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="container">
            <p>
                <strong>
                    As you can see, Option 1 means taking the risk one or more times, in a “continue-when-winning” way.
                </strong>
            </p>
            <p>
                Each time you take the risk, the probability of drawing a red ball (winning) is 90% and the probability
                of drawing a blue ball (losing) is 10%. The risk is taken at least once. If a red ball is drawn, another
                draw follows. This is done no more than four times
                (in the example). The outcomes of all risks taken are added up to determine your bonus.
            </p>
            <p>
                <strong>
                    Suppose your bonus in the experiment is determined by Option 1. Then:
                </strong>
            </p>
            <ul>
                <li style="list-style-type:disc">
                    If you lose the first time, you do not take another risk. Your bonus is £5.00-£2.70=£2.30
                </li>
                <li style="list-style-type:disc">
                    If you win the first time, you take a second risk.
                </li>
                <ul>
                    <li style="list-style-type:disc">
                        If you lose the second time, your bonus is £5.00+£0.30-£2.70=£2.60
                    </li>
                    <li style="list-style-type:disc">
                        If you win the second time, you take a third risk.
                    </li>
                    <ul>
                        <li style="list-style-type:disc">
                            If you lose the third time, your bonus is £5.00+£0.30+£0.30-£2.70=£2.90
                        </li>
                        <li style="list-style-type:disc">
                            If you win the third time, you take a fourth risk.
                        </li>
                        <ul>
                            <li style="list-style-type:disc">
                                If you lose the fourth time, your bonus is £5.00+£0.30+£0.30+£0.30-£2.70=£3.20
                            </li>
                            <li style="list-style-type:disc">
                                If you win the fourth time, your bonus is
                                £5.00+£0.30+£0.30+£0.30+£0.30=£6.20. (Note that, as it says in Option 1, the risk is
                                taken no
                                more than four times.)
                            </li>
                        </ul>
                    </ul>
                </ul>
            </ul>
            <p>
                <strong>The outcomes of the risks are determined through several virtual urn draws, in the same way as
                    explained for the single risks. A new urn with 100 balls is used for each virtual draw.</strong>
            </p>
            <p>
                Please answer the following questions, supposing that Option1 (plus endowment) as shown above determines
                your bonus.
            </p>

            <!--  -->
            {{ formfield_errors "attention_check_1" }}
            <input type="hidden" id="attention_check_1" name="attention_check_1" value="-9999"></input>
            {{ formfield_errors "attention_check_2" }}
            <input type="hidden" id="attention_check_2" name="attention_check_2" value="-9999"></input>
            {{ formfield_errors "attention_check_3" }}
            <input type="hidden" id="attention_check_3" name="attention_check_3" value="-9999"></input>
            {{ formfield_errors "attention_check_4" }}
            <input type="hidden" id="attention_check_4" name="attention_check_4" value="-9999"></input>
            {{ formfield_errors "attention_check_5" }}
            <input type="hidden" id="attention_check_5" name="attention_check_5" value="-9999"></input>
            {{ formfield_errors "attention_check_6" }}
            <input type="hidden" id="attention_check_6" name="attention_check_6" value="-9999"></input>
            {{ formfield_errors "attention_check_7" }}
            <input type="hidden" id="attention_check_7" name="attention_check_7" value="-9999"></input>
            {{ formfield_errors "attention_check_8" }}
            <input type="hidden" id="attention_check_8" name="attention_check_8" value="-9999"></input>
            {{ formfield_errors "attention_check_9" }}
            <input type="hidden" id="attention_check_9" name="attention_check_9" value="-9999"></input>
            {{ formfield_errors "attention_check_10" }}
            <input type="hidden" id="attention_check_10" name="attention_check_10" value="-9999"></input>
            {{ formfield_errors "attention_check_11" }}
            <input type="hidden" id="attention_check_11" name="attention_check_11" value="-9999"></input>
            <!-- {# formfield_errors "explanation_entry_check" #} -->
            <!-- <input type="hidden" id="explanation_entry_check" name="explanation_entry_check" value="False"></input> -->


            <div id="root"></div>

            <button type="button" class="btn btn-primary mt-2" onclick="modal_min_time()" id="next_page_btn"
                disabled>Continue</button>


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


<!--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">
    let past_inputs = []
    function update_text_input(cur_val) {
        cur_val = document.getElementById("player_choice_input").value

        document.getElementById("player_choice_input").classList.add("blink-bg")
        setTimeout(function () { document.getElementById("player_choice_input").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("test")
        past_inputs.push(parseFloat(cur_val))
        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")
        // 


        if (past_inputs.includes(-1.2) && past_inputs.includes(-1.2)) {
            document.getElementById("explanation_entry_check").value = "True"
            console.log("check--True")
        } else { console.log("check--False") }

    }

    function modal_min_time() {
        // let value_entry_check = document.getElementById("explanation_entry_check").value
        let mod_body_text = ""
        let mod_title_text = ""

        let answers_correct_check = !(
            document.getElementById("attention_check_1").value == "-9999" ||
            document.getElementById("attention_check_2").value == "-9999" ||
            document.getElementById("attention_check_3").value == "-9999" ||
            document.getElementById("attention_check_4").value == "-9999" ||
            document.getElementById("attention_check_5").value == "-9999" ||
            document.getElementById("attention_check_6").value == "-9999" ||
            document.getElementById("attention_check_7").value == "-9999" ||
            document.getElementById("attention_check_8").value == "-9999" ||
            document.getElementById("attention_check_9").value == "-9999" ||
            document.getElementById("attention_check_10").value == "-9999"
        )
        console.log("answers_correct_check: " + answers_correct_check)

        if (answers_correct_check == true) {
            // document.getElementById("next_page_modal_btn").click()
            document.getElementById("form").submit()
        } else {
            $("#submitPopUp").modal("toggle")
            mod_body_text = `
            <p>
                Before continuing, please submit all the answers to all questions correctly.
                </p>
            `
            mod_title_text = "Please go back."


            document.getElementById("cond_modal_buttons_true").classList.add('d-none')
            document.getElementById("cond_modal_buttons_false").classList.remove("d-none")
            document.getElementById("add_text_blog").innerHTML = mod_body_text
            document.getElementById("submitPopUpLabel").innerHTML = mod_title_text
        }

    }

    class Page extends React.Component {
        render() {
            let Question_1_data = {
                "QuestionText": "Is winning or losing the first risk more likely?",
                "CorrectText": "Correct. The risk pays £0.30 with 90% probability and £-2.70 with 10% probability. Therefore, winning is more likely.",
                "WrongText": "Incorrect. The risk pays £0.30 with 90% probability and £-2.70 with 10% probability. Therefore, winning is more likely.",
                "Options": [
                    [
                        1, "Winning is more likely.",
                    ], [
                        2, "Losing is more likely.",
                    ], [
                        3, "Winning and losing are equally likely."
                    ]],
                "CorrectAnswer": "1",
                "OtreeID": "attention_check_1",
            }

            let Question_2_data = {
                "QuestionText": "What about the second and third risk – is winning or losing more likely?",
                "CorrectText": "Correct. The probability of winning does not change. It is the same each time the risk is taken.",
                "WrongText": [
                    "DUMMY for correct answer -> Should never be visible.",
                    "Incorrect. The probability of winning does not change. It is the same each time the risk is taken. Also, it does not matter how the previous risk(s) turned out. Each risk is determined by a virtual draw from a new urn with the same number of balls being red and blue, respectively.",
                    "Incorrect. The probability of winning does not change. It is the same each time the risk is taken. Also, it does not matter how the previous risk(s) turned out. Each risk is determined by a virtual draw from a new urn with the same number of balls being red and blue, respectively.",
                ],
                "Options": [
                    [
                        1, "Winning is more likely.",
                    ], [
                        2, "Losing is more likely.",
                    ], [
                        3, "It depends on the outcome of the first risk."
                    ]],
                "CorrectAnswer": "1",
                "OtreeID": "attention_check_2",
            }

            let Question_3_data = {
                "QuestionText": "Suppose you have won the first two risks. What happens?",
                "CorrectText": 'Correct. Because the risks are taken in a "continue-when-winning" principle, the outcome of another risk is determined.',
                "WrongText": 'Incorrect. Because the risks are taken according to a "continue-when-winning" principle, the outcome of another risk is determined.',
                "Options": [
                    [
                        1, "Your bonus is £0.60 plus the endowment.",
                    ], [
                        2, "The outcome of another risk is determined.",
                    ]],
                "CorrectAnswer": "2",
                "OtreeID": "attention_check_3",
            }

            let Question_4_data = {
                "QuestionText": "Suppose you have won the first risk and lost the second risk. What happens?",
                "CorrectText": 'Correct. Because the risks are taken according to a "continue-when-winning" principle, no further risks are taken after the first loss.',
                "WrongText": 'Incorrect. Because the risks are taken according to a "continue-when-winning" principle, no further risks are taken after the first loss.',
                "Options": [
                    [
                        1, "Your bonus is the sum of £0.30 and £-2.70 plus the endowment.",
                    ], [
                        2, "The outcome of another risk is determined.",
                    ]],
                "CorrectAnswer": "1",
                "OtreeID": "attention_check_4",
            }

            let Question_5_data = {
                "QuestionText": "Suppose you have won the first four risks. What happens?",
                "CorrectText": 'Correct. Because the risk is taken four times or until losing the first time, whichever happens first, no further risks are taken.',
                "WrongText": "Incorrect. As Option 1 above shows, the risk is taken four times or until losing the first time, whichever happens first. Therefore, even though you never lost, no fifth risk is taken in this example.",
                "Options": [
                    [
                        1, "Your bonus is £1.20 plus the endowment.",
                    ], [
                        2, "The outcome of another risk is determined.",
                    ]],
                "CorrectAnswer": "1",
                "OtreeID": "attention_check_5",
            }

            let Question_6_data = {
                "QuestionText": "Suppose you lose the third time when taking the risk, what is your bonus from the experiment?",
                "CorrectText": "Correct, Winning twice gives you £0.60. The loss costs you £2.70. Altogether, taking into account the endowment, your bonus is £5.00+£0.60-£2.70=£2.90.",
                "WrongText": "Incorrect. Admittedly, this was a difficult one. Winning twice gives you £0.60. The loss costs you £2.70. Altogether, taking into account the endowment, your bonus is £5.00+£0.60-£2.70= … Please try again!",
                "CorrectAnswer": ["2.9", "2.90"],
                "OtreeID": "attention_check_6",
            }

            let Question_7_data = {
                "QuestionText": "What is the most that Option 1 could give you?",
                "CorrectText": "Correct. Option 1 can yield up to £1.20 (if you win four times in a row).",
                "WrongText": "Incorrect. Option 1 can yield up to £1.20 (if you win four times in a row).",
                "Options": [
                    [
                        1, "£0.30",
                    ], [
                        2, "£5.90",
                    ], [
                        3, "£4.70"
                    ], [
                        4, "£1.20"
                    ], [
                        5, "£0.60"
                    ]],
                "CorrectAnswer": "4",
                "OtreeID": "attention_check_7",
            }

            let Question_8_data = {
                "QuestionText": "What is the lowest that Option 1 could give you?",
                "CorrectText": "Correct. The worst possibility is losing in the first round. Then, no further risks are taken and Option 1 yields £-2.70. You cannot lose more than that.",
                "WrongText": "Incorrect. The worst possibility is losing in the first round. Then, no further risks are taken and Option 1 yields £-2.70. You cannot lose more than that.",
                "Options": [
                    [
                        1, "£-2.40",
                    ], [
                        2, "£0.30",
                    ], [
                        3, "£-5.40"
                    ], [
                        4, "£-2.70"
                    ], [
                        5, "£0.00"
                    ]],
                "CorrectAnswer": "4",
                "OtreeID": "attention_check_8",

            }

            let Question_9_data = {
                "QuestionText": `Suppose you have decided for a threshold value of £1.20 and the amount £x in ${js_vars.user_chosen_decision}.pdf is £1.30. What is your bonus?`,
                "CorrectText": "Correct. You wanted the amount if it is £1.20 or more. As it is £1.30, we give it (and not Option 1) to you.",
                "WrongText": "Incorrect. You wanted the amount if it is £1.20 or more. As it is £1.30, we give it (and not Option 1) to you.",
                "Options": [
                    [
                        1, "My bonus is Option 1 plus the endowment.",
                    ], [
                        2, "My bonus is Option 2 plus the endowment (i.e., £1.30+£5.00=£6.30).",
                    ]],
                "CorrectAnswer": "2",
                "OtreeID": "attention_check_9",
            }

            let Question_10_data = {
                "QuestionText": `Suppose Option 1 above would not read “Take the single risk 4 (four) times or until losing the first time, whichever happens first,” but: “Take the risk 101 (one hundred and one) times or until losing the first time, whichever happens first.” What would then be the most that Option 1 could give you?`,
                "CorrectText": "Correct.",
                "WrongText": "Incorrect. Note that 101*£0.30=£30.30.",
                "CorrectAnswer": ["30.3", "30.30"],
                "OtreeID": "attention_check_10",
            }

            let Question_11_data = {
                "QuestionText": `Again, suppose that Option 1 above reads “Take the risk 101 (one hundred and one) times or until losing the first time, whichever happens first.” What would be the lowest that Option 1 could give you?`,
                "CorrectText": "Correct.",
                "WrongText": "Incorrect. The worst outcome is losing the first time, in which case Option 1 yields £-2.70.",
                "CorrectAnswer": ["-2.7", "-2.70"],
                "OtreeID": "attention_check_11",

            }

            return (
                <div>
                    <AttentionCheckMultipleChoice data={Question_1_data} />
                    <hr></hr>
                    <AttentionCheckMultipleChoiceVarOutcomes data={Question_2_data} />
                    <hr></hr>
                    <AttentionCheckMultipleChoice data={Question_3_data} />
                    <hr></hr>
                    <AttentionCheckMultipleChoice data={Question_4_data} />
                    <hr></hr>
                    <AttentionCheckMultipleChoice data={Question_5_data} />
                    <hr></hr>
                    <AttentionCheck data={Question_6_data} />
                    <hr></hr>
                    <AttentionCheckMultipleChoice data={Question_7_data} />
                    <hr></hr>
                    <AttentionCheckMultipleChoice data={Question_8_data} />
                    <hr></hr>
                    <AttentionCheck data={Question_10_data} />
                    <hr></hr>
                    <AttentionCheck data={Question_11_data} />
                    <hr></hr>
                    <AttentionCheckMultipleChoice data={Question_9_data} />
                </div>
            )
        }
    }

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


</script>
<script>
    function t_modal() {
        $("#submitPopUp").modal("toggle")
    }
</script>


<!-- Modal -->
<div class="modal fade" id="submitPopUp" tabindex="-1" role="dialog" aria-labelledby="submitPopUpLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="submitPopUpLabel"></h5>
                <button type="button" class="close" onclick="t_modal()" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="p-2 m-2" id="add_text_blog">
                </div>
            </div>
            <div class="modal-footer">
                <div id="cond_modal_buttons_true" class="d-none">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Go back</button>
                    <!-- MARK is no longer the default next_page_btn like on the other pages, because we want a staggered min_time on the mainpage and the pop-up. The Button triggering this modal has the id next_page_btn now. -->
                    <button class="btn btn-primary" id="next_page_modal_btn">
                        Continue
                    </button>
                </div>
                <div id="cond_modal_buttons_false">
                    <button type="button" class="btn btn-secondary" onclick="t_modal()"
                        data-dismiss="modal">OK.</button>
                </div>
            </div>
        </div>
    </div>
</div>




<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
    );

    // function update_text_input() {
    //     cur_val = document.getElementById("example_question").value
    //     if (cur_val.length == 0) {
    //         document.getElementById("in_text_display").innerHTML = "__"
    //     } else {
    //         document.getElementById("in_text_display").innerHTML = cur_val
    //     }
    //     document.getElementById("on_page_feedback").classList.remove("d-none")

    // }
</script>

{% endblock %}