JAVASCRIPT

퀴즈 이펙트2 주관식 확인하기 유형

이미사용 2023. 3. 9. 13:50
명언
-
728x90
반응형

주관식 확인하기 유형

퀴즈 이펙트1 에서 배운 것을 토대로 이번엔 주관식 확인하기 유형을 만들어 봅니다.

<!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__tiile"><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:ghkddn132@naver.com">ghkddn132@naver.com</a>
    </footer>
    <!-- //footer -->
    <script>
        //선택자
        const quizWrap = document.querySelector(".quiz__wrap");
        const quizTitle = quizWrap.querySelector(".quiz__tiile span");
        const quizTime = quizWrap.querySelector(".quiz__tiile em");
        const quizQuestion = quizWrap.querySelector(".quiz__question span");
        const quizQuestionNum = quizWrap.querySelector(".quiz__question em");
        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 quizDesc = quizWrap.querySelector(".quiz__desc");
        const quizFooter = quizWrap.querySelector(".quiz__footer");

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

        // 문제 출력
        quizTitle.textContent = infoType;
        quizTime.textContent = infoTime;
        quizQuestion.textContent = infoQuestion;
        quizQuestionNum.textContent = infoNumber;
        quizDesc.textContent = infoDesc;
        quizAnswerResult.textContent = infoAnswer

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

        //사용자 정답
        quizAnswerConfirm.addEventListener("click", function(){
            const userAnswer = quizAnswerInput.value.trim(); //trim()은 빈공칸을없애준다.

            quizAnswerInput.style.display = "none"
            quizAnswerResult.style.display ="block";
            quizAnswerConfirm.style.display = "none";
            quizFooter.style.display = "block";

            if(infoAnswer == userAnswer){
                // alert("정답입니다.")
                dogWrap.classList.add("like"); //classList.add()는 DOM 요소의 클래스 리스트에 새로운 클래스를 추가하는 역할을 합니다.               
            } else {
                // alert("오답입니다.")
                dogWrap.classList.add("dislike");
            }
        });
    </script>
</body>
</html>

 

1.저번 처럼 똑같이 변수를 만들어 문자나 숫자를 출력하거나 지정하고 싶은 태그에 CSS선택자를 'querySelector' 를 이용해 지정해 줍니다.

//선택자
const quizWrap = document.querySelector(".quiz__wrap");
const quizTitle = quizWrap.querySelector(".quiz__tiile span");
const quizTime = quizWrap.querySelector(".quiz__tiile em");
const quizQuestion = quizWrap.querySelector(".quiz__question span");
const quizQuestionNum = quizWrap.querySelector(".quiz__question em");
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 quizDesc = quizWrap.querySelector(".quiz__desc");
const quizFooter = quizWrap.querySelector(".quiz__footer");

 

2.변수를 만들어 문자와 숫자 등을 저장해주고, 저번에 배운 'innerText'가 아닌 'textContent'를 이용해 문자와 숫자를 위에 지정해논 태그 쪽으로 보내 줍니다.(이 두개는 쓰는 용도는 같지만 미세한 차이가 있습니다.)

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

// 문제 출력
quizTitle.textContent = infoType;
quizTime.textContent = infoTime;
quizQuestion.textContent = infoQuestion;
quizQuestionNum.textContent = infoNumber;
quizDesc.textContent = infoDesc;
quizAnswerResult.textContent = infoAnswer

 

3. 처음에 정답과 해설을 숨기기 위해 style.display = "none"을 써서 안보이게 해줍니다.

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

4.'정답 확인하기'를 누르면 정답이 나오게 하기위해 'addEventListener()' 함수를 이용해 줍니다.

이때 함수안에 사용자가 적은 문제의 답(quizAnswerInput)을'value'을 이용해 가져온 후 지역변수(userAnswer)로 변경하고, 눌럿을때 '사용자의 답용지'와'정답 확인하기'를 없애기 위해 style.display = "none"을 해주고 실제 답과 해설을 보여주기 위해style.display ="block"을 넣어준 후  if문을 사용자의 답(userAnswer)과 실제 답(infoAnswer)을 비교하여줍니다.  그후 맞고 틀린것의 차이로, CSS에 넣어둔 요소가를 동작 하도록 'classList.add()'이용해 'dogWrap'부분에새로운 class를 넣어줍니다.

//사용자 정답
quizAnswerConfirm.addEventListener("click", function(){
	const userAnswer = quizAnswerInput.value.trim(); //trim()은 빈공칸을없애준다.

	quizAnswerInput.style.display = "none";
	quizAnswerResult.style.display ="block";
	quizAnswerConfirm.style.display = "none";
	quizFooter.style.display = "block";

	if(infoAnswer == userAnswer){
		// alert("정답입니다.")
		dogWrap.classList.add("like"); //classList.add()는 DOM 요소의 클래스 리스트에 새로운 클래스를 추가하는 역할을 합니다.               
	} else {
		// alert("오답입니다.")
		dogWrap.classList.add("dislike");
            }
	});

※속성정리

 textContent  DOM 요소의 텍스트 콘텐츠를 가져오거나 설정하는 데 사용되는 JavaScript의 프로퍼티입니다.
 value  HTML form 요소의 현재 값을 가져오거나 설정하는 데 사용되는 JavaScript의 프로퍼티입니다.
 classList.add()  DOM 요소의 클래스 리스트에 새로운 클래스를 추가하는 역할을 합니다.
trim() 문자열에서 양쪽 끝에 있는 공백을 제거하는 JavaScript의 내장 함수입니다. 이 함수는 원본 문자열을 수정하지 않고 새로운 문자열을 반환합니다.

 

 

 

 

 

 

 

강아지 이미지 출처: 좋아요! 싫어요!가 분명한 강아지 애니메이션

https://wsss.tistory.com/913

'JAVASCRIPT'의 다른글

  • 현재글퀴즈 이펙트2 주관식 확인하기 유형

관련글

댓글

티스토리툴바