QUIZ | 문제 만들기 | 방법 03

QUIZ를 만들어보자 !

QUIZ의 여러 형태 중 주관식(여러문항) 형식으로 만들어봅시다.

원본 소스 보기

script를 살펴봅시다 !

<script>
    //선택자
    //타입이 여러개 중에 선택해서 불러오기 -> querySelector"All" 여러개 있다고 알려주기
    const quizType = document.querySelectorAll(".quiz__type");      //퀴즈 종류
    const quizNumber = document.querySelectorAll(".quiz__question .number");      //퀴즈 번호
    const quizAsk = document.querySelectorAll(".quiz__question .ask");      //퀴즈 질문
    const quizConfirm = document.querySelectorAll(".quiz__answer .confirm");       //정답 확인 버튼
    const quizResult = document.querySelectorAll(".quiz__answer .result");      //퀴즈 정답
    const quizInput = document.querySelectorAll(".quiz__answer .input");      //사용자 정답
    const quizView = document.querySelectorAll(".quiz__view");     //강아지
    
    //문제 정보
    const quizInfo = [
        {
            answerType: "웹디자인기능사 2015년 4회",
            answerNum: "1",
            answerAsk: "검은 종이 위에 노랑과 파랑을 나열하고 일정한 거리에서 보면 노랑이 파랑보다 더 가깝게 보인다. 이때의 노랑색을 무엇이라 하는가?",
            answerResult: "진출색"
        },
        {
            answerType: "웹디자인기능사 2015년 4회",
            answerNum: "2",
            answerAsk: "E-mail 송신 시에 사용되는 프로토콜은?",
            answerResult: "SMTP"
        },
        {
            answerType: "웹디자인기능사 2015년 4회",
            answerNum: "3",
            answerAsk: "애니메이션 제작의 특수 효과 중 하나로 축소형으로 입체 모델을 만들고 여기에 다른 기법을 병합하여 장면을 만드는 것은?",
            answerResult: "미니어처 효과"
        },
        {
            answerType: "웹디자인기능사 2015년 4회",
            answerNum: "4",
            answerAsk: "매핑 방법 중 오브젝트에 요철이나 엠보싱 효과를 표현하는 방법은?",
            answerResult: "범프 매핑"
        }
    ]
    //문제 출력
    // 1
    // quizType[0].textContent = quizInfo[0].answerType;
    // quizNumber[0].textContent = quizInfo[0].answerNum;
    // quizAsk[0].textContent = quizInfo[0].answerAsk;
    // quizResult[0].textContent = quizInfo[0].answerResult;
    // 2
    // quizType[1].textContent = quizInfo[1].answerType;
    // quizNumber[1].textContent = quizInfo[1].answerNum;
    // quizAsk[1].textContent = quizInfo[1].answerAsk;
    // quizResult[1].textContent = quizInfo[1].answerResult;
    // 3
    // quizType[2].textContent = quizInfo[2].answerType;
    // quizNumber[2].textContent = quizInfo[2].answerNum;
    // quizAsk[2].textContent = quizInfo[2].answerAsk;
    // quizResult[2].textContent = quizInfo[2].answerResult;
    // 4
    // quizType[3].textContent = quizInfo[3].answerType;
    // quizNumber[3].textContent = quizInfo[3].answerNum;
    // quizAsk[3].textContent = quizInfo[3].answerAsk;
    // quizResult[3].textContent = quizInfo[3].answerResult;
    // for( let i = 0; i < quizInfo.length; i++){
    //     quizType[i].textContent = quizInfo[i].answerType;
    //     quizNumber[i].textContent = quizInfo[i].answerNum;
    //     quizAsk[i].textContent = quizInfo[i].answerAsk;
    //     quizResult[i].textContent = quizInfo[i].answerResult;
    // };
    //forEach는 순서를 인식, forEach(i) i만 쓰면 요소로 인식, forEach(e, i) 이렇게 써야 순서로 인식
    quizInfo.forEach((e, i) => {
        quizType[i].textContent = quizInfo[i].answerType;
        quizNumber[i].textContent = quizInfo[i].answerNum;
        quizAsk[i].textContent = quizInfo[i].answerAsk;
        quizResult[i].textContent = quizInfo[i].answerResult;
    });
    //정답 숨기기
    // quizResult[0].style.display = "none";
    // quizResult[1].style.display = "none";
    // quizResult[2].style.display = "none";
    // quizResult[3].style.display = "none";
    // for (let i=0; i<quizInfo.length; i++){
    //     quizResult[i].style.display = "none";
    // };
    quizInfo.forEach((e, i) => {
        quizResult[i].style.display = "none";
    });
    //정답 확인
    //퀴즈 컨펌을 클릭 했을때 실행해라
    // 버튼이 하나일 경우는 가능하지만
    // quizConfirm.addEventListener("click", () => {
    //     alert("ddd")
    // });
    //버튼이 여러개일 경우는 여러개가 있다는 것을 알려주고 실행해야 함
    quizConfirm.forEach((btn, num) => {
        btn.addEventListener("click", () => {
            
            //사용자 정답
            const userWord = quizInput[num].value.toLowerCase().trim();
            // console.log(userWord)
            // console.log(quizInfo[num] = answerResult)
            //사용자 정답과 문제 정답 비교
            if(userWord == quizInfo[num].answerResult){
                //alert("정답");
                quizView[num].classList.add("like");
                quizConfirm[num].style.display = "none";
            } else {
                //alert("오답");
                quizView[num].classList.add("dislike");
                quizConfirm[num].style.display = "none";
                quizResult[num].style.display = "block";
                quizInput[num].style.display = "none";
            }
        });
    });
</script>

#1. forEach( )는 순서를 인식하기 때문에 괄호 안에 i만 쓰면 요소로 인식합니다. forEach(e, i)로 써야 index 값으로 인식 할 수 있습니다.

#2. 버튼이 여러개일 경우 또한 여러개가 있다는 것을 알려주고 실행해야 됩니다.

버튼이 한개일 경우	quizConfirm.addEventListener("click", () => {
버튼이 여러개일 경우	quizConfirm.forEach((btn, num) => {     btn.addEventListener("click", () => {