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

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

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

영역 지정해주기

<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

728x90

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

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

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

영역 지정해주기

선택자 만들기

문제 정보 입력하기

문제 출력하기

정답 확인

완성된 페이지와 코드

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

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

영역 지정해주기

선택자 만들기

문제 정보 입력하기

문제 출력하기

정답 확인

완성된 페이지와 코드

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

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

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

영역 지정해주기

선택자 만들기

문제 정보 입력하기

문제 출력하기

정답 확인

완성된 페이지와 코드

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

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

영역 지정해주기

선택자 만들기

문제 정보 입력하기

문제 출력하기

정답 확인

완성된 페이지와 코드

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

개인정보

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역