[Quiz Effect] 퀴즈 이펙트 04 - 객관식(한 문제) 유형

퀴즈 만들기 04

이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 퀴즈를 만들어보도록 하겠습니다.
이번 학습 내용을 잘 활용하여 웹디자인기능사 시험 공부 열심히 해 봅시다!
변수(let)와 상수(const)에 쿼리 셀렉터 값을 저장시키고, 그 동안 배운 스크립트를 통해 문제 정보를 HTML 태그에 출력시키고, 정답을 숨겼다가 버튼을 눌러 보이게 하는 등의 다양한 효과들을 구현시켜봅시다!

---

객관식 유형

네 번째 주관식(여러 문제) 유형의 자바스크립트 소스와 부연 설명(주석 처리됨)이다.
HTML과 CSS 소스를 함께 보고 싶다면 맨 아래의 '원본 소스 보기' 버튼을 누를 것.

// 선택자
// quizChoice와 quizSelect는 총 4개이므로 뒤에 All을 붙여준다.
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");             // 객관식 보기 --> document 아닌 quizSelects 써주면 로딩 시간 절약됨
const quizSelect = quizSelects.querySelectorAll(".select");             // 객관식 보기

// 문제 정보
// answerChoice는 객체 안에 배열이 들어간 구조
const quizInfo = [
    {
        answerType: "웹디자인기능사 필기 기출문제(2015.7.19) 재구성 모의고사",
        answerNum: "1",
        answerAsk: "색의 3속성 중 사람의 눈이 가장 예민하고 강하게 반응하는 대비는?",
        answerChoice: ["명도대비", "색상대비", "보색대비", "채도대비"],
        answerResult: "1",
        answerEx: "명도대비가 색의 3속성 중 가장 사람의 눈에 예민한 속성이다."
    }
]

위의 예시와 같이 상수(const)를 필요한 만큼 생성한 후 HTML 영역의 div, 시맨틱 태그 등의 class명과 연결시킨다.
또한 이번 포스팅에서는 객관식(4개 중 하나를 선택) 퀴즈를 만들기 때문에 answerChoice에 또 4개의 데이터 값을 저장시킬 필요가 있으며 이에 따라 answerChoice는 객체 안에 배열이 들어간 구조로 만들도록 한다.

---

// 문제·보기출력 - 함수로 감싸기
// 문제가 많아질수록 서로 충돌날 수도 있기 때문에 function을 만들어서 안에 집어넣음
function updateQuiz() {
    // 문제 출력 (innerText 대신 textContent를 사용해도 됨 / 익스플로어 호환되는 건 textContent)
    quizType.textContent = quizInfo[0].answerType;      // quizInfo는 배열 속 객체 1개 뿐이므로 [0]이다.
    quizNumber.textContent = "0" + quizInfo[0].answerNum + ". ";
    quizAsk.textContent = quizInfo[0].answerAsk;
    quizResult.textContent = quizInfo[0].answerEx;

    // 보기 출력
    for(let i = 0; i < quizSelect.length; i++) {     // quizSelect = 4 --> 클래스 select가 총 4개이므로
        quizChoice[i].textContent = quizInfo[0].answerChoice[i];    // quizChoice와 answerChoice는 총 4번 반복
    }

    // 해설 숨기기
    quizResult.style.display = "none";
}
updateQuiz();       // 이거 써줘야 함수 실행됨

문제 출력과 보기 출력, 해설 숨기기는 updateQuiz() 함수로 감싸주도록 한다.
문제를 많이 만들수록 서로 충돌이 날 위험이 있기 때문에 이와 같은 작업을 해주도록 한다.
마지막으로 updateQuiz();를 꼭 적어 함수를 실행시키는 것을 잊지 않도록 한다.

---

// 정답 확인
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("정답");   // alert 테스트 마친 후 주석처리
                quizView.classList.add("like");     // 강아지 미소
            } else {
                // alert("오답");
                quizView.classList.add("dislike");      // 강아지 슬픔
                quizResult.style.display = "block";     // 정답(해설) 표시
                quizConfirm.style.display = "none";     // 정답 확인 버튼 숨김
            }
        } else {
            // alert("정답을 선택해주세요.");      // 4번 반복되는 버그가 있으므로 쓰지 않음
        }
    }
}

// 정답 클릭 시 이벤트 출력
quizConfirm.addEventListener("click", answerQuiz);

정답 확인은 answerQuiz()라는 함수 안에 넣도록 한다.
먼저 for문을 통해 사용자가 선택한 정답과 문제 정답의 일치 여부를 4번 검사해야 한다.
그런 다음, if문을 통해 보기에 체크가 된 상태인지를 확인하는 작업을 하고,
그 다음에는 중첩 if문으로 그 체크된 번호와 문제 정답 번호가 일치하는 지를 확인하도록 한다.

그 다음 정답일 경우의 반응과, 오답일 경우의 반응을 설정해주도록 한다.
마지막으로는 정답 확인 버튼 클릭 시 해당 함수를 실행시켜주는 실행문을 적는 것을 잊지 말자.

---

원본 소스 보기