퀴즈 이펙트05

소스 보기

  //정답 확인
    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");          //강아지

            if(userAnswer == question.answerResult){
                console.log("정답")
                quizView[number].classList.add("like");
                quizScore++
            }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){
            alert("합격입니다.")
        }else
            alert("불합격입니다.")
    }
    
    //정답 확인 클릭
    document.querySelector(".quiz_confirm .check").addEventListener("click" , answerQuiz)

<div class="quiz_wrap">
</div>

.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;
        /*span이라 inline이어서*/
        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: "TwayAir";
        line-height: 1.3;
    }

    .quiz_question .number {
        color: #b771f8;
    }

    .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;
        padding: 13px 20px;
        background-color: #d6d6d6;
        font-family: "TwayAir";
        cursor: pointer;
    }

    .quiz_answer .result {
        width: 100%;
        font-size: 22px;
        padding: 13px 20px;
        border: 6px ridge #cacaca;
        box-sizing: border-box;
        text-align: center;
        font-family: "TwayAir";
        line-height: 1.3;
    }
    .quiz_answer .input {
        width: 100%;
        border: 6px ridge #cacaca;
        font-size: 22px;
        padding: 13px 20px;
        background-color: #fff;
        font-family: "TwayAir";
        margin-bottom: 10px;
    }
    .quiz_view {
        background-color: #f5f5f5;
        font-family: "TwayAir";
        position: relative;
        overflow: hidden;
    }
    .quiz_view .true {
        width: 120px;
        height: 120px;
        line-height: 120px;
        background-color: #8beeff;
        color: rgb(60, 68, 136);
        border-radius: 50%;
        text-align: center;
        position: absolute;
        left: 70%;
        top: 100px;
        opacity: 0;
    }
    .quiz_view .false {
        width: 120px;
        height: 120px;
        background-color: rgb(255, 205, 68);
        color: rgb(82, 39, 22);
        line-height: 120px;
        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; /*wobble 좌우로 흔드는 애니메이션*/
    }

    .quiz_selects {
        margin: 5px 0;
    }

    .quiz_selects label {
        display: flex;
    }
    .quiz_selects label input {
        position: absolute;
        left: -9999px;
    }
    .quiz_selects label span {
        font-size: 20px;
        line-height: 1.3 ;
        font-family: "TwayAir";
        padding: 10px;
        display: flex;
        align-items: center;
        width: 100%;
        border-radius: 5px;
        cursor: pointer;
    }

    .quiz_selects label span::before {
        content: '';
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #fff;
        display: flex;
        margin-right: 15px;
        flex-shrink: 0;
        box-shadow: inset 0px 0px 0px 4px #b781e9;
        transition: all 0.25s;
    }

    .quiz_selects label input:checked + span {
        background-color: rgb(228, 224, 235);
    }

    .quiz_selects label input:checked + span::before {
        box-shadow: inset 0px 0px 0px 10px #b781e9;
    }

    .quiz_confirm {
        width: 100%;
        text-align: center;
    }
    .quiz_confirm .check {
        font-size: 22px;
        line-height: 1.3;
        padding: 13px 60px;
        border: 6px ridge #cacaca;
        box-sizing: border-box;
        text-align: center; 
        font-family: "TwayAir";
        cursor: pointer;
        margin: 40px 0;
        transition: background 0.3s;
    }

    .quiz_confirm .check:hover {
        background: #b080fd;
    }

    .quiz_confirm .ex {
        font-family: "DungGeunMo";
        font-size: 28px;
        font-weight: 500;

    }