Quiz

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • HTML
  • CSS
  • Javascript

    <div class="quiz">
        <h2 class="quiz__type">${question.answerType}</h2>
        <h3 class="quiz__question">
            <span class="quiz__number">${question.answerNum}</span>
            <span class="quiz__ask">${question.answerAsk}</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${number}">
                    <input class="select" type="radio" id="select1${number}" name="select${number}" value="1">
                    <span class="choice">${question.answerChoice.one}</span>
                </label>

                <label for="select2${number}">
                    <input class="select" type="radio" id="select2${number}" name="select${number}" value="2">
                    <span class="choice">${question.answerChoice.two}</span>
                </label>

                <label for="select3${number}">
                    <input class="select" type="radio" id="select3${number}" name="select${number}" value="3">
                    <span class="choice">${question.answerChoice.three}</span>
                </label>

                <label for="select4${number}">
                    <input class="select" type="radio" id="select4${number}" name="select${number}" value="4">
                    <span class="choice">${question.answerChoice.four}</span>
                </label>
            </div>
        </div>
    </div>



    .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: 6px;
        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;
        font-family: 'Cafe24Dangdanghae';
    }

    .quiz__ex {
        text-align: center;
        border-top: 6px ridge #cacaca;
        width: 100%;
        font-size: 22px;
        padding: 13px 20px;
        background: #d6d6d6;
        font-family: 'Cafe24Dangdanghae';
    }

    .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 quizWrap = document.querySelector(".quiz__wrap");

    // 문제 정보
    const quizInfo = [{
            answerType: "javascript",
            answerNum: 1,
            answerAsk: "객체 기반의 스크립트 언어는 무엇인가?",
            answerChoice: {
                one: "html",
                two: "css",
                three: "javascript",
                four: "react"
            },
            answerResult: "3",
            answerEx: "객체 기반의 프로그래밍 언어는 자바 스크립트입니다"
        },

        {
            answerType: "html",
            answerNum: 2,
            answerAsk: "웹 페이지의 문서 구조를 구현하기 위한 언어는?",
            answerChoice: {
                one: "html",
                two: "css",
                three: "javascript",
                four: "react"
            },
            answerResult: "1",
            answerEx: "웹 페이지의 문서 구조를 구현하기 위한 언어는 html"
        },

        {
            answerType: "css",
            answerNum: 3,
            answerAsk: "웹 사이트의 시각적인 부분을 설정하는 언어는?",
            answerChoice: {
                one: "html",
                two: "css",
                three: "javascript",
                four: "react"
            },
            answerResult: "2",
            answerEx: "웹 사이트의 시각적인 부분을 설정하는 언어는 css"
        }
    ];

    // 문제 출력
    function updateQuiz() {
        const html = [];                                                    // html 태그를 여러개 저장하기 위한 변수

        quizInfo.forEach((question, number) => {                            // 퀴즈 문제 정보를 참고로 html 태그 코드를 스크립트로 추가
            html.push(`
        <div class="quiz">
            <h2 class="quiz__type">${question.answerType}</h2>
            <h3 class="quiz__question">
                <span class="quiz__number">${question.answerNum}</span>
                <span class="quiz__ask">${question.answerAsk}</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${number}">
                        <input class="select" type="radio" id="select1${number}" name="select${number}" value="1">
                        <span class="choice">${question.answerChoice.one}</span>
                    </label>

                    <label for="select2${number}">
                        <input class="select" type="radio" id="select2${number}" name="select${number}" value="2">
                        <span class="choice">${question.answerChoice.two}</span>
                    </label>

                    <label for="select3${number}">
                        <input class="select" type="radio" id="select3${number}" name="select${number}" value="3">
                        <span class="choice">${question.answerChoice.three}</span>
                    </label>

                    <label for="select4${number}">
                        <input class="select" type="radio" id="select4${number}" name="select${number}" value="4">
                        <span class="choice">${question.answerChoice.four}</span>
                    </label>
                </div>
            </div>
        </div>
        `);
        });

        html.push(`
        <div>
        <button class="quiz__confirm">정답 확인하기</button>
        <div class="quiz__result"></div>
        </div>
        `);

        quizWrap.innerHTML = html.join('');                     // " , " 기호를 없애기 위해 join 함수 사용
    }

    updateQuiz();


    function answerQuiz() {
        const quizSelects = document.querySelectorAll(".quiz__selects"); // 보기 선택을 위한 박스
        const quizView = document.querySelectorAll(".quiz__view");       // 퀴즈 창 메인 화면
        const quizResult = document.querySelector(".quiz__result");      // 퀴즈 결과

        let currentScore = 0;                                           // 현재 점수

        quizInfo.forEach((question, number) => {
            const quizSelectWrap = quizSelects[number];                 // 보기가 저장된 배열
            const userSelector = `input[name=select${number}]:checked`; // 사용자가 클릭한 보기를 확인
            const userAnswer = (quizSelectWrap.querySelector(userSelector) || {}).value; // queryselector : 어떤 요소를 찾는 기능도 있음

            if(userAnswer == question.answerResult) {                   // 유저가 클릭한 보기와 정답이 같으면
                quizView[number].classList.add("like");                 // like 추가
                currentScore++;                                         // 점수 +1 증가
            } else {                                                    // 클릭한 보기와 정답이 다르면
                quizView[number].classList.add("dislike");              // dislike 추가
                const div = document.createElement("div");              // div 태그 추가
                quizSelectWrap.appendChild(div).innerHTML = `<p class="quiz__ex">${question.answerEx}<p>`; // 정답 내용을 표시하기 위해 p 태그를 추가하고 answerEx값을 불러온다
            }
        });

        quizResult.innerHTML = `${quizInfo.length} 문제 중에 ${currentScore}문제를 맞췄습니다`; // 퀴즈 결과
    }

    document.querySelector(".quiz__confirm").addEventListener("click", answerQuiz); // html 태그를 스크립트로 윗부분에 추가했기 때문에 아래 부분에 클릭 이벤트 코드 작성