부정사란 무엇인가요? (오디오포함)
페이지 정보
작성자 최고관리자 작성일 24-08-21 04:12 조회 113 댓글 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>
#kim {
padding: 5px;
color: black;
line-height: 30px;
}
#kim2 {
padding: 5px;
color: black;
line-height: 30px;
}
body {
font-family: Arial, sans-serif;
padding: 5px;
/* font-size: 16px;*/
color: darkblue;
}
.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;
}
.audio-controls {
margin-top: 20px;
}
.audio-controls button {
margin-right: 5px;
}
</style>
</head>
<body>
<h2 id="kh1">부정사(不定詞)란 무엇인가?</h2>
<p class="info" id="kim" style="color:black">
부정사의 용법<br>
주어로 사용:<br>
To achieve success in any field (어떤 분야에서 성공을 이루기 위해서)
<br><br>
목적어로 사용:<br>
To stay motivated (동기를 유지하기 위해서)<br>
To maintain a positive mindset (긍정적인 사고방식을 유지하기 위해서)<br><br>
보어로 사용:
To realize your dreams (당신의 꿈을 실현하기 위해서)<br><br>
형용사적 용도:<br>
To break down larger tasks into smaller, manageable steps (큰 작업을 더 작고 관리 가능한 단계로 나누기 위해서)<br><br>
부사적 용도:
To track your progress and make adjustments (진행 상황을 추적하고 조정을 하기 위해서)
</p> <br>
<p class="info" id="kim2" style="color:black;border: solid thin black;padding: 10px;">
장문 독해<br>
"To achieve success in any field, one must be willing to put in the necessary effort and time. <br>
For many people, this means setting clear goals and working diligently every day. <br>
To stay motivated, it's helpful to break down larger tasks into smaller, manageable steps. <br>
This way, you can track your progress and make adjustments as needed. <br>
To maintain a positive mindset, remember to celebrate small victories along the way and seek support from friends or mentors who can offer guidance and encouragement. <br>
Ultimately, to realize your dreams, you need to stay focused, keep learning, and never give up."<br><br>
원문듣기
<audio id="audioPlayer" controls>
<source src="../../../zest.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div class="audio-controls">
<button onclick="playAudio()">Play</button>
<button onclick="pauseAudio()">Pause</button>
<button onclick="stopAudio()">Stop</button>
<button onclick="rewindAudio()">Rewind</button>
</div>
</p>
<br><br>
<p class="info" id="kim" style="color:black;border: solid thin black;padding: 10px;">
"어떤 분야에서 성공을 이루기 위해서는 필요한 노력과 시간을 기꺼이 투자해야 합니다. <br>
많은 사람들에게 이는 명확한 목표를 설정하고 매일 꾸준히 일하는 것을 의미합니다. <br>
동기를 유지하기 위해서는 큰 작업을 더 작고 관리 가능한 단계로 나누는 것이 도움이 됩니다. <br>
이렇게 하면 진행 상황을 추적하고 필요에 따라 조정할 수 있습니다. <br>
긍정적인 사고방식을 유지하기 위해서는 과정 중에 작은 성취를 축하하고 조언과 격려를 제공할 수 있는 친구나 멘토의 지원을 받는 것이 좋습니다. <br>
궁극적으로 꿈을 실현하기 위해서는 집중력을 유지하고 계속해서 배우며 절대 포기하지 말아야 합니다."
</p>
<br><br>
<h2>문제풀이</h2>
<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;
}
// Audio control functions
const audioPlayer = document.getElementById('audioPlayer');
function playAudio() {
audioPlayer.play();
}
function pauseAudio() {
audioPlayer.pause();
}
function stopAudio() {
audioPlayer.pause();
audioPlayer.currentTime = 0;
}
function rewindAudio() {
audioPlayer.currentTime = 0;
audioPlayer.play();
}
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>
#kim {
padding: 5px;
color: black;
line-height: 30px;
}
#kim2 {
padding: 5px;
color: black;
line-height: 30px;
}
body {
font-family: Arial, sans-serif;
padding: 5px;
/* font-size: 16px;*/
color: darkblue;
}
.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;
}
.audio-controls {
margin-top: 20px;
}
.audio-controls button {
margin-right: 5px;
}
</style>
</head>
<body>
<h2 id="kh1">부정사(不定詞)란 무엇인가?</h2>
<p class="info" id="kim" style="color:black">
부정사의 용법<br>
주어로 사용:<br>
To achieve success in any field (어떤 분야에서 성공을 이루기 위해서)
<br><br>
목적어로 사용:<br>
To stay motivated (동기를 유지하기 위해서)<br>
To maintain a positive mindset (긍정적인 사고방식을 유지하기 위해서)<br><br>
보어로 사용:
To realize your dreams (당신의 꿈을 실현하기 위해서)<br><br>
형용사적 용도:<br>
To break down larger tasks into smaller, manageable steps (큰 작업을 더 작고 관리 가능한 단계로 나누기 위해서)<br><br>
부사적 용도:
To track your progress and make adjustments (진행 상황을 추적하고 조정을 하기 위해서)
</p> <br>
<p class="info" id="kim2" style="color:black;border: solid thin black;padding: 10px;">
장문 독해<br>
"To achieve success in any field, one must be willing to put in the necessary effort and time. <br>
For many people, this means setting clear goals and working diligently every day. <br>
To stay motivated, it's helpful to break down larger tasks into smaller, manageable steps. <br>
This way, you can track your progress and make adjustments as needed. <br>
To maintain a positive mindset, remember to celebrate small victories along the way and seek support from friends or mentors who can offer guidance and encouragement. <br>
Ultimately, to realize your dreams, you need to stay focused, keep learning, and never give up."<br><br>
원문듣기
<audio id="audioPlayer" controls>
<source src="../../../zest.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div class="audio-controls">
<button onclick="playAudio()">Play</button>
<button onclick="pauseAudio()">Pause</button>
<button onclick="stopAudio()">Stop</button>
<button onclick="rewindAudio()">Rewind</button>
</div>
</p>
<br><br>
<p class="info" id="kim" style="color:black;border: solid thin black;padding: 10px;">
"어떤 분야에서 성공을 이루기 위해서는 필요한 노력과 시간을 기꺼이 투자해야 합니다. <br>
많은 사람들에게 이는 명확한 목표를 설정하고 매일 꾸준히 일하는 것을 의미합니다. <br>
동기를 유지하기 위해서는 큰 작업을 더 작고 관리 가능한 단계로 나누는 것이 도움이 됩니다. <br>
이렇게 하면 진행 상황을 추적하고 필요에 따라 조정할 수 있습니다. <br>
긍정적인 사고방식을 유지하기 위해서는 과정 중에 작은 성취를 축하하고 조언과 격려를 제공할 수 있는 친구나 멘토의 지원을 받는 것이 좋습니다. <br>
궁극적으로 꿈을 실현하기 위해서는 집중력을 유지하고 계속해서 배우며 절대 포기하지 말아야 합니다."
</p>
<br><br>
<h2>문제풀이</h2>
<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;
}
// Audio control functions
const audioPlayer = document.getElementById('audioPlayer');
function playAudio() {
audioPlayer.play();
}
function pauseAudio() {
audioPlayer.pause();
}
function stopAudio() {
audioPlayer.pause();
audioPlayer.currentTime = 0;
}
function rewindAudio() {
audioPlayer.currentTime = 0;
audioPlayer.play();
}
window.onload = displayQuiz;
</script>
</body>
</html>
부정사(不定詞)란 무엇인가?
부정사의 용법
주어로 사용:
To achieve success in any field (어떤 분야에서 성공을 이루기 위해서)
목적어로 사용:
To stay motivated (동기를 유지하기 위해서)
To maintain a positive mindset (긍정적인 사고방식을 유지하기 위해서)
보어로 사용:
To realize your dreams (당신의 꿈을 실현하기 위해서)
형용사적 용도:
To break down larger tasks into smaller, manageable steps (큰 작업을 더 작고 관리 가능한 단계로 나누기 위해서)
부사적 용도:
To track your progress and make adjustments (진행 상황을 추적하고 조정을 하기 위해서)
장문 독해
"To achieve success in any field, one must be willing to put in the necessary effort and time.
For many people, this means setting clear goals and working diligently every day.
To stay motivated, it's helpful to break down larger tasks into smaller, manageable steps.
This way, you can track your progress and make adjustments as needed.
To maintain a positive mindset, remember to celebrate small victories along the way and seek support from friends or mentors who can offer guidance and encouragement.
Ultimately, to realize your dreams, you need to stay focused, keep learning, and never give up."
원문듣기
"어떤 분야에서 성공을 이루기 위해서는 필요한 노력과 시간을 기꺼이 투자해야 합니다.
많은 사람들에게 이는 명확한 목표를 설정하고 매일 꾸준히 일하는 것을 의미합니다.
동기를 유지하기 위해서는 큰 작업을 더 작고 관리 가능한 단계로 나누는 것이 도움이 됩니다.
이렇게 하면 진행 상황을 추적하고 필요에 따라 조정할 수 있습니다.
긍정적인 사고방식을 유지하기 위해서는 과정 중에 작은 성취를 축하하고 조언과 격려를 제공할 수 있는 친구나 멘토의 지원을 받는 것이 좋습니다.
궁극적으로 꿈을 실현하기 위해서는 집중력을 유지하고 계속해서 배우며 절대 포기하지 말아야 합니다."
문제풀이
댓글목록 0
등록된 댓글이 없습니다.