퀴즈 이펙트

정답

틀림


    <main id="main">
        <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">
                    <div class="quiz__selects">
                        <label for="select1">
                            <input class="select" type="radio" id="select1" name="select" value="1">
                            <span class="choice"></span>
                        </label>

                        <label for="select2">
                            <input class="select" type="radio" id="select2" name="select" value="2">
                            <span class="choice"></span>
                        </label>

                        <label for="select3">
                            <input class="select" type="radio" id="select3" name="select" value="3">
                            <span class="choice"></span>
                        </label>

                        <label for="select4">
                            <input class="select" type="radio" id="select4" name="select" value="4">
                            <span class="choice"></span>
                        </label>
                    </div>
                    <button class="quiz__confirm">정답 확인하기</button>
                    <div class="quiz_result"></div>
                </div>
            </div>
        </div>
    </main>


    .quiz__wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 150px;
        flex-wrap: wrap;
    }

    .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;
        position: relative;
    }

    .quiz__view .true {
        position: absolute;
        left: 70%;
        top: 100px;
        width: 100px;
        height: 100px;
        background: #fff;
        border-radius: 50%;
        z-index: 100;
        line-height: 100px;
        text-align: center;
        color: #fff;
        background-color: #F5534F;
        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__view .dislike {}

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

    .quiz__input {
        font-family: 'Cafe24Dangdanghae';
        border-top: 6px ridge #cacaca;
        width: 100%;
        font-size: 22px;
        padding: 13px 20px;
        background: #d6d6d6;
        margin-bottom: 10px;
    }

    .quiz__selects {
        margin-bottom: 20px;
        margin-top: 15px;
    }

    .quiz__selects label {
        display: flex;
    }

    .quiz__selects label input {
        position: absolute;
        left: -9999px;
    }
    .quiz__selects label span {
        font-size: 20px;
        line-height: 1.3;
        padding: 10px 30px 10px 10px;
        margin: 3px 0;
        border-radius: 5px;
        font-family: 'DungGeunMo';
        display: flex;
        align-items: center;
        cursor: pointer;
        transition: all 0.25s;
    }

    
    .quiz__selects label span::before {
        content: '';
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-right: 15px;
        background: #fff;
        display: flex;
        flex-shrink: 0;
        box-shadow: inset 0 0 0 4px #64a30b;
        transition: all 0.25s;
    }
    
    .quiz__selects label input:checked + span {
        background-color: #F5FFE7;
    }

    .quiz__selects label input:checked + span::before {
        box-shadow: inset 0 0 0 10px #64a30b;
    }


    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 quizSelects = document.querySelector(".quiz__selects"); // 객관식 보기
        const quizChoice = quizSelects.querySelectorAll(".choice"); // 정답 보기
        const quizSelect = quizSelects.querySelectorAll(".select"); // 사용자가 클릭하는 보기 버튼

        const quizInfo = [
            {
                answerType: "javascript",
                answerNum: 1,
                answerAsk: "객체 기반의 스크립트 언어는 무엇인가?",
                answerChoice: ["javascript", "html", "css", "jquery"],
                answerResult: "1",
                answerEx: "객체 기반의 프로그래밍 언어는 자바 스크립트입니다"
            }
        ];

        // 문제 출력
        function updateQuiz() {
            // 타입, 문제, 정답, 보기
            quizType.innerHTML = quizInfo[0].answerType;                // 퀴즈 분야
            quizNumber.innerHTML = quizInfo[0].answerNum + ". ";        // 퀴즈 번호
            quizAsk.innerHTML = quizInfo[0].answerAsk;                  // 퀴즈 질문
            quizResult.innerHTML = quizInfo[0].answerEx;                // 퀴즈 정답

            for(let i = 0; i < quizChoice.length; i++) {                // 퀴즈 버튼 옆 보기에 출력할 문자를 저장
                quizChoice[i].innerHTML = quizInfo[0].answerChoice[i];
            }

            //설명 감추기
            quizResult.style.display = "none";
        }

        updateQuiz();

        // 정답 확인
        function answerQuiz() {
            // 사용자가 클릭한 input 박스 --> checked : 사용자가 선택한 정답
            // 객체 안의 정답
            for(let i = 0; i < quizSelect.length; i++) {
                if(quizSelect[i].checked == true) {                         // 버튼이 눌려졌으면
                    if(quizSelect[i].value == quizInfo[0].answerResult) {   // 선택한 버튼의 값과 정답과 비교해서 같으면
                        //정답
                        quizView.classList.add("like");                     // 정답에 맞는 강아지의 표정으로 변경
                        quizView.classList.remove("dislike");               // 표정이 이상해지는 오류 방지
                        quizConfirm.style.display = "none";                 // 정답 확인 버튼을 숨긴다

                    } else {
                        //오답
                        quizView.classList.add("dislike");                  // 오답에 맞는 강아지의 표정으로 변경
                        quizView.classList.remove("like");                  // 표정이 이상해지는 오류 방지
                        quizResult.style.display = "block";                 // 정답 칸을  표시한다
                        quizResult.innerHTML = quizInfo[0].answerEx;        // 정답에 대한 내용을 표시한다
                    }
                }
            }
        }

        quizConfirm.addEventListener("click", answerQuiz);                  // 정답 확인 클릭에 대한 이벤트