数樂管理人のブログ 
こんにちは。少し昔, pythonを使って自分で英単語テストを作ってみたんですが, 実装するにはよくわかんなかった。そこで, ChatGPTにhtml, css, javascriptで英単語テストを作ってとお願いして, できたのが以下の単語テストです。時間にして10秒ぐらいで返事が返ってきてびっくり。htmlに実装してできたのが以下の単語テスト。語数は少ないが土台としては十分な出来である。コードの動作確認はreplitで行えばいいかもしれない。未来感が半端なく伝わってくる。
画像をクリックするか, こちらからどうぞ。
単純に単語数を増やして単語テストが可能。
文法問題にも使えそうである。
社会の歴史など一問一答形式の問題に有効。
ランダム出題, 分野別出題など考えられる。
HTML
<!DOCTYPE html>
<html>
<head>
<title>英語の単語テスト</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>英語の単語テスト</h1>
</header>
<main>
<div id="quiz">
<h2>問題</h2>
<p id="question"></p>
<div id="choices"></div>
<button id="submit">回答する</button>
</div>
<div id="results">
<h2>結果</h2>
<p>正解数: <span id="score"></span></p>
<button id="restart">もう一度やる</button>
</div>
</main>
<footer>
<p>© 2023 英語の単語テスト</p>
</footer>
<script src="script.js"></script>
</body>
</html>
CSS
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
h1 {
margin: 0;
}
main {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
#quiz {
background-color: #fff;
border: 1px solid #ccc;
padding: 20px;
margin-bottom: 20px;
}
#quiz h2 {
margin-top: 0;
}
#choices {
display: flex;
flex-wrap: wrap;
margin: 10px 0;
}
.choice {
background-color: #ccc;
padding: 10px;
margin-right: 10px;
margin-bottom: 10px;
cursor: pointer;
}
.choice:hover {
background-color: #999;
}
Javascript
// テストの問題と回答を定義
const quiz = [
{
question: "apple",
choices: ["りんご", "みかん", "バナナ"],
correctAnswer: "りんご"
},
{
question: "banana",
choices: ["みかん", "バナナ", "りんご"],
correctAnswer: "バナナ"
},
{
question: "orange",
choices: ["みかん", "バナナ", "オレンジ"],
correctAnswer: "オレンジ"
}
];
const quizContainer = document.getElementById("quiz");
const resultsContainer = document.getElementById("results");
const submitButton = document.getElementById("submit");
const restartButton = document.getElementById("restart");
const questionElement = document.getElementById("question");
const choicesElement = document.getElementById("choices");
const scoreElement = document.getElementById("score");
let currentQuestion = 0;
let score = 0;
function showQuestion() {
const question = quiz[currentQuestion];
questionElement.textContent = question.question;
choicesElement.innerHTML = "";
for (let i = 0; i < question.choices.length; i++) {
const choice = question.choices[i];
const choiceElement = document.createElement("div");
choiceElement.classList.add("choice");
choiceElement.textContent = choice;
choiceElement.addEventListener("click", function() {
checkAnswer(choice);
});
choicesElement.appendChild(choiceElement);
}
}
function checkAnswer(choice) {
const question = quiz[currentQuestion];
if (question.correctAnswer === choice) {
score++;
}
currentQuestion++;
if (currentQuestion < quiz.length) {
showQuestion();
} else {
showResults();
}
}
function showResults() {
quizContainer.style.display = "none";
resultsContainer.style.display = "block";
scoreElement.textContent = score;
}
function restartQuiz() {
currentQuestion = 0;
score = 0;
quizContainer.style.display = "block";
resultsContainer.style.display = "none";
showQuestion();
}
submitButton.addEventListener("click", function() {
checkAnswer();
});
restartButton.addEventListener("click", function() {
restartQuiz();
});
showQuestion();
