QuizEffect04 - 객관식(한문제) 유형

QuizEffect04

QuizEffect04 문제를 html, css, javascript로 만들어서 풀어봅니다.

원본 소스 보기

---

선택자

querySelector를 사용하지만, 객관식 문항이 다중이라서 querySelectorAll을 사용합니다.
quizChoice, quizSelect는 .quiz_selects를 사용합니다. document를 사용하는 것보다 찾아야하는 영역을 좁혀주어서 효율적으로 만듭니다.

//선택자 
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");              //객관식 보기

문제 정보

quizInfo 안에 문제 정보를 저장하여 작성합니다.

//문제 정보
const quizInfo = [
    {
        answerType: "웹디자인기능사 2015년 2회",
        answerNum: "1",
        answerAsk: "인터넷상의 보안 문제로 특정 네트워크를 격리시키는데 사용되는 시스템으로서 네트워크의 출입 경로를 단절시켜 보안 관리 범위를 좁히고 제어를 효과적으로 할 수 있는 시스템은?",
        answerChoice: ["POP server", " TCP", "Firewall", "IP"],
        answerResult: "3",
        answerEx: "인터넷상의 보안 문제로 특정 네트워크를 격리시키는데 사용되는 시스템으로서 네트워크의 출입 경로를 단절시켜 보안 관리 범위를 좁히고 제어를 효과적으로 할 수 있는 시스템을 Firewall이라고 합니다."
    }
];

문제 출력

for문끼리의 충돌 가능성이 있기 때문에 함수로 function을 사용하여 묶어서 작성합니다.
보기(객관식)가 여러개이기에 반복문을 사용하여 출력합니다. 정답이 확인되기 전에는 quizResult.style.display = "none";을 사용하여 해설을 숨겨둡니다.

//문제 출력
function updateQuiz() {
    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 < quizSelect.length; i++) {   //보기 출력 (객관식)
        quizChoice[i].textContent = quizInfo[0].answerChoice[i];
    }

    //해설 숨기기
    quizResult.style.display = "none";
}
updateQuiz();

정답 확인

사용자가 선택한 정답과 문제의 정답이 맞는지 확인 합니다.
(quizSelect[i].checked == true) checked 표시를 통해 어디에 체크가 된 상태인지 확인합니다.
(quizSelect[i].value == quizInfo[0].answerResult) 체크된 번호와 문제 번호를 확인합니다.
틀렸을 경우에 quizResult.style.display = "block"; 숨겼던 해설을 나오게 하고, quizConfirm.style.display = "none"; 정답을 확인하는 버튼을 숨깁니다.

//정답 확인
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";     //버튼 숨기기
            }
        }
    }
}

//정답 클릭
quizConfirm.addEventListener("click", answerQuiz);  //함수 안에 answerQuiz가 들어있는 것이니 대체