퀴즈 이펙트 - 객관식 유형

객관식 유형

원본 소스 보기

자바스크립트

1. 선택자를 설정합니다.

2. 문제 정보 데이터를 저장합니다.
2-1. 문제 출력 함수를 설정합니다.
2-1-1. 선택지를 출력합니다.
2-1-2. 문제의 해설을 숨깁니다.

3. 정답을 확인합니다.
3-1. 사용자가 쓴 정답과 문제의 정답이 맞는지 확인해야합니다.
3-2. 사용자가 고른 input 박스를 가져와야 합니다.

  (※innerText는 문자만을 인식하고 innerHTML은 태그까지 인식합니다.)
4. 정답을 클릭합니다.

//선택자
const quizType = document.querySelector(".quiz__type");                         //퀴즈 종류
const quizNumber = document.querySelector(".quiz__question .number");           //퀴즈 번호
const quizAsk = document.querySelector(".quiz__question .ask");                 //퀴즈 질문
const quizConfirm = document.querySelector(".quiz__answer .confirm");           //정답 확인 버튼
const quizResult = document.querySelector(".quiz__answer .result");             //정답 결과
const quizView = document.querySelector(".quiz__view");                     //강아지
const quizSelects = document.querySelector(".quiz__selects");               //객관식 보기
const quizChoice = quizSelects.querySelectorAll(".choice");                    //객관식 보기
const quizSelect = quizSelects.querySelectorAll(".select");                    //객관식 보기


//1. 문제 정보
const quizInfo = [
    {
    answerType : "웹디자인기능사 2022년 01회",
    answerNum : "1",
    answerAsk : "자연에서 쉽게 찾을 수 있고 온화함이 있지만, 때로는 단조로움을 주는 디자인 원리는?",
    answerChoice : ["유사조화", "대비조화", "대칭", "비대칭"],
    answerResult : "1",
    answerEx : "자연에서 쉽게 찾을 수 있고 온화함이 있지만, 때로는 단조로움을 주는 디자인 원리는 유사조화다.",
    }
];

//2. 문제 출력
    //2-1. 문제 출력 함수
    function updateQuiz() {
        

        quizType.textContent = quizInfo[0].answerType;
        quizNumber.textContent = quizInfo[0].answerNum + ". ";
        quizAsk.textContent = quizInfo[0].answerAsk;
        quizResult.textContent = quizInfo[0].answerEx;

        //2-1-1. 보기 출력
        for ( let i = 0; i<4; i++) {
            quizChoice[i].textContent = quizInfo[0].answerChoice[i];
        }
        //2-1-2. 해설 숨기기
        quizResult.style.display = "none"
    }
    
    updateQuiz()

//3. 정답 확인
function answerQuiz() {
    //사용자 선택한 정답 == 문제 정답
    //사용자가 클릭한 input박스를 가져와야 한다. ---> checked 확인

    for( let i=0; i<quizSelect.length; i++){
        if(quizSelect[i].checked == true){  //보기에 체크가 된 상태
            //체크된 번호 == 문제 번호
            if(quizSelect[i].value == quizInfo[0].answerResult){
                // alert("정답")
                quizView.classList.add("like");
            } else {
                // alert("오답")
                quizView.classList.add("dislike");
                quizResult.style.display = "block"
                quizConfirm.style.display = "none"
            }
        }
    }
}


//4. 정답 클릭
quizConfirm.addEventListener("click",answerQuiz);

---