quiz-klapek/test/test.js

document.addEventListener("DOMContentLoaded", function () {
    const output = document.getElementById("info");
    const mainContent = document.getElementById("content");
    document.getElementById("startForm").addEventListener("submit", async function (formE) {
        formE.preventDefault();
        formData = new FormData(formE.target);
        formData.append("testStart", "true")
        const response = await fetch("test.php", {
            method: "POST",
            body: formData,
            credentials: "include",
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        });
        const result = await response.json();
        output.innerHTML = result.msg;
        output.style.display = "block";
        if (result.questions) setTimeout(function () {
            function beforeunloadFunc(e) { e.preventDefault(); }
            window.addEventListener('beforeunload', beforeunloadFunc);
            contentHTML = "<form id='test'>";
            i = 0;
            testLength = result.questions.length;
            result.questions.forEach(question => {
                contentHTML +=
                    `<div class="question">
                    <h4>Pytanie ${++i}/${testLength} <sub>w bazie nr ${question.QID}</sub></h4>
                    <h3>${question.content}</h3>
                    <p id="q${question.QID}"></p>
                    <div class="answer">
                        <input type="hidden" name="${"q" + question.QID}" value="${i}"/>
                        <input type="hidden" name="${question.QID}" value="-"/>
                        <span id="A${question.QID}"><input type="radio" name="${question.QID}" value="A"/><b>A.</b> ${question.answerA}<br/></span>
                        <span id="B${question.QID}"><input type="radio" name="${question.QID}" value="B"/><b>B.</b> ${question.answerB}<br/></span>
                        <span id="C${question.QID}"><input type="radio" name="${question.QID}" value="C"/><b>C.</b> ${question.answerC}<br/></span>
                        <span id="D${question.QID}"><input type="radio" name="${question.QID}" value="D"/><b>D.</b> ${question.answerD}<br/></span>
                    </div>
                </div>`;
            });
            contentHTML += `<div id="end"><p>`;
            if (logged) contentHTML += `Zapisać wynik? <input type="checkbox" name="save" id="save"/><br/>`;
            if (logged && !own) contentHTML += `<span style="visibility: hidden;" id="rank">Zapisać w rankingu? <input type="checkbox" name="rank"/></span>`;
            contentHTML += `</p>
            <input type="submit" value="Zakończ Test"/></div>
            <p id="info"></p>
            <p><a href="/">Wróc do strony głównej</a></p>
            </form>`;
            mainContent.innerHTML = contentHTML;
            document.getElementById("save").addEventListener("change", function (event) {
                rank = document.getElementById("rank");
                if (event.target.checked) {
                    rank.style.visibility = "visible";
                } else {
                    rank.style.visibility = "hidden";
                }
            });
            document.getElementById("test").addEventListener("submit", async function (formE) {
                formE.preventDefault();
                window.removeEventListener('beforeunload', beforeunloadFunc);
                formData = new FormData(formE.target);
                formData.append("testEnd", "true");
                const response = await fetch("test.php", {
                    method: "POST",
                    body: formData,
                    credentials: "include",
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                });
                const result = await response.json();
                if (result.status == "OK") {
                    window.scrollTo({ top: 0, behavior: 'smooth' });
                    Object.entries(result.answers).forEach(function ([key, arr]) {
                        let correctLetter = ["A", "B", "C", "D"].includes(arr.answeredChar);
                        if (!arr.correct && correctLetter) {
                            document.getElementById(`q${key}`).innerHTML = `Nieprawidłowa odpowiedź, odpowiedziałeś ${arr.answeredChar}, prawidłowa odpowiedź to ${arr.correctChar}`;
                            document.getElementById(`q${key}`).style.color = "red";
                            document.getElementById(`${arr.answeredChar}${key}`).style.color = "red";
                            document.getElementById(`${arr.correctChar}${key}`).style.color = "green";
                        }
                        else if (!correctLetter) {
                            document.getElementById(`q${key}`).innerHTML = `Nie odpowiedziałeś na pytanie, prawidłowa odpowiedź to ${arr.correctChar}`;
                            document.getElementById(`q${key}`).style.color = "red";
                            document.getElementById(`${arr.correctChar}${key}`).style.color = "green";
                        } else {
                            document.getElementById(`q${key}`).innerHTML = `Odpowiedziałeś prawidłowo, prawidłowa odpowiedż to ${arr.correctChar}`;
                            document.getElementById(`q${key}`).style.color = "green";
                            document.getElementById(`${arr.answeredChar}${key}`).style.color = "green";
                        }

                    });
                    const output = document.getElementById("info");
                    resultProcent = result.correctAnswers/result.testLength*100
                    output.innerHTML = `Prawidłowe odpowiedzi: ${result.correctAnswers}/${result.testLength} - ${resultProcent}%`;
                    if (resultProcent >= 50) output.style.color = "green";
                    output.style.display = "block";
                    document.getElementById("end").style.display = "none";
                } else alert("Wystąpił błąd, spróbuj ponownie");
            });
        }, 300);
    });
});