Quiz Effect04 - 객관식 한문제

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 = document.querySelectorAll(".choice")                         //객관식 보기
const quizSelect = document.querySelectorAll(".select")                         //객관식 보기

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

//문제출력
function updatQuiz(){
    //타입, 문제, 정답, 보기
    quizType.textContent = quizInfo[0].answerType;
    quizNumber.textContent = quizInfo[0].answerNum;
    quizAsk.textContent = quizInfo[0].answerAsk;
    quizResult.textContent = quizInfo[0].answerEx;

    for(let i=0; i<4; i++){
        quizChoice[i].textContent = quizInfo[0].answerChoice[i];
    }

    //설명 감추기
    quizResult.style.display = "none";
}
updatQuiz();

//정답 확인
function answerQuiz(){
    //사용자가 클릭한 인풋 --> 체크드 : 사용자가 선택한 정답 == 객체 안에 정답
    for(let i=0; i<quizSelect.length; i++){
        if(quizSelect[i].checked == true){
            quizConfirm.style.display = "none";
            if(quizSelect[i].value == quizInfo[0].answerResult){
                //정답
                quizView.classList.add("like");
            } else {
                //오답
                quizView.classList.add("dislike");
                quizResult.style.display = "block";
            }
        }
    }
}

quizConfirm.addEventListener("click", answerQuiz)

• js로 css 제어하기
• Node.textContent
• add()/remove()
• forEach()
• for
• if