힌트보기 문제풀이
페이지 정보
작성자 최고관리자 작성일 24-08-20 02:16 조회 73 댓글 0본문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quiz Application</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.question {
margin-bottom: 20px;
}
.options {
list-style-type: none;
padding: 0;
}
.options li {
margin-bottom: 10px;
}
.score {
font-size: 1.5em;
margin-top: 20px;
}
.points {
color: red;
font-weight: bold;
}
.correct-answer {
color: green;
font-weight: bold;
}
.hint-button {
margin-top: 10px;
margin-bottom: 10px;
}
.hint {
display: none;
margin-top: 10px;
background-color: #f9f9f9;
padding: 10px;
border-left: 4px solid #ccc;
}
</style>
</head>
<body>
<h1>Quiz Application</h1>
<div id="quiz-container"></div>
<button onclick="submitQuiz()">Submit</button>
<div id="result" class="score"></div>
<div id="feedback"></div>
<script>
const quiz = [
{
question: "1. Which planet is known as the Red Planet?",
options: [
"A) Earth",
"B) Mars",
"C) Jupiter",
"D) Venus"
],
answer: "B",
points: 3,
explanation: "Mars is called the Red Planet because of its reddish appearance, which is due to iron oxide (rust) on its surface.",
hint: "This planet is famous for its reddish appearance."
},
{
question: "2. What is the largest ocean on Earth?",
options: [
"A) Atlantic Ocean",
"B) Indian Ocean",
"C) Arctic Ocean",
"D) Pacific Ocean"
],
answer: "D",
points: 5,
explanation: "The Pacific Ocean is the largest and deepest ocean, covering more area than all the Earth's land combined.",
hint: "This ocean is larger than all the Earth's land area combined."
},
{
question: "3. Who wrote 'Romeo and Juliet'?",
options: [
"A) Charles Dickens",
"B) Mark Twain",
"C) William Shakespeare",
"D) Leo Tolstoy"
],
answer: "C",
points: 2,
explanation: "William Shakespeare is the author of 'Romeo and Juliet', one of the most famous plays in English literature.",
hint: "This author is widely regarded as one of the greatest playwrights in English literature."
},
{
question: "4. What is the capital of Japan?",
options: [
"A) Beijing",
"B) Seoul",
"C) Tokyo",
"D) Bangkok"
],
answer: "C",
points: 4,
explanation: "Tokyo is the capital city of Japan, known for its modern architecture, shopping, and pop culture.",
hint: "This city is known for its modern architecture, shopping, and pop culture."
},
{
question: "5. Which element has the chemical symbol 'O'?",
options: [
"A) Oxygen",
"B) Gold",
"C) Silver",
"D) Iron"
],
answer: "A",
points: 1,
explanation: "Oxygen is a chemical element with the symbol 'O', essential for respiration in most living organisms.",
hint: "This element is essential for respiration in most living organisms."
},
{
question: "6. What is the smallest country in the world?",
options: [
"A) Vatican City",
"B) Monaco",
"C) San Marino",
"D) Liechtenstein"
],
answer: "A",
points: 2,
explanation: "Vatican City is the smallest independent state in the world, both in terms of area and population.",
hint: "This country is known for being the smallest independent state in both area and population."
},
{
question: "7. Who painted the Mona Lisa?",
options: [
"A) Vincent van Gogh",
"B) Pablo Picasso",
"C) Leonardo da Vinci",
"D) Claude Monet"
],
answer: "C",
points: 3,
explanation: "Leonardo da Vinci painted the Mona Lisa, which is one of the most recognized and valuable paintings in the world.",
hint: "This artist is famous for painting the Mona Lisa."
},
{
question: "8. What is the chemical symbol for water?",
options: [
"A) O2",
"B) H2O",
"C) CO2",
"D) HO"
],
answer: "B",
points: 4,
explanation: "Water is composed of two hydrogen atoms and one oxygen atom, which is why its chemical formula is H2O.",
hint: "This molecule is composed of two hydrogen atoms and one oxygen atom."
},
{
question: "9. Which language is the most spoken worldwide?",
options: [
"A) English",
"B) Spanish",
"C) Mandarin",
"D) Hindi"
],
answer: "C",
points: 5,
explanation: "Mandarin is the most spoken language in the world, with over a billion native speakers, mostly in China.",
hint: "This language is spoken by over a billion people, mainly in China."
},
{
question: "10. How many continents are there?",
options: [
"A) 5",
"B) 6",
"C) 7",
"D) 8"
],
answer: "C",
points: 2,
explanation: "There are 7 continents on Earth: Africa, Antarctica, Asia, Europe, North America, Australia, and South America.",
hint: "There are 7 of these on Earth, including Africa and Asia."
}
];
// Display the quiz
function displayQuiz() {
const quizContainer = document.getElementById("quiz-container");
quiz.forEach((item, index) => {
const questionDiv = document.createElement("div");
questionDiv.className = "question";
questionDiv.innerHTML = `<p>${item.question} <span class="points">(${item.points} points)</span></p>`;
const optionsList = document.createElement("ul");
optionsList.className = "options";
item.options.forEach(option => {
const optionItem = document.createElement("li");
optionItem.innerHTML = `
<label>
<input type="radio" name="question${index}" value="${option[0]}">
${option}
</label>
`;
optionsList.appendChild(optionItem);
});
const hintButton = document.createElement("button");
hintButton.textContent = "Show Hint";
hintButton.className = "hint-button";
hintButton.onclick = () => {
const hint = document.getElementById(`hint${index}`);
hint.style.display = hint.style.display === "none" ? "block" : "none";
hintButton.textContent = hint.style.display === "none" ? "Show Hint" : "Hide Hint";
};
const hintDiv = document.createElement("div");
hintDiv.className = "hint";
hintDiv.id = `hint${index}`;
hintDiv.textContent = item.hint;
questionDiv.appendChild(optionsList);
questionDiv.appendChild(hintButton);
questionDiv.appendChild(hintDiv);
quizContainer.appendChild(questionDiv);
});
}
// Submit the quiz and calculate the score
function submitQuiz() {
let score = 0;
let feedbackHtml = '';
quiz.forEach((item, index) => {
const selectedOption = document.querySelector(`input[name="question${index}"]:checked`);
if (selectedOption && selectedOption.value === item.answer) {
score += item.points;
} else {
feedbackHtml += `<p>You got question ${index + 1} wrong. The correct answer is <span class="correct-answer">${item.answer}</span> (${item.points} points). ${item.explanation}</p>`;
}
});
const resultDiv = document.getElementById("result");
resultDiv.innerHTML = `Your score is ${score} out of ${quiz.reduce((acc, item) => acc + item.points, 0)}.`;
const feedbackDiv = document.getElementById("feedback");
feedbackDiv.innerHTML = feedbackHtml;
}
window.onload = displayQuiz;
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quiz Application</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.question {
margin-bottom: 20px;
}
.options {
list-style-type: none;
padding: 0;
}
.options li {
margin-bottom: 10px;
}
.score {
font-size: 1.5em;
margin-top: 20px;
}
.points {
color: red;
font-weight: bold;
}
.correct-answer {
color: green;
font-weight: bold;
}
.hint-button {
margin-top: 10px;
margin-bottom: 10px;
}
.hint {
display: none;
margin-top: 10px;
background-color: #f9f9f9;
padding: 10px;
border-left: 4px solid #ccc;
}
</style>
</head>
<body>
<h1>Quiz Application</h1>
<div id="quiz-container"></div>
<button onclick="submitQuiz()">Submit</button>
<div id="result" class="score"></div>
<div id="feedback"></div>
<script>
const quiz = [
{
question: "1. Which planet is known as the Red Planet?",
options: [
"A) Earth",
"B) Mars",
"C) Jupiter",
"D) Venus"
],
answer: "B",
points: 3,
explanation: "Mars is called the Red Planet because of its reddish appearance, which is due to iron oxide (rust) on its surface.",
hint: "This planet is famous for its reddish appearance."
},
{
question: "2. What is the largest ocean on Earth?",
options: [
"A) Atlantic Ocean",
"B) Indian Ocean",
"C) Arctic Ocean",
"D) Pacific Ocean"
],
answer: "D",
points: 5,
explanation: "The Pacific Ocean is the largest and deepest ocean, covering more area than all the Earth's land combined.",
hint: "This ocean is larger than all the Earth's land area combined."
},
{
question: "3. Who wrote 'Romeo and Juliet'?",
options: [
"A) Charles Dickens",
"B) Mark Twain",
"C) William Shakespeare",
"D) Leo Tolstoy"
],
answer: "C",
points: 2,
explanation: "William Shakespeare is the author of 'Romeo and Juliet', one of the most famous plays in English literature.",
hint: "This author is widely regarded as one of the greatest playwrights in English literature."
},
{
question: "4. What is the capital of Japan?",
options: [
"A) Beijing",
"B) Seoul",
"C) Tokyo",
"D) Bangkok"
],
answer: "C",
points: 4,
explanation: "Tokyo is the capital city of Japan, known for its modern architecture, shopping, and pop culture.",
hint: "This city is known for its modern architecture, shopping, and pop culture."
},
{
question: "5. Which element has the chemical symbol 'O'?",
options: [
"A) Oxygen",
"B) Gold",
"C) Silver",
"D) Iron"
],
answer: "A",
points: 1,
explanation: "Oxygen is a chemical element with the symbol 'O', essential for respiration in most living organisms.",
hint: "This element is essential for respiration in most living organisms."
},
{
question: "6. What is the smallest country in the world?",
options: [
"A) Vatican City",
"B) Monaco",
"C) San Marino",
"D) Liechtenstein"
],
answer: "A",
points: 2,
explanation: "Vatican City is the smallest independent state in the world, both in terms of area and population.",
hint: "This country is known for being the smallest independent state in both area and population."
},
{
question: "7. Who painted the Mona Lisa?",
options: [
"A) Vincent van Gogh",
"B) Pablo Picasso",
"C) Leonardo da Vinci",
"D) Claude Monet"
],
answer: "C",
points: 3,
explanation: "Leonardo da Vinci painted the Mona Lisa, which is one of the most recognized and valuable paintings in the world.",
hint: "This artist is famous for painting the Mona Lisa."
},
{
question: "8. What is the chemical symbol for water?",
options: [
"A) O2",
"B) H2O",
"C) CO2",
"D) HO"
],
answer: "B",
points: 4,
explanation: "Water is composed of two hydrogen atoms and one oxygen atom, which is why its chemical formula is H2O.",
hint: "This molecule is composed of two hydrogen atoms and one oxygen atom."
},
{
question: "9. Which language is the most spoken worldwide?",
options: [
"A) English",
"B) Spanish",
"C) Mandarin",
"D) Hindi"
],
answer: "C",
points: 5,
explanation: "Mandarin is the most spoken language in the world, with over a billion native speakers, mostly in China.",
hint: "This language is spoken by over a billion people, mainly in China."
},
{
question: "10. How many continents are there?",
options: [
"A) 5",
"B) 6",
"C) 7",
"D) 8"
],
answer: "C",
points: 2,
explanation: "There are 7 continents on Earth: Africa, Antarctica, Asia, Europe, North America, Australia, and South America.",
hint: "There are 7 of these on Earth, including Africa and Asia."
}
];
// Display the quiz
function displayQuiz() {
const quizContainer = document.getElementById("quiz-container");
quiz.forEach((item, index) => {
const questionDiv = document.createElement("div");
questionDiv.className = "question";
questionDiv.innerHTML = `<p>${item.question} <span class="points">(${item.points} points)</span></p>`;
const optionsList = document.createElement("ul");
optionsList.className = "options";
item.options.forEach(option => {
const optionItem = document.createElement("li");
optionItem.innerHTML = `
<label>
<input type="radio" name="question${index}" value="${option[0]}">
${option}
</label>
`;
optionsList.appendChild(optionItem);
});
const hintButton = document.createElement("button");
hintButton.textContent = "Show Hint";
hintButton.className = "hint-button";
hintButton.onclick = () => {
const hint = document.getElementById(`hint${index}`);
hint.style.display = hint.style.display === "none" ? "block" : "none";
hintButton.textContent = hint.style.display === "none" ? "Show Hint" : "Hide Hint";
};
const hintDiv = document.createElement("div");
hintDiv.className = "hint";
hintDiv.id = `hint${index}`;
hintDiv.textContent = item.hint;
questionDiv.appendChild(optionsList);
questionDiv.appendChild(hintButton);
questionDiv.appendChild(hintDiv);
quizContainer.appendChild(questionDiv);
});
}
// Submit the quiz and calculate the score
function submitQuiz() {
let score = 0;
let feedbackHtml = '';
quiz.forEach((item, index) => {
const selectedOption = document.querySelector(`input[name="question${index}"]:checked`);
if (selectedOption && selectedOption.value === item.answer) {
score += item.points;
} else {
feedbackHtml += `<p>You got question ${index + 1} wrong. The correct answer is <span class="correct-answer">${item.answer}</span> (${item.points} points). ${item.explanation}</p>`;
}
});
const resultDiv = document.getElementById("result");
resultDiv.innerHTML = `Your score is ${score} out of ${quiz.reduce((acc, item) => acc + item.points, 0)}.`;
const feedbackDiv = document.getElementById("feedback");
feedbackDiv.innerHTML = feedbackHtml;
}
window.onload = displayQuiz;
</script>
</body>
</html>
Quiz Application
댓글목록 0
등록된 댓글이 없습니다.