This is Lightbox
페이지 정보
본문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quiz Application with Hints</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;
}
.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 with Hints</h1>
<div id="quiz-container"></div>
<button onclick="submitQuiz()">Submit</button>
<div id="result" class="score"></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,
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,
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,
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,
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,
hint: "This element is essential for respiration in most living organisms."
}
];
// 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}</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;
quiz.forEach((item, index) => {
const selectedOption = document.querySelector(`input[name="question${index}"]:checked`);
if (selectedOption && selectedOption.value === item.answer) {
score += item.points;
}
});
const resultDiv = document.getElementById("result");
resultDiv.innerHTML = `Your score is ${score} out of ${quiz.reduce((acc, item) => acc + item.points, 0)}`;
}
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 with Hints</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;
}
.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 with Hints</h1>
<div id="quiz-container"></div>
<button onclick="submitQuiz()">Submit</button>
<div id="result" class="score"></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,
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,
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,
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,
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,
hint: "This element is essential for respiration in most living organisms."
}
];
// 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}</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;
quiz.forEach((item, index) => {
const selectedOption = document.querySelector(`input[name="question${index}"]:checked`);
if (selectedOption && selectedOption.value === item.answer) {
score += item.points;
}
});
const resultDiv = document.getElementById("result");
resultDiv.innerHTML = `Your score is ${score} out of ${quiz.reduce((acc, item) => acc + item.points, 0)}`;
}
window.onload = displayQuiz;
</script>
</body>
</html>
Quiz Application with Hints
- 이전글객관식 문제풀이 24.08.19
댓글목록
등록된 댓글이 없습니다.