Animated Turtle

Javascript

퀴즈 화면 만들기4

훙구 2023. 3. 18. 14:28

...

728x90
반응형

객관식 문제 출력하기

 

 

HTML 문서작성

<!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/quiz.css">
    <link rel="stylesheet" href="css/reset.css">
    <link href="https://unpkg.com/pattern.css" rel="stylesheet">

</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>
        </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:gnsrbdi@naver.com">gnsrdbi@naver.com</a>
    </footer>
    <!-- //footer -->
</body>
</html>

HTML 정리해보기

  • 앞서 게시한 주관식 확인하기 유형의 퀴즈 페이지와 유사하지만, 이번에는 객관식을 확인하는 유형이므로 주관식에서 사용했던 정답을 적는 input박스의 타입을 text에서 radio로 바꾸어주었습니다.
  • 총 4개의 보기를 만들기 위해 각각 다른 id, value값을 주고 네 개의 input 버튼을 만들었습니다.

 

새로 추가된 CSS 

.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%;
     background-color: #fff;
     box-shadow: inset 0 0 0 4px #8d8d8d;
     margin-right: 15px;
     transition: all 0.2s;
     flex-shrink: 0;
}

.quiz__choice label input:checked + span {
     border: 1px solid #ececec;
}
.quiz__choice label input:checked + span::before {
     box-shadow: inset 0 0 0 8px #678e69;
}

CSS 정리해보기

  • radio type의 input의 기본 버튼을 숨기기 위해 input에 보이지 않게할 수 있는 속성을 부여했습니다.
  • 누르는 느낌을 주기 위해 cursor에 pointer 속성을 주었습니다.
  • 기본 버튼을 숨겼기 때문에 새로운 버튼을 만들어주기 위해 가상요소를 만들어 속성을 부여해 이미지를 만들었습니다.
  • input이 선택되었을때 인접한 span에 효과를 주어 클릭하는 느낌을 주었습니다.

 

JAVASCRIPT 작성

선택자 지정하기

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 dog__Wrap = 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<quizChoice.length; 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){  //사용자가 보기를 체크했는지 확인 (true)
            if(quizSelect[i].value == quizInfo[0].infoAnswer){
                // 정답
                dog__Wrap.classList.add("like");
            } else {
                // 오답
                dog__Wrap.classList.add("dislike");
            }
        }
    }
// 해설 보이기
quizDesc.style.display = "block";
// 정답버튼 숨기기
quizAnswer.style.display = "none";
};

quizConfirm.addEventListener("click", answerQuiz);

updateQuiz();   // 문제 출력

Javascript 정리해보기

  • 위에서 저장한 문제에 대한 정보들을 innerHTML로 출력할 수 있는 updateQuiz()라는 함수를 만들어 주었습니다.
  • 보기의 갯수에 따라 반복하는 for문을 넣어 각각의 보기에도 출력해 주었습니다.
  • answerQuiz()라는 함수를 만들어 quizSelect가 체크 되었다면 정답과 비교할 수 있는 중첩 if문을 적어주고 정답과 맞다면 dog__Wrap에 'like'라는 class를 추가하고, 다르다면 'dislike'를 추가하도록 하였습니다.
  • 마지막으로 해설은 보이도록 속성을 부여하고 정답버튼을 보이지 않도록 속성을 부여했습니다.
  • quizConfirm(정답버튼)에 addEventListner('click', answerQuiz)를 통해 클릭 시 answerQuiz를 실행하도록 만들었습니다.

 

 

 

이상으로 객관식 문제를 확인하는 유형의 퀴즈페이지를 만들어 보았습니다 !

728x90
반응형

'Javascript'의 다른글

  • 현재글퀴즈 화면 만들기4

관련글

댓글

티스토리툴바