퀴즈 이펙트 만들기 03

퀴즈 만들기

자바스크립트 함수를 활용하여 퀴즈 만들기입니다.

이번 퀴즈 만들기는 퀴즈 만들기02의 심화 학습니다.

---

퀴즈 만들기 03

이번 퀴즈는 여러개의 주관식 문제를 만드는 유형입니다.

여러개의 문제를 만들기 위해선 객체를 활용하여 각각의 블록에 맞는 실행값을 넣어야 합니다.

○ 선택자

//선택자
const quizType = document.querySelectorAll(".quiz__type");                   //퀴즈 종류   //문제가 여러개라 "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년 7월 10일", 
        answerNum: "1. ", 
        answerAsk: "먼저 본 색의 영향으로 나중에 보는 색이 다르게 보이는 현상은?",
        answerResul:"계시대비"
    },
    {
        answerType: "웹디자인기능사 2016년 7월 10일",
        answerNum: "2. ",
        answerAsk: "오스트발트(Ostwald) 색상환은 무채색 축을 중심으로 몇 색상이 배열되어 있는가?",
        answerResul:"24"
    },
    {
        answerType: "웹디자인기능사 2016년 7월 10일", 
        answerNum: "3. ", 
        answerAsk: "애니메이션 제작의 특수 효과 중 하나로 축소형으로 입체 모델을 만들고 여기에 다른 기법을 병합하여 장면을 만드는 것은?",
        answerResul:"미니어처 효과"
    },
    {
        answerType: "웹디자인기능사 2016년 7월 10일", 
        answerNum: "4. ",
        answerAsk: "네트워크를 통해 데이터 통신을 실행하는데 사용되는 일련의 규칙을 무엇이라고 하는가?",
        answerResul:"프로토콜"
    }
];

우선 quiz02와 다른점은 querySelector가 여러개의 저장 값을 보내주기 위해 여러개의 값이 있다는 것을 알려줘야 합니다. 이럴 때 사용하는 것이 querySelectorAll입니다.

또한 여러개의 문제를 만들어내기 위해 객체를 활용하여 각각의 키와 값을 부여해야 합니다.

○ 요소 매서드

//문제 출력(for문)
for( let i=0; i<quizInfo.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].answerResul;
};

//문제 출력(forEach문)
quizInfo.forEach((e, i) => {        //그냥 i만 쓰면 요소값으로 인식해서 e, i로 써줌(forEach는 순서대로 인식하기 때문)
    quizType[i].textContent = quizInfo[i].answerType;

    quizNumber[i].textContent = quizInfo[i].answerNum;

    quizAsk[i].textContent = quizInfo[i].answerAsk;

    quizResult[i].textContent = quizInfo[i].answerResul;
});

//정답 숨기기(일반적인 방식)
quizResult[0].style.display = "none";
quizResult[1].style.display = "none";
quizResult[2].style.display = "none";
quizResult[3].style.display = "none";

//정답 숨기기(for문)
for( let i=0; i<quizInfo.length; i++){
quizResult[i].style.display = "none";
};

//정답 숨기기(forEach문)
quizInfo.forEach((e, i) => {
    quizResult[i].style.display = "none";
});

여러개의 문제를 블록에 놓기 위해 각 문제마다 실행문을 넣을 경우 코드가 너무 길어지게 됩니다. 이러한 문제를 해결하기 위해 for문이나 forEach문을 활용하면 더 간단한 코드로 완성할 수 있습니다.
for문과 forEach문은 서로 변환해 쓸 수 있어야 합니다.

○ 이벤트 매서드

//정답 확인
// quizConfirm.addEventListener("click", () => {    //문제가 여러개이기 때문에 이대로는 실행이 안된다. 그래서 forEach를 이용해서 4개인걸 자바스크립트에 알려줘야 한다.
    // alert("ddd")
// });
quizConfirm.forEach((btn, num) => {
    btn.addEventListener("click", () => {
        
        //사용자 정답
        const userWord = quizInput[num].value.toLowerCase().trim();
        
        //사용자 정답 == 문제 답안 
        if(userWord == quizInfo[num].answerResul){
            //정답
            // 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";
        };
    });
});

이벤트 매서드 역시 단일 값과 다르게 여러개의 값이 있을때는 forEach문을 활용하여 반드시 여러개의 값이 있다는 것을 알려주어야 합니다.
또한, 각 문제의 위치를 알려주기 위해 elememt와 index를 넣어 위치와 실행해야할 값을 지정해주어야 올바른 위치에 실행값이 적용됩니다.

원본 소스 보기