Newer
Older
j2321-tanakai / html / quiz.js
@j2321 j2321 11 days ago 2 KB 更新
document.addEventListener("DOMContentLoaded", function(){
    let questions = [];
    let form = document.getElementById("quizform");
    let result = document.getElementById("result");

    fetch("quiz.csv")
    .then(Response => Response.text())
    .then(data => {
        let lines = data.trim().split("\n");
        let headers = lines[0].split(",");
        for (let i = 1; i < lines.length; i++) {
            let cols = lines[i].split(",");
            questions.push({
                question: cols[0],
                options: [cols[1],cols[2],cols[3]],
                answer:parseInt(cols[4], 10)
            });
        }
        shuffle(questions);
        renderQuestions();
    });

    function shuffle(array) {
        for(let i = array.length -1; i > 0; i--){
            let j = Math.floor(Math.random() * (i + 1));
            [array[i], array[j]] = [array[j],array[i]];
        }
    }
    function renderQuestions(){
        questions.forEach((q, index)=> {
            let div = document.createElement("div");
            div.className = "question";
            let qText = document.createElement("p");
            qText.textContent = (index +1) + "." + q.question;
            div.appendChild(qText);
            
            let options = [...q.options];
            shuffle(options);

            options.forEach((opt, i)=> {
                let label = document.createElement("label");
                let radio = document.createElement("input");
            radio.type = "radio";
            radio.name = "q" + index;
            radio.value = q.options.indexOf(opt) + 1;
            label.appendChild(radio);
            label.appendChild(document.createTextNode(opt));
            div.appendChild(label);
            div.appendChild(document.createElement("br"));
            });
        form.appendChild(div);
    });
}

document.getElementById("submitBtn").addEventListener("click",function(){
    let score = 0;
    questions.forEach((q,index) => {
    let selected = document.querySelector('input[name = "q'+index + '"]:checked');       if(selected &&parseInt(selected.value,10)===q.answer){
            score++;
        }
        });
        result.textContent = "あなたのスコア:"+score+"/"+questions.length;
    });
});