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

{{ block title }}
Verständnisrunde
{{ endblock }}

{{ block content }}
<div class="alert alert-danger" id="error-alert" role="alert" style="display:none">
</div>

<p>Bitte lösen Sie die folgenden mathematischen Aufgaben. Tragen Sie das finale Ergebnis der Aufgabe in das
    <b>Lösungsfeld</b> ein. (<i>Hinweis: Die Felder hinter den einzelnen Gleichungen dienen lediglich als Hilfestellung
        bei der Berechnung.</i>)
</p>
<p>Wenn Sie mit den Aufgaben fertig sind, klicken Sie bitte auf <b>"Weiter"</b>.</p>

<div class="row">
    {{ for t in tasks }}
    <div class="col">
        {{ include 'global/task/Task.html' with label=t.0 && task=t.1 && solution=False && send_btn=False &&
        opt_out_btn=False }}
    </div>
    {{ endfor }}
    <div class="col"></div>
</div>

<button type="button" id="submit-answers-button" class="otree-btn-next btn btn-primary">Weiter</button>

{{ endblock }}

{{ block scripts }}
<script>
    const errDisplay = document.getElementById('error-alert');
    const submitBtn = document.getElementById('submit-answers-button');
    const answers = document.getElementsByName("solution");

    function showErrMsg(errMsg) {
        errDisplay.innerHTML = errMsg;
        errDisplay.style.display = "block";
        scrollTo(0, 0);

    }

    // Send answers
    submitBtn.onclick = function () {
        let values = [];
        for (answer of answers) {
            let val = parseFloat(answer.value);
            if (isNaN(val)) {
                showErrMsg("Bitte geben Sie nur gültige Zahlen in das Lösungsfeld ein.");
                return;
            }
            values.push(val);
        }
        liveSend({ type: "answers", answers: values });
    }

    // Receive data
    function liveRecv(message) {
        // console.log("received data:", message);
        errDisplay.innerHTML = '';
        errDisplay.style.display = "none";

        switch (message.type) {
            case 'task':    // New task
                const es = message.equations;
                const l = message.label;
                updateEquations(es);
                updateLabel(l);
                break;
            case 'error':   // The task was answered incorrectly, show error message
                showErrMsg(message.err_msg);
                break;
            case 'complete':    // All tasks complete, continue
                form.submit();
                break;
        }
    }
</script>
{{ endblock }}