function init() {
    var number = 0;
    var csvquestion;

    function prepare(n) {
	var qn = csvquestion[n];
	for (var id of ["title", "q"]) {
	    document.getElementById(id).innerHTML = qn[id];
	}
	document.forms[0].reset();
	document.getElementById("image").setAttribute("src", "image/"+qn.image);
    }
    function prev() {
	number = Math.max(0, number-1);
	prepare(number);
    }
    function next() {
	number = Math.min(number+1, csvquestion.length-1);
	prepare(number);
    }
    fetch("./story.csv").
	then(function(resp) {
	    return resp.text().then(function(text) {
		csvquestion = new CSV(text, {header: true}).parse();
		prepare(0);
	    });
	});
    document.getElementById("prev").addEventListener("click", prev);
    document.getElementById("next").addEventListener("click", next);
    // prepare(0);
}
window.onload = init;