“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
이번에는 세 가지의 주관식 문제를 만들어 보겠습니다.
링크: 퀴즈 이펙트 03 (daanbi1345.github.io)
정답 칸에 답을 적어서
맞으면,
정답입니다!가 뜨면서 웃는 강아지가 나오고,
틀리면,
오답입니다!가 뜨면서 우는 강아지가 나오고,
그 밑에 칸이 생기면서 tip이 나옵니다.
body의 main부분과 script를 나눠서 보여드리겠습니다.
body의 main
<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" placeholder="정답을 적어주세요!">
<button class="confirm">정답 확인하기</button>
<div class="result"></div>
</div>
<div class="quiz__desc"></div>
</div>
</div>
</div>
</main><div class="quiz">의 부분이 문제부분입니다.
한 문제의 body만 보여드리는 것이기 때문에 main안에 해당 div class="quiz"부분은 세 개가 있습니다.
quiz question에 em태그와 span태그를 넣어줬습니다.
.quiz__question em {
color: #ff3737;
}
.quiz__question span {
color: darkslateblue;
}글자를 꾸미기 위해서 css시트에서 강조 태그인 em태그를 빨강색 글씨체로 설정해주었고, span태그는 darkslateblue로 정해주었습니다.
dog wrap 안에 div class ="true"와 div class="false"를 정해주어서, 정답과 오답을 확인시킬 수 있도록 설정했습니다.
정답 부분에서는 정답 기입란을 input clasee="input"으로 만들어서 확인할 수 있도록 button class="confirm"으로 설정했습니다.
다음은 script부분을 보여드리겠습니다.
Script
<script>
//선택자
const quizWrap = document.querySelector(".quiz__wrap");
const quizTitle = quizWrap.querySelectorAll(".quiz__title"); // 문제 종류 + 시간, 여러 개이기 떄문에 All을 붙여줘야 입력이 된다.
const quizQuestionNum = quizWrap.querySelectorAll(".quiz__question em"); //문제 번호
const quizQuestion = quizWrap.querySelectorAll(".quiz__question span"); //문제
const quizAnswerResult = quizWrap.querySelectorAll(".quiz__answer .result"); //문제 정답
const quizDesc = quizWrap.querySelectorAll(".quiz__desc"); //문제 해설
const quizAnswerConfirm = quizWrap.querySelectorAll(".quiz__answer .confirm");//정답 버튼
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개 이상의 프로세스들이 서로 다른 프로세스가 차지하고 있는 자원을 무한정 기다려 멈춘 것처럼 보이는 상태이다."
}
];
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은 3개가 있다.
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>quizwrap을 document.quizSelector로 설정해서 quizwrap 안에서 데이터를 찾도록 설정했습니다.
그 다음은 선택자의 이름을 헷갈리지 않도록 적절하게 정해서 입력했습니다.
변수를 배열 안에 객체를 넣어서 만들었습니다.
각 키들이 갖는 값들을 알맞은 위치에 넣어주기만 하면 됩니다.
반복되는 식들을 간단하게 만들기 위해서 forEach()를 사용했습니다.
#1 //문제 종류
quizTitle[0].textContent = quizInfo[0].infoType; //퀴즈 타이틀이 세 개가 있어서 다중으로 쓴다. 다중이면 배열로 쓴다.
quizTitle[1].textContent = quizInfo[1].infoType;
quizTitle[2].textContent = quizInfo[2].infoType;
//문제 시간
quizTime[0].textContent = quizInfo[0].infoTime;
quizTime[1].textContent = quizInfo[1].infoTime;
quizTime[2].textContent = quizInfo[2].infoTime;
for문으로 만들면, 이렇게 됩니다.
for(let i=0; i<quizInfo.length; i++){
quizTitle[i].innerHTML =quizInfo[i].infoType + " " + quizInfo[i].infoTime;
}배열의 부분의 초기값과 범위, 증감식을 설정해서 for문 안에 써주면 됩니다.
이 식들을
quizInfo.forEach(function(el,i){
quizTitle[i].innerHTML =quizInfo[i].infoType + " " + quizInfo[i].infoTime;
});이렇게 간단하게 줄여서 쓸 수가 있습니다.
정답을 기입했을 때 확인을 하기 위해서 함수를 써봤습니다.
addEventListener() 메서드는 지정한 유형의 이벤트를 대상이 수신할 때마다 호출할 함수를 설정합니다.
addEventListener() 메서드는 지정한 이벤트 유형의EventTarget 수신기 리스트에 EventListener를 구현한 함수 또는 객체를 추가하는 방식으로 동작합니다.
클릭하면, 사용자의 답과 정답이 맞으면 웃는 얼굴, 아니면 우는 얼굴을 설정해주기 위해서 if문을 썼습니다.