Bomb Kirby Running

JAVASCRIPT

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

^. ̫ .^ 2023. 3. 9. 18:43

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>퀴즈 이펙트02</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 class="active"><a href="quizEffect02.html">2</a></li>
        </ul>
    </header>
    <!-- //header -->
    <main id="main">
        <div class="quiz__wrap">
            <div class="quiz">
                <div class="quiz__header">
                    <h2 class="quiz__title"><span></span><em></em></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="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>
                <div class="quiz__footer">
                    <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 span");
        const quizTime = quizWrap.querySelector(".quiz__title em");
        const quizQustion = quizWrap.querySelector(".quiz__question span");
        const quizQuestionNum = quizWrap.querySelector(".quiz__question em");
        const quizDesc = quizWrap.querySelector(".quiz__desc");
        const quizAnswerCorfirm = quizWrap.querySelector(".quiz__answer .confirm");
        const quizAnswerResult = quizWrap.querySelector(".quiz__answer .result");
        const quizAnswerInput = quizWrap.querySelector(".quiz__answer .input");
        const dogWrap = quizWrap.querySelector(".dog_wrap");
        const quizFooter = quizWrap.querySelector(".quiz__footer");

       // 문제 정보
        const infoType = "정보처리 기능사";
        const infoTime = "2011년 5회";
        const infoNumber = "2";
        const infoQuestion = "프레젠테이션에서 화면 전체를 전환하는 단위를 의미하는것은?"
        const infoAnswer = "슬라이드";
        const infoDesc =  "슬라이드는 프리젠테이션의 화면 전체를 말하고 개체는 화면을 구성하는 개개의 요소를 말한다."
        
        //문제 출력
        quizTitle.textContent = infoType;
        quizTime.textContent = infoTime;
        quizQuestionNum.textContent = infoNumber;
        quizQustion.textContent = infoQuestion;
        quizDesc.textContent = infoDesc;
        quizAnswerResult.textContent = infoAnswer;

        //정답 & 해설 숨기기
        quizAnswerResult.style.display = "none";
        quizFooter.style.display = "none";

        //사용자 정답
        quizAnswerCorfirm.addEventListener("click",function(){
            const userAnswer = quizAnswerInput.value.trim();
                quizAnswerInput.style.display = "none";     //인풋박스숨김
                quizAnswerCorfirm.style.display = "none";    //정답 확인 버튼 숨김
                quizAnswerResult.style.display = "block";   //정답보이기    
                quizFooter.style.display = "block"             //해설보이기

            if(infoAnswer == userAnswer){
                // alert("정답입니다.")
                //정답버튼 제거
                dogWrap.classList.add("like");
                dogWrap.classList.remove("dislike");
                
            } else {
                alert("오답입니다.")
                dogWrap.classList.add("dislike");
                
            }
        });
       


    </script>
</body>
</html>

완성된 코드입니다.

 

설명

// 선택자
const quizWrap = document.querySelector(".quiz__wrap");
        const quizTitle = quizWrap.querySelector(".quiz__title span");
        const quizTime = quizWrap.querySelector(".quiz__title em");
        const quizQustion = quizWrap.querySelector(".quiz__question span");
        const quizQuestionNum = quizWrap.querySelector(".quiz__question em");
        const quizDesc = quizWrap.querySelector(".quiz__desc");
        const quizAnswerCorfirm = quizWrap.querySelector(".quiz__answer .confirm");
        const quizAnswerResult = quizWrap.querySelector(".quiz__answer .result");
        const quizAnswerInput = quizWrap.querySelector(".quiz__answer .input");
        const dogWrap = quizWrap.querySelector(".dog_wrap");
        const quizFooter = quizWrap.querySelector(".quiz__footer");

 

  • querySelector : 메소드를 사용하여, HTML 요소들을 선택합니다.
  • quizWrap : 문제 전체를 감싸는 요소를 선택합니다.
  • quizTitle / quizTime /  quizQustion / quizQuestionNum :
  • 문제 제목, 출제 시간, 문제 내용, 문제 번호를 각각 나타내는 요소를 선택합니다.
  • quizAnswerCorfirm: 정답 확인 버튼을 선택합니다.
  • quizAnswerResult: 정답 결과를 나타내는 요소를 선택합니다.
  • dogWrap: 강아지를 나타내는 요소를 선택합니다.
  • quizFooter: Tip을 나타내는 요소를 선택합니다.

 

 // 문제 정보
        const infoType = "정보처리 기능사";
        const infoTime = "2011년 5회";
        const infoNumber = "2";
        const infoQuestion = "프레젠테이션에서 화면 전체를 전환하는 단위를 의미하는것은?"
        const infoAnswer = "슬라이드";
        const infoDesc =  "슬라이드는 프리젠테이션의 화면 전체를 말하고 개체는 화면을 구성하는 개개의 요소를 말한다."
        
//문제 출력
        quizTitle.textContent = infoType;
        quizTime.textContent = infoTime;
        quizQuestionNum.textContent = infoNumber;
        quizQustion.textContent = infoQuestion;
        quizDesc.textContent = infoDesc;
        quizAnswerResult.textContent = infoAnswer;

전에 했던 것과 같이 문제 정보를 변수에 담고 해당 변수들로 HTML문서 내용들의 요소를 변경합니다.

textContent로 HTML요소들의 텍스트를 수정합니다

 

 

//정답 & 해설 숨기기
    quizAnswerResult.style.display = "none";
    quizFooter.style.display = "none";

display 속성을 이용해서 none으로 설정하면 정답화면이 메인화면에서 숨겨집니다.

 

 

 //사용자 정답
        quizAnswerCorfirm.addEventListener("click",function(){
            const userAnswer = quizAnswerInput.value.trim();
                quizAnswerInput.style.display = "none";     //인풋박스숨김
                quizAnswerCorfirm.style.display = "none";    //정답 확인 버튼 숨김
                quizAnswerResult.style.display = "block";   //정답보이기    
                quizFooter.style.display = "block"             //해설보이기

            if(infoAnswer == userAnswer){
                // alert("정답입니다.")
                //정답버튼 제거
                dogWrap.classList.add("like");
                dogWrap.classList.remove("dislike");
            } else {
                alert("오답입니다.")
                dogWrap.classList.add("dislike");
            }
        });

addEventListener 메소드를 사용하여, 클릭 이벤트를 처리합니다

사용자가 값을 입력할 수 있도록 value를 설정해서 입력한 값을 저장합니다.

입력한 값에 공백이 있으면 오답 처리가 되므로 trim() 함수를 사용합니다.

trim()함수는 문자열에서 양쪽 공백(space, tab, enter 등)을 제거하는 함수입니다.

정답 확인 버튼을 클릭하면, 정답 결과를 나타내는 요소가 화면에 나타나도록 합니다.

해설부분도 같이 보이게 해 줍니다.

정답을 입력하면 강아지가 웃는 표정을 지을 수 있게 설정합니다.

오답을 입력하면 강아지가 울상 짓는 표정을 지을 수 있게 설정합니다.

 

 

 

모르는 속성 정리

 

속성 설명
textContent inner Text처럼 HTML 요소의 텍스트 내용을 설정하거나 반환하는 속성입니다.
trim 문자열에서 양쪽 공백(space, tab, enter 등)을 제거하는 함수입니다.
value 사용자가 입력한 값을 저장합니다.

 

 

 

 

'JAVASCRIPT'의 다른글

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

관련글

댓글

티스토리툴바