여러분 안녕하세요. 혀코입니다.
이번 시간에는 JavaScript를 사용해서 퀴즈 프로그램을 제작해 보도록 하겠습니다.
HTML 파일, CSS 파일과 JavaScript 파일을 다음과 같이 준비 합니다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New Years Countdown</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container" id="quiz">
<div class="quiz-header">
<h2 id="question">Question text</h2>
<ul>
<li>
<input type="radio" id="a" name="answer" class="answer"/>
<label id="a_text" for="a">Question</label>
</li>
<li>
<input type="radio" id="b" name="answer" class="answer"/>
<label id="b_text" for="b">Question</label>
</li>
<li>
<input type="radio" id="c" name="answer" class="answer"/>
<label id="c_text" for="c">Question</label>
</li>
<li>
<input type="radio" id="d" name="answer" class="answer"/>
<label id="d_text" for="d">Question</label>
</li>
</ul>
</div>
<button id="submit">Submit</button>
</div>
<script src="script.js"></script>
</body>
</html>
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #ccc;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.container {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px 2px rgba(100, 100, 100, 0.1);
width: 600px;
max-width: 100%;
overflow: hidden;
}
.quiz-header {
padding: 4rem;
}
h2 {
text-align: center;
}
ul {
list-style-type: none;
padding: 0;
}
ul li {
font-size: 1.2rem;
margin: 1rem 0;
}
ul li label {
cursor: pointer;
}
button {
background-color: #8e44ad;
display: block;
width: 100%;
padding: 1.3rem;
color: white;
border: none;
font-size: 1.1rem;
cursor: pointer;
}
button:hover {
background-color: #742d91;
}
script.js
const quizData = [
{
question: 'In what country the death penalty for crime forbidden?',
a: 'Australia',
b: 'the United States',
c: 'India',
d: 'Belarus',
correct: 'a'
},
{
question: 'In what country are the world\'s ten coldest cities located?',
a: 'Russia',
b: 'the United States',
c: 'Canada',
d: 'Chile',
correct: 'a'
},
{
question: 'What kind of government is that of Oman?',
a: 'caliphate',
b: 'democracy',
c: 'sultanate',
d: 'plebiscite',
correct: 'c'
},
{
question: 'In what country might you find the Loch Ness monster?',
a: 'Belgium',
b: 'Canada',
c: 'Scotland',
d: 'England',
correct: 'c'
},
{
question: 'What country does not use the dollar?',
a: 'India',
b: 'Australia',
c: 'New Zealand',
d: 'Canada',
correct: 'a'
}
];
const quiz = document.getElementById("quiz");
const answersEls = document.querySelectorAll('.answer');
const question = document.getElementById('question');
const a_text = document.getElementById('a_text');
const b_text = document.getElementById('b_text');
const c_text = document.getElementById('c_text');
const d_text = document.getElementById('d_text');
const submit = document.getElementById('submit');
let currentQuiz = 0;
let score = 0;
loadQuiz();
function loadQuiz() {
deselectAnswers();
const currentQuizData = quizData[currentQuiz];
question.innerText = currentQuizData.question;
a_text.innerText = currentQuizData.a;
b_text.innerText = currentQuizData.b;
c_text.innerText = currentQuizData.c;
d_text.innerText = currentQuizData.d;
}
function getSelected() {
let answer = undefined;
answersEls.forEach((answerEl) => {
if(answerEl.checked) {
answer = answerEl.id;
}
});
return answer;
}
function deselectAnswers() {
answersEls.forEach((answerEl) => {
answerEl.checked = false;
});
}
submit.addEventListener('click', () => {
const answer = getSelected();
if(answer) {
if(answer === quizData[currentQuiz].correct) {
score++;
}
currentQuiz++;
if(currentQuiz < quizData.length) {
loadQuiz();
} else {
quiz.innerHTML = `<h2>You answered correctly ${score}/${quizData.length} questions.</h2>`;
}
}
});
결과:
이렇게 JavaScript를 사용해서 퀴즈 프로그램을 완성했습니다.
유용하셨다면, 공감과 구독 부탁 드립니다.
감사합니다.
댓글