SpreadQuiz/js/testground.js

let TEST_DATA = {}
let INTERVAL_HANDLE = null;

function populate_infobox(test_data) {
    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");

    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 {
        if (test_data["time_limited"]) {
            let timerS = document.getElementById("timer");
            let time_left_s = Number(test_data["end_limit_time"]) - Number(test_data["current_time"]);
            seconds_to_time(time_left_s);
            INTERVAL_HANDLE = setInterval(() => {
                time_left_s--;
                timerS.innerHTML = seconds_to_time(time_left_s);
                if (time_left_s <= 0) {
                    populate_all(test_data["_id"]);
                    clearInterval(INTERVAL_HANDLE);
                    INTERVAL_HANDLE = null;
                }
            }, 1000);
        }

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

function populate_challenges(test_data) {
    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);

        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;
            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")
            }

            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) {
    let req = {
        action: "get_test",
        testid: test_id
    }
    request(req).then(resp => {
        TEST_DATA = JSON.parse(resp);
        populate_challenges(TEST_DATA);
        populate_infobox(TEST_DATA);
    });
}

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

function preprocess_inserts(str) {
    let code_delim = '`';
    let parts = str.split(code_delim);
    let res = "";
    for (let i = 0; i < parts.length; i++) {
        res += parts[i];
        if (i % 2 === 0) {
            res += "<code>";
        } else {
            res += "</code>";
        }
    }
    return res;
}

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