“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형
퀴즈 이벤트 : 문제 풀고 정답/ 오답 이벤트 2
퀴즈 이벤트를 만들어 보려고 합니다.
정보처리기능사 퀴즈입니다.
정답이면 강아지가 웃으면서 정답 애니메이션이 작동하고
오답이면 강아지가 울면서 오답 애니메이션이 작동하도록 만들어 봅니다.
▼링크를 따라가서 퀴즈를 풀어보세요!
완성화면
문제풀기 전
HTML코드
<header id="header">
<h1><a href="../javascript14.html">Quiz</a><em> 주관식 확인하기 유형</em></h1>
<ul>
<li><a href="quizEffect01.html">1</a></li>
<li><a href="quizEffect02.html">2</a></li>
<li class="active"><a href="quizEffect03.html">3</a></li>
<li><a href="quizEffect04.html">4</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">
<em></em>. <span></span>
</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__answer">
<input class="input" type="text" placeholder="정답을 적어주세요!">
<button class="confirm" >정답확인하기</button>
<div class="result"></div>
</div>
<div class="quiz__desc">설명</div>
</div>
</div>
<div class="quiz">
<div class="quiz__header">
<h2 class="quiz__title"></h2>
</div>
<div class="quiz__main">
<div class="quiz__question">
<em></em>. <span></span>
</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__answer">
<input class="input" type="text" placeholder="정답을 적어주세요!">
<button class="confirm" >정답확인하기</button>
<div class="result"></div>
</div>
<div class="quiz__desc">설명</div>
</div>
</div>
<div class="quiz">
<div class="quiz__header">
<h2 class="quiz__title"></h2>
</div>
<div class="quiz__main">
<div class="quiz__question">
<em></em>. <span></span>
</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__answer">
<input class="input" type="text" placeholder="정답을 적어주세요!">
<button class="confirm" >정답확인하기</button>
<div class="result"></div>
</div>
<div class="quiz__desc">설명</div>
</div>
</div>
</div>
</main>
<!-- //main -->
<footer id="footer">
<a href="mailto:aimee00418@gmail.com">aimee00418@gmail.com</a>
</footer>
<!-- //footer -->
SCRIPT 코드
//선택자
const quizWrap = document.querySelector(".quiz__wrap");
const quizTitle = quizWrap.querySelectorAll(".quiz__title"); //시험종목, 시험시간
const quizQuestionNum = quizWrap.querySelectorAll(".quiz__question em"); //문제번호
const quizQuestion = quizWrap.querySelectorAll(".quiz__question span"); //문제질문
const quizDesc = quizWrap.querySelectorAll(".quiz__desc"); //문제설명
const quizAnswerConfirm = quizWrap.querySelectorAll(".quiz__answer .confirm"); //정답버튼
const quizAnswerResult = quizWrap.querySelectorAll(".quiz__answer .result"); //문제정답
const quizAnswerInput = quizWrap.querySelectorAll(".quiz__answer .input"); //사용자작성답
const dogWrap = quizWrap.querySelectorAll(".dog__wrap") //강아지표정
//문제정보
const quizInfo = [
{
infoType: "정보처리 기능사",
infoTime: "2011년 4회",
infoNumber: "1",
infoQuestion: "주파수분할 다중화 방식에서 각 채널간 간섭을 막기 위해서 일종의 완충지역 역할을 하는 것은?",
infoAnswer: "가드밴드",
infoDesc: "가드밴드(Guard Band)는 주파수 분할 다중화 방식에서 각 채널간 간섭을 막기 위해서 일종의 완충지역 역할을 한다."
},{
infoType: "정보처리 기능사",
infoTime: "2011년 4회",
infoNumber: "2",
infoQuestion: "사용자의 명령으로 시스템이 수행되고 그에 따른 결과를 나타내 주는 운영체제는?",
infoAnswer: "UNIX",
infoDesc:"사용자의 명령으로 시스템이 수행되고 그에 따른 결과를 나타내 주는 운영체제는 UNIX이다."
},{
infoType: "정보처리 기능사",
infoTime: "2011년 4회",
infoNumber: "3",
infoQuestion: "다음 중 프로그래밍 시스템 내에서 서로 다른 프로세스가 일어날 수 없는 사건을 무한정 기다리고 있는 것은?",
infoAnswer: "교착상태",
infoDesc:"교착상태(Deadlock) :2개 이상의 프로세스들이 서로 다른 프로세스가 차지하고 있는 자원을 무한정 기다려 시스템이 멈춘 것 처럼 보이는 상태 "
}
]
//문제종류 + 문제시간(forEach문)
quizInfo.forEach(function(el, i){
quizTitle[i].innerHTML = quizInfo[i].infoType+" "+quizInfo[i].infoTime;
quizQuestionNum[i].textContent = quizInfo[i].infoNumber;
quizQuestion[i].textContent = quizInfo[i].infoQuestion;
quizAnswerResult[i].textContent = quizInfo[i].infoAnswer;
quizDesc[i].textContent = quizInfo[i].infoDesc;
})
//정답숨기기(forEach문)
quizInfo.forEach(function(el, i){
quizAnswerResult[i].style.display = 'none';
quizDesc[i].style.display = 'none';
})
//정답확인
quizAnswerConfirm.forEach(function(btn, num){
btn.addEventListener("click",function(){
//사용자 작성 답
const userAnswer = quizAnswerInput[num].value;
quizAnswerInput[num].style.display = "none"; // 답쓰는 자리 숨기기
quizAnswerConfirm[num].style.display = "none"; // 정답확인하기 버튼 지우기
quizAnswerResult[num].style.display = "block"; // 답 보이기
quizDesc[num].style.display = "block";
//문제 정답
if(userAnswer == quizInfo[num].infoAnswer){
dogWrap[num].classList.add("like");
}else{
dogWrap[num].classList.add("dislike");
}
})
})
</script>
스크립트 POINT
🔊 스크립트 기본문을 => for문 => forEach문으로 바꾸기
01. 문제종류 + 문제시간
- 기본문 : 문제종류 + 문제시간
quizTitle[0].innerHTML = quizInfo[0].infoType+" "+quizInfo[0].infoTime;
quizTitle[1].innerHTML = quizInfo[1].infoType+" "+quizInfo[1].infoTime;
quizTitle[2].innerHTML = quizInfo[2].infoType+" "+quizInfo[2].infoTime;
quizQuestionNum[0].textContent = quizInfo[0].infoNumber;
quizQuestionNum[1].textContent = quizInfo[1].infoNumber;
quizQuestionNum[2].textContent = quizInfo[2].infoNumber;
quizQuestion[0].textContent = quizInfo[0].infoQuestion;
quizQuestion[1].textContent = quizInfo[1].infoQuestion;
quizQuestion[2].textContent = quizInfo[2].infoQuestion;- for문 : 문제종류 + 문제시간
for(let i=0; i<quizInfo.length; i++){
quizTitle[i].innerHTML = quizInfo[i].infoType+" "+quizInfo[i].infoTime;
quizQuestionNum[i].textContent = quizInfo[i].infoNumber;
quizQuestion[i].textContent = quizInfo[i].infoQuestion;
quizAnswerResult[i].textContent = quizInfo[i].infoAnswer;
quizDesc[i].textContent = quizInfo[i].infoDesc;
}- forEach문 : 문제종류 + 문제시간
quizInfo.forEach(function(el, i){
quizTitle[i].innerHTML = quizInfo[i].infoType+" "+quizInfo[i].infoTime;
quizQuestionNum[i].textContent = quizInfo[i].infoNumber;
quizQuestion[i].textContent = quizInfo[i].infoQuestion;
quizAnswerResult[i].textContent = quizInfo[i].infoAnswer;
quizDesc[i].textContent = quizInfo[i].infoDesc;
})
02. 정답숨기기 + 설명숨기기
- 기본문 : 정답숨기기 + 설명숨기기
//정답숨기기
quizAnswerResult[0].style.display = 'none';
quizAnswerResult[1].style.display = 'none';
quizAnswerResult[2].style.display = 'none';
//설명 숨기기
quizDesc[0].style.display = 'none';
quizDesc[1].style.display = 'none';
quizDesc[2].style.display = 'none';- for문 : 문제종류 + 문제시간
for(let i=0; i<quizInfo.length; i++){
quizAnswerResult[i].style.display = 'none';
quizDesc[i].style.display = 'none';
}
- forEach문 : 문제종류 + 문제시간
quizInfo.forEach(function(el, i){
quizAnswerResult[i].style.display = 'none';
quizDesc[i].style.display = 'none';
})
03. 정답확인
-forEach문
//정답확인
quizAnswerConfirm.forEach(function(btn, num){
btn.addEventListener("click",function(){
//사용자 작성 답
const userAnswer = quizAnswerInput[num].value;
quizAnswerInput[num].style.display = "none"; // 답쓰는 자리 숨기기
quizAnswerConfirm[num].style.display = "none"; // 정답확인하기 버튼 지우기
quizAnswerResult[num].style.display = "block"; // 답 보이기
quizDesc[num].style.display = "block";
//문제 정답
if(userAnswer == quizInfo[num].infoAnswer){
dogWrap[num].classList.add("like");
}else{
dogWrap[num].classList.add("dislike");
}
})
})