퀴즈 이펙트(네 번째)를 만들어봅시다!

오늘은 퀴즈 이펙트 네 번째를 작업해보겠습니다!
저번에는 여러 개의 주관식 확인하기 유형이였다면 이번엔 객관식 확인하기 유형입니다.

자바스크립트 퀴즈 이펙트(네 번째) 만들기

영역 지정해주기

<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" value="1">
                        <span></span>
                    </label>
                    <label for="choice2">
                        <input type="radio" id="choice2" name="choice" value="2">
                        <span></span>
                    </label>
                    <label for="choice3">
                        <input type="radio" id="choice3" name="choice" value="3">
                        <span></span>
                    </label>
                    <label for="choice4">
                        <input type="radio" id="choice4" name="choice" 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 -->

세 번째 유형과는 다르게 이번엔 보기가 존재하므로 quiz__choice라는 영역을 만들어줍니다. 그리고 보기를 4개를 설정해줍니다! name과 value값도 같이~~

 

선택자 만들기

const quizWrap = document.querySelector(".quiz__wrap");
const quizTitle = quizWrap.querySelector(".quiz__title");
const quizQuestion= 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 quizConfirm = quizWrap.querySelector(".quiz__answer .confirm");
const dogWrap = quizWrap.querySelector(".dog__wrap");

저번과 같은 querySelectorAll을 사용해 다중선택자를 만들어줍니다! 이번엔 보기인 quiz__choice중 span과 input에 querySelectorAll을 통해 선택자를 지정해줍니다.

 

문제 정보 입력하기

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

quizInfo라는 변수에 배열을 만들어주고 객체를 활용해 각 문제의 번호와 질문, 답, 해설등을 입력해줍니다.

 

보기인 quiz__choice의 infoChoice를 quizInfo에 넣어줍니다. 그러나 보기가 4개 있으므로 배열을 만들어줘야겠죠? 

 

문제 출력하기

function updateQuiz(){
    quizTitle.innerHTML = quizInfo[0].infoType +" "+ quizInfo[0].infoTime;
    quizQuestion.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";
}

함수를 만들어 그 안에 문제를 출력해줍니다! 

innerHTML를 통해 문제를 출력해주는데, 보기인 quizChoice가 4개가 있으니  for문을 통해 반복해줍니다. 

그리고 해설을 숨겨여하니 style.display = "none"을 사용합니다.

 

innerHTML?

JavaScript의 innerHTML은 HTML 요소의 내부 HTML 콘텐츠를 나타내는 속성입니다. innerHTML 속성을 사용하면 JavaScript 코드로 HTML 요소의 내부 콘텐츠를 변경하거나 추가할 수 있습니다.

 

정답 확인

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.remove("dislike");
                dogWrap.classList.add("like");
                quizAnswer.style.display = "none";
            } else {
                // alert("오답입니다.")
                dogWrap.classList.remove("like");
                dogWrap.classList.add("dislike");
            }
        }
    }
    //해설 보이기
    quizDesc.style.display = "block";
    //정답 숨기기
    // quizAnswer.style.display = "none";
}
// 정답 클릭
quizConfirm.addEventListener("click", answerQuiz);
//문제 출력
updateQuiz();

사용자가 보기를 체크하면 정답인지 오답인지 판단해주기 위해  함수 안에 for문과 if문을 사용해줍니다. 

if문 안에 사용자가 보기를 체크한 상태에서 정답이면 멍멍이가 웃고, 오답이면 멍멍이가 우는 걸 설정해줄게요 ㅎㅎ

 

완성된 페이지와 코드

 

 

<!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>
            <li><a href="quizEffect05.html">5</a></li>
            <li><a href="webdtest.html">5-1</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" value="1">
                            <span></span>
                        </label>
                        <label for="choice2">
                            <input type="radio" id="choice2" name="choice" value="2">
                            <span></span>
                        </label>
                        <label for="choice3">
                            <input type="radio" id="choice3" name="choice" value="3">
                            <span></span>
                        </label>
                        <label for="choice4">
                            <input type="radio" id="choice4" name="choice" 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:yds43557340@gmail.com">yds43557340@gmail.com</a>
    </footer>
    <!-- //footer -->

    <script>
        // 선택자
        const quizWrap = document.querySelector(".quiz__wrap");
        const quizTitle = quizWrap.querySelector(".quiz__title");
        const quizQuestion= 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 quizConfirm = 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;
            quizQuestion.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.remove("dislike");
                        dogWrap.classList.add("like");
                        quizAnswer.style.display = "none";
                    } else {
                        // alert("오답입니다.")
                        dogWrap.classList.remove("like");
                        dogWrap.classList.add("dislike");
                    }
                }
            }
            //해설 보이기
            quizDesc.style.display = "block";
            //정답 숨기기
            // quizAnswer.style.display = "none";
        }
        // 정답 클릭
        quizConfirm.addEventListener("click", answerQuiz);
        //문제 출력
        updateQuiz();
    </script>
</body>
</html>

퀴즈 이펙트의 다른 유형 보러가기

퀴즈 이펙트 1: https://duektmf34.tistory.com/33

퀴즈 이펙트 2: https://duektmf34.tistory.com/34

퀴즈 이펙트 3: https://duektmf34.tistory.com/41

퀴즈 이펙트 5: https://duektmf34.tistory.com/57