SpreadQuiz/js/testground.js

let TEST_DATA = {}
let INTERVAL_HANDLE = null;

function populate_infobox(test_data, view_only) {
    if (INTERVAL_HANDLE !== null) {
        clearInterval(INTERVAL_HANDLE);
    }

    let test_concluded = TEST_DATA["state"] === "concluded";

    let game_nameS = document.getElementById("game_name");
    let durationS = document.getElementById("duration");
    let percentageS = document.getElementById("percentage");

    let submitBtn = document.getElementById("submit_btn");
    submitBtn.hidden = view_only;

    game_nameS.innerHTML = test_data["gamename"];

    if (test_concluded) {
        let summary = test_data["summary"];
        let correct_answer_n = summary["correct_answer_n"];
        let challenge_n = summary["challenge_n"];
        let r = Math.ceil((correct_answer_n / challenge_n) * 100);
        percentageS.innerHTML = `${r}% (${correct_answer_n}/${challenge_n})`;

        let start_time = unix_time_to_human_readable(test_data["start_time"]);
        let end_time = unix_time_to_human_readable(test_data["end_time"]);
        durationS.value = `${start_time} - ${end_time}`;

        hide("ongoing-info");
        show("concluded-info");
    } else {
        let timerS = document.getElementById("timer");
        let time_left_s = Number(test_data["end_limit_time"]) - Number(test_data["current_time"]);

        let print_timer = () => {
            timerS.innerHTML = seconds_to_time(time_left_s);
        };

        if (test_data["time_limited"]) {
            print_timer()

            if (!view_only) {
                INTERVAL_HANDLE = setInterval(() => {
                    time_left_s--;
                    print_timer();
                    if (time_left_s <= 0) {
                        populate_all(test_data["_id"]);
                        clearInterval(INTERVAL_HANDLE);
                        INTERVAL_HANDLE = null;
                    }
                }, 1000);
            }
            show("time-info");
        } else {
            hide("time-info");
        }

        // fill further info
        let further_info_box = document.getElementById("further-info");
        let further_info = "";
        if (!test_data["repeatable"]) {
            further_info += "A teszt <i>nem</i> megismételhető!<br>";
        }
        further_info_box.innerHTML = further_info;

        show("ongoing-info");
        hide("concluded-info");
    }
}

function populate_challenges(test_data, view_only = false) {
    let test_display = document.getElementById("test_display");
    test_display.innerHTML = "";

    let test_concluded = TEST_DATA["state"] === "concluded";

    let challenge_N = 0;
    test_data["challenges"].forEach((challenge) => {
        let challenge_N_snapshot = challenge_N;
        let challenge_box = document.createElement("section");
        challenge_box.classList.add("challenge");
        let question = document.createElement("span");
        question.classList.add("question");
        question.innerHTML = preprocess_inserts(challenge["question"]);
        let answer_container = document.createElement("section");
        answer_container.classList.add("answer-container");
        challenge_box.append(question, answer_container);

        if (challenge["image_url"] !== "") {
            let qimg = document.createElement("img");
            qimg.src = `interface.php?action=get_image&testid=${test_data["_id"]}&image_url=${challenge["image_url"]}`;
            qimg.classList.add("question-image")
            challenge_box.insertBefore(qimg, answer_container);
        }

        let seq_num_section = document.createElement("section");
        seq_num_section.innerText = String(challenge_N + 1) + "."
        seq_num_section.classList.add("seq-num");
        challenge_box.append(seq_num_section);

        let answer_N = 0;
        let player_answer = challenge["player_answer"];
        player_answer = (player_answer !== "") ? Number(player_answer) : -1;
        challenge["answers"].forEach((answer) => {
            let answer_section = document.createElement("section");
            answer_section.classList.add("answer");
            let answer_radio = document.createElement("input");
            answer_radio.type = "radio";
            answer_radio.id = `${challenge_N}_${answer_N}`;
            answer_radio.name = `challenge_${challenge_N}`;
            answer_radio.disabled = test_concluded || view_only;
            let answer_N_snapshot = answer_N;
            answer_radio.addEventListener("input", () => {
                save_answer(challenge_N_snapshot, answer_N_snapshot);
            });
            if (player_answer === answer_N) {
                answer_radio.checked = true;
            }

            let answer_text = document.createElement("label");
            answer_text.innerHTML = preprocess_inserts(answer);
            answer_text.setAttribute("for", answer_radio.id);
            if (test_concluded && (challenge["correct_answer"] === answer_N)) {
                answer_text.classList.add("correct-answer")

                if (player_answer !== challenge["correct_answer"]) {
                    challenge_box.classList.add("bad-answer");
                }
            }

            answer_section.append(answer_radio, answer_text);
            answer_container.appendChild(answer_section);

            answer_N++;
        });
        challenge_N++;

        test_display.appendChild(challenge_box);
    });

    MathJax.typeset();
}

function populate_all(test_id, view_only) {
    let req = {
        action: "get_test",
        view_only: view_only,
        testid: test_id
    }
    request(req).then(resp => {
        TEST_DATA = JSON.parse(resp);
        populate_challenges(TEST_DATA, view_only);
        populate_infobox(TEST_DATA, view_only);
    });
}

function save_answer(chidx, aidx) {
    let req = {
        action: "save_answer",
        testid: TEST_DATA["_id"],
        challenge_index: chidx,
        answer_index: aidx,
    };
    request(req);
}

function submit_test() {
    let req = {
        action: "submit_test",
        testid: TEST_DATA["_id"]
    }
    request(req).then(resp => {
        populate_all(TEST_DATA["_id"]);
    });
}