퀴즈 이펙트 만들기

http://wwuu12366.dothome.co.kr/php/quiz/quiz.php

PHP 사이트

HTML

<main id="contents">
    <h2 class="ir_so">컨텐츠 영역</h2>
        <section id="blog-type" class="section center mb100 type gray">
            <div class="container">
                <h3 class="section__title">코딩 퀴즈</h3>
                <p class="section__desc">
                    코딩 공부를 퀴즈를 재밌게 해봅시다!                   
                </p>
                <div class="quiz__inner">
                    <div class="quiz__header">                       
                        <div class="quiz__subject">
                            <label for="quizSubject">과목 선택</label>
                            <select name="quizSubject" id="quizSubject">
                                <option value="javascript">javascript</option>
                                <option value="jquery">jquery</option>
                                <option value="html">html</option>
                                <option value="css">css</option>
                            </select>
                        </div>
                    </div>
                    <div class="quiz__body">
                        <div class="title">
                            <span class="quiz__num"></span>.
                            <span class="quiz__ask"></span>
                            <div class="quiz__desc"></div>
                        </div>
                        <div class="contents">
                        <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>
                        </div>
                    </div>
                    <div class="quiz__footer">
                        <div class="quiz__btn">
                            <button class="comment green none">해설 보기</button>
                            <button class="next orange right ml10 none">다음 문제</button>
                            <button class="confirm green right">정답 확인</button>
                        </div>                        
                    </div>
                </div>
            </div>

            <!-- layer -->
            <div class="layer_bg"></div>
            <div class="layer">
                <h2>해설보기</h2>
                <p id="quizComment"></p>
                <a href="#javascript;;" class="close">닫기</a>
            </div>
            <!-- layer -->
        </section>
        
      
    </main>
    <!--//main-->

 

CSS

/* quiz */
.quiz__inner {
    text-align: left;
}
.quiz__body .title {
    background: #fff;
    padding: 40px;
    border-radius: 10px;
    font-size: 40px;
}
.quiz__num {
    font-size: 40px;
}
.quiz__ask {
    font-size: 24px;
}
.quiz__desc {
    /* font-size: 20px;
    border: 1px solid rgb(221, 221, 221);
    border-radius: 10px;
    margin: 20px 0 0;
    padding: 20px; */
}
.quiz__subject {
    background: #fff;
    display: inline-block;
    padding: 10px 30px;
    margin-bottom: 20px;
    border-radius: 10px;
}
.quiz__subject select {
    border: 1px solid #eee;
    padding: 5px 20px;
    margin-left: 10px;
    border-radius: 30px;
}
.quiz__body .contents {
    margin-top: 20px;
}
.quiz__selects label {
    background: #fff;
    border-radius: 10px;
    display: block;
    margin: 5px 0;
}
.quiz__selects label {
    background: #fff;
    border-radius: 10px;
    display: block;
    margin: 6px 0;
    position: relative;
}
.quiz__selects label input {
    position: absolute;
    left: -9999px;
}
.quiz__selects label span {
    width: 100%;
    font-size: 20px;
    line-height: 1.3;
    margin: 3px 0;
    border-radius: 5px;
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 20px 80px 20px 20px;
    box-sizing: border-box;
    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 #009CF6;
    transition: all 0.25s;
}
.quiz__selects label input:checked + span {
    background-color: #d7edfa;
}
.quiz__selects label input:checked + span::before {
    box-shadow: inset 0 0 0 10px #009CF6;
}
.quiz__selects .correct + span {
    position: relative;
}
.quiz__selects .correct + span::after {
    content: '';
    width: 50px; height: 50px;
    position: absolute;
    right: 10px; top: 50%;
    margin-top: -24px;
    background-image: url(../img/correct.svg);
    background-repeat: no-repeat;
    background-size: cover;
}
.quiz__selects .incorrect + span::after {
    content: '';
    width: 48px; height: 48px;
    position: absolute;
    right: 10px; top: 50%;
    margin-top: -24px;
    background-image: url(../img/incorrect.svg);
    background-repeat: no-repeat;
    background-size: cover;
}
.quiz__selects label input.incorrect + span {
    background-color: #fad7d9;
}
.quiz__selects label input.incorrect + span::before {
    box-shadow: inset 0 0 0 10px #fd888e;
}

.quiz__selects label input.correct + span {
    background-color: #d7edfa;
}

.quiz__btn {
    margin-top: 20px; 
    overflow: hidden;
}
.quiz__btn button {
    background: #000;
    padding: 15px 40px;
    border-radius: 30px;
    font-size: 18px;
    cursor: pointer;
    color: #fff;
}
.quiz__btn button.green {
    background-image: linear-gradient(102deg, #00ce8b 0%, #2abdb1 100%);
}
.quiz__btn button.orange {
    background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
}
.quiz__btn button.right {
    float: right;
}
.quiz__btn .none {
    display: none;
}
.quiz__create label {
    display: block;
    margin-bottom: 5px;
}
.quiz__create select {
    padding: 10px 30px;
    border: 1px solid #eee;
    margin-bottom: 20px;
}
.quiz__create textarea {
    width: 100%;
    background: #fff;
    border: 0;
    margin-bottom: 20px;
    resize: none;
    min-height: 200px;
    border-radius: 5px;
    line-height: 1.6;
    padding: 20px;
}
.quiz__create input {
    width: 100%;
    line-height: 1;
    margin: 5px 0;
    border-radius: 5px;
    background: #fff;
    border: 0;
    padding: 20px;
    margin-bottom: 20px;
}

SCRIPT

 //레이어 팝업
        $(".comment").click(function(){
            $(".layer").show();
            $(".layer_bg").show();
        });
        $(".layer .close").click(function(){
            $(".layer").slideUp(300);
            $(".layer_bg").hide();
        });


        let quizAnswer = "";

        function quizView(view){
            $(".quiz__num").text(view.quizID);
            $(".quiz__ask").text(view.quizAsk);
            $("#select1 + span").text(view.quizChoice1);
            $("#select2 + span").text(view.quizChoice2);
            $("#select3 + span").text(view.quizChoice3);
            $("#select4 + span").text(view.quizChoice4);
            $("#quizComment").text(view.quizComment);
            quizAnswer = view.quizAnswer;                                       
        }
        //다음 문제 넘어가기
        function quizNext(){

        }

        //정답 체크 : 했는지 안했는지
        function quizCheck(){
            let selectCheck = $(".quiz__selects input:checked").val();
            
            //정답을 체크 안했으면
            if(selectCheck == null || selectCheck == ''){
                alert("정답을 체크해주세요!!!");
                
            } else {
                $(".quiz__btn .next").fadeIn();
                $(".quiz__btn .comment").fadeIn();
                    
                //정답을 체크 했으면
                if(selectCheck == quizAnswer){
                    //정답
                    $(".quiz__selects #select"+quizAnswer).addClass("correct");
                    $(".quiz__selects input").attr("disabled", true);                    
                } else {
                    //오답
                    $(".quiz__selects #select"+selectCheck).addClass("incorrect");
                    $(".quiz__selects #select"+quizAnswer).addClass("correct"); 
                    $(".quiz__selects input").attr("disabled", true);                     
                }
            }
            
        }

        //문제 데이터 가져오기
        function quizData(){
            let quizSubject = $("#quizSubject").val();
          
            $.ajax({
                url: "quizInfo.php",
                method: "POST",
                data: {"quizSubject": quizSubject},
                dataType: "json",
                success : function(data){
                    console.log(data.quiz);
                    quizView(data.quiz);
                    
                },
                error: function(request, status, error){
                    console.log('request' + request);
                    console.log('status' + status);
                    console.log('error' + error);
                }
            })
        }
        quizData();
        //과목 선택하면 체인지
        $("#quizSubject").change(function(){
            quizData();
            $(".quiz__selects input").attr("disabled", false);
            $(".quiz__selects input").prop("checked", false);   //checked 해제
            $(".quiz__selects input").removeClass("correct");
            $(".quiz__selects input").removeClass("incorrect");
            $(".quiz__btn .next").fadeOut();
            $(".quiz__btn .comment").fadeOut();
        });

        //정답 확인
        $(".quiz__btn .confirm").click(function(){
            //정답을 클릭 했는지 안했는지 판단하기
            quizCheck();
            //누르면 나타나게 하기           
            
            
            
            // $(".quiz__btn .next").show() / hide/ toggle;
            // $(".quiz__btn .next").fadeIn / Out/ toggle();
            // $(".quiz__btn .next").slideDown / Up/ Toggle();           
        });

        //다음 문제 버튼을 클릭했을 때
        $(".quiz__btn .next").click(function(){
            quizData();
            $(".quiz__selects input").attr("disabled", false);
            $(".quiz__selects input").prop("checked", false);   //checked 해제
            $(".quiz__selects input").removeClass("correct");
            $(".quiz__selects input").removeClass("incorrect");
            $(".quiz__btn .next").fadeOut();
            $(".quiz__btn .comment").fadeOut();
        });