Quiz 객관식(한문제) 유형

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
fkdldhs8484@gmail.com
소스 보기
HTMLCSSjavascript
<div class="quiz__wrap">
    <!-- <div class="quiz">
        <span class="quiz__type"></span>
        <h2 class="quiz__question">
            <span class="number"></span>
            <div class="ask"></div>
        </h2>
        <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 type="radio" id="select1" class="select" name="select" value="1">
                    <span class="choice"></span>
                </label>
                <label for="select2">
                    <input type="radio" id="select2" class="select" name="select" value="2">
                    <span class="choice"></span>
                </label>
                <label for="select3">
                    <input type="radio" id="select3" class="select" name="select" value="3">
                    <span class="choice"></span>
                </label>
                <label for="select4">
                    <input type="radio" id="select4" class="select" name="select" value="4">
                    <span class="choice"></span>
                </label>
            </div>

            <button class="confirm">정답 확인하기</button>
            <div class="result"></div>
        </div>
    </div> -->
</div>

/* quiz__wrap  */
    .quiz__wrap {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        margin-top: 50px;
        margin-bottom: 150px;
        flex-wrap: wrap;
    }
    
    .quiz {
        max-width: 500px;
        width: 100%;
        background-color: #fff;
        border: 8px ridge #cacaca;
        margin: 10px;
    }
    
    .quiz__type {
        background-color: #cacaca;
        text-align: center;
        display: block;
        font-size: 16px;
        border: 3px ridge #cacaca;
        color: #3b3b3b;
        font-family: "DungGeunMo";
        padding: 4px;
    }
    
    .quiz__question {
        border-top: 6px ridge #cacaca;
        border-bottom: 6px ridge #cacaca;
        padding: 20px;
        font-family: "Cafe24Dangdanghae";
        line-height: 1.3;
    }
    
    .quiz__question .number {
        color: rgb(160, 86, 86);
    }
    
    .quiz__question .ask {
        display: inline;
    }
    
    .quiz__answer {
        border-top: 6px ridge #cacaca;
        padding: 10px;
        background-color: #f5f5f5;
    }
    
    .quiz__answer .confirm {
        border: 6px ridge #cacaca;
        width: 100%;
        font-size: 22px;
        background-color: #d6d6d6;
        font-family: "Cafe24Dangdanghae";
        cursor: pointer;
        padding: 13px 20px;
    }
    
    .quiz__answer .result {
        width: 100%;
        padding: 13px 20px;
        font-size: 22px;
        line-height: 1.3;
        box-sizing: border-box;
        text-align: center;
        font-family: "Cafe24Dangdanghae";
        border: 6px ridge #cacaca;
    }
    
    .quiz__answer .input {
        width: 100%;
        border: 6px ridge #cacaca;
        font-size: 22px;
        padding: 13px 20px;
        background-color: #fff;
        font-family: "Cafe24Dangdanghae";
        margin-bottom: 10px;
    }
    
    .quiz__view {
        background-color: #f5f5f5;
        font-family: "Cafe24Dangdanghae";
        position: relative;
        overflow: hidden;
    }
    
    .quiz__view .true {
        width: 120px;
        height: 120px;
        line-height: 120px;
        background-color: rgb(160, 86, 86);
        color: #fff;
        border-radius: 50%;
        text-align: center;
        position: absolute;
        left: 70%;
        top: 100px;
        opacity: 0;
    }
    
    .quiz__view .false {
        width: 120px;
        height: 120px;
        line-height: 120px;
        background-color: #fff;
        border-radius: 50%;
        text-align: center;
        position: absolute;
        right: 70%;
        top: 100px;
        opacity: 0;
    }
    
    .quiz__view.like .true {
        opacity: 1;
        animation: wobble 0.6s;
    }
    
    .quiz__view.dislike .false {
        opacity: 1;
        animation: wobble 0.6s;
    }

 // 문제 출력
    exam.push(`
         

             
             

         

     `)
     quizWrap.innerHTML = exam.join('');
 }
 updateQuiz();

 // 정답 확인
 const ansWerQuiz = () => {
     const quizSelects = document.querySelectorAll(".quiz__selects");    //객관식 보기


     // 사용자가 체크한 보기 == 문제 정답 
     quizInfo.forEach((question, number) => {
         const userSelector = `input[name=select${number}]:checked`;  // 사용자가 체크한 것
         const quizSelectsWrap = quizSelects[number];
         const userAnswer = (quizSelectsWrap.querySelector(userSelector) || {}).value;
         const quizView = document.querySelectorAll(".quiz__view");  // 강아지

         console.log(userAnswer)
         if (userAnswer == question.answerResult) {
             console.log("정답");
             quizScore++;
             quizView[number].classList.add("like");
         } else {
             console.log("오답");
             quizView[number].classList.add("dislike");
             const divBox = document.createElement("div");
             quizSelectsWrap.appendChild(divBox).innerHTML = `
${question.answerEx}
`;
         };
     });

     // 전체 문제수
     console.log(quizInfo.length)
     // 내가 맞힌 수
     console.log(quizScore)



     document.querySelector(".ex").innerHTML = `${quizInfo.length} 문제 중 ${quizScore}문제가 맞았습니다.`

     if (quizScore == 36) {
         console.log("합격입니다.")
     } else
         console.log("불합격입니다.")

 }

 // 정답 확인 클릭
 document.querySelector(".quiz__confirm .check").addEventListener("click", ansWerQuiz);