index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quiz 1</title>
<style>
.quiz_container, .result_container{
padding: 10px;
width: 500px;
border: 1px solid pink;
margin: auto;
margin-top: 20px;
}
.quiz_container > p, .quizNum{
color: gray;
}
.quizes{
width: 500px;
margin: auto;
}
button{
justify-content: center;
}
.quizes > div{
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="quiz_container">
<h2>사칙 연산 퀴즈</h2>
<p> 자신의 이름과 제시된 연산의 답을 입력한 후 완료 버튼을 눌러주세요.</p>
<div class="userName">
<span>이름: </span>
<input id="name" type="text">
</div>
<div class="quizes">
<div>
<span class="quizNum">1. </span>
<span> 5 + 6 = </span>
<input id="quiz1" type="number">
</div>
<div>
<span class="quizNum" >2. </span>
<span> 8 - 3 = </span>
<input id="quiz2" type="number">
</div>
<div>
<span class="quizNum">3. </span>
<span> 7 x 6 = </span>
<input id="quiz3" type="number">
</div>
<div>
<span class="quizNum">4. </span>
<span> 15 % 3 = </span>
<input id="quiz4" type="number">
</div>
<div>
<span class="quizNum">5. </span>
<span> 8 + 6 - 3 x 2 % 2 = </span>
<input id="quiz5" type="number">
</div>
<button>완료</button>
</div>
</div>
<div class="result_container"></div>
<script>
const button = document.querySelector('button');
const userName = document.querySelector('#name');
const quiz1 = document.querySelector('#quiz1');
const quiz2 = document.querySelector('#quiz2');
const quiz3 = document.querySelector('#quiz3');
const quiz4 = document.querySelector('#quiz4');
const quiz5 = document.querySelector('#quiz5');
const resultScrren = document.querySelector(".result_container");
function calculation(){
let name = userName.value;
let score = 100;
let incorrectNum = 0;
let date = new Date();
let quiz1_input = quiz1.value;
let quiz2_input = quiz2.value;
let quiz3_input = quiz3.value;
let quiz4_input = quiz4.value;
let quiz5_input = quiz5.value;
console.log(quiz1_input);
if(quiz1_input != 11){
score -= 20;
incorrectNum++;
quiz1.style.backgroundColor = 'red';
}
if(quiz2_input != 5){
score -= 20;
incorrectNum++;
quiz2.style.backgroundColor = 'red';
}
if(quiz3_input != 42){
score -= 20;
incorrectNum++;
quiz3.style.backgroundColor = 'red';
}
if(quiz4_input != 5){
score -= 20;
incorrectNum++;
quiz4.style.backgroundColor = 'red';
}
if(quiz5_input != 11){
score -= 20;
incorrectNum++;
quiz5.style.backgroundColor = 'red';
}
resultScrren.innerHTML = `
<div>
${name}님의 [${date}] 퀴즈 결과 </br>
총 5문제 중 ${incorrectNum}문제를 틀렸습니다. </br>
틀린 답은 빨간 색으로 표시 하였습니다. </br>
최종점수는 ${score}점 입니다.
</div>
`;
}
button.addEventListener('click', () => {
calculation();
});
</script>
</body>
</html>
