diff --git a/html/quis.html b/html/quis.html new file mode 100644 index 0000000..2e454b8 --- /dev/null +++ b/html/quis.html @@ -0,0 +1,15 @@ + + + + + クイズ サンプル + + +

3択クイズ

+
+ +

+ + + + \ No newline at end of file diff --git a/html/quiz.js b/html/quiz.js new file mode 100644 index 0000000..f4ee2f0 --- /dev/null +++ b/html/quiz.js @@ -0,0 +1,35 @@ +document.addEventListener("DOMContentLoaded", function(){ + let questions = []; + let form = document.getElementById("quizform"); + let result = document.getElementById("result"); + + fetch("question.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) + }); + } + renderQuestions(); + }); + + 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); + + q.options.forEach((opt, i)=> { + let label = document.createElement("label"); + let radio = document.createElement("input"); + }) + }) + }