Quiz 02

Quiz 02

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

원본 사이트 보기

자바스크립트

데이터 값의 입력과 상수를 사용

    // 선택자
    const quizType = document.querySelector(".quiz__type");                             // 퀴즈 종류
    const quizNumber = document.querySelector(".quiz__question .number");       // 퀴즈 번호
    const quizAsk = document.querySelector(".quiz__question .ask");                   // 퀴즈 질문
    const quizConfirm = document.querySelector(".quiz__answer .confirm");         // 정답 확인 버튼
    const quizResult = document.querySelector(".quiz__answer .result");              // 정답 결과
    const quizInput = document.querySelector(".quiz__answer .input");                // 사용자 정답
    const quizView = document.querySelector(".quiz__view");                            // 강아지

    // 문제 정보
    const answerType = "웹디자인기능사";
    const answerNum = "2";
    const answerAsk = "기업의 새로운 이념 구축에 필요한 이미지와 커뮤니케이션 시스템을 의도적, 
                                       계획적으로 만들어내는 기업이미지통합 전략은 무엇인가요?";
    let answerResult = "CIP";

    // 문제 출력
    quizType.textContent = answerType;
    quizNumber.textContent = answerNum + ". ";
    quizAsk.textContent = answerAsk;
    quizResult.textContent = "정답은 : " + answerResult + " 입니다."

    // 정답 숨기기
    quizResult.style.display = "none";

    // 정답 확인
    // 정답 버튼을 클릭 시
    quizConfirm.addEventListener("click", () => {
        quizInput.style.display = "none";
        quizResult.style.display = "block";
        quizConfirm.style.display = "none";

        // 사용자 정답
        const userWord = quizInput.value.toLowerCase().trim(); // 소문자 치환 및 여백 삭제
        answerResult = answerResult.toLowerCase().trim();
        // console.log(userWord)
        // console.log(answerResult)

        // 사용자 정답 == 문제 정답
        if(userWord == answerResult) {
            // 정답
            quizView.classList.add("like");
        } else {
            // 오답
            quizView.classList.add("dislike");
        }
    });