Animated Turtle

Javascript

퀴즈 화면 만들기3

훙구 2023. 3. 14. 12:29

...

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>퀴즈 이펙트03</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 class="active"><a href="quizEffect03.html">3</a></li>
            <li><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">
                        <em></em>. <span></span>
                    </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__answer">
                        <input class="input" type="text" placeholder="정답을 적어주세요.">
                        <button class="confirm">정답 확인하기</button>
                        <div class="result"></div>
                    </div>
                    <div class="quiz__desc"></div>
                </div>
            </div>
            <div class="quiz">
                <div class="quiz__header">
                        <h2 class="quiz__title"></h2>
                </div>
                <div class="quiz__main">
                    <div class="quiz__question">
                        <em></em>. <span></span>
                    </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__answer">
                        <input class="input" type="text" placeholder="정답을 적어주세요.">
                        <button class="confirm">정답 확인하기</button>
                        <div class="result"></div>
                    </div>
                    <div class="quiz__desc"></div>
                </div>
            </div>
            <div class="quiz">
                <div class="quiz__header">
                        <h2 class="quiz__title"></h2>
                </div>
                <div class="quiz__main">
                    <div class="quiz__question">
                        <em></em>. <span></span>
                    </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__answer">
                        <input class="input" type="text" placeholder="정답을 적어주세요.">
                        <button class="confirm">정답 확인하기</button>
                        <div class="result"></div>
                    </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 -->

HTML 정리해보기

앞서 게시한 퀴즈 화면 만들기의 퀴즈부분을 두번 더 반복하여 총 세개를 만들어 주었습니다.

 

CSS 문서 작성

.quiz__wrap {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     align-items: flex-start;
}

추가된 CSS

세 개의 퀴즈 박스의 지문, 해설 등의 길이가 달라 서로 같은 크기로 맞춰지며 짧은 지문의 문제에 여백이 생겨버리는 탓에 "align-items : flex-start"의 속성을 부여해 주었습니다.

 

JACASCRIPT 문서 작성

// 선택자
const quizWrap = document.querySelector(".quiz__wrap");
const quizTitle = quizWrap.querySelectorAll(".quiz__title");                    // 시험 종목, 시간
const quizQuestionNum = quizWrap.querySelectorAll(".quiz__question em");        // 문제 번호
const quizQuestion = quizWrap.querySelectorAll(".quiz__question span");         // 문제 내용
const quizAnswerResult = quizWrap.querySelectorAll(".quiz__answer .result");    // 문제 정답
const quizDesc = quizWrap.querySelectorAll(".quiz__desc");                      // 문제 해설
const quizAnswerConfirm =quizWrap.querySelectorAll(".quiz__answer .confirm");   // 정답 버튼
const quizAnswerInput = quizWrap.querySelectorAll(".quiz__answer .input");      // 사용자 답
const dog__Wrap = quizWrap.querySelectorAll(".dog__wrap");

// 문제정보
const quizInfo = [
	{
        infoType : "정보처리 기능사",
        infoTime : "2011년 4회",
        infoNumber : "1",
        infoQuestion : "주파수분할 다중화 방식에서 각 채널간 간섭을 막기 위해서 일종의 완충지역 역할을 하는 것을 무엇이라 하는가 ?",
        infoAnswer : "가드밴드",
        infoDesc : "가드밴드(Guard Band)는 주파수분할 다중화 방식에서 각 채널간 간섭을 막기 위해서 일종의 완충지역 역할을 한다."
    },
    {
        infoType : "정보처리 기능사",
        infoTime : "2011년 4회",
        infoNumber : "2",
        infoQuestion : "사용자의 명령으로 시스템이 수행되고 그에 따른 결과를 나타내 주는 대화식 운영체제는 무엇인가?",
        infoAnswer : "UNIX",
        infoDesc : "UNIX란 사용자의 명령으로 시스템이 수행되고 그에 따른 결과를 나타내 주는 대화식 운영체제이다."
    },
    {
        infoType : "정보처리 기능사",
        infoTime : "2011년 4회",
        infoNumber : "3",
        infoQuestion : "프로세스들이 서로 다른 프로세스가 차지하고 있는 자원을 무한정 기다려 시스템이 멈춘 것 처럼 보이는 상태를 무엇이라고 하는가 ?",
        infoAnswer : "교착상태",
        infoDesc : "교착상태(Deadlock)는 2개 이상의 프로세스들이 서로 다른 프로세스가 차지하고 있는 자원을 무한정 기다려 시스템이 멈춘 것 처럼 보이는 상태이다."
    }
];
// 문제 출력 // element, index, array 순서 지켜써야함.
quizInfo.forEach(function(e, i){    
	quizTitle[i].innerHTML = quizInfo[i].infoType + " " + quizInfo[i].infoTime;
	quizQuestionNum[i].textContent = quizInfo[i].infoNumber;
	quizQuestion[i].textContent = quizInfo[i].infoQuestion;
	quizAnswerResult[i].textContent = quizInfo[i].infoAnswer;
	quizDesc[i].textContent = quizInfo[i].infoDesc;
});
// 정답, 해설 숨기기
quizInfo.forEach(function(e, i){
    quizAnswerResult[i].style.display = "none";
    quizDesc[i].style.display = "none";
});
// 정답 확인
quizAnswerConfirm.forEach(function(btn, num){
    btn.addEventListener("click", function(){
    	// 사용자 정답
        const userAnswer = quizAnswerInput[num].value.trim().toUpperCase();
        quizAnswerConfirm[num].style.display = "none";
        quizAnswerInput[num].style.display = "none";
        quizAnswerResult[num].style.display = "block";
        quizDesc[num].style.display = "block";
        // 사용자 답과 정답 비교
        if(userAnswer == quizInfo[num].infoAnswer){
            quizAnswerResult[num].style.color = "green";
            dog__Wrap[num].classList.add("like");
        } else {
            quizAnswerResult[num].style.color = "red";
            dog__Wrap[num].classList.add("dislike");
        }
    });
});

 

JAVASCRIPT 정리해보기

2번 페이지와 같이 사용자가 적은 답의 값을 받아와 정답과 비교하는 내용이지만,

문제가 여러개임에 따라 배열에 정보를 저장해 forEach문으로 출력해보았습니다.

새로운 내용으로는

  • queryselectAll() : JavaScript의 DOM API 중 하나로, 문서 내에서 특정 CSS 선택자에 해당하는 모든 요소를 반환합니다.  이 전의 2번페이지 만들기에서 사용했던 queryselect의 다수 선택법이라고 보시면 됩니다.
  • forEach : 데이터를 배열에 저장해주어 각각의 요소에 출력할 수 있는 방법입니다. forEach로 출력할 수 있는 내용으로는 e(element : 요소), i(index : 순서), a(array : 배열)의 값이 있습니다. 따라서 사용하고자 하는 값이 index의 값일 경우 element 이후인 두 번째로 와야합니다. (예시 > 배열이름.forEach(e, i))

 

 

 

 

이상으로 세 번째 여러개의 퀴즈를 출력하는 페이지를 만들어 보았습니다 !

 

728x90
반응형

'Javascript'의 다른글

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

관련글

댓글

티스토리툴바