WEB/JAVASCRIPT

[javascript] 퀴즈 이펙트 : 문제 풀고 정답/오답 이벤트

aimee418 2023. 3. 9. 18:33

“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”

- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형

[javascript] 퀴즈 이펙트 : 문제 풀고 정답/오답에 따라 다른 화면이 나오는 효과  

 

퀴즈의 답을 적어 제출했을 때, 정답이면 강아지가 웃고, 오답이면 강아지가 우는 화면을 보여줍니다. 

메인화면

 

정답화면

 

 

오답화면

 

스터디 목적은 자바스크립트에서

  1. 컨트롤 하고 싶은 선택자 전달하기(데이터 저장),
  2. 문제의 정보 작성하기(데이터 저장),
  3. 전달한 선택자에 맞는 정보 전달하기(데이터 불러오기),
  4. 만들어 놓은 정답과 해설 숨기기(데이터 제어하기)
  5. 사용자가 정답을 입력하고 버튼을 클릭하면 몇가지 이벤트 발생(데이터 제어하기)

 

<!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:aimee00418@gmail.com">aimee00418@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 quizQuestionNum = quizWrap.querySelector(".quiz__question em");
        const quizQuestion = quizWrap.querySelector(".quiz__question span");
        const quizDesc = quizWrap.querySelector(".quiz__desc");
        const quizAnswerConfirm = 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;
        quizQuestion.textContent = infoQuestion;
        quizDesc.textContent = infoDesc;
        quizAnswerResult.textContent = infoAnswer;

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

        //사용자정답
        quizAnswerConfirm.addEventListener("click",function(){
            const userAnswer = quizAnswerInput.value.trim();//trim 내장객체 : 빈칸 등을 다 배제하고 인식하도록 하는
           // console.log(userAnswer)//사용자가 쓴 값을 변수에 저장시켜준다 (지역변수)
            quizAnswerInput.style.display = "none";    // 답쓰는 자리 숨기기
            quizAnswerConfirm.style.display = "none";  // 정답확인하기 버튼 지우기
            quizAnswerResult.style.display = "block";  // 답 보이기
            quizFooter.style.display = "block";        // 해설 보이기 
           if(infoAnswer == userAnswer){
            dogWrap.classList.add("like");
           } else {
            dogWrap.classList.add("dislike");
           }
        })
        


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

 

 

1. 컨트롤 하고 싶은 선택자 전달하기(데이터 저장)

 

        const quizWrap = document.querySelector(".quiz__wrap")
        const quizTitle = quizWrap.querySelector(".quiz__title span");
        const quizTime = quizWrap.querySelector(".quiz__title em");
        const quizQuestionNum = quizWrap.querySelector(".quiz__question em");
        const quizQuestion = quizWrap.querySelector(".quiz__question span");
        const quizDesc = quizWrap.querySelector(".quiz__desc");
        const quizAnswerConfirm = 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")

 

 

 

2. 문제의 정보 작성하기(데이터 저장)

        const infoType = "정보처리 기능사";
        const infoTime = "2011년 5회";
        const infoNumber = "2";
        const infoQuestion = "프레젠테이션에서 화면 전체를 전환하는 단위를 의미하는 것은?";
        const infoAnswer = "슬라이드";
        const infoDesc = "슬라이드 : 프리젠테이션의 화면 전체";

 

 

3. 전달한 선택자에 맞는 정보 전달하기(데이터 불러오기)

        quizTitle.textContent = infoType;
        quizTime.textContent = infoTime;
        quizQuestionNum.textContent = infoNumber;
        quizQuestion.textContent = infoQuestion;
        quizDesc.textContent = infoDesc;
        quizAnswerResult.textContent = infoAnswer;

 

 

4. 만들어 놓은 정답과 해설 숨기기(데이터 제어하기)

        quizAnswerResult.style.display = "none";
        quizFooter.style.display = 'none';

 

 

 

5. 사용자가 정답을 입력하고 버튼을 클릭하면 몇가지 이벤트 발생(데이터 제어하기)

        quizAnswerConfirm.addEventListener("click",function(){
            const userAnswer = quizAnswerInput.value.trim();//trim 내장객체 : 빈칸 등을 다 배제하고 인식하도록 하는
           // console.log(userAnswer)//사용자가 쓴 값을 변수에 저장시켜준다 (지역변수)
            quizAnswerInput.style.display = "none";    // 답쓰는 자리 숨기기
            quizAnswerConfirm.style.display = "none";  // 정답확인하기 버튼 지우기
            quizAnswerResult.style.display = "block";  // 답 보이기
            quizFooter.style.display = "block";        // 해설 보이기 
           if(infoAnswer == userAnswer){
            dogWrap.classList.add("like");
           } else {
            dogWrap.classList.add("dislike");
           }

 

textContent & innerText

자바스크립트에서 엘리먼트 및 노드에 텍스트를 추가하거나 값을 가져올 수 있는 방법 중 하나인 textContent에 대하여 알아봅니다. 여기서 방법 중 하나라고 얘기한 이유는 잘 알려진 innerText가 존재하기 때문이죠.

element.textContent = '내용'

자바스크립트 프로퍼티인 textContent는 텍스트를 추가할 수 있는 매우 간단한 프로퍼티입니다. 사용방법은 아래와 같습니다.
일반적으로 텍스트를 엘리먼트에 추가할 경우 innerText가 많이 쓰입니다. 가장 많이 알려져 있기도 하고  innerHTML과 비슷하기 때문에 외우기도 더 쉽죠. 이런 이유로 textContent가 덜 사용되긴 하지만 이 둘의 차이점이 존재합니다. 그럼 공통점과 차이점을 간단히 알아보면 무엇일까요?


[공통점 1] 둘 다 텍스트노드를 추가함
이 둘 모두 텍스트를 추가한다는 공통점이 있습니다. 결과 역시 동일합니다.

[공통점 2] 해당 엘리먼트의 텍스트 값을 반환함
즉 둘 다 어떤 텍스트를 가지고 있는지 알 수 있습니다.


다음으로 차이점은 무엇일까요?
[차이점 1]
일단 textContent가 더 먼저 만들어졌으며 더 빨리 사용되었습니다. 그런 이유로 브라우저 호환성도 좀 더 높습니다. 또한 큰 차이는 아니지만 더 가볍다고 알려져 있습니다.

[차이점 2]
그 다음으로 값을 가져올 때 다수의 스페이스가 존재하는 경우 하나로 가져오느냐 아니면 모두 가져오느냐의 차이가 있습니다.

innerText는 불필요한 공백을 제거하고 텍스트로 반환하지만 textContent는 모든 텍스트를 그대로 가져오는 차이점이 있습니다.

'WEB/JAVASCRIPT'의 다른글

  • 현재글[javascript] 퀴즈 이펙트 : 문제 풀고 정답/오답 이벤트

관련글

댓글

티스토리툴바