CITS3403

$(document).ready(function () {
        document.getElementById("attemptNo").value = "{{ attemptsList[-1] }}";
        $(".bubble ul:not(.attempt{{attemptsList[-1]}})").addClass("is-hidden");
        $(".attempt{{attemptsList[-1]}}").removeClass("is-hidden");
        $(".attemptBlock").removeClass("is-hidden");
        var marks = {{ marksList| safe}};
        document.getElementById("attemptMark").innerHTML = marks[marks.length - 1];
        var num = marks[marks.length - 1] / {{ noQuizQuestions }} * 100;
        document.getElementById("attemptPercent").innerHTML = getMark(num);

        apiRequestHandler();
    });

    function updateVisibleAttempts(apiAttempts) {
        console.log(apiAttempts)
        var mapObj = { '"': "'", "'": '"' }
        apiAttempts = apiAttempts.replace(/"|'/gi, function (matched) {
            return mapObj[matched];
        });
        var jsonObj = JSON.parse(apiAttempts);
        var visibleAttempts = {};
        // update feedback, marks and question

        $("ul.block").each(function (index, item) {
            var attemptId = item.classList[2];

            var feedbackBlock = $(item).find("div span.feedback")[0];
            if (jsonObj[attemptId]['feedback'] != feedbackBlock.innerHTML) {
                feedbackBlock.innerHTML = jsonObj[attemptId]['feedback']
            };

            var markBlock = $(item).find("div.markDisplay")[0];
            var mark = markBlock.classList[2];
            var questionBlock = $(item).find("div.questionBlock")[0]
            if (jsonObj[attemptId]["mark"] != mark) {
                if (jsonObj[attemptId]["mark"] == 0) {
                    markBlock.innerHTML = '<span class="incorrect"> Incorrect </span>';
                    questionBlock.innerHTML = `<li> Question: ` + jsonObj[attemptId]['question'] + `</li>

                            <li>&emsp;Answer: ` + jsonObj[attemptId]["answer"] + ` </li>
                            <li>&emsp;Submitted: ` + jsonObj[attemptId]["ansSubmit"] + ` </li>

                    </div>`
                } else {
                    markBlock.innerHTML = '<span class="correct"> Correct! </span>'
                    questionBlock.innerHTML = `<li> Question: ` + jsonObj[attemptId]['question'] + `</li>

                            <li>&emsp;Submitted: ` + jsonObj[attemptId]["ansSubmit"] + ` </li>

                    </div>`
                };
            };

        });
    };

    function retrieveNewAttempts(token) {
        var xhttp = new XMLHttpRequest();
        xhttp.open("GET", "/api/quizAttempts/{{current_user}}/{{ quiz.quizName }}", true)
        xhttp.setRequestHeader('Authorization', 'Bearer ' + token);
        xhttp.onload = function () {
            var status = xhttp.status;
            if (status == 200) {
                var jsonObj = JSON.parse(this.responseText);
                console.log(jsonObj)
                updateVisibleAttempts(jsonObj);
            } else {
                console.log("Error", statusText);
            }
        };

        xhttp.send()
    };

    function retrieveToken() {
        return new Promise(function (resolve, reject) {
            var xhttp1 = new XMLHttpRequest();
            xhttp1.open("POST", "/api/tokens", true)
            xhttp1.setRequestHeader('Authorization', 'Basic ' + btoa("{{current_user}}:{{current_user.password}}"));
            xhttp1.onload = function () {
                var status = xhttp1.status;
                if (status == 200) {
                    var jsonObj = JSON.parse(this.responseText);
                    resolve(jsonObj["token"])
                } else {
                    reject(status)
                };
            };
            xhttp1.send()
        });

    };

    async function apiRequestHandler() {
        var token = await retrieveToken()
        setInterval(retrieveNewAttempts(token), 10000) //need to change this call
    };