<!DOCTYPE html>
<html lang="en">
{% load static %}

<head>
    <meta charset="UTF-8">
    <title>Test Template</title>
</head>

<body>
    <audio id="audio" controls>
        <source src="{% static questionPromptPath %}" type="audio/mp3">
        Your browser does not support audio.
    </audio>
    <script>
        const answerAudio = [];
        answerAudio[0] = new Audio("{% static choice1AudioPath %}");
        answerAudio[1] = new Audio("{% static choice2AudioPath %}");
        answerAudio[2] = new Audio("{% static choice3AudioPath %}");

        function playAudio(audioIndex) {
            answerAudio[audioIndex].play();
        }
    </script>
    <svg width="1200" height="700">
        <rect x="39.282" y="144.237" width="687.175" height="399.221"
            style="fill: rgb(245, 237, 12); stroke: rgb(69, 142, 193); stroke-linecap: round; stroke-miterlimit: 19; stroke-linejoin: round;" />
        <rect x="102.875" y="211.671" width="188.011" height="243.309"
            style="fill: rgb(255, 255, 255); fill-rule: nonzero; stroke: rgb(0, 3, 5); paint-order: stroke; stroke-width: 2px;" />
        {% if questionLetter|length == 1 %}
        <text x="160" y="370.15"
            style="white-space: pre; fill: rgb(51, 51, 51); font-family: &quot;Roboto Slab&quot;; font-size: 160px;">{{questionLetter}}</text>
        {% else %}
        <text x="140" y="370.15"
            style="white-space: pre; fill: rgb(51, 51, 51); font-family: &quot;Roboto Slab&quot;; font-size: 120px;">{{questionLetter}}</text>
        {% endif %}
        <rect id="choice1Rect" width="88.476" height="82.025" style="fill: rgb(98, 118, 223);" x="376.749" y="183.165" />
        <rect id="choice2Rect" y="289.145" width="88.476" height="82.025" style="fill: rgb(98, 118, 223);" x="377.061" />
        <rect id="choice3Rect" x="377.984" y="393.751" width="88.476" height="82.025" style="fill: rgb(98, 118, 223);" />

        <!--
   URL changes to #Choice1, #Choice2, and #Choice3.
  -->
        <a href="#Choice1" id="Choice1" onclick="playAudio(0); Choice1Selected()">
            <rect id="Choice1Rect" x="387.957" y="195.642" width="64.301" height="54.348"
                style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0);" />
            <image href="{% static choiceImagePath %}" x="388.72" y="197" width="64.301" height="48" />
        </a>
        <a href="#Choice2" id="Choice2" onclick="playAudio(1); Choice2Selected()">
            <rect x="388.72" y="302.425" width="64.301" height="54.348"
                style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0);" />
            <image href="{% static choiceImagePath %}" x="388.72" y="304" width="64.301" height="48" />
        </a>
        <a href="#Choice3" id="Choice3" onclick="playAudio(2); Choice3Selected()">
            <rect x="390.251" y="405.764" width="64.301" height="54.348"
                style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0);" />
            <image href="{% static choiceImagePath %}" x="388.72" y="407" width="64.301" height="48" />
        </a>


        <!--
   When pressing done button based on current question (maybe through an ID for question),
   read URL, and if answer choice is correct, then add +1 to child's points in the database
 -->
        <a href="#donebtn" onclick="checkAnswer()">
            <rect x="570.138" y="315.055" width="90.327" height="43.632"
                style="fill: rgb(125, 203, 255); stroke: rgb(0, 0, 0);" />
            <text x="374.633" y="295.899"
                style="white-space: pre; fill: rgb(51, 51, 51); font-family: &quot;Roboto Slab&quot;; font-size: 28px;"
                transform="matrix(0.821379, 0, 0, 0.727793, 276.960968, 128.469803)" id="doneText">DONE</text>
        </a>
        <image href="{% static mainPicPath %}" x="102.875" y="211.671" width="188.011" height="243.309" />


    </svg>

    <script>
    var rect1 = document.getElementById("choice1Rect");
    console.log(rect1);
    var rect2 = document.getElementById("choice2Rect");
    console.log(rect2);
    var rect3 = document.getElementById("choice3Rect");
    console.log(rect3);

    function Choice1Selected() {
        rect1.setAttribute("style", "fill: yellow");
        rect2.setAttribute("style", "fill: rgb(98, 118, 223)");
        rect3.setAttribute("style", "fill: rgb(98, 118, 223)");
    }
    function Choice2Selected() {
        rect2.setAttribute("style", "fill: yellow");
        rect1.setAttribute("style", "fill: rgb(98, 118, 223)");
        rect3.setAttribute("style", "fill: rgb(98, 118, 223)");
    }
    function Choice3Selected() {
        rect3.setAttribute("style", "fill: yellow");
        rect2.setAttribute("style", "fill: rgb(98, 118, 223)");
        rect1.setAttribute("style", "fill: rgb(98, 118, 223)");
    }

        function checkAnswer() {
            if (window.location.href == "http://127.0.0.1:8000/exam/{{currentPage}}/#Choice{{answer}}") {
                alert("Correct Answer!");
                setTimeout(function () {

                    location.href = "http://127.0.0.1:8000/exam/{{student_pk}}/{{correctPage}}"

                }, 3000);

            } else {
                alert("Incorrect answer");
                setTimeout(function () {

                    location.href = "http://127.0.0.1:8000/exam/{{student_pk}}/{{incorrectPage}}"

                }, 3000);
            }
        }

    </script>

</body>

</html>
