// 読み込んだデータを1行ずつ格納する配列
(()=>{
var allData = [];
var now_question = 0;
var QUIZcsv = "4taku.csv";
function setQuestion(number){
var q = allData[number];
console.log(`number=${number}`);
document.getElementById("id_question").innerHTML=q.Q
document.getElementById("id_ChoiceA").innerHTML=q.A
document.getElementById("id_ChoiceB").innerHTML=q.B
document.getElementById("id_ChoiceC").innerHTML=q.C;
document.getElementById("id_ChoiceD").innerHTML=q.D;
document.getElementById("id_mondaigazo").src="img/"+q.IMG;
document.getElementById("id_kotae").innerHTML='';
// document.getElementById("id_miryo").innerHTML='';
}
function slide(n) {
let len = allData.length
now_question = (len+now_question+n)%len;
setQuestion(now_question);
}
function left() {slide(-1);}
function right() {slide(1);}
function answer(e){
var seikai = allData[now_question].ANS,
kaisetsu = allData[now_question].TEXT;
var kaitou = e.target.value;
if (kaitou == seikai){
document.getElementById("id_pf").innerHTML='正解です';
document.getElementById("id_kotae").innerHTML=kaisetsu;
document.body.style.background = "#d8e698";
} else {
// 不正解の時は背景色を変えたい
document.getElementById("id_pf").innerHTML='不正解 もう一度答えてみよう!';
document.body.style.background = "#696969 ";
}
}
function loadCSV(targetFile) {
fetch(targetFile). // csvfileをサーバから読み込んで
then((resp) => { // 応答がrespに入るので
if (resp.ok) return resp.text(); // テキストを返す
}).then((txt) => { // テキストが txt に入るので
allData = new CSV(txt, {header: true}).parse(); // CSV解析
setQuestion(0); // 最初の行のデータを表示
//console.log(`n=${allData.length}`);
//console.log(`1=${allData[1].TEXT}`);
});;
}
document.addEventListener("DOMContentLoaded", function() {
loadCSV(QUIZcsv);
var checks = document.getElementsByTagName('input'); //すべてのinput
for (let item of checks) {
if (item.getAttribute("name") == "questions") {
item.addEventListener("click", answer, false); //answer()関数を呼ぶ
}
}
document.getElementById("left").addEventListener("click", left);
document.getElementById("right").addEventListener("click", right);
}, false);
})();