Newer
Older
m3 / SilkReRoad / quiz / mondai.js
@HIROSE Yuuji HIROSE Yuuji on 2 Aug 2020 2 KB Add buttons
async function init() {
    var number = 0;		// Current quiz Number
    var csvquestion;		// Questions read from "quiz.csv"
    var mykey = "silkreroad-hash";
    var saveslot=localStorage.getItem(mykey)||"{}";

    function prepare(n) {	// Prepare Question Page of Number n
	var qn = csvquestion[n];
	for (var id of ["title", "q", "choice0", "choice1", "choice2"]) {
	    document.getElementById(id).innerHTML = qn[id];
	}
	document.forms[0].reset();	// Reset radio buttons
	document.getElementById("image").setAttribute("src", "image/"+qn.image);
    }
    function output(message) {
	var output = document.getElementById("output");
	output.innerHTML = message;
    }
    function saveSlot(p) {
	let val = JSON.parse(localStorage.getItem(mykey)||"{}");
	val[p] = "yes";
	output(JSON.stringify(val));
	localStorage.setItem(mykey, JSON.stringify(val));
    }
    function showScore() {
	var val = localStorage.getItem(mykey)||"{}"
	let score = Object.keys(JSON.parse(val)).length
	//output(score+"点です。"+JSON.stringify(localStorage.getItem(mykey)));
	var o="val="+val+", score="+score
	output(o);
    }
    function resetScore() {
	for (let key in localStorage)
	    if (localStorage.hasOwnProperty(key))
		localStorage.removeItem(key);
	output("0点です。");
    }
    function judge() {
	var input = document.forms[0].q1.value;
	var selection = parseInt(input);
	var q = csvquestion[number];
	var ans = q.a
	var msg;
	output("");
	if (input == "") {
	    alert('ボタンが選択されていません。');
	    return;
	} else if (selection == ans) {
	    msg= "正解です: "
	    saveSlot(number);
	} else {
	    msg = "不正解です: ";
	}
	output(msg+q["comment"+selection]);
    }
    function prev() {
	number = Math.max(0, number-1);
	prepare(number);
    }
    function next() {
	number = Math.min(number+1, csvquestion.length-1);
	prepare(number);
    }
    //https://ja.javascript.info/fetch
    //csvquestion = new CSV(await (await fetch("quiz.csv")).text(), {header: true}).parse();
    fetch("./quiz.csv").
	then(function(resp) {
	    return resp.text().then(function(text) {
		csvquestion = new CSV(text, {header: true}).parse();
		prepare(0);
	    });
	});
    document.getElementById("judge").addEventListener("click", judge);
    document.getElementById("prev").addEventListener("click", prev);
    document.getElementById("next").addEventListener("click", next);
    document.getElementById("show").addEventListener("click", showScore);
    document.getElementById("reset").addEventListener("click", resetScore);
}
window.onload = init;