Quiz

<div class="quiz__wrap">
    <div class="quiz">
        <h2 class="quiz__Type"></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 type="text" placeholder="정답을 적어주세요." class="quiz__input">
            <button class="quiz__confirm">정답 확인하기</button>
            <div class="quiz__result"></div>
        </div>
    </div>
    <div class="quiz">
        <h2 class="quiz__Type"></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 type="text" placeholder="정답을 적어주세요." class="quiz__input">
            <button class="quiz__confirm">정답 확인하기</button>
            <div class="quiz__result"></div>
        </div>
    </div>
    <div class="quiz">
        <h2 class="quiz__Type"></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 type="text" placeholder="정답을 적어주세요." class="quiz__input">
            <button class="quiz__confirm">정답 확인하기</button>
            <div class="quiz__result"></div>
        </div>
    </div>
</div>

/* quiz__wrap */
    .quiz__wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 150px;
    }
    .quiz {
        max-width: 500px;
        width: 100%;
        background: #fff;
        border: 8px ridge #cacaca;
        flex-wrap: wrap;
        margin: 10px;
    }
    .quiz__Type {
        background: #cacaca;
        text-align: center;
        font-size: 14px;
        color: #3b3b3b;
        border: 3px ridge #cacaca;
        padding: 3px 0;
        position: relative;
    }
    .quiz__question {
        border-top: 6px ridge #cacaca;
        border-bottom: 6px ridge #cacaca;
        padding: 13px 30px;
        font-size: 24px;
        line-height: 1.4
    }
    .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__number {
        font-family: 'Cafe24Dangdanghae';
        color: #bababa;
    }
    .quiz__ask {
        font-family: 'Cafe24Dangdanghae';
    }
    .quiz__view {
        background-color: #f5f5f5;
        position: relative;
    }
    .quiz__view .true {
        position: absolute;
        left: 70%;
        top: 100px;
        width: 100px;
        height: 100px;
        background: #f5534f;
        border-radius: 50%;
        z-index: 100;
        line-height: 100px;
        text-align: center;
        color: #fff;
        opacity: 0;
    }
    .quiz__view .false {
        position: absolute;
        right: 70%;
        top: 100px;
        width: 100px;
        height: 100px;
        background: #fff;
        border-radius: 50%;
        z-index: 100;
        line-height: 100px;
        text-align: center;
        color: #f5534f;
        opacity: 0;
    }
    .quiz__view.like .true {
        opacity: 1;
        animation: wobble 0.6s;
    }
    .quiz__view.dislike .false {
        opacity: 1;
        animation: wobble 0.6s;
    }
    @keyframes wobble {
        0% {transform: translateZ(0)}
        15% {transform: translate3d(-25%, 0, 0) rotate(-5deg)}
        30% {transform: translate3d(20%, 0, 0) rotate(3deg)}
        45% {transform: translate3d(-15%, 0, 0) rotate(-3deg)}
        60% {transform: translate3d(10%, 0, 0) rotate(2deg)}
        75% {transform: translate3d(-5%, 0, 0) rotate(-1deg)}
        100% {transform: translateZ(0)}
    }
    .quiz__answer {
        background-color: #f5f5f5;
        border-top: 6px ridge #cacaca;
        padding: 10px;
    }
    .quiz__confirm {
        border: 6px ridge #cacaca;
        width: 100%;
        font-size: 22px;
        padding: 13px 20px;
        background: #d6d6d6;
        text-shadow: 1px 1px 1px #fff;
        transition: all 0.3s;
        cursor: pointer;
    }
    .quiz__confirm:hover {
        background: #b3b3b3;
    }
    .quiz__result {
        border: 6px ridge #cacaca;
        width: 100%;
        font-size: 22px;
        padding: 13px 20px;
        background: #fff;
        text-align: center;
        text-shadow: 1px 1px 1px #fff;
        font-family: 'Cafe24Dangdanghae';
        display: none;
    }
    .quiz__input {
        border: 6px ridge #cacaca;
        width: 100%;
        font-size: 22px;
        padding: 13px 20px;
        background: #fff;
        text-align: left;
        text-shadow: 1px 1px 1px #fff;
        font-family: 'Cafe24Dangdanghae';
        margin-bottom: 10px;
    }

<script>
    const quizType = document.querySelectorAll(".quiz__Type");          //문제 유형
    const quizNumber = document.querySelectorAll(".quiz__number");      //문제 번호
    const quizAsk = document.querySelectorAll(".quiz__ask");            //문제 질문
    const quizConfirm = document.querySelectorAll(".quiz__confirm");    //문제 정답 버튼
    const quizResult = document.querySelectorAll(".quiz__result");      //문제 정답
    const quizView = document.querySelectorAll(".quiz__view");          //문제 화면
    const quizInput = document.querySelectorAll(".quiz__input");        //사용자 정답

    //문제 정보
    const quizInfo = [
        {
            answerType : "javascript",
            answerNum : 1,
            answerAsk : "객체 기반의 스크립트 프로그래밍 언어는 무엇입니까?",
            answerResult : "javascript"
        },
        {
            answerType : "javascript",
            answerNum : 2,
            answerAsk : "javascript에서 변하는 데이터(값)를 저장할 수 있는 메모리 공간은 무엇입니까?",
            answerResult : "변수"
        },
        {
            answerType : "javascript",
            answerNum : 3,
            answerAsk : "javascript에서 변하지 않는 데이터(값)를 저장할 수 있는 메모리 공간은 무엇입니까?",
            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 + " 입니다.";
    });

    //정답 숨기기
    quizResult.forEach(el => {
        el.style.display = "none";
    });

    //정답 확인
    quizConfirm.forEach((btn, num) => {
        btn.addEventListener("click", () => {

            //사용자 정답 == quizInfo 정답
            const userWord = quizInput[num].value.toLowerCase().trim();

            if(userWord == quizInfo[num].answerResult){
                quizView[num].classList.add("like");
                quizConfirm[num].style.display = "none";
            } else {
                quizView[num].classList.add("dislike");
                quizConfirm[num].style.display = "none";
                quizResult[num].style.display = "block";
                quizInput[num].style.display = "none";
            }
        });
    });
</script>