문제 03

다수의 퀴즈

웹디자인기능사 대비 퀴즈 프로그램을 만들어 풀어보려 합니다.
이전 문제와 달리 다수의 문제를 선택해 불러와야 하기 때문에 querySelectorAll을 통해 저장된 값들을 불러오며, 값을 개별적으로 출력하지 않고 for문이나 forEach문을 이용하여 편리하게 출력합니다.
+ addEventListener 함수로 클릭 했을때 값을 출력하도록 합니다.
+ if함수로 값에 대한 결과를 나눕니다.

---

문제03

정답 확인하기를 누르면 답이 나옵니다.
정답을 맞출 경우 강아지가 웃으며 정답입니다 문구가 나옵니다.
오답의 경우 강아지가 울며 틀렸습니다 문구가 나옵니다.
맞출 경우 정답이 나오지 않으며, 틀릴경우 정답을 보여줍니다.

원본 소스 보기

Javascript 코드

선택자, 문제정보, 문제출력, 정답 숨기기, 정답 확인, 사용자 정답, 사용자 정답과 문제 정답 맞춰보기 단계로 구성되어 있습니다.

{
    //선택자
    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년 1회",
            answerNum : "1",
            answerAsk : "디자인 형태의 분류 중 이념적 형태에 속하는 것은?",
            answerResult : "추상형태"
        },
        {
            answerType: "웹디자인기능사 2015년 1회",
            answerNum : "2",
            answerAsk : "두 개의 컴퓨터 사이에 정보교환을 위해 사용되는 규칙을 의미하는 것은?",
            answerResult : "프로토콜"
        },
        {
            answerType: "웹디자인기능사 2015년 1회",
            answerNum : "3",
            answerAsk : "색광에서 Red, Green, Blue가 혼합될 때 그 결과 색은?",
            answerResult : "White"
        },
        {
            answerType: "웹디자인기능사 2015년 1회",
            answerNum : "4",
            answerAsk : "유사, 대비, 균일, 강약 등의 디자인 요소가 포함되어 있는 디자인 원리는?",
            answerResult : "조화"
        },
    ]
    // 노가다 방식..

    //문제 출력
    // 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;

    // 반복문을 이용한 편리한 방식!

    // for(let i=0; i<4; 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;
    // }

    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;
    });

    // 정답 숨기기(4개)
    // 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";
    // }

    // 반복문을 통한 index값 출력!

    quizInfo.forEach((e, i) => {
        quizResult[i].style.display = "none";
    })

    // 정답 확인 => 한개용이라안됨.
    // quizConfirm.addEventListener("click", () => {
    //     alert("d")
    // }); 
    
    // 정답 확인 => forEach 사용해야함.
    quizConfirm.forEach((btn, num) =>{
        btn.addEventListener("click", () => {
          
            // 사용자 정답
            const userWord = quizInput[num].value.toLowerCase().trim()  // 소문자로, 여백제거
            
            // 사용자 정답 == 문제 정답
            if(userWord == quizInfo[num].answerResult){
                // 정답
                // alert("정답")
                quizView[num].classList.add("like");     // 강아지 웃음
                quizConfirm[num].style.display = "none"; // 정답 확인하기 박스제거
                quizResult[num].style.display = "none";  // 정답 가리기
                quizInput[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";   // 사용자 입력불가

            }
        })
    });
}