{{ extends "global/Page.html" }}

{{ block scripts }}
    <script>
        /**
         * Shuffle jQuery array of elements - see Fisher-Yates algorithm
         */

        jQuery.fn.shuffle = function () {
            let j;
            for (let i = 0; i < this.length; i++) {
                j = Math.floor(Math.random() * this.length);
                $(this[i]).before($(this[j]));
            }
            return this;
        };

        let options = $('#answers tr');

        options.shuffle(); // Questions are initially shuffled

        /**
         * First number for subtraction task. Is initially part of the vars for template and not transmitted via the
         * live pages feature.
         * @type {int}
         */
        let false_answer_1 = {{ false_answer_1|json }};

        /**
         * Second number for subtraction task. Is transmitted the same way s number1.
         * @type {int}
         */
        let false_answer_2 = {{ false_answer_2|json }};

        /**
         * First number for subtraction task. Is initially part of the vars for template and not transmitted via the
         * live pages feature.
         * @type {int}
         */
        let false_answer_3 = {{ false_answer_3|json }};

        /**
         * Second number for subtraction task. Is transmitted the same way s number1.
         * @type {int}
         */
        let correct_answer = {{ correct_answer|json }};

        /**
         * Reference to the input box on the template page.
         */
        let inputBox = $("#inputbox");

        // Event listener for sending via button
        $("#sendbutton").click(function () {
                sendRequest();

            }
        );

        let radioValue = 0;

        $(document).ready(function () {
            $("input[type='radio']").click(function () {

                radioValue = $("input[name='options']:checked").val();

            });
        });

        // Gets the participant's answer from the template and sends it to the server
        function sendRequest() {
            if (radioValue) {
                liveSend({
                    "type": "request",
                    "answer": radioValue,
                });

                radioValue = 0;
            }
        }

        /**
         * Receive feedback and new numbers from server
         * @param {object} data - A dictionary that contains data from the server: new numbers and feedback on the answer
         */
        function liveRecv(data) {
            question = data.question;
            false_answer_1 = data.false_answer_1;
            false_answer_2 = data.false_answer_2;
            false_answer_3 = data.false_answer_3;
            correct_answer = data.correct_answer;

            $("input[name=options]").prop("checked", false);

            $("#question").text(question);
            $("#option_1_text").text(false_answer_1);
            $("#option_2_text").text(false_answer_2);
            $("#option_3_text").text(false_answer_3);
            $("#option_4_text").text(correct_answer);

            $(".attempts").text(data.number_of_attempts);
            $(".correct-answers").text(data.number_of_correct_answers);

            show_feedback(data.answer_correct, data);
            options.shuffle();


        }

        /**
         * Display either positive (the answer given before was correct) or negative feedback (answer was incorrect).
         * @param {boolean} answer_correct - Whether the given answer turned out to be correct or not
         */
        function show_feedback(answer_correct, data) {
            console.log("attempts", data.number_of_attempts);
            console.log("tasks", {{ C.NUM_TASKS | json}});

            // Popup if all questions answered
                if (data.number_of_attempts == {{ C.NUM_TASKS | json}}-1) {
                      $(function () {
                            $("#no-one-left").dialog("open");
                      });
                      document.getElementById("tasks").style.display = "none";
            }

            if (answer_correct) {
                $('.answer-correctness').html('Ihre letzte Antwort war <span class="text-success">richtig</span>.');
            } else {
                $('.answer-correctness').html('Ihre letzte Antwort war <span class="text-danger">nicht richtig</span>.');
            }


        }
    </script>
{{ endblock }}

{{ block content }}

    <style>
        body{
            margin-left: 10%;
            margin-right: 10%;
        }
        .taskInput {
            font-size: 1.5em;;
        }
        p {
            margin: 0;
        }
        :invalid {
            box-shadow: none;
        }
        :-moz-submit-invalid {
            box-shadow: none;
        }
        :-moz-ui-invalid {
            box-shadow: none;
        }
        .success {
            margin-top: 3em;
            margin-left: 15%;
            font-weight: bold !important;
        }
        .table {
            width: 70%;
            margin-left: auto;
            margin-right: auto;
            border: none !important;
            padding-bottom: 0 !important;
            padding-top: 0 !important;
            text-align:center;
            font-weight: normal;
        }
        th {
            text-align: right;
            padding-left: 2em !important;
            border: none !important;
            padding-bottom: 0 !important;
            padding-top: 0 !important;
            width: 60%;
            font-weight: normal;

         }
        td {
         text-align: left;
            border-top: none;
            padding-left: 2em !important;
            padding-bottom: 0 !important;
            padding-top: 0 !important;
            border: none !important;
                        font-weight: normal;

        }
        .options {
            margin-bottom: 0.8em;
        }
        .optiontext {
            vertical-align: middle;
        }
    </style>

    <div id = "all">

        <div id = "tasks">
            <!-- Intro text -->
            <p class="text-center">
                Bitte beantworten Sie auf dieser und den folgenden Seiten so viele Fragen wie möglich.
                <br>
                Für jede richtige Antwort erhalten Sie
                {{ if C.POINTS_PER_CORRECT_ANSWER == 1 }}
                    1 Punkt.
                {{ else }}
                    {{ C.POINTS_PER_CORRECT_ANSWER|json }} Punkte.
                {{ endif }}
                <br>
                Klicken Sie nach der Eingabe des Ergebnisses auf den "WEITER"-Button, damit Ihre Eingabe gespeichert wird.
                <br><br>
            </p>
            <div style="margin-bottom: 20px;">
                <h2 id="question">{{ question }}</h2>
            </div>

            <!-- Task and Input -->
            <table id="answers" class="table">
                <tr>
                    <th>
                        <label for="id_option_1" class="options">
                            <span id="option_1_text" class = "optiontext">
                            {{ false_answer_1 }}
                            </span>
                        </label>
                    </th>
                    <td>
                        <input type="radio" name="options" value="1" id="id_option_1"
                               class="form-check-input">
                    </td>
                </tr>
                <tr>
                    <th>
                        <label for="id_option_2" class="options">
                            <span id="option_2_text" class = "optiontext">
                            {{ false_answer_2 }}
                            </span>
                        </label>
                    </th>
                    <td>
                        <input type="radio" name="options" value="2" id="id_option_2" required=""
                               class="form-check-input">
                    </td>
                </tr>
                <tr>
                    <th>
                        <label for="id_option_3" class="options">
                            <span id="option_3_text" class = "optiontext">
                            {{ false_answer_3 }}
                            </span>
                        </label>
                    </th>
                    <td>
                        <input type="radio" name="options" value="3" id="id_option_3" required=""
                               class="form-check-input">
                    </td>
                </tr>
                <tr>
                    <th>
                        <label for="id_option_4" class="options">
                            <span id="option_4_text" class = "optiontext">
                            {{ correct_answer }}
                            </span>
                        </label>
                    </th>
                    <td>
                        <input type="radio" name="options" value="4" id="id_option_4" required=""
                               class="form-check-input">
                    </td>
                </tr>
            </table>

            <div class="text-center">
                <form action="">
                    <!-- Button -->
                    <input style="margin-left: 2rem; margin-bottom: 0.25rem;" id="sendbutton" class="btn btn-primary"
                           value="Weiter" type="button"/>
                </form>
            </div>

        </div>
        <!-- Feedback -->
        <div class="success">
            <!-- Was last answer correct? -->
            <p class="answer-correctness">
                &nbsp;
            </p>

            <!-- no. of correct answers -->
            <p>Richtige Antworten: <span class="correct-answers">{{ player.number_of_correct_answers }}</span></p>

            <!-- no. of trials -->
            <p>Versuche: <span class="attempts">{{ player.number_of_attempts }}</span></p>
        </div>

        <!-- Cheater mode for testing the app. Debug can be set in vars_for_template -->
        {{ if debug }}
            <div class="panel panel-success">
                <div class="panel-heading">
                    <h4><br>Cheater Mode Activated (Debug Mode Only) - <a href="#" id="prefill">Click Here to Autofill
                        Summation</a></h4>
                </div>
            </div>
        {{ endif }}

        <!-- Alertbox  -->
        <div id="no-one-left" style="display:none; text-align: center;">
                Sie haben alle möglichen Fragen beantwortet.<br>
                Bitte warten Sie, bis das Experiment weitergeht.
            </div>

    </div>

{{ endblock }}