Click here for free DL of the app version that can save data.

No:31138

←

Prev Next

→

英単語テスト5問
Developer User14987｜Date and time 23/12/25 8:07:09
Build time 22.039 sec｜Game capacity 3.004KB｜

Script

英単語テスト

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
<title>英単語テスト</title>
<style>
body {
  background-color: #f3f3f3;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  text-align: center;
}

.question {
  font-size: 24px;
  margin-bottom: 20px;
}

input[type="text"] {
  padding: 10px;
  font-size: 18px;
}

button {
  padding: 10px 20px;
  font-size: 18px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

.result {
  font-size: 24px;
  margin-top: 20px;
}

</style>
</head>
<body>
<script>
// 英単語と対応する意味のデータ
const words = {
  "リンゴ": "apple",
  "バナナ": "banana",
  "ニンジン": "carrot",
  "イヌ": "dog",
  "ゾウ": "elephant"
};

// 問題の数
const numQuestions = 5;

// 現在の問題番号
let currentQuestion = 0;

// 正答数
let correctAnswers = 0;

// 出題する英単語をランダムに選択する関数
function selectWord() {
  const wordKeys = Object.keys(words);
  const randomIndex = Math.floor(Math.random() * wordKeys.length);
  return wordKeys[randomIndex];
}

// 問題を表示する関数
function displayQuestion() {
  const questionElement = document.getElementById("question");
  const word = selectWord();
  questionElement.textContent = `What is the meaning of "${word}"?`;
  return word;
}

// テスト開始ボタンをクリックしたときの処理
function startTest() {
  document.getElementById("start-button").style.display = "none";
  document.getElementById("input-answer").style.display = "block";
  document.getElementById("submit-button").style.display = "block";
  document.getElementById("result").textContent = "";
  displayQuestion();
}

// 解答をチェックする関数
function checkAnswer() {
  const answerElement = document.getElementById("answer");
  const answer = answerElement.value;
  const word = displayQuestion();
  
  if (answer.toLowerCase() === words[word]) {
    correctAnswers++;
  }
  
  answerElement.value = "";
  currentQuestion++;
  
  if (currentQuestion >= numQuestions) {
    document.getElementById("input-answer").style.display = "none";
    document.getElementById("submit-button").style.display = "none";
    document.getElementById("result").textContent = `Your score: ${correctAnswers}/${numQuestions}`;
    document.getElementById("start-button").style.display = "block";
    currentQuestion = 0;
    correctAnswers = 0;
  }
}

</script>
<div class="container">
  <h1>英単語テスト</h1>
  <p id="question" class="question"></p>
  <div id="input-answer" style="display: none;">
    <input type="text" id="answer" placeholder="Answer">
  </div>
  <button id="submit-button" onclick="checkAnswer()" style="display: none;">Submit</button>
  <p id="result" class="result"></p>
  <button id="start-button" onclick="startTest()">Start Test</button>
</div>
</body>
</html>