Quiz

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
chfhrdk@gmail.com
소스보기
Javascript 
// 선택자 (위치)
const quizWrap = document.querySelector(".quiz__wrap");
const quizHeader = quizWrap.querySelector(".quiz__header");
const quizQuestion = quizWrap.querySelector(".quiz__question");
const quizAnswer = quizWrap.querySelector(".quiz__answer");
const quizDesc = quizWrap.querySelector(".quiz__desc");
const quizConfirm = quizWrap.querySelector(".quiz__confirm");
const quizChoice = quizWrap.querySelectorAll(".quiz__choice span");
const quizSelect = quizWrap.querySelectorAll(".quiz__choice input");

// 문제 정보
const quizInfo = [
    {
        infoDate : "19년 상시",
        infoType : "정보처리기능사",
        infoNum : "1",
        infoQuestion : "현재 수행 중에 있는 명령어 코드를 저장하고 있는 임시 저장 장치는?",
        infoChoice : ["선, 색체, 공간, 수량","점, 선, 면, 질감","시간, 수량,구조, 공간","1, 2, ,3"],
        infoAnswer : "2",
        infoDesc : "명령 레지스터(IR) : 인덱스 주소 지정시 사용되는 레지스터"
    },
]

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

for(let i=0; i<quizChoice.length; i++){
    quizChoice[i].innerText = quizInfo[0].infoChoice[i];
};

// 정답 해설 숨기기

// 정답 확인
quizConfirm.addEventListener("click", () => {
    let selectedChoice = null;

    for(let i=0; i<quizSelect.length; i++){
        if(quizSelect[i].checked){
            selectedChoice = quizSelect[i].value;
            break;
        }
    }

    if(selectedChoice !== null){
        if(selectedChoice == quizInfo[0].infoAnswer){
            //정답입니다.
            alert("정답");
            quizDesc.classList.remove("none");
        } else {
            // 오답입니다.
            alert("오답");
            quizAnswer.classList.remove("none");
            quizDesc.classList.remove("none");
        }
    } else {
        // 보기를 선택하시오
        alert("미선택");
    }
});