Quiz

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
소스 보기
Javascript
HTML 
// 선택자
const quizWrap = document.querySelector(".quiz__wrap");                 // 퀴즈 전체
const quizHeader = quizWrap.querySelector(".quiz__header");             // 퀴즈 정보 (데이터를 찾는 속도를 줄이기 위해 quizWrap 안에서 찾음)
const quizQuestion = quizWrap.querySelector(".quiz__question");         // 퀴즈 질문
const quizChoice = quizWrap.querySelectorAll(".quiz__choice span");     // 퀴즈 보기
const quizSelect = quizWrap.querySelectorAll(".quiz__choice input");    // 선택한 보기
const quizAnswer = quizWrap.querySelector(".quiz__answer");             // 퀴즈 정답
const quizDesc = quizWrap.querySelector(".quiz__desc");                 // 퀴즈 설명
const quizConfirm = quizWrap.querySelector(".quiz__confirm");           // 확인 버튼

// 문제 정보
const quizInfo = [
    {
        infoDate : "2016년 4회",
        infoType : "웹디자인기능사",
        infoNum : "01",
        infoQuestion : "다음 중 디자인의 기본 요소들로 옳은 것은?",
        infoChoice : ["선, 색체, 공간, 수량", "점, 선, 면, 질감", "시간, 수량, 구조, 공간", "면, 구조, 공간, 수량"],
        inforAnswer : "2",
        infoDesc : "디자인의 기본요소는 점, 선, 면, 질감이 있습니다.",
    }
]

// 문제 출력
/* quizDate.innerText = quizInfo[0].infoDate;
quizType.innerText = quizInfo[0].infoType;
quizNum.innerText = quizInfo[0].infoNum;
quizQuestion.innerText = quizInfo[0].infoQuestion;
quizChoice[i].innerText = quizInfo[0].infoChoice[i];
quizAnswer.innerText = quizInfo[0].inforAnswer;
quizDesc.innerText = quizInfo[0].infoDesc; */

quizHeader.innerHTML = quizInfo[0].infoDate + " " + quizInfo[0].infoType;
quizQuestion.innerHTML = quizInfo[0].infoNum + ". " + quizInfo[0].infoQuestion;
quizAnswer.innerText = quizInfo[0].inforAnswer;
quizDesc.innerText = quizInfo[0].infoDesc;

for(let i=0; i<quizChoice.length; i++){                  // quizChoice.length = 4
    quizChoice[i].innerText = quizInfo[0].infoChoice[i];    // quizInfo 첫번째 배열의 infoChoice 배열의 i번째 값 출력
}

// 정답 확인 - 사용자가 선택해서 checked 속성이 있는 보기 이용
quizConfirm.addEventListener("click", () => {
    let selectedChoice = null;                      // 보기의 value 값 비어있음

    for(let i=0; i<quizSelect.length; i++){
        if(quizSelect[i].checked){                  // 보기가 선택되면
            selectedChoice = quizSelect[i].value;   // 보기의 value 값이 선택된 보기가 됨
            break;
        }
    }

    if(selectedChoice !== null){                        // 보기의 value 값이 비어있지 않으면
        if(selectedChoice == quizInfo[0].inforAnswer){  // 선택된 보기가 퀴즈의 정답과 같으면
            //정답입니다.
            alert("정답입니다.");                       // 정답입니다 알림창 표시
            quizDesc.classList.remove("none");          // 설명 표시
        } else {                                        // 선택된 보기가 퀴즈의 정답과 다르면
            //오답입니다.
            alert("오답입니다.");                       // 오답입니다 알림창 표시
            quizAnswer.classList.remove("none");        // 정답 표시
            quizDesc.classList.remove("none");          // 설명 표시
        }
    } else {                                            // 보기의 value 값 비어있으면
        //보기를 선택하세요!
        alert("보기를 선택하세요!😅");                  // 보기를 선택하세요!😅 알림창 표시
    }
});

<div class="quiz__wrap">
    <div class="quiz">
        <div class="quiz__header"></div>
        <div class="quiz__main">
            <div class="quiz__question"></div>
            <div class="quiz__choice">
                <label for="choice1">
                    <input type="radio" id="choice1" name="choice" value="1">
                    <span></span>
                </label>
                <label for="choice2">
                    <input type="radio" id="choice2" name="choice" value="2">
                    <span></span>
                </label>
                <label for="choice3">
                    <input type="radio" id="choice3" name="choice" value="3">
                    <span></span>
                </label>
                <label for="choice4">
                    <input type="radio" id="choice4" name="choice" value="4">
                    <span></span>
                </label>
            </div>
            <div class="quiz__answer none"></div>
            <div class="quiz__desc none"></div>
        </div>
        <div class="quiz__footer">
            <button class="quiz__confirm">정답 확인하기</button>
        </div>
    </div>
</div>
adorableness1215@naver.com