Quiz Effect 05 - 객관식 : 여러 문제 정답 확인하기

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

        //문제출력
        function updataQuiz(){
            const html =[];
            
            quizInfo.forEach((question, number)=>{      //quiz자체를 저장
                html.push(`

${question.answerType}

${question.answerNum} ${question.answerAsk}

정답입니다

틀렸습니다

 

 

 

 

 

 

 

 

${question.answerChoice[1]} ${question.answerChoice[2]} ${question.answerChoice[3]} ${question.answerChoice[4]}

            `)
            });
           //push로 버튼을 뒤에 추가
            html.push(`

 

            `)
            quizWrap.innerHTML=html.join('');
            
        }
        updataQuiz();
        

        function answerQuiz(){
            const quizSelects = document.querySelectorAll(".quiz__selects");    //보기 선택 박스
            const quizView = document.querySelectorAll(".quiz__view") ;
            const quizResult = document.querySelector(".quiz__result");

            let scoreCurrent = 0;

            quizInfo.forEach((question, number)=> {
                const quizSelectsWrap = quizSelects [number];       //전체 보기 선택 박스를 하나씩 가져옴
                const userSelector = `input[name=select${number}]:checked`      //사용자가 클릭한거 찾기
                const userAnswer = (quizSelectsWrap.querySelector(userSelector) || {}).value    //클릭한 값의 속성 값을 가져옴
                
                if(userAnswer == question.answerResult ){       //사용자가 입력한 값이랑 answerResult 가 같으면 
                    quizView[number].classList.add("like")          //like를 추가
                    scoreCurrent++
                }else {
                    quizView[number].classList.add("dislike");   //틀리면 dislike 
                    const div = document.createElement("div");
                    quizSelectsWrap.appendChild(div).innerHTML = `

${question.answerEx}

`
                }
            });
            quizResult.innerHTML =`${quizInfo.length} 문제 중에 ${scoreCurrent} 문제를 맞추었습니다.`;  //퀴즈 정답 갯수를 몇개 맞추었는지 화면에 띄움
        }

        document.querySelector(".quiz__confirm").addEventListener("click", answerQuiz);
}