Quiz 03

Quiz 03

웹디자인기능사 필기 시험에 나오는 주관식 문제를 코딩으로 만들어 풀어보세요.
자바스크립트를 이용해 퀴즈 형태 방식을 코딩

원본 사이트 보기

자바스크립트

데이터 값의 입력과 for문을 사용

    // 선택자
    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: "웹디자인 기능사 2016년 1회",
            answerNum: "1",
            answerAsk: "요소들이 상호 관계를 가지고 균형감이 안정적으로 이루어진 상태이며, 미적 대상을 구상하는 부분과 부분의 사이에 질적으로나 양적으로 모순되는 일 없이 질서가 잡혀있는 것은?",
            answerResult: "조화"
        },
        {
            answerType: "웹디자인 기능사 2016년 1회",
            answerNum: "2",
            answerAsk: "저드(D.B.judd)의 “색채 조화론”에 포함되는 원리를 2가지 이상 쓰시오",
            answerResult: "질서의 원리, 유사의 원리, 친근감의 원리, 명료성(비모호성)의 원리 등"
        },
        {
            answerType: "웹디자인 기능사 2016년 1회",
            answerNum: "3",
            answerAsk: "한국산업표준(KS)에 따른 색의 3속성은 무엇인가요?",
            answerResult: "Hue, Value, Chroma"
        },
        {
            answerType: "웹디자인 기능사 2016년 1회",
            answerNum: "4",
            answerAsk: "같은 크기의 형을 상, 하로 겹칠 때 위쪽의 것이 크게 보이는 착시현상은?",
            answerResult: "상방 거리의 과대착시"
        },
    ];

    // 문제 출력
    for(let i=0; i<quizInfo.length; i++) {   // 숫자 대신 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;
    }

    // 정답 숨기기
    for(let i=0; i<quizInfo.length; i++) {            // 숫자 대신 quizInfo.length을 사용하여 갯수 입력
        quizResult[i].style.display = "none";        // for문 안에 출력 값으로 논을 입력
    }

    // 정답 확인
    quizConfirm.forEach((btn, num) => {
        btn.addEventListener("click", () => {
            
            // 사용자 정답
            const userWord = quizInput[num].value.toLowerCase().trim();   // 소문자 전환과 여백 삭제 toLowerCase, trim
            
            // console.log(userWord)
            // console.log(quizInfo[num].answerResult)
            
            // 사용자 정답 == 문제 정답
            if(userWord == quizInfo[num].answerResult) {
                // 정답
                quizView[num].classList.add("like");
                quizConfirm[num].style.display = "none";
            } else {
                // 오답
                quizView[num].classList.add("dislike");
                quizResult[num].style.display = "block"
                quizInput[num].style.display = "none";
            }
        })
    });

문제 출력 forEach 사용 방법

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

정답 숨기기 forEach 사용 방법

    quizInfo.forEach((e, i) => {
        quizResult[i].style.display = "none";   // 객체 값으로 출력
    });