챗gpt에 여러가지 조건을 붙여서 문제풀이를 만들어달라고 하니까 금방 생성이 되네요.
이러다가 어중간한 실력의 개발자들은 설 자리가 점점 적어질 것 같아 겁이 납니다.
<!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;
}
</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."
},
{
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."
},
{
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."
},
{
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."
},
{
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."
},
{
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."
},
{
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."
},
{
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."
},
{
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."
},
{
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."
}
];
// 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);
});
questionDiv.appendChild(optionsList);
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>
댓글 3개
게시글 목록
| 번호 | 제목 |
|---|---|
| 1717629 | |
| 1717626 | |
| 1717625 | |
| 1717621 | |
| 1717619 | |
| 1717611 | |
| 1717610 | |
| 1717609 | |
| 1717607 | |
| 1717601 | |
| 1717598 | |
| 1717591 | |
| 1717590 | |
| 1717583 | |
| 1717575 | |
| 1717572 | |
| 1717568 | |
| 1717566 | |
| 1717549 | |
| 1717545 | |
| 1717533 | |
| 1717512 | |
| 1717511 | |
| 1717508 | |
| 1717495 | |
| 1717479 | |
| 1717473 | |
| 1717470 | |
| 1717463 | |
| 1717452 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기