퀴즈 이펙트

javascript 퀴즈

정답

틀림


    <main id="main">
        <div class="quiz__wrap">
            <div class="quiz">
                <h2 class="quiz__Type">javascript 퀴즈</h2>
                <h3 class="quiz__question">
                    <span class="quiz__number"></span>
                    <span class="quiz__ask"></span></h3>
                <div class="quiz__view">
                    <div class="true">정답</div>
                    <div class="false">틀림</div>
                    <div class="dog">
                        <div class="head">
                            <div class="ears"></div>
                            <div class="face"></div>
                            <div class="eyes">
                                <div class="teardrop"></div>
                            </div>
                            <div class="nose"></div>
                            <div class="mouth">
                                <div class="tongue"></div>
                            </div>
                            <div class="chin"></div>
                        </div>
                        <div class="body">
                            <div class="tail"></div>
                            <div class="legs"></div>
                        </div>
                    </div>
                </div>
                <div class="quiz__answer">
                    <input class="quiz__input" type="text" placeholder="정답을 적으세요">
                    <button class="quiz__confirm">정답 확인하기</button>
                    <div class="quiz_result"></div>
                </div>
            </div>
        </div>
    </main>


    .quiz {
        max-width: 400px;
        width: 100%;
        background: #fff;
        border: 8px ridge #cacaca;
        margin: 10px;
    }

    .quiz__Type {
        background: #cacaca;
        text-align: center;
        font-size: 14px;
        color: #3b3b3b;
        border: 3px ridge #cacaca;
        padding: 3px 0;
        position: relative;
    }

    .quiz__Type::before {
        content: '';
        position: absolute;
        left: 2px;
        top: 2px;
        width: 5px;
        height: 5px;
        border: 6px ridge #cacaca;
    }

    .quiz__Type::after {
        content: '';
        position: absolute;
        right: 2px;
        top: 2px;
        width: 5px;
        height: 5px;
        border: 6px ridge #cacaca;
    }

    .quiz__question {
        border-bottom: 6px ridge #cacaca;
        border-top: 6px ridge #cacaca;
        padding: 13px 30px;
        font-size: 24px;
        line-height: 1.4;
    }

    .quiz__number {
        font-family: 'Cafe24Dangdanghae';
        color: #64a30b;
    }

    .quiz__ask {
        font-family: 'Cafe24Dangdanghae';
        background-color: #f5f5f5;
    }

    .quiz__view {
        background-color: #f5f5f5;
    }

    .quiz__confirm {
        padding: 10px;
        border-top: 6px ridge #cacaca;
        width: 100%;
        font-size: 22px;
        padding: 13px 20px;
        background: #d6d6d6;
        font-family: 'Cafe24Dangdanghae';
        text-shadow: 1px 1px 1px #fff;
        cursor: pointer;
    }

    .quiz__confirm:hover {
        background: #b3b3b3;
    }

    .quiz_result {
        text-align: center;
        border-top: 6px ridge #cacaca;
        width: 100%;
        font-size: 22px;
        padding: 13px 20px;
        background: #d6d6d6;
        display: none;
    }

    .quiz_source {
        position: fixed;
        padding: 10px 20px;
        border: 8px ridge #cacaca;
        background: #cacaca;
        border-radius: 10px;
        bottom: 10px;
        right: 10px;
    }

    .quiz_source:hover {
        background: #8d8d8d;
        color: #fff;
        cursor: pointer;
    }


    const quizType = document.querySelector(".quiz__Type"); // 퀴즈 질문
    const quizNumber = document.querySelector(".quiz__number"); // 퀴즈 번호
    const quizAsk = document.querySelector(".quiz__ask"); // 퀴즈 질문
    const quizConfirm = document.querySelector(".quiz__confirm"); // 정답 확인 버튼
    const quizResult = document.querySelector(".quiz_result"); // 정답 결과
    const quizView = document.querySelector(".quiz__view"); // 강아지 이미지
    const userAnswer = document.querySelector(".quiz__input"); // 사용자가 입력한 답

    //문제 정보
    const quizTypeName = "Javascript";
    const answerNum = 1;
    const answerAsk = "객체 기반의 웹사이트용 스크립트 언어는 무엇인가?"
    const answerResult = "javascript"

    // 문제 출력
    quizType.textContent = quizTypeName; // 퀴즈 질문     
    quizNumber.textContent = answerNum + ". "; // 퀴즈 번호
    quizAsk.textContent = answerAsk; // 퀴즈 정답
    quizResult.textContent = "정답은 : " + answerResult + " 입니다"; // 퀴즈 결과

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

    //정답 확인
    quizConfirm.addEventListener("click", () => { // 정답 버튼 클릭 이벤트
        quizConfirm.style.display = "none";
        quizResult.style.display = "block"; // 결과를 보여준다

        const userWord = userAnswer.value.toLowerCase().trim(); // 사용자가 입력한 값

        if (userWord == answerResult) {
            quizView.classList.add("like");
            quizView.classList.remove("dislike");
            quizResult.style.display = "none";
        } else {
            quizView.classList.add("dislike");
            quizView.classList.remove("like");
            userAnswer.style.display = "none";
        }
    });