quizEffect04

https://garenchoi.github.io/webs_class/javascript/effect/quizEffect04.html

const quizType = document.querySelector(".quiz__type");         //문제 유형
const quizNumber = document.querySelector(".quiz__number");     //문제 번호
const quizAsk = document.querySelector(".quiz__ask");           //문제 질문
const quizConfirm = document.querySelector(".quiz__confirm");   //정답 확인 버튼
const quizResult = document.querySelector(".quiz__result");     //문제 정답
const quizView = document.querySelector(".quiz__view");         //문제 화면
const quizSelects = document.querySelector(".quiz__selects");   //객관식 보기
const quizChoice = quizSelects.querySelectorAll(".choice");     //객관식 보기
const quizSelect = quizSelects.querySelectorAll(".select");     //객관식 보기

//문제 정보
const quizInfo = [
    {
        answerType : "javascript",
        answerNum : 1,
        answerAsk : "객체 기반의 스크립트 프로그래밍 언어는 무엇입니까?",
        answerChoice : ["javascript", "html", "css", "jquery"],
        answerResult : "1",
        answerEx : "객체 기반의 스크립트 프로그래밍 언어는 자바스크립트입니다."
    }
];

//문제 출력
function updataQuiz() {										//함수 updataQuiz선언
    quizType.textContent = quizInfo[0].answerType;			//quizType에 0번째 quizInfo의 answerType 출력
    quizNumber.textContent = quizInfo[0].answerNum + ".";	//quizNumber에 0번째 quizInfo의 answerNum. 출력
    quizAsk.textContent = quizInfo[0].answerAsk;			//quizAsk에 0번째 quizInfo의 answerAsk 출력
    quizResult.textContent = quizInfo[0].answerEx;			//quizResult에 0번째 quizInfo의 answerEx 출력
    quizChoice.forEach((e,i) => {							//quizChoice의 element값들을 e에 index값들을 i에 저장
        e.textContent = quizInfo[0].answerChoice[i];		//e에 0번째 quizInfo의 i번째 answerChoice 값 출력
    });

    //설명 감추기 
    quizResult.style.display = "none";		//quizResult에 스타일 display none추가
}
updataQuiz();		//함수 updataQuiz실행

//정답 확인
function answerQuiz() {						//함수 answerQuiz선언
    quizConfirm.style.display = "none";		//quizConfirm(정답 확인 버튼)에 스타일 display none 추가

    for(let i=0; i<quizSelect.length; i++){		//for문 사용(i는 0부터 quizSelect의 길이보다 작을 때까지만 1씩 증가)
        if(quizSelect[i].checked == true){			//quizSelect의 i번째에 체크 되었을 때
            if(quizSelect[i].value == quizInfo[0].answerResult){	//quizSelect의 i번째 값이 quizInfo의 0번째 answerResult와 같으면
                quizView.classList.add("like");		//quizView에 클래스 like 추가
            } else {							//quizSelect의 i번째 값이 quizInfo의 0번째 answerResult와 같지 않으면
                quizView.classList.add("dislike");	//quizView에 클래스 dislike 추가
                quizResult.style.display = "block";	//quizResult에 스타일 display block 추가
            }
        }
    }
}

quizConfirm.addEventListener("click", answerQuiz);		//quizConfirm(정답 확인 버튼)을 클릭했을 때  함수 answerQuiz 실행