Bomb Kirby Running

JAVASCRIPT

자바스크립트 퀴즈 이펙트4

^. ̫ .^ 2023. 3. 18. 09:36

728x90

 

오늘은 위와 같은 선택지가 있는 퀴즈 이펙트를 만들어보도록 하겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>퀴즈 이펙트04</title>
    
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/quiz.css">

</head>
<body>
    <header id="header">
        <h1><a href="../javascript14.html">Quiz</a> <em>주관식 확인하기(여러문제) 유형</em></h1>
        <ul>
            <li><a href="quizEffect01.html">1</a></li>
            <li><a href="quizEffect02.html">2</a></li>
            <li><a href="quizEffect03.html">3</a></li>
            <li class="active"><a href="quizEffect04.html">4</a></li>
        </ul>
    </header>
    <!-- //header -->
    <main id="main">
        <div class="quiz__wrap">
            <div class="quiz">
                <div class="quiz__header">
                    <h2 class="quiz__title"></h2>
                </div>
                <div class="quiz__main">
                    <div class="quiz__question"></div>
                    <div class="quiz__view">
                        <div class="dog_wrap">
                            <div class="true">정답입니다!</div>
                            <div class="false">틀렸습니다!</div>
                            <div class="card-container">
                                <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>
                    </div>
                    <div class="quiz__choice">
                        <label for="choice1">
                            <input type="radio" id="choice1" name="choice" class="select" value="1">
                            <span>선, 색채, 공간, 수량</span>
                        </label>
                        <label for="choice2">
                            <input type="radio" id="choice2" name="choice" class="select" value="2">
                            <span>점, 선, 면 질감</span>
                        </label>
                        <label for="choice3">
                            <input type="radio"id="choice3" name="choice" class="select" value="3">
                            <span>시간, 수량, 구조 공간</span>
                        </label>
                        <label for="choice4">
                            <input type="radio"id="choice4" name="choice" class="select" value="4">
                            <span>면, 구조, 공간, 수량</span>
                        </label>
                    </div>
                    <div class="quiz__answer">
                        <button class="confirm">정답 확인하기</button>
                    </div>
                    <div class="quiz__desc">
                    </div>
                </div>

            </div>
        </div>
    </main>
    <!-- //main -->
    <footer id="footer">
        <a href="mailto:1346zany@gmail.com">1346zany@gmail.com</a>
    </footer>
    <!-- //footer -->

    <script>
        // 선택자
        const quizWrap = document.querySelector(".quiz__wrap");
        const quizTitle = quizWrap.querySelector(".quiz__title ");
        const quizQustion = quizWrap.querySelector(".quiz__question");
        const quizChoice = quizWrap.querySelectorAll(".quiz__choice span");
        const quizSelect = quizWrap.querySelectorAll(".quiz__choice input");
        const quizDesc = quizWrap.querySelector(".quiz__desc");
        const quizAnswer = quizWrap.querySelector(".quiz__answer");
        const quizCorfirm = quizWrap.querySelector(".quiz__answer .confirm");
        const dogWrap = quizWrap.querySelector(".dog_wrap");

        const quizInfo = [
            {
                infoType: "웹디자인 기능사",
                infoTime: "2016년 4회",
                infoNumber: "1",
                infoQuestion: "다음 중 디자인의 기본 요소들로 옳은 것은?",
                infoChoice: ["선, 색채, 공간, 수량","점, 선, 면 질감","시간, 수량, 구조 공간","면, 구조, 공간, 수량"],
                infoAnswer: "2", 
                infoDesc: "디자인의 기본 요소에는 점, 선, 면, 질감이 있습니다."
            }
        ]

        // 문제 출력
        function updateQuiz(){
            quizTitle.innerHTML = quizInfo[0].infoType + " " + quizInfo[0].infoTime;
            quizQustion.innerHTML = "<em>" + quizInfo[0].infoNumber + "</em>." + quizInfo[0].infoQuestion;
            quizDesc.innerHTML = quizInfo[0].infoDesc
       
            for(let i=0; i<4; i++){
            quizChoice[i].textContent = quizInfo[0].infoChoice[i];
            }

            //해설 숨기기
            quizDesc.style.display = "none";
        }

        // 정답 확인
        function answerQuiz(){
            //사용자가 선택한 인풋박스(checked) == 문제 정답(quizInfo[0].infoAnswer)
            for(let i=0; i<quizChoice.length; i++){
                if(quizSelect[i].checked == true){  //사용자가 보기를 체크한 상태
                    if(quizSelect[i].value == quizInfo[0].infoAnswer){
                        // alert("정답입니다.")
                        dogWrap.classList.add("like");
                    } else {
                        // alert("오답입니다.")
                        dogWrap.classList.add("dislike");
                    }
                }
            }

            //정답 해설
            quizDesc.style.display = "block";

            //정답 버튼 숨기기
            quizAnswer.style.display ="none";
        }

        //정답 클릭
        quizAnswer.addEventListener("click", answerQuiz);

        //문제 출력
        updateQuiz();     
    </script>
</body>
</html>

완성된 코드입니다.

 

.quiz__choice {
    padding: 20px;
    border-bottom: 6px ridge #cacaca;
    font-family: 'Suncheon';
}
.quiz__choice label {
    display: flex;
}
.quiz__choice label input {
    position:absolute;
    clip:rect(0 0 0 0);
    width:1px;
    height:1px;
    margin:-1px;
    overflow:hidden;
}
.quiz__choice label span {
    font-size: 20px;
    line-height: 1.4;
    padding: 6px;
    display: flex;
    cursor: pointer;
    margin: 2px 0;
}
.quiz__choice label span::before {
    content: '';
    width: 26px;
    height: 26px;
    border-radius: 50%;
    margin-right: 15px;
    background: #fff;
    box-shadow: inset 0 0 0 4px #57d1f0;
    transition: all 0.2s;
}
.quiz__choice label input:checked + span {
    background-color: #edf9fc;
}
.quiz__choice label input:checked + span::before { 
    box-shadow: inset 0 0 0 8px #57d1f0;
}

새로 적용한 css입니다.

 

설명

 

먼저 저번처럼 선택자로 각 요소들을 선택합니다.

그런 다음 quizInfo 안에 각 요소들을 넣습니다. 

 // 선택자
const quizWrap = document.querySelector(".quiz__wrap");
const quizTitle = quizWrap.querySelector(".quiz__title ");
const quizQustion = quizWrap.querySelector(".quiz__question");
const quizChoice = quizWrap.querySelectorAll(".quiz__choice span");
const quizSelect = quizWrap.querySelectorAll(".quiz__choice input");
const quizDesc = quizWrap.querySelector(".quiz__desc");
const quizAnswer = quizWrap.querySelector(".quiz__answer");
const quizCorfirm = quizWrap.querySelector(".quiz__answer .confirm");
const dogWrap = quizWrap.querySelector(".dog_wrap");

const quizInfo = [
    {
        infoType: "웹디자인 기능사",
        infoTime: "2016년 4회",
        infoNumber: "1",
        infoQuestion: "다음 중 디자인의 기본 요소들로 옳은 것은?",
        infoChoice: ["선, 색채, 공간, 수량","점, 선, 면 질감","시간, 수량, 구조 공간","면, 구조, 공간, 수량"],
        infoAnswer: "2", 
        infoDesc: "디자인의 기본 요소에는 점, 선, 면, 질감이 있습니다."
    }
]

 

 

 

 

 

코드가 간결해야 가독성이 좋기 때문에

퀴즈 타이틀 부분을 info type부분과 한번에 나올 수 있도록 함수를 설정하고 출력해줍니다.

quizInfo부분이 배열이므로 아래와 같이 써야합니다.

inner HTML은 innerText나 textContent와 같은 역할입니다.

그 다음 문제 번호와 문제를 출력하는데 문제 번호에 색이 들어가야하므로 em으로 감싸줍니다.

설명을 출력해줍니다.

그리고 선택지가 여러개 이므로 for문을 사용해서 선택지를 출력해줍니다.

// 문제 출력
function updateQuiz(){
    quizTitle.innerHTML = quizInfo[0].infoType + " " + quizInfo[0].infoTime;
    quizQustion.innerHTML = "<em>" + quizInfo[0].infoNumber + "</em>." + quizInfo[0].infoQuestion;
    quizDesc.innerHTML = quizInfo[0].infoDesc;

    for(let i=0; i<4; i++){
    quizChoice[i].textContent = quizInfo[0].infoChoice[i];
    }
    //해설 숨기기
    quizDesc.style.display = "none";
}
//문제 출력
updateQuiz();

 

 

 

 

 

퀴즈 정답을 함수를 써서 구하는데 for문, if문, 중첩if문을 사용합니다.

선택지 중에서 사용자가 인풋 박스를 선택했는지 알아보기 위해 i<quizChoice.length가 됩니다.

if문을 사용해서 사용자가 체크를 하면 true값이 되게 설정하고 중첩 if문으로 답이 정답일 경우, 오답일 경우를 설정합니다.

 

그리고 정답확인을 하면 정답 버튼을 숨겨주고 정답해설이 나오게 합니다.

 // 정답 확인
function answerQuiz(){
    //사용자가 선택한 인풋박스(checked) == 문제 정답(quizInfo[0].infoAnswer)
    for(let i=0; i<quizChoice.length; i++){
        if(quizSelect[i].checked == true){  //사용자가 보기를 체크한 상태
            if(quizSelect[i].value == quizInfo[0].infoAnswer){
                // alert("정답입니다.")
                dogWrap.classList.add("like");
            } else {
                // alert("오답입니다.")
                dogWrap.classList.add("dislike");
            }
        }
    }

    //정답 해설
    quizDesc.style.display = "block";

    //정답 버튼 숨기기
    quizAnswer.style.display ="none";
}

 

 

 

 

 

정답에 클릭효과를 주고 답이 출력되게 합니다.

 //정답 클릭
quizAnswer.addEventListener("click", answerQuiz);

'JAVASCRIPT'의 다른글

  • 현재글자바스크립트 퀴즈 이펙트4

관련글

댓글

티스토리툴바