Quiz Effect 03.주관식 : 여러 문제 정답 쓰고 확인하기

//설명. 참고사항.

  const quizType = document.querySelectorAll(".quiz__type");         //문제유형
        const quizNumber = document.querySelectorAll(".quiz__number");     //문제 번호
        const quizAsk = document.querySelectorAll(".quiz__ask");           //문제 질문
        const quizConfirm = document.querySelectorAll(".quiz__confirm");   //문제 정답버튼
        const quizResult = document.querySelectorAll(".quiz__result");     //문제 정답
        const quizView = document.querySelectorAll(".quiz__view");         //문제 화면
        const quizInput = document.querySelectorAll(".quiz__input");         //사용자 정답


        
        //문제 정보
        const quizInfo = [
            {
                answerType : "html",
                answerNum : 1,                                                   
                answerAsk : "SEO(Search Engine Optimization)는 무엇입니까?",
                answerResult : "검색엔진최적화"
            },
            {
                answerType : "html",
                answerNum : 2,                                                   
                answerAsk : "모든 OS, 브라우저에서 동일한 정보에 접근이 가능해야 하는건 무엇입니까?",
                answerResult : "웹호환성"
            },
            {
                answerType : "html",
                answerNum : 3,                                                   
                answerAsk : "모두가 차별없이 웹에서 제공하는 정보를 이용할 수 있도록 하는 것은 무엇입니까?",
                answerResult : "웹접근성"
            }
           
        ];
          
        //문제 출력
        // quizType[0].textContent = quizInfo[0].answerType;
        // quizType[1].textContent = quizInfo[1].answerType;
        // quizType[2].textContent = quizInfo[2].answerType;

        // quizNumber[0].textContent = quizInfo[0].answerNum + ".";
        // quizNumber[1].textContent = quizInfo[1].answerNum + ".";
        // quizNumber[2].textContent = quizInfo[2].answerNum + ".";

        // quizAsk[0].textContent = quizInfo[0].answerAsk;
        // quizAsk[1].textContent = quizInfo[1].answerAsk;
        // quizAsk[2].textContent = quizInfo[2].answerAsk;

        // quizResult[0].textContent = quizInfo[0].answerResult;
        // quizResult[1].textContent = quizInfo[1].answerResult;
        // quizResult[2].textContent = quizInfo[2].answerResult;

        // 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].answerResult;
        // }; 
        //forEach
        quizInfo.forEach((el,index)=>{                                  //다중 선택자로 선택해서 배열화 된 데이터를 forEach문으로 적용.
            quizType[index].textContent = quizInfo[index].answerType;           //문제 타입
            quizNumber[index].textContent = quizInfo[index].answerNum + ".";    //문제 번호
            quizAsk[index].textContent = quizInfo[index].answerAsk;             //문제 질문
            quizResult[index].textContent = "정답은 " + quizInfo[index].answerResult + " 입니다.";  //문제 정답
        })
        //정답 숨기기
        quizResult.forEach(el=>{
            el.style.display = "none";
        })
        //정답 확인
        quizConfirm.forEach((el,index)=>{
            el.addEventListener("click",()=>{
                // el.style.display = "none";
                // quizResult[index].style.display = "block";      //해당 순서의quizResult가 보여져야 하므로 [index]를 추가.
                //사용자 정답 == quizInfo의 정답
                const userWord = quizInput[index].value.toLowerCase().trim();   //input창에 들어갈 데이터의 조건도 같이 변수화 시킨다.

                if(userWord == quizInfo[index].answerResult){
                    quizView[index].classList.remove("dislike");
                    quizView[index].classList.add("like");                      // 정답이면 like 클래스 추가
                    quizConfirm[index].style.display = "none";
                } else {
                    quizView[index].classList.remove("like");
                    quizView[index].classList.add("dislike");                   //오답이면 dislike 클래스 추가
                    quizConfirm[index].style.display = "none";
                    quizResult[index].style.display = "block";
                    quizInput[index].style.display = "none";
                }
            })
        });

 

이번에는 여러문제의 정답을 확인하는 예제 입니다. 

정답을 맞추지 못하면 바로 정답 설명이 나옵니다.  그렇게 하기 위해서 if else문을 이용해서 작업합니다.

 

문제를 출력할 때 일일히 작성하면 효율적이지 못하므로 forEach문을 이용해서 각각의 문제에 데이터를 넣어줍니다.

처음에는 정답을 숨기고 맞추거나 틀렸을 때 보여주도록 작업합니다.