JS 응용하기 - 퀴즈 03

3번 다양한 문의 주관식 답변 페이지 만들기

각 요소들을 querySelector을 통해 선택하는데 뒤에 All을 추가하여 다중의 값이 있는 요소들을 선택 한다.

---

---

자바스크립트

//선택자
const quizType = document.querySelectorAll(".quiz__type"); //다중의 값이 있을때는 All을 붙여 선택이 가능하게끔 한다.               //퀴즈 종류 : 클래스 quiz__type에 대입함
const quizNumber = document.querySelectorAll(".quiz__question .number")    //퀴즈 번호 : 클래스 quiz__quetion의 .number에 대입함
const quizAsk = document.querySelectorAll(".quiz__question .ask")          //퀴즈 질문 : 클래스 quiz__quetion의 .ask에 대입함
const quizConfirm = document.querySelectorAll(".quiz__answer .confirm")    //정답 확인 버튼 : 클래스 quiz__answer의 .confirm에 대입함
const quizResult = document.querySelectorAll(".quiz__answer .result")      //정답 결과 : 클래스 quiz__answer의 .result에 대입함
const quizInput = document.querySelectorAll(".quiz__answer .input")        //사용자 정답 : 클래스 quiz__answer의 .input에 대입함
const quizView= document.querySelectorAll(".quiz__view")                   //강아지 보기

//문제정보
const quizInfo = [
    {
        answerType: "웹디자인 기능사 2012년 04월",
        answerNum: "1",
        answerAsk: "각 부분 사이에 시각적인 강한 힘과 약한 힘이 규칙적으로 연속될 때에 생기는 디자인의 원리는?",
        answerResult: "율동"
    },
    {
        answerType: "웹디자인 기능사 2012년 04월",
        answerNum: "2",
        answerAsk: "HTML 문서에 대한 정보를 제공하는 자바스크립트 객체는?",
        answerResult: "document"
    },
    {
        answerType: "웹디자인 기능사 2012년 04월",
        answerNum: "3",
        answerAsk: "색채를 과학적으로 정리하여 스펙트럼을 7색으로 분리한 사람은?",
        answerResult: "뉴턴"
    },
    {
        answerType: "웹디자인 기능사 2012년 04월",
        answerNum: "4",
        answerAsk: "신인상파 화가인 쇠라(Georges Seurat)의 작품인 “그랑자트섬의 일요일 오후”에서 사용된 색의 혼합은?",
        answerResult: "병치 혼합"
    }
];

quizInfo.forEach(function(rob,good,array){                              //순서대로 적어야 각 인식할 요소 적용 가능 function(index) 라고 적을 시 element로 인식
    quizType[good].textContent = quizInfo[good].answerType;           //quiztype 자리에 textContent만 가져올건데 = quizInfo배열의 i번째 answertype 가죠옴
    quizNumber[good].textContent = quizInfo[good].answerNum+". ";
    quizAsk[good].textContent = quizInfo[good].answerAsk;
    quizResult[good].textContent = quizInfo[good].answerResult;
})

quizResult.forEach(function(tom,goooooood,ing){        //각 자리의 배치 순서에 따라 반영됨 tom자리는 요소 goooooood자리는 위치 ing자리는 
    quizResult[goooooood].style.display="none";
})

//정답 확인
quizConfirm.forEach((btn,num)=>{                //quizConfirm안에 있는 버튼 요소를 4개 가져와서
    btn.addEventListener("click", ()=>{     //그 버튼이 클릭 되었을때
        //사용자 정답
        const userWord = quizInput[num].value.toLowerCase().trim();     //입력받은 답변을 소문자 변경과 여백을 제거해 userword에 대입하고
        //사용자 정답 === 문제 정답
        if(userWord==quizInfo[num].answerResult){                       //사용자 대답이 담긴 userword가 quizInfo 배열의 answerResult키의 값과 같다면
            //정답 : 
            alert("정답");                                               //정답 알림
            quizView[num].classList.add("like");                        //강아지 표정 like로 변화시킴
            quizConfirm[num].style.display="none";                      //확인하기 버튼 숨김
            quizResult[num].style.display="block";                      //답 나타나게 표현함
        } else {
            //오답 :
            alert("오답");
            quizView[num].classList.add("dislike");
            quizConfirm[num].style.display="none";
            quizResult[num].style.display="block"
            quizInput[num].style.display="none"
        }
    })
});

---

원본 소스 보기