111 lines
		
	
	
		
			4.5 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			111 lines
		
	
	
		
			4.5 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
function list_available_games() {
 | 
						|
    let game_list_panel = document.getElementById("game_list_panel");
 | 
						|
 | 
						|
    let req = {
 | 
						|
        action: "get_available_games"
 | 
						|
    }
 | 
						|
    request(req).then(resp => {
 | 
						|
        let games_by_groups = JSON.parse(resp);
 | 
						|
        games_by_groups.forEach((game_collection) => {
 | 
						|
            let group_box = document.createElement("section");
 | 
						|
            group_box.classList.add("group-box");
 | 
						|
            let group_box_caption_container = document.createElement("span");
 | 
						|
            group_box_caption_container.classList.add("group-box-caption-container");
 | 
						|
            let group_box_caption = document.createElement("span");
 | 
						|
            group_box_caption.classList.add("group-box-caption");
 | 
						|
            group_box_caption.innerHTML = game_collection["groupname"];
 | 
						|
            group_box_caption_container.append(group_box_caption);
 | 
						|
            let group_box_inner = document.createElement("section");
 | 
						|
            group_box_inner.classList.add("group-box-inner");
 | 
						|
            group_box.append(group_box_caption_container, group_box_inner);
 | 
						|
 | 
						|
            game_collection["games"].forEach((game) => {
 | 
						|
                let game_box = document.createElement("section");
 | 
						|
                game_box.classList.add("game-box");
 | 
						|
                game_box.addEventListener("click", () => {
 | 
						|
                    start_or_continue_test(game["_id"]);
 | 
						|
                });
 | 
						|
 | 
						|
                let game_box_caption = document.createElement("section");
 | 
						|
                game_box_caption.classList.add("game-box-caption");
 | 
						|
                game_box_caption.innerHTML = game["name"];
 | 
						|
 | 
						|
                let list_results_btn = document.createElement("section");
 | 
						|
                list_results_btn.classList.add("list-results-btn", "material", "btn");
 | 
						|
                list_results_btn.addEventListener("click", (event) => {
 | 
						|
                    event.stopPropagation();
 | 
						|
                    list_corresponding_results(game["_id"]);
 | 
						|
                });
 | 
						|
                list_results_btn.innerHTML = "";
 | 
						|
 | 
						|
                game_box.append(game_box_caption, list_results_btn);
 | 
						|
 | 
						|
                group_box_inner.append(game_box);
 | 
						|
            });
 | 
						|
 | 
						|
            game_list_panel.appendChild(group_box);
 | 
						|
        });
 | 
						|
    });
 | 
						|
}
 | 
						|
 | 
						|
function start_or_continue_test(gameid) {
 | 
						|
    let req = {
 | 
						|
        action: "start_or_continue_test",
 | 
						|
        gameid: gameid
 | 
						|
    }
 | 
						|
    request(req).then(resp => {
 | 
						|
        if (resp.length > 0) // response is non-zero
 | 
						|
        {
 | 
						|
            open_test(resp, gameid);
 | 
						|
        }
 | 
						|
    });
 | 
						|
}
 | 
						|
 | 
						|
function open_test(testid, gameid) {
 | 
						|
    window.open(`testground.php?testid=${testid}&gameid=${gameid}`, "_new");
 | 
						|
}
 | 
						|
 | 
						|
function list_corresponding_results(gameid) {
 | 
						|
    let results_overview_display = document.getElementById("results_overview_display");
 | 
						|
    results_overview_display.innerHTML = "";
 | 
						|
 | 
						|
    let req = {
 | 
						|
        action: "get_results_overview",
 | 
						|
        gameid: gameid
 | 
						|
    };
 | 
						|
    request(req).then(resp => {
 | 
						|
        let results = JSON.parse(resp);
 | 
						|
        let n = results.length;
 | 
						|
        if (n === 0) { // don't continue with processing an empty array
 | 
						|
            return;
 | 
						|
        }
 | 
						|
        results.sort((a,b) => {return Number(b["_id"]) - Number(a["_id"])}); // sort records by ID
 | 
						|
        results.forEach((record) => {
 | 
						|
           let test_summary_record = document.createElement("section");
 | 
						|
           test_summary_record.classList.add("test-summary-record");
 | 
						|
           test_summary_record.addEventListener("click", () => {
 | 
						|
              open_test(record["testid"]);
 | 
						|
           });
 | 
						|
 | 
						|
           let sequence_number_sec = document.createElement("section");
 | 
						|
           sequence_number_sec.classList.add("summary-sequence-number");
 | 
						|
           sequence_number_sec.innerText = "#" + n;
 | 
						|
           let duration_sec = document.createElement("section");
 | 
						|
           duration_sec.classList.add("summary-duration");
 | 
						|
           let start_time = unix_time_to_human_readable(record["start_time"]);
 | 
						|
           let end_time = unix_time_to_human_readable(record["end_time"]);
 | 
						|
           duration_sec.innerHTML = `${start_time}-<br>${end_time}<br>${record["correct_answer_n"]}/${record["challenge_n"]}`;
 | 
						|
 | 
						|
           let percentage = document.createElement("section");
 | 
						|
           percentage.classList.add("summary-percentage");
 | 
						|
           let r = Math.floor((record["correct_answer_n"] / record["challenge_n"]) * 100);
 | 
						|
           percentage.innerHTML = `${r}%`;
 | 
						|
 | 
						|
           test_summary_record.append(sequence_number_sec, duration_sec, percentage);
 | 
						|
           results_overview_display.appendChild(test_summary_record);
 | 
						|
 | 
						|
           n--;
 | 
						|
        });
 | 
						|
        show("results_window")
 | 
						|
    });
 | 
						|
} |