퀴즈 유형 03

03. 퀴즈 유형

여러 갯수의 퀴즈를 스크립트로 퀴즈 질문와 번호, 확인 버튼,결과를 도출해보았습니다.

자바스크립트입니다. const에 문제를 저장하였으며, 여러개의 문제를 객체의 배열안에 저장하여 반복 되는 스크립트를 for문이나 forEach문으로 문제와 정보 숨기기, 답을 출력할 수 있게 하였습니다.

    	//선택자
        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 : "웹디자인기능사 2013년 2회",
                answerNumber : "1. " ,
                answerAsk : " 분신, 화신이라는 의미로 채팅, 온라인 게임 등 네트워크 환경에서 자신을 대신하여 커뮤니케이션에 참여하는 가상의 그림 또는 아이콘을 뜻하는 인터넷 용어는?",
                answerResul: "아바타"
            },
            {
                answerType : "웹디자인기능사 2013년 2회",
                answerNumber : "2. " ,
                answerAsk : "시각적 또는 촉각적으로 느껴지는 물체 표면에 대한 느낌을의미하는가?",
                answerResul: "질감"
            },
            {
                answerType : "웹디자인기능사 2013년 2회",
                answerNumber : "3. " ,
                answerAsk : "컬러 인쇄를 위해 C, M, Y, K 4색의 네거필름으로 만드는 과정을 무엇이라 하는가?",
                answerResul: "색분해도"
            },
            {
                answerType : "웹디자인기능사 2013년 2회",
                answerNumber : "4. " ,
                answerAsk : "사용자가 모니터 위에 표시된 메뉴를 손가락으로 누르면 입력이 되어 컴퓨터에 익숙하지 않은 초보자들도 간단하고 편리하게 사용할 수 있는 입력장치는?",
                answerResul: "터치스크린"
            }
        ]
        
        //문제 출력
        // 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].answerNumber;
        // quizNumber[1].textContent = quizInfo[1].answerNumber;
        // quizNumber[2].textContent = quizInfo[2].answerNumber;
        // quizNumber[3].textContent = quizInfo[3].answerNumber;

        // 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].answerResul;
        // quizResult[1].textContent = quizInfo[1].answerResul;
        // quizResult[2].textContent = quizInfo[2].answerResul;
        // quizResult[3].textContent = quizInfo[3].answerResul;

        //for문
        // for( let i=0; i < 4; i++){
        //     quizType[i].textContent = quizInfo[i].answerType;            //퀴즈 종류
        //     quizNumber[i].textContent = quizInfo[i].answerNumber;  //퀴즈 번호
        //     quizAsk[i].textContent = quizInfo[i].answerAsk;                //문제 정보
        //     quizResult[i].textContent = quizInfo[i].answerResul;         //문제 정답
        // }

        //forEach문
        quizInfo.forEach((e,i) => {
            quizType[i].textContent = quizInfo[i].answerType;              //퀴즈 종류
            quizNumber[i].textContent = quizInfo[i].answerNumber;    //퀴즈 번호
            quizAsk[i].textContent = quizInfo[i].answerAsk;                  //문제 정보
            quizResult[i].textContent = quizInfo[i].answerResul;           //문제 정답
        });

        // //정답 숨기기(4개)
        // 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((el,i)=>{
            quizResult[i].style.display = "none";
        });

        //정답 확인
        quizConfirm.forEach((btn,num)=>{    //버튼이 여러개 있다는걸 확인시킨 뒤 클릭을 넣어준다.
            btn.addEventListener("click",()=>{

                //사용자 정답
                const userWord = quizInput[num].value.toLowerCase().trim();
                
                //사용자 정답 == 문제 정답
                if(userWord == quizInfo[num].answerResul){
                    //정답
                    // alsrt("정답")
                    quizView[num].classList.add("like");
                    quizConfirm[num].style.display = "none";
                }else{
                    //오답
                    // alsrt("오답")
                    quizView[num].classList.add("dislike");
                    quizConfirm[num].style.display = "none";
                    quizInput[num].style.display = "none";
                    quizResult[num].style.display = "block";
                }
            })
        });

원본 소스 보여주기