javascript - quiz effect03 : 주관식 : 여러문제 정답 쓰고 확인하기

  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: "css",
                answerNum: 2,
                answerAsk: "글씨 색상을 바꿀때 필요한 속성이 무엇입니까?",
                answerResult: "color"
            },
            {
                answerType: "css",
                answerNum: 3,
                answerAsk: "웹페이지를 꾸미려고 작성하는 코드는 무엇입니까?",
                answerResult: "css"
            },
            {
                answerType: "Javascript",
                answerNum: 4,
                answerAsk: "객체 기반의 스크립트 프로그래밍 언어는 무엇입니까?",
                answerResult: "javascript",
            },
            {
                answerType: "css",
                answerNum: 5,
                answerAsk: "글씨 색상을 바꿀때 필요한 속성이 무엇입니까?",
                answerResult: "color"
            },
            {
                answerType: "css",
                answerNum: 6,
                answerAsk: "웹페이지를 꾸미려고 작성하는 코드는 무엇입니까?",
                answerResult: "css"
            }

        ];
  
        quizInfo.forEach((el, index) =>{
            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((btn, num) => {
            btn.addEventListener("click", () => {
            
                const usweWord = quizInput[num].value.toLowerCase().trim();

                if(usweWord==quizInfo[num].answerResult){
                    quizView[num].classList.add("like");
                    quizConfirm[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";
                }
            });
        });