퀴즈 만들기 (3) 주관식 다수 문항

⭐️ Javascript ☛ Quiz Effect ⭐️

자바스크립트를 활용하여 퀴즈를 만들어보자.

퀴즈의 구성

퀴즈를 만들기 위해 필요한 정보로는 퀴즈 종류, 퀴즈 번호, 질문 내용, 정답 결과와 확인 버튼 등이 있습니다.
<div>에 이름을 지정하고, 원하는 곳에 정보의 값을 출력합니다.

[3] 주관식 유형 ☛ 다수의 퀴즈 (정답 오답 확인하기)

여러 개의 질문 내용과 답변 입력창 및 답이 있으며, 클릭하면 정답 확인 및 강아지의 표정이 변화하는 퀴즈 문항을 만들어봅니다.

// 01. 선택자 : 요소를 선택하는 방법 (출력값이 여러 개이므로 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");                // 강아지 모습


    // 02. 출력할 정보에 대한 값을 입력합니다. (다수의 값, 객체로 표현)

    const quizInfo = [
        {
            answerType: "웹 디자인 기능사 (2015년 10월)",
            answerNum: "1",
            answerAsk: "음에서도 색을 느낄 수 있는 현상을 무엇이라고 할까요?",
            answerResult: "색청"
        },
        {
            answerType: "웹 디자인 기능사 (2015년 10월)",
            answerNum: "2",
            answerAsk: "전자우편(e-mail)을 전송할 때 사용되는 프로토콜을 무엇이라고 할까요?",
            answerResult: "SMTP"
        },
        {
            answerType: "웹 디자인 기능사 (2015년 10월)",
            answerNum: "3",
            answerAsk: "망막에 다른 색광이 자극하여 혼합되는 현상으로, 색 점이 서로 가깝게 있어 명도와 채도가 떨어지지 않는 혼합 방식을 무엇이라고 할까요?",
            answerResult: "병치혼합"
        },
        {
            answerType: "웹 디자인 기능사 (2015년 10월)",
            answerNum: "4",
            answerAsk: "최초의 GUI 환경 웹 브라우저는 무엇일까요?",
            answerResult: "모자이크"
        },
    ]


    // 03. 퀴즈를 화면에 출력하기

    // (1) 하나씩 적어서 출력하기  -> 퀴즈 갯수가 많아질수록 하나씩 출력하기 어렵다. (ex. 100개의 퀴즈, 또는 그 이상을 생각해보면)
    // quizType[0].textContent = quizInfo[0].answerType;      // 퀴즈 종류
    // quizType[1].textContent = quizInfo[1].answerType;
    // quizType[2].textContent = quizInfo[2].answerType;
    // quizType[3].textContent = quizInfo[3].answerType;

    // quizNumber[0].textContent = quizInfo[0].answerNum + ". ";      // 퀴즈 번호
    // quizNumber[1].textContent = quizInfo[1].answerNum + ". ";
    // quizNumber[2].textContent = quizInfo[2].answerNum + ". ";
    // quizNumber[3].textContent = quizInfo[3].answerNum + ". ";

    // quizAsk[0].textContent = quizInfo[0].answerAsk;      // 질문 내용
    // quizAsk[1].textContent = quizInfo[1].answerAsk;
    // quizAsk[2].textContent = quizInfo[2].answerAsk;
    // quizAsk[3].textContent = quizInfo[3].answerAsk;

    // quizResult[0].textContent = quizInfo[0].answerResult;      // 정답 내용
    // quizResult[1].textContent = quizInfo[1].answerResult;
    // quizResult[2].textContent = quizInfo[2].answerResult;
    // quizResult[3].textContent = quizInfo[3].answerResult;

    // (2) 일일이 하나씩 출력하기 어려우므로, 위의 내용을 for문으로 표현해본다.
    //  for( i=0; i<4; i++ ){                      // 숫자 4 로 적어도 되지만, 숫자가 더 커졌을 경우를 생각하여 'quizInfo.length'로 적어주자.
    //      quizType[i].textContent = quizInfo[i].answerType;
    //      quizNumber[i].textContent = quizInfo[i].answerNum + ". ";
    //      quizAsk[i].textContent = quizInfo[i].answerAsk;
    //      quizResult[i].textContent = quizInfo[i].answerResult;
    //  }

    // (3) for문은 forEach문으로도 표현이 가능하다. 그때 그때 상황에 맞는 것으로 골라서 사용하자.
    quizInfo.forEach( (e, i) => {                      // 화살표 함수로 바꿈. e 는 element, i 는 index 를 의미.
        quizType[i].textContent = quizInfo[i].answerType;
        quizNumber[i].textContent = quizInfo[i].answerNum + ". ";
        quizAsk[i].textContent = quizInfo[i].answerAsk;
        quizResult[i].textContent = quizInfo[i].answerResult;
    })


    // 04. '정답 확인 버튼' 밑으로 보이는 "정답 내용" 숨겨놓기

    // (1) 일일이 하나씩 출력하기 -> 위와 마찬가지로 숫자가 커지면 힘들다.
    // quizResult[0].style.display = "none";
    // quizResult[1].style.display = "none";
    // quizResult[2].style.display = "none";
    // quizResult[3].style.display = "none";
    
    // (2) for문으로 표현하기
    // for( i=0; i<quizInfo.length; i++ ){
    //     quizResult[i].style.display = "none";
    // }

    // (3) for문을 forEach문으로 표현하기
    quizInfo.forEach((e, i) => {
        quizResult[i].style.display = "none";
    });

    
    // 05. 정답 확인 버튼 만들기 (버튼을 클릭하면 정답,오답에 따라 강아지 표정이 변하도록 출력하기)
    // quizConfirm.addEventListener("click", () => {         // 하나만 있을 때는 실행되지만 여러 개여서 실행이 되지 않음.
    // });                             // 단일 퀴즈일 때에는 성립되지만 지금은 퀴즈가 여러개 이기에 식이 성립되지 않음. 아래에 다시 적어주겠음.

    // quizConfirm.forEach((btn) => {                      // quizConfirm 에게 forEach 함수를 주어 '여러 개가 있어'라고 자바스크립트에게 알려주어야 함.
    //     btn.addEventListener("click", () => {           // btn 은 quizConfirm 에 대입 되는 것.
    //         
    //         // 사용자 답변
    //         const userWord = quizInput.values.toLowerCase().trim();   // 대문자를 소문자로 바꾸고 빈칸에 상관 없이 정답을 확인하도록
    //     })
    // });

    quizConfirm.forEach((btn, num) => {
        btn.addEventListener("click", () => {
            
            const userWord = quizInput[num].value.toLowerCase().trim();      // 사용자 답변

            // console.log(userWord)                           // 출력값이 바르게 나오는지 console.log 로 확인하기
            // console.log(quizInfo[num].answerResult)
            
            if(userWord == quizInfo[num].answerResult){            // 사용자 답변 == 문제 정답 이면~

                // alert("정답")                // 정답일 때 출력값이 바르게 나오는지 확인
                quizView[num].classList.add("like");               // 여러 개가 동시에 출력되지 않도록 [num] 을 적어준다. -> 요소를 찾아가도록 설정
                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";   // 틀렸을 때 정답만 보이도록 display 설정.
            }
        })
    });

결과보기

☛ 원본 소스 보기