English Quiz
What is the opposite of hot?
Results
You got out of questions correct!
以下がHTML/CSS/JavaScriptで実装された、要望に沿った英単語テストのアプリです。セキュリティ上の懸念があるため、evalや外部サイトへの遷移は行っていません。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>English Quiz</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
.quiz-container {
border: 1px solid black;
padding: 10px;
margin: 20px auto;
width: 80%;
}
p {
margin: 10px 0;
}
.answer-btn {
margin: 10px;
padding: 5px 10px;
border: 1px solid black;
background-color: #EDF2F7;
cursor: pointer;
}
.correct {
color: green;
}
.incorrect {
color: red;
}
.result-container {
border: 1px solid black;
padding: 10px;
margin: 20px auto;
width: 50%;
}
</style>
</head>
<body>
<div class="quiz-container">
<h1>English Quiz</h1>
<p id="question">What is the opposite of hot?</p>
<div id="answers">
<button class="answer-btn">Cold</button>
<button class="answer-btn">Tall</button>
<button class="answer-btn">Fast</button>
<button class="answer-btn">Big</button>
</div>
<p id="result"></p>
<button id="next-btn">Next</button>
</div>
<div id="result-container" class="result-container" style="display:none;">
<h2>Results</h2>
<p>You got <span id="score"></span> out of <span id="total"></span> questions correct!</p>
<button id="retry-btn">Retry</button>
</div>
<script>
const questions = [
{
question: "What is the opposite of hot?",
options: ["Cold", "Tall", "Fast", "Big"],
answer: "Cold",
explanation: "Cold is the opposite of hot."
},
{
question: "What is another word for happy?",
options: ["Sad", "Tired", "Excited", "Boring"],
answer: "Excited",
explanation: "Being happy is often associated with feeling excited."
},
{
question: "What is the capital of Japan?",
options: ["Tokyo", "Kyoto", "Osaka", "Sapporo"],
answer: "Tokyo",
explanation: "Tokyo is the capital of Japan."
},
{
question: "What is the name of the largest ocean on earth?",
options: ["Atlantic", "Indian", "Arctic", "Pacific"],
answer: "Pacific",
explanation: "The Pacific Ocean is the largest ocean on earth."
},
{
question: "What is the past participle of the verb 'eat'?",
options: ["Eaten", "Ate", "Eating", "Eats"],
answer: "Eaten",
explanation: "The past participle of the verb 'eat' is 'eaten'."
},
{
question: "What is the opposite of full?",
options: ["Empty", "Heavy", "Hard", "Soft"],
answer: "Empty",
explanation: "Empty is the opposite of full."
},
{
question: "What is the name of the largest desert in the world?",
options: ["Atacama", "Kalahari", "Gobi", "Sahara"],
answer: "Sahara",
explanation: "The Sahara is the largest desert in the world."
},
{
question: "What is the name of the longest river in the world?",
options: ["Nile", "Amazon", "Yangtze", "Mississippi"],
answer: "Nile",
explanation: "The Nile is the longest river in the world."
},
{
question: "What is the opposite of up?",
options: ["Down", "Right", "Left", "Forward"],
answer: "Down",
explanation: "Down is the opposite of up."
},
{
question: "What is the name of the world's tallest mountain?",
options: ["Denali", "Kilimanjaro", "Everest", "Aconcagua"],
answer: "Everest",
explanation: "Mount Everest is the tallest mountain in the world."
}
];
let currentQuestion = 0;
let score = 0;
const questionEl = document.getElementById("question");
const answersEl = document.getElementById("answers");
const resultEl = document.getElementById("result");
const nextBtn = document.getElementById("next-btn");
const scoreEl = document.getElementById("score");
const totalQuestions = questions.length;
const totalEl = document.getElementById("total");
const resultContainer = document.getElementById("result-container");
const retryBtn = document.getElementById("retry-btn");
function setupQuiz() {
const currentQuizData = questions[currentQuestion];
questionEl.innerHTML = currentQuizData.question;
answersEl.innerHTML = "";
currentQuizData.options.forEach(option => {
const answerBtn = document.createElement("button");
answerBtn.classList.add("answer-btn");
answerBtn.innerHTML = option;
answerBtn.addEventListener("click", () => {
if (option === currentQuizData.answer) {
answerBtn.classList.add("correct");
resultEl.innerHTML = `Correct! ${currentQuizData.explanation}`;
score++;
} else {
answerBtn.classList.add("incorrect");
resultEl.innerHTML = `Incorrect. The correct answer is ${currentQuizData.answer}. ${currentQuizData.explanation}`;
}
disableAnswerBtns();
});
answersEl.appendChild(answerBtn);
});
resultEl.innerHTML = "";
nextBtn.disabled = true;
}
function disableAnswerBtns() {
const answerBtns = document.getElementsByClassName("answer-btn");
for (let i = 0; i < answerBtns.length; i++) {
answerBtns[i].disabled = true;
}
}
function enableAnswerBtns() {
const answerBtns = document.getElementsByClassName("answer-btn");
for (let i = 0; i < answerBtns.length; i++) {
answerBtns[i].disabled = false;
answerBtns[i].classList.remove("correct", "incorrect");
}
}
function showNextQuestion() {
currentQuestion++;
if (currentQuestion >= totalQuestions) {
showResults();
} else {
setupQuiz();
enableAnswerBtns();
nextBtn.disabled = true;
}
}
function showResults() {
resultContainer.style.display = "block";
scoreEl.innerHTML = score;
totalEl.innerHTML = totalQuestions;
}
function resetQuiz() {
currentQuestion = 0;
score = 0;
resultContainer.style.display = "none";
setupQuiz();
}
setupQuiz();
nextBtn.addEventListener("click", showNextQuestion);
retryBtn.addEventListener("click", resetQuiz);
const answerBtns = document.getElementsByClassName("answer-btn");
for (let i = 0; i < answerBtns.length; i++) {
answerBtns[i].addEventListener("click", () => {
nextBtn.disabled = false;
});
}
</script>
</body>
</html>
```
このアプリでは、`questions`という配列にクイズの問題文、選択肢、答え、答えの説明が入っています。JavaScriptで動的にHTMLを生成するために、それらのデータを使用して問題と選択肢を作成しています。ユーザーが選択肢をクリックすると、正解か不正解かに応じてメッセージが表示され、スコアが増えます。すべての問題が終了したら、リザルト画面が表示されて正解数が表示されます。リトライボタンをクリックすると、クイズがリセットされます。