SpreadQuiz/js/result_analyzer.js

function create_cell(content = "") {
    let cell = document.createElement("td");
    cell.innerHTML = content;
    return cell;
}

function fetch_results() {

    let filterF = document.getElementById("filter");
    let orderbyF = document.getElementById("orderby");

    let req = {
        action: "get_results_by_gameid",
        gameid: GAMEID,
        filter: filterF.value.trim(),
        orderby: orderbyF.value.trim()
    };

    request(req).then(resp => {
        let rd = document.getElementById("results_display");

        let results = JSON.parse(resp);
        let empty_resp = results.length === 0;
        rd.innerHTML = empty_resp ? "Nincs találat." : "";
        if (empty_resp) {
            return;
        }

        // let n = results.length;

        results.forEach((record) => {
            let row = document.createElement("tr");

            // is the game concluded
            let concluded = record["state"] === "concluded";

            let percentage = "";
            let start_timestamp = unix_time_to_human_readable(record["start_time"]);
            let end_timestamp = "";

            // replace some fields if game was concluded
            if (concluded) {
                // percentage
                let summary = record["summary"];
                let r = Math.floor((summary["correct_answer_n"] / summary["challenge_n"]) * 100);
                percentage = `${r}%`;

                // finish timestamp
                end_timestamp = unix_time_to_human_readable(record["end_time"]);
            }

            // create cells
            let selectChk = document.createElement("input");
            selectChk.type = "checkbox";
            selectChk.name = "game_select";
            selectChk.record = record;

            let selection_cell = create_cell();
            selection_cell.append(selectChk);

            let id_cell = create_cell(record["_id"]);

            let inspect_link = `<a href="testground.php?testid=${record["_id"]}&view_only=true" target="_blank">&#x1F50E;</a>`
            let inspect_cell = create_cell(inspect_link);
            let name_cell = create_cell(record.nickname)
            let percentage_cell = create_cell(percentage)
            let start_timestamp_cell = create_cell(start_timestamp);
            let end_timestamp_cell = create_cell(end_timestamp);

            row.append(selection_cell, id_cell, inspect_cell, name_cell, percentage_cell, start_timestamp_cell, end_timestamp_cell);

            // save record data into the row object
            row.record = record;

            // append row
            rd.appendChild(row);
        });

    });
}

function generate_report() {
    let testids = [];
    let game_selectChks = document.getElementsByName("game_select");
    game_selectChks.forEach((chk) => {
        if (chk.checked) {
            testids.push(chk.record["_id"]);
        }
    });

    let req = {
        action: "generate_detailed_stats",
        gameid: GAMEID,
        testids: JSON.stringify(testids)
    };

    request(req).then((resp) => {
        let stats = JSON.parse(resp);
        let statsTab = window.open("report.html", "_blank");

        statsTab.addEventListener("load", () => {
            let report_display = statsTab.document.getElementById("report_display");
            report_display.innerHTML = "";

            stats.forEach((challenge) => {
                let challenge_box = document.createElement("section");
                challenge_box.classList.add("challenge");
                challenge_box.style.width = "100%";

                let img_url = challenge["image_url"];
                if (img_url !== "") {
                    let fig = document.createElement("img");
                    fig.src = img_url;
                    fig.classList.add("question-image");
                    challenge_box.append(fig);
                }

                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 n = challenge["answer_count"];
                for (let i = 0; i < n; i++) {
                    let answer = challenge["answers"][i];
                    let correct_answer = answer === challenge["correct_answer"];

                    let answer_section = document.createElement("section");
                    answer_section.classList.add("answer");

                    let progress_bar_container = document.createElement("section");
                    progress_bar_container.classList.add("pb-container")
                    let progress_bar_indicator = document.createElement("section");
                    progress_bar_indicator.classList.add("pb-indicator")

                    let percentage = challenge["answer_ratio"][i] * 100;
                    progress_bar_indicator.style.width = `${percentage}%`;
                    progress_bar_indicator.innerText = Math.round(percentage * 100.0) / 100.0 + "%";
                    progress_bar_indicator.setAttribute("correct", correct_answer ? "true" : "false");

                    progress_bar_container.append(progress_bar_indicator);

                    let answer_text = document.createElement("span");
                    answer_text.classList.add("answer");
                    answer_text.innerHTML = preprocess_inserts(answer);
                    answer_text.setAttribute("correct", correct_answer ? "true" : "false");

                    answer_section.append(progress_bar_container, answer_text);

                    answer_container.append(answer_section);
                }

                report_display.append(challenge_box);
            });

            statsTab.MathJax.typeset();
        });
    });
}

function toggle_test_selection() {
    let game_selectChks = document.getElementsByName("game_select");
    game_selectChks.forEach((chk) => {
        chk.checked = !chk.checked;
    });
}