quiz-klapek/test/single/single.js

lastSaveQuestion = false;
lastRandomQuestion = true;
document.addEventListener("DOMContentLoaded", function () {
    async function generateQuestion(formE) {
        formE.preventDefault();
        let formData = new FormData(formE.target);
        formData.append("generateQuestion", "true")
        const response = await fetch("single.php", {
            method: "POST",
            body: formData,
            credentials: "include",
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        });
        const result = await response.json();
        const output = document.getElementById("info");
        output.innerHTML = result.msg;
        output.style.display = "block";
        if (result.question) setTimeout(function () {
            function beforeunloadFunc(e) { e.preventDefault(); }
            window.addEventListener('beforeunload', beforeunloadFunc);
            contentHTML = "<form id='questionForm'>";

            contentHTML +=
                `<div class="question">
                    <h4>Pytanie <sub>w bazie nr ${result.question.QID}</sub></h4>
                    <h3>${result.question.content}</h3>
                    <p id="questionInfo"></p>
                    <div class="answer">
                        <input type="hidden" name="QID" value="${result.question.QID}"/>
                        <input type="hidden" name="answer" value="-"/>
                        <span id="A"><input type="radio" name="answer" value="A"/><b>A.</b> ${result.question.answerA}<br/></span>
                        <span id="B"><input type="radio" name="answer" value="B"/><b>B.</b> ${result.question.answerB}<br/></span>
                        <span id="C"><input type="radio" name="answer" value="C"/><b>C.</b> ${result.question.answerC}<br/></span>
                        <span id="D"><input type="radio" name="answer" value="D"/><b>D.</b> ${result.question.answerD}<br/></span>
                    </div>
                </div>`;
            contentHTML += `<div id="end"><p>`;
            if (logged) contentHTML += `Zapisać odpowiedź na pytanie? <input type="checkbox" name="save" id="save" onchange="lastSaveQuestion = element.checked;" ${(lastSaveQuestion) ? "checked" : ""}/><br/>`;
            contentHTML += `</p>
            <input type="submit" value="Odpowiedz"/></div>
            </form>
            <div id="new"></div>
            <p><a href="/">Wróc do strony głównej</a></p>`;
            mainContent.innerHTML = contentHTML;
            document.getElementById("questionForm").addEventListener("submit", async function (formE) {
                formE.preventDefault();
                window.removeEventListener('beforeunload', beforeunloadFunc);
                let formData = new FormData(formE.target);
                formData.append("checkQuestion", "true");
                const response = await fetch("single.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' });
                    const qInfo = document.getElementById(`questionInfo`);
                    let correctLetter = ["A", "B", "C", "D"].includes(result.answeredChar);
                    if (!result.correct && correctLetter) {
                        qInfo.innerHTML = `Nieprawidłowa odpowiedź, odpowiedziałeś ${result.answeredChar}, prawidłowa odpowiedź to ${result.correctChar}`;
                        qInfo.style.color = "red";
                        document.getElementById(`${result.answeredChar}`).style.color = "red";
                        document.getElementById(`${result.correctChar}`).style.color = "green";
                    }
                    else if (!correctLetter) {
                        qInfo.innerHTML = `Nie odpowiedziałeś na pytanie, prawidłowa odpowiedź to ${result.correctChar}`;
                        qInfo.style.color = "red";
                        document.getElementById(`${result.correctChar}`).style.color = "green";
                    } else {
                        qInfo.innerHTML = `Odpowiedziałeś prawidłowo, prawidłowa odpowiedż to ${result.correctChar}`;
                        qInfo.style.color = "green";
                        document.getElementById(`${result.answeredChar}`).style.color = "green";
                    }
                    document.getElementById("end").style.display = "none";
                    document.getElementById("new").innerHTML = `
                    <form id="startForm">
                        Nowe pytanie:
                        <p style="text-align: left;">
                            <input type="radio" name="random" value="true" onchange="lastRandomQuestion=true;" ${(lastRandomQuestion) ? "checked" : ""}> Losowo<br>
                            <input type="radio" name="random" value="false" onchange="lastRandomQuestion=false;" id="byQID" ${(lastRandomQuestion) ? "" : "checked"}> Wg nr pytania w bazie<br>
                            <span id="QIDnum" style="visibility: hidden;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Nr: <input type="number" name="QID" min="1" max="9999" value="${result.QID + 1}"></span>
                        </p>
                        <p id="info"></p>
                        <p><input type="submit" value="Znajdź pytanie"></p>
                    </form>`;
                    randomRadioFunc();
                    document.getElementById("startForm").addEventListener("submit", generateQuestion);
                } else alert("Wystąpił błąd, spróbuj ponownie");
            });
        }, 300);
    }
    const mainContent = document.getElementById("content");
    function randomRadioFunc() {
        const QIDnum = document.getElementById("QIDnum");
        const randomRadio = document.querySelectorAll("input[name='random']");
        randomRadio.forEach(function (inputRadio) {
            inputRadio.addEventListener("change", function () {
                if (document.getElementById("byQID").checked) {
                    QIDnum.style.visibility = "visible";
                } else QIDnum.style.visibility = "hidden";
            });
        });
        if (!lastRandomQuestion) QIDnum.style.visibility = "visible";
    }
    randomRadioFunc();
    document.getElementById("startForm").addEventListener("submit", generateQuestion);
});