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

{{ block scripts }}

    <script>
        // The current letter that has to be count
        let letter = {{ letter|json }};

        // The correct number of occurrences of the current letter.
        let correct_answer = {{ correct_answer|json }};

        // Reference to the input box on the template page.
        const inputBox = document.getElementById("inputbox");

        // Reference to the send button on the template page.
        const sendbutton = document.getElementById("sendbutton");

        // Correct last answer
        let last_answer_correct = {{ player.last_answer_correct|json }};

        // If there has been given an answer before: Show the feedback after page load
        if (last_answer_correct !== null) {
            show_feedback(last_answer_correct, {{ player.number_of_attempts|json }});
        }

        // Event listener for sending via button
        sendbutton.addEventListener("click", () => {
            sendRequest();
        });

        // Event listener for sending via enter
        inputBox.addEventListener("keypress", (event) => {
            if (event.which === 13) {
                sendRequest();
                return false;
            }
        });

        // Gets the participant's answer from the template and sends it to the server
        function sendRequest() {
            // Get value
            let inputValue = (inputBox.value);
            console.log(inputValue);

            // Replace all spaces with an empty string
            inputValue = inputValue.replace(/ /g, '');
            console.log(inputValue);

            // To integer
            inputValue = Number(inputBox.value); // letters etc. will become NaN
            console.log((inputValue));

            // Check if NaN (empty or letters, etc.)
            if (Number.isNaN(inputValue) || inputValue > 9223372036854775807) {
              $(function () {
                    $("#validentryeffort").dialog("open");
              });
            }

            // If not Nan and not large integer: Submit
            if (typeof inputValue === 'number' && !Number.isNaN(inputValue) && inputValue < 9223372036854775800) {
                liveSend({
                    "type": "request",
                    "answer": inputValue
                });
                inputBox.value = '';
            }
        }

        /**
         * 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) {
            letter = data.new_letter_to_count;
            const attemptNumber = data.number_of_attempts;

            correct_answer = data.correct_answer;
            document.getElementById("letter").innerText = letter;

            document.getElementById("attempts").innerText = attemptNumber;
            document.getElementById("correct-answers").innerText = data.number_of_correct_answers;

            show_feedback(data.answer_correct, attemptNumber);
        }

        /**
         * 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, attemptNumber) {
            const correctnessField = document.querySelector('.answer-correctness');
            if (attemptNumber === 0) {
                    return; // Leave field empty before first attempt
            }

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

            if (answer_correct) {
                correctnessField.innerHTML = 'Ihre letzte Summe war <span class="text-success">richtig</span>.';
            } else {
                correctnessField.innerHTML = 'Ihre letzte Summe war <span class="text-danger">nicht richtig</span>.';
            }

        }

        // TODO gibts das noch?
        // Realizes the pre-fill functionality of the "Cheater Mode"
                $(document).ready(function () {
                    $('#prefill').click(function () {
                        $('#inputbox').val(correct_answer);
                        $('#inputbox').focusin();
                    })
                });

    </script>

{{ endblock }}


{{ block content }}

    <style>
        .taskInput {
            font-size: 1.5em;;
        }
        p {
            margin: 0;
        }
        .stringpart{
             background-color:lightblue;
             width: 50%;
             margin-left: auto;
             margin-right:auto;
        }
        .success {
            margin-top: 3em;
            margin-left: 25%;
            font-weight: bold !important;
        }
        .cheater {
             width: 50%;
             margin-left: auto;
             margin-right:auto;
            font-weight: bold;
        }
    </style>

    <div id = "all">

        <div id = "tasks">

            <!-- Task description -->
            <div style="text-align:center">
                <br><br><b>
                Zählen Sie bitte, wie häufig der Buchstabe <span id="letter">{{ letter }}</span> in dem folgenden Satz
                vorkommt.<br>
                Tragen Sie die Anzahl in das Eingabefeld ein. <br>
                Für jede richtige Antwort erhalten Sie
                {{ if C.POINTS_PER_CORRECT_ANSWER == 1 }}1 Punkt.{{ endif }}
                {{ if C.POINTS_PER_CORRECT_ANSWER != 1 }}{{ C.POINTS_PER_CORRECT_ANSWER|json }}
                    Punkte.{{ endif }}
                <br>
                </b><br><br>
                <div class="stringpart" >
                    {{ string_to_guess }}
                </div>
                <br>

            </div>

            <!-- Answer-part -->
            <p class="text-center ">
                <form action="">

                    <!-- Task -->
                    <label for="inputbox" class="taskInput">
                        <span id="text-bold">Ihre Antwort:</span>
                    </label>

                    <!-- Answer -->
                    <!-- Deal with input per Javascript, because Firefox cannot handle settings -->
                    <input style="display: inline" min="1" class="form-control taskInput" id="inputbox"/>

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

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

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

                <!-- no. of trials -->
                <p>Versuche: <span id="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="cheater">

                        <h3><br>Cheater Mode Activated (Debug Mode Only) - <a href="#" id="prefill">Click Here to Autofill
                            Summation</a></h3>

                </div>
            {{ endif }}
        </div>

        <!-- Alertboxes  -->
        <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 id="validentryeffort" style="display:none; text-align: center;">
            Bitte geben Sie eine gültige Zahl ein!
        </div>

    </div>



{{ endblock }}