Quiz Effect3 - 주관식 : 여러 문제 정답 쓰고 확인하기

{
    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")//사용자 정답

        //quizInfo에 문제정보를 저장
        const quizInfo = [{
                answerType: "javascript",
                answerNum: 1,
                answerAsk: "객체 기반의 스크립트 프로그래밍 언어는 무엇입니까?",
                answerResult: "javascript"
            },
            {
                answerType: "html",
                answerNum: 2,
                answerAsk: "보여지는 브라우저의 구조를 설계하며 웹 피이지를 위한 마크업 언어는 무엇입니까?",
                answerResult: "html"
            },
            {
                answerType: "css",
                answerNum: 3,
                answerAsk: " HTML이나 XML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어는?",
                answerResult: "javascript"
            },

        ];

        //문제출력 
        // 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 < 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((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].answerResult + " 입니다";
        });

        //display none을 써서 정답 숨기기
        quizResult.forEach((el)=>{      
            el.style.display = "none";
        });

        //정답 확인
        quizConfirm.forEach((btn, num)=>{       //el과 index
            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]에 like추가하고 display를 none
                    quizView[num].classList.add("like");
                    quizConfirm[num].style.display="none"
                }else {
                    quizView[num].classList.add("dislike");         //같지 않다면 dislike추가 
                    quizConfirm[num].style.display="none";      // quizConfirm[num]는 display none
                    quizResult[num].style.display="block";        // quizResult[num]는 display block
                    quizInput[num].style.display="none";        //quizInput[num].는 display none
                }
            })
        }); 
}