quiz 03

quiz03

4문제가 있는 구조이다.

선택자

quiz 문제가 여러개면 querySelector뒤에 All을 붙여야한다.

const quizType = document.querySelectorAll(".quiz__type");   //퀴즈종류
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년 1회 기출문제) ",
answerNum: "1",
answerAsk: "VRML을 만들 수 있는 저작도구가 아닌 것은?",
answerResult: "cosmoplayer"
},
{
answerType: "웹디자인기능사 필기 (2016년 1회 기출문제) ",
answerNum: "2",
answerAsk: "다음 HTML 태그 중 성격이 다른 태그는?",
answerResult: "&ltbr&gt&lt/br&gt"
},
{
answerType: "웹디자인기능사 필기 (2016년 1회 기출문제) ",
answerNum: "3",
answerAsk: "웹브라우저의 기능으로 옳지 않은 것은?",
answerResult: "사진합성"
},
{
answerType: "웹디자인기능사 필기 (2016년 1회 기출문제) ",
answerNum: "4",
answerAsk: "서로 근접해 있는 색들의 영향으로 인하여 닮은 색으로 변해 보이는 현상은 ?",
answerResult: "동화현상"
},
]

문제출력

textContent많이 사용한다. 3가지 방법 01

quizType[0].textContent = quizInfo[0].answerType; //퀴즈종류
quizType[1].textContent = quizInfo[1].answerType; 
quizType[2].textContent = quizInfo[2].answerType;
quizType[3].textContent = quizInfo[3].answerType;
quizNumber[0].textContent = quizInfo[0].answerNum + ". "; //퀴즈번호
quizNumber[1].textContent = quizInfo[1].answerNum + ". ";
quizNumber[2].textContent = quizInfo[2].answerNum + ". ";
quizNumber[3].textContent = quizInfo[3].answerNum + ". ";
quizAsk[0].textContent = quizInfo[0].answerAsk; //퀴즈 질문
quizAsk[1].textContent = quizInfo[1].answerAsk;
quizAsk[2].textContent = quizInfo[2].answerAsk;
quizAsk[3].textContent = quizInfo[3].answerAsk;
quizResult[0].textContent = quizInfo[0].answerResult;  //정답결과
quizResult[1].textContent = quizInfo[1].answerResult;
quizResult[2].textContent = quizInfo[2].answerResult;
quizResult[3].textContent = quizInfo[3].answerResult;

02.for문을 이용

for(let i=0; i&ltquizInfo.length; 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;
}

03.forEach 이용

quizInfo.forEach((e, 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;
})

정답 숨기기(quiz가4개)

01.노가다 방식

quizResult[0].style.display = "none";
quizResult[1].style.display = "none";
quizResult[2].style.display = "none";
quizResult[3].style.display = "none";

02.for문

for(let i=0; i&ltquizInfo.length; i++){
quizResult[i].style.display = "none";
}

03.forEach

quizInfo.forEach((e, i) => {
quizResult[i].style.display = "none";
});

정답 확인 버튼

quizConfirm(정답 확인 버튼) 여러개가 있다는 걸 알려줘야한다.
btn=>quizConfirm

quizConfirm.addEventListener("click", () => {
alert("ddd")
}); //오류

사용자 정답 클릭횟수(num 설정)
userWord사용자 num클릭을 했을때 quizInfo안에 있는 answerResult정답

quizConfirm.forEach((btn, num) => {
btn.addEventListener("click", () => {
const userWord = quizinput[num].value.toLowerCase().trim();
// console.log(userWord)
// console.log(quizInfo[num].answerResult)
// 사용자 정답 == 문제 정답 
if(userWord == quizInfo[num].answerResult){
//정답
// alert("정답")
quizview[num].classList.add("like");
quizConfirm[num].style.display = "none";
}else{
// 오답
// alert("오답") 
quizview[num].classList.add("dislike");
quizConfirm[num].style.display = "none";
quizResult[num].style.display = "block"; //틀리면 정답이 나옴
quizinput[num].style.display = "none" //
}
})
});

원본 소스 보기