스크립트를 이용한 퀴즈 만들기 03(주관식 - 여러개)
스크립트를 이용하여 쉽게 퀴즈의 문제를 만들 수 있으며, for( )과 forEach( )를 이용하여 여러개의 퀴즈를 간단하게 만들 수 있습니다.
Script
//선택자, 다중선택이므로 querySelectorAll로 바꿔야 함!
const quizType = document.querySelectorAll(".quiz__type"); //퀴즈 종류 , 4개가 있으므로 All로 변경
const quizNumber = document.querySelectorAll(".quiz__question .number"); //퀴즈 번호
const quizAsk = document.querySelectorAll(".quiz__question .ask"); //퀴즈 질문
const quizConfirm = document.querySelectorAll(".quiz__answer .confirm"); //정답 확인 버튼
const quizResult = document.querySelectorAll(".quiz__answer .result"); //정답 결과
const quizInput = document.querySelectorAll(".quiz__answer .input"); //사용자 정답
const quizView = document.querySelectorAll(".quiz__view"); //정답 알람
//문제정보
const quizInfo = [
{
answerType : "웹디자인기능사 2016년 3회",
answerNum : "1",
answerAsk : "검은 종이 위에 노랑과 파랑을 나열하고 일정한 거리에서 보면 노랑이 파랑보다 더 가깝게 보인다. 이때의 노랑색을 무엇이라고 하나요?",
answerResult : "진출색"
},
{
answerType : "웹디자인기능사 2016년 3회",
answerNum : "2",
answerAsk : "HTML 문서의 시작을 알려주는 태그는 무엇인가요?",
answerResult : "<html>"
},
{
answerType : "웹디자인기능사 2016년 3회",
answerNum : "3",
answerAsk : "애니메이션 제작의 특수 효과 중 하나로 축소형으로 입체 모델을 만들고 여기에 다른 기법을 병합하여 장면을 만드는 것은 무엇인가요?",
answerResult : "미니어처 효과"
},
{
answerType : "웹디자인기능사 2016년 3회",
answerNum : "4",
answerAsk : "웹사이트 제작 단계 중 사이트의 목적과 사용자 분석에 따라 사이트의 디자인 방향을 설정하는 단계는 무언인가요?",
answerResult : "콘셉트 도출"
}
]
//문제 출력
quizInfo.forEach((el, i) => {
quizType[i].textContent = quizInfo[i].answerType;
quizNumber[i].textContent = quizInfo[i].answerNum + ". ";
quizAsk[i].textContent = quizInfo[i].answerAsk;
quizResult[i].textContent = quizInfo[i].answerResult;
})
//정답 숨기기
quizResult.forEach((el, i) => {
quizResult[i].style.display = "none";
})
//정답 확인
quizConfirm.forEach((btn, num) => { //몇번째 인덱스를 가져오는지, num으로 표현
btn.addEventListener("click", () => { //버튼이 4개가 있다!
//사용자 정답
const userWord = quizInput[num].value.toLowerCase().trim();
//사용자 정답 == 문제 정답
if(userWord == quizInfo[num].answerResult){
//정답
quizView[num].classList.add("like");
quizConfirm[num].style.display = "none";
} else {
//오답
quizView[num].classList.add("dislike");
quizConfirm[num].style.display = "none";
quizResult[num].style.display = "block";
quizInput[num].style.display = "none";
}
})
});
querySelectorAll
모든 요소를 배열로 가져와야 하므로, querySelector보다는 querySelectorAll를 사용 합니다.
여러번 출력하기
quizType[0].textContent = quizInfo[0].answerType;
quizType[1].textContent = quizInfo[1].answerType;
quizType[2].textContent = quizInfo[2].answerType;
quizType[3].textContent = quizInfo[3].answerType;
textContent를 이용하여 문제정보를 출력 할 수 있습니다.
여러번 출력하기 - for( )
for ( let i = 0; i < quizInfo.length; i++ ) {
quizType[i].textContent = quizInfo[i].answerType;
}
for문을 이용하여 스크립트를 출력 할 수 있습니다.
여러번 출력하기 - forEach( )
quizInfo.forEach((e, i) => {
quizType[i].textContent = quizInfo[i].answerType;
})
forEach문으로 보다 쉽게 출력 할 수 있습니다. 이때, e는 element를 의미하며 줄여 사용할수 있습니다. i역시 index를 의미하며 줄여서 사용할 수 있습니다.
정답 확인하기 - forEach( )
quizConfirm.forEach((btn, num) => {
btn.addEventListener("click", () => {
//사용자 정답
const userWord = quizInput[num].value.toLowerCase().trim();
//사용자 정답 == 문제 정답
if(userWord == quizInfo[num].answerResult){
//정답
quizView[num].classList.add("like");
} else {
//오답
quizView[num].classList.add("dislike");
}
})
});
forEach문을 이용하여 정답을 확인 할때는 함수를 정의해서 사용합니다. num을 이용하여 몇번째 인덱스를 가져오는지 표현해 줍니다.
//출력되지 않는 경우
quizConfirm.addEventListener("click", () => {
alert("ddd")
});
num을 정의 하지않고 사용할 경우 출력되지 않는 현상이 일어나므로 주의를 합니다.
'Effect' 카테고리의 다른 글
| SearchEffect01 (4) | 2022.08.16 |
|---|---|
| QuizEffect - 05 (2) | 2022.08.15 |
| QuizEffect - 04 (8) | 2022.08.08 |
| QuizEffect - 02 (10) | 2022.08.04 |
| QuizEffect - 01 (9) | 2022.08.04 |
댓글