ChatGPTに英単語テストつくらせてみた結果

こんにちは。少し昔, pythonを使って自分で英単語テストを作ってみたんですが, 実装するにはよくわかんなかった。そこで, ChatGPTにhtml, css, javascriptで英単語テストを作ってとお願いして, できたのが以下の単語テストです。時間にして10秒ぐらいで返事が返ってきてびっくり。htmlに実装してできたのが以下の単語テスト。語数は少ないが土台としては十分な出来である。コードの動作確認はreplitで行えばいいかもしれない。未来感が半端なく伝わってくる。

英単語テスト

画像をクリックするか, こちらからどうぞ。

用途

単純に単語数を増やして単語テストが可能。
文法問題にも使えそうである。
社会の歴史など一問一答形式の問題に有効。
ランダム出題, 分野別出題など考えられる。

html,css,javascriptのコード

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>&copy; 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();

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)