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 : "javascript",
                answerNum : 1,
                answerAsk : "객체 기반의 스크립트 프로그래밍 언어는 무엇입니까?",
                answerResult : "javascript" 
            },
            {
                answerType : "html",
                answerNum : 2,
                answerAsk : "소문자로 변환하는 문자열 객체의 이름은 무엇입니까?",
                answerResult : "html"
            },
            {
                answerType : "css",
                answerNum : 3,
                answerAsk : "공백을 제거하는 문자열 객체의 이름은 무엇입니까?",
                answerResult : "css" 
            }
        ]
            // console.log(quizType) 


        //문제 출력
        // 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문
        // for(let i=0; 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 => {
            el.style.display = "none"
        })

        //정답 확인 
        quizConfirm.forEach((btn, num) => {
            btn.addEventListener("click", () => {
                // btn.style.display = "none";
                // quizResult[num].style.display = "block";

                // 사용자 정답 = quizInfo 정답
                const userWord = quizInput[num].value.toLowerCase().trim();  //사용자 데이터

                if(userWord == quizInfo[num].answerResult ){
                    quizView[num].classList.add("like");
                    quizConfirm[num].style.display = "none";
                    // quizResult[num].style.display = "block";
                    // quizInput[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";
                }
            })
        })

퀴즈03 사이트