한번씩 읽고 가세요.
“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
객관식을 선택하면 정답을 확인하는 유형.
<!DOCTYPE html>
<html lang="ko">
<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>퀴즈 이펙트05</title>
<link rel="stylesheet" href="css.reset.css">
<link rel="stylesheet" href="css.quiz.css">
</head>
<body>
<header id="header">
<h1><a href="../javascript14.html">Quiz<em></a> 주관식 확인하기 유형</em></h1>
<ul>
<li><a href="quizEffect01.html">1</a></li>
<li><a href="quizEffect02.html">2</a></li>
<li><a href="quizEffect03.html">3</a></li>
<li><a href="quizEffect04.html">4</a></li>
<li class="active"><a href="quizEffect05.html">5</a></li>
<li><a href="quizEffect dc.html">d</a></li>
<li><a href="quizEffect webd.html">w</a></li>
</ul>
</header>
<!--//header-->
<main id="main">
<div class="quiz__wrap">
<!-- <div class="quiz">
<div class="quiz__header">
<h2 class="quiz__title"></h2>
</div>
<div class="quiz__main">
<div class="quiz__question"></div>
<div class="quiz__view">
<div class="dog__wrap">
<div class="true">정답입니다!</div>
<div class="false">오답입니다!</div>
<div class="card-container">
<div class="dog">
<div class="head">
<div class="ears"></div>
<div class="face"></div>
<div class="eyes">
<div class="teardrop"></div>
</div>
<div class="nose"></div>
<div class="mouth">
<div class="tongue"></div>
</div>
<div class="chin"></div>
</div>
<div class="body">
<div class="tail"></div>
<div class="legs"></div>
</div>
</div>
</div>
</div>
</div>
<div class="quiz__choice">
<label for="choice1">
<input type="radio" id="choice1" name="choice" value="1">
<span></span>
</label>
<label for="choice2">
<input type="radio" id="choice2" name="choice" value="2">
<span></span>
</label>
<label for="choice3">
<input type="radio" id="choice3" name="choice" value="3">
<span></span>
</label>
<label for="choice4">
<input type="radio" id="choice4" name="choice" value="4">
<span> </span>
</label>
</div>
<div class="quiz__answer">
<button class="confirm">정답 확인하기</button>
</div>
<div class="quiz__desc"></div>
</div>
</div>
<div class="quiz__check">정답 확인하기</div> -->
</main>
<!-- //main -->
<footer id="footer">
<a href="mailto:esansi@naver.com">esansi@naver.com</a>
</footer>
<!--//footer-->
<script>
//문제정보
const quizInfo = [
{
infoType: "정보처리 기능사",
infoTime: "2007년 (5회)",
infoNumber: "20070501",
infoQuestion: "그림과 같은 논리회로에서 출력 X에 알맞은 식은?(단, A, B, C는 입력임) <br><br> <img style ='width:300px' src ='assets/img/1.bmp'>",
infoChoice: {
1: "Ā * (B + C) ",
2: "Ā * <p style='text-decoration: overline;'>(B+C)</p>",
3: "Ā * B * C",
4: "Ā + <p style='text-decoration: overline;'>B+C</p>"
},
infoAnswer: "1",
infoDesc: "4대 매체 : 포스터 디자인, 신문광고, 잡지광고, TV 광고로 이루어져있다."
}, {
infoType: "정보처리 기능사",
infoTime: "2007년 (5회)",
infoNumber: "20070502",
infoQuestion: "두 비트를 더해서 합(S)과 자리올림수(C)를 구하는 반가산기에서 올림수(Carry) 비트를 나타낸 논리식은",
infoChoice: {
1: "C = A + B",
2: "C = Ā * <p style='text-decoration: overline;'>B</p>",
3: "C = A * B",
4: "C = Ā + <p style='text-decoration: overline;'>B</p>"
},
infoAnswer: "3",
infoDesc: "반가산기 구성 <BR> S = A XOR B <BR> C = A * B"
}, {
infoType: "정보처리 기능사",
infoTime: "2007년 (5회)",
infoNumber: "20070503",
infoQuestion: "진리표가 다음 표와 같이 되는 논리회로는?? <br><br> <img style ='width:300px' src ='assets/img/3.bmp'>",
infoChoice: {
1: "AND 게이트",
2: "OR 게이트",
3: "NOR 게이트",
4: "NAND 게이트"
},
infoAnswer: "4",
infoDesc: "출력을 반대로 생각해 보면 AND와 같습니다..그러므로 NAND 입니다."
}
]
// 선택자
const quizWrap = document.querySelector(".quiz__wrap");
let quizScore = 0;
//문제출력
const updateQuiz = () => {
const exam = [];
quizInfo.forEach((question, number) => {
exam.push(`
<div class="quiz">
<div class="quiz__header">
<h2 class="quiz__title">${question.infoType} ${question.infoTime}</h2>
</div>
<div class="quiz__main">
<div class="quiz__question"><em>${number+1}</em>. ${question.infoQuestion}</div>
<div class="quiz__view">
<div class="dog__wrap">
<div class="true">정답입니다!</div>
<div class="false">오답입니다!</div>
<div class="card-container">
<div class="dog">
<div class="head">
<div class="ears"></div>
<div class="face"></div>
<div class="eyes">
<div class="teardrop"></div>
</div>
<div class="nose"></div>
<div class="mouth">
<div class="tongue"></div>
</div>
<div class="chin"></div>
</div>
<div class="body">
<div class="tail"></div>
<div class="legs"></div>
</div>
</div>
</div>
</div>
</div>
<div class="quiz__choice">
<label for="choice1${number}" >
<input type="radio" id ="choice1${number}" name="choice${number}" value="1">
<span>${question.infoChoice[1]}</span>
</label>
<label for="choice2${number}" >
<input type="radio" id ="choice2${number}" name="choice${number}" value="2">
<span>${question.infoChoice[2]}</span>
</label>
<label for="choice3${number}" >
<input type="radio" id ="choice3${number}" name="choice${number}" value="3">
<span>${question.infoChoice[3]}</span>
</label>
<label for="choice4${number}" >
<input type="radio" id ="choice4${number}" name="choice${number}" value="4">
<span>${question.infoChoice[4]}</span>
</label>
</div>
<div class="quiz__answer">
</div>
<div class="quiz__desc"><br>정답은 <em>${question.infoAnswer}</em>번 입니다.<br>${question.infoDesc}</div>
</div>
</div>`)
});
exam.push(`
<div class="quiz__info">??점</div>
<div class="quiz__check">정답 확인!</div>
`);
quizWrap.innerHTML = exam.join('');
//해설 숨기기
document.querySelectorAll(".quiz__desc").forEach(el => el.style.display = "none")
};
updateQuiz();
//정답확인
const answerQuiz = () => {
const quizChoices = document.querySelectorAll(".quiz__choice");
//사용자가 체크한 정답 == 문제 정답
quizInfo.forEach((question, number) => {
const userSelector = `input[name = choice${number}]:checked`;
const quizSelectorWrap = quizChoices[number];
const userAnswer = (quizSelectorWrap.querySelector(userSelector) || {}).value;
const dogWrap = quizWrap.querySelectorAll(".dog__wrap")
if(userAnswer == question.infoAnswer){
dogWrap[number].classList.add("like");
quizScore++;
} else {
dogWrap[number].classList.add("dislike");
};
});
//설명 보이기
document.querySelectorAll(".quiz__desc").forEach(el => el.style.display = "block")
//점수 보이기
document.querySelector(".quiz__info").innerHTML = Math.ceil((quizScore / quizInfo.length) *100) + "점"
}
//정답 클릭
document.querySelector(".quiz__check").addEventListener("click",answerQuiz);
</script>
</script>
</body>
</html>
퀴즈효과5번은 앞의 퀴즈 효과들과는 다르게 메인 내용을 html이 아닌 javascript를 이용하여 넣었다.
quiz__wrap안의 내용들을 주석 처리를 하고 자바스크립트로 넣을 것이기 때문에
quiz__wrap을 선택자로 선택한다
const quizWrap = document.querySelector(".quiz__wrap");그 뒤로 출력을 updataQuiz로 할 것이기 때문에 안에 문제를 넣어줘야한다. updataQuiz 안에 exam이란 변수를 설정해준다.
const updateQuiz = () => {
const exam = [];문제가 들어있는 quizInfo를 배열안 객체를 이용해서 만들어 놨었다. 퀴즈 1,2,3,4 동일
const quizInfo = [
{
infoType: "정보처리 기능사",
infoTime: "2007년 (5회)",
infoNumber: "20070501",
infoQuestion: "그림과 같은 논리회로에서 출력 X에 알맞은 식은?(단, A, B, C는 입력임) <br><br> <img style ='width:300px' src ='assets/img/1.bmp'>",
infoChoice: {
1: "Ā * (B + C) ",
2: "Ā * <p style='text-decoration: overline;'>(B+C)</p>",
3: "Ā * B * C",
4: "Ā + <p style='text-decoration: overline;'>B+C</p>"
},
infoAnswer: "1",
infoDesc: "4대 매체 : 포스터 디자인, 신문광고, 잡지광고, TV 광고로 이루어져있다."
}, {
infoType: "정보처리 기능사",
infoTime: "2007년 (5회)",
infoNumber: "20070502",
infoQuestion: "두 비트를 더해서 합(S)과 자리올림수(C)를 구하는 반가산기에서 올림수(Carry) 비트를 나타낸 논리식은",
infoChoice: {
1: "C = A + B",
2: "C = Ā * <p style='text-decoration: overline;'>B</p>",
3: "C = A * B",
4: "C = Ā + <p style='text-decoration: overline;'>B</p>"
},
infoAnswer: "3",
infoDesc: "반가산기 구성 <BR> S = A XOR B <BR> C = A * B"
}, {
infoType: "정보처리 기능사",
infoTime: "2007년 (5회)",
infoNumber: "20070503",
infoQuestion: "진리표가 다음 표와 같이 되는 논리회로는?? <br><br> <img style ='width:300px' src ='assets/img/3.bmp'>",
infoChoice: {
1: "AND 게이트",
2: "OR 게이트",
3: "NOR 게이트",
4: "NAND 게이트"
},
infoAnswer: "4",
infoDesc: "출력을 반대로 생각해 보면 AND와 같습니다..그러므로 NAND 입니다."
}
]push와 템플릿 리터럴 ``백틱을 이용하여 스크립트로 html넣기
quizInfo.forEach((question, number) => {
exam.push(`
<div class="quiz">
<div class="quiz__header">
<h2 class="quiz__title">${question.infoType} ${question.infoTime}</h2>
</div>
<div class="quiz__main">
<div class="quiz__question"><em>${number+1}</em>. ${question.infoQuestion}</div>
<div class="quiz__view">
<div class="dog__wrap">
<div class="true">정답입니다!</div>
<div class="false">오답입니다!</div>
<div class="card-container">
<div class="dog">
<div class="head">
<div class="ears"></div>
<div class="face"></div>
<div class="eyes">
<div class="teardrop"></div>
</div>
<div class="nose"></div>
<div class="mouth">
<div class="tongue"></div>
</div>
<div class="chin"></div>
</div>
<div class="body">
<div class="tail"></div>
<div class="legs"></div>
</div>
</div>
</div>
</div>
</div>
<div class="quiz__choice">
<label for="choice1${number}" >
<input type="radio" id ="choice1${number}" name="choice${number}" value="1">
<span>${question.infoChoice[1]}</span>
</label>
<label for="choice2${number}" >
<input type="radio" id ="choice2${number}" name="choice${number}" value="2">
<span>${question.infoChoice[2]}</span>
</label>
<label for="choice3${number}" >
<input type="radio" id ="choice3${number}" name="choice${number}" value="3">
<span>${question.infoChoice[3]}</span>
</label>
<label for="choice4${number}" >
<input type="radio" id ="choice4${number}" name="choice${number}" value="4">
<span>${question.infoChoice[4]}</span>
</label>
</div>
<div class="quiz__answer">
</div>
<div class="quiz__desc"><br>정답은 <em>${question.infoAnswer}</em>번 입니다.<br>${question.infoDesc}</div>
</div>
</div>`)
});템플릿 리터럴
ES6부터 새로 도입된 문자열 표기법이다.
문자열 생성시 따옴표 대신, 백틱(`)을 사용한다.
백틱(back-tick)이라는 기호(`)를 사용하여 정의합니다.
백틱을 이용하게 되면 여러 줄에 걸쳐 문자열을 정의할 수도 있고, 자바스크립트의 변수를 문자열 안에 바로 연결할 수 있는 이점이 생깁니다.
${}를 이용하면 변수의 값을 대입할 수 있을 뿐만 아니라 간단한 연산도 할 수 있습니다.
push
push() 메서드는 배열 마지막 요소에 요소를 추가한다.
join
join() 메서드는 배열 요소를 문자열로 결합합니다 반환 값은 문자열입니다.
push를 사용하여 여러 문자를 넣었기 때문에 배열인식해 문자 사이 마다 , 가 생깁니다.
이 ,를 없애기 위해 join ' ' 빈 문자열을 사용해 없애줍니다.
uizWrap.innerHTML = exam.join('');Math.sell
JavaScript의 메서드 에 대해 질문하려고 했을 수도 있습니다 Math.ceil. Math.ceil주어진 숫자보다 크거나 같은 가장 작은 정수를 반환하는 JavaScript의 내장 메서드입니다. 2.3을 3으로 반환시켜줍니다.
document.querySelector(".quiz__info").innerHTML = Math.ceil((quizScore / quizInfo.length) *100) + "점"