quiz 유형 사이트 만들기 - 04

퀴즈퀴즈 사이트 만들기 !  ( 객관식유형)

이번엔 객관식으로된 퀴즈 풀이 사이트를 만들어볼까해요 

 전체 소스는 요기 

 

객관식 유형을 만들기위해 해야할일을 아래 소스로 살펴볼게요

<div class="quiz__choice">
    <label for="choice1">
        <input type="radio" id="choice1" name="choice" value="1">
        <span class="choice"></span>
    </label>
    <label for="choice2">
        <input type="radio" id="choice2" name="choice" value="2">
        <span class="choice"></span>
    </label>
    <label for="choice3">
        <input type="radio" id="choice3" name="choice" value="3">
        <span class="choice"></span>
    </label>
    <label for="choice4">
        <input type="radio" id="choice4" name="choice" value="4">
        <span class="choice"></span>
    </label>
</div>

요렇게 라벨과 radio 버튼을 넣었어요 ! 

 

const quizWrap = document.querySelector(".quiz__wrap");
const quizTitle = quizWrap.querySelector(".quiz__title");                //시험종목
const quizQuestion = quizWrap.querySelector(".quiz__question");
const quizChoice = quizWrap.querySelectorAll(".quiz__choice span");    //보기
const quizSelect = quizWrap.querySelectorAll(".quiz__choice input");    //보기
const quizDesc = quizWrap.querySelector(".quiz__desc");                  //설명
const quizConfirm = quizWrap.querySelector(".quiz__answer .confirm"); //정답버튼
const quizConfirmArea = quizWrap.querySelector(".quiz__answer");          //정답Area
const dogWrap =quizWrap.querySelector(".dog__wrap");                        //강아지표정

//문제 정보
const quizInfo =[
    {
        infoType:"웹디자인 기능사",
        infoTime:"2016년 4회",
        infoNumber:"1",
        infoQuestion: "다음 중 디자인의 기본요소들로 옳은것은?",
        infoChoice: ["선, 색채, 공간, 수량" , "점, 선, 면, 질감", "시간, 수량, 공간, 구조","면, 구조, 공간, 수량"],
        infoAnswer: "2",
        infoDesc: "디자인의 기본 요소는 점, 선, 면, 질감이 있습니다."
    }
]
//화면 출력
function updateQuiz(){
    quizTitle.innerHTML =quizInfo[0].infoType + " " + quizInfo[0].infoTime;
    // quizQuestion.innerHTML= "<em>"+quizInfo[0].infoNumber+"</em>. "+quizInfo[0].infoQuestion;
    quizQuestion.innerHTML= `<em> ${quizInfo[0].infoNumber}</em>. ${quizInfo[0].infoQuestion}`;

    for(let i = 0 ; i < quizInfo[0].infoChoice.length;i++ ){
        quizChoice[i].textContent= quizInfo[0].infoChoice[i];
    }    
    //
    // quizChoice.forEach(function(el, i) {
    //     quizChoice[i].textContent= quizInfo[0].infoChoice[i];   //for문으로 할때 쓰는법
    //     el.textContent= quizInfo[0].infoChoice[i];              //forEach문의 반환값을 이용해서 쓰는법
    // });

    quizDesc.textContent= quizInfo[0].infoDesc; //설명
    quizDesc.style.display = "none";
}

그리고 updateQuiz 함수를 생성하여 각각값을 넣어줬어요 

 

객관식으로 보기를 만들기! 

// infoChoice: 
// ["선, 색채, 공간, 수량" , "점, 선, 면, 질감", "시간, 수량, 공간, 구조","면, 구조, 공간, 수량"]

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

const quizChoice = quizWrap.querySelectorAll(".quiz__choice span");    << 요 구문을 넣었어요 

quiz__choice를 가진 하위객채중 span 태그를 소유한 애들을 querySelectorAll로 (배열로 담아 오는구문 총4개가 있죠 ? )

배열로 객관식 답을 그릇을 가져왔어요 

 

그뒤로 for문을 이용해  object 객체 안에 배열안에 있는 infoChoice 값을

quizChoice 에 넣어줘서 객관식 보기를 완료했어요!

 

객관식 답안을 체크하는 로직 ! 

function answerQuiz(){
    //사용자가 선택한 인풋박스(checked)==정답확인 (quizInfo[0]infoAnswer)
    for(let i=0 ; i <quizInfo[0].infoChoice.length ; i++){
        if(quizSelect[i].checked == true){ //사용자가 보기를 체크한 상태
            if(quizSelect[i].value == quizInfo[0].infoAnswer){
                dogWrap.classList.remove("dislike");
                dogWrap.classList.add("like");
            }else{
                dogWrap.classList.add("dislike");
            }
        }
    }
    quizConfirmArea.style.display = "none";
    quizDesc.style.display = "block";
}

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

addEventListener 함수를 이용해서 click 하였을때 작동하도록 했어요 ! 

const quizSelect = quizWrap.querySelectorAll(".quiz__choice input");  에서 input박스들을 가져와요 ! 

querySelectorAll구문을 이용해서 배열로 가져온 quizSelect 값을 for문을 통해 반복해줘서

값이 == true일때 ,즉 체크된것이 있을때 

if(quizSelect[i].value == quizInfo[0].infoAnswer){}

이 구문을통해 값을 체크하여 맞는지 틀린지 확인해봤어요 ! 

 

😝😝😝 위 레이아웃 만들면서 햇갈리는 javascript를 정리 해봤어요 ! 

innerHTML	textContent, innerText 과 같은동작을 하지만 style tag를 쓸수 있어요 (quizQuestion.innerHTML= "<em>"+quizInfo[0].infoNumber+"</em>)
array.forEach (element, number =>{  });	forEach문 반환하는 값이 있는 함수에요  array순서대로 반환하며 element(array[0]번째부터 끝까지 array의 값을 반환) number(array[0]번째 부터 끝까지 반복하며 배열의순서를 반환해요=> ex 0, 1,2)