JAVASCRIPT
퀴즈 이펙트 만들기 2
hyejeong3283
2023. 3. 9. 13:10
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>퀴즈 이펙트01</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:hyejeong3283@gmail.com">hyejeong3283@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 quizQuestion = quizWrap.querySelector(".quiz__question span");
const quizQuestionNum = quizWrap.querySelector(".quiz__question em");
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();
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>
<div class="quiz__answer">
<input class="input" type="text" placeholder="정답을 적어주세요!">
<button class="confirm">정답 확인하기</button>
<div class="result">연변대비</div>
</div>quiz__answer라는 클래스명을 가진 태그 안에 정답을 적을 수 있는 영역을 넣어주었습니다.
정답을 적고 정답 확인하기 버튼을 누르게 되면
quizAnswerInput.style.display = "none"; // 정답 적는 영역에 none 값을 주어 숨김
quizAnswerConfirm.style.display = "none"; // 정답확인하기 버튼에 none 값을 주어 숨김
quizAnswerResult.style.display = "block"; // 정답 영역에 block 값을 주어 정답 보이기
quizFooter.style.display = "block"; // 해설 영역에 block 값을 주어 해설 보이기
정답을 적어주세요! 칸에 답을 쓰고, 정답 확인하기 버튼을 누릅니다.
그 후 아래 이미지와 같이 정답인지, 오답인지에 따라 강아지 표정과 배경이 바뀝니다.
그리고 정답 적는 칸과 확인하기 버튼이 없어지고 정답과 문제풀이 TIP 영역이 나오게 됩니다.
용어정리
| 속성 | 설명 |
| querySelector() | 문서에서 특정 css 선택자로 요소를 찾는 DOM 메서드입니다. |
| innerText | DOM 요소의 텍스트 내용을 가져오거나 설정하는데 사용되는 속성입니다. |
| style.속성 | "속성값", 자바스크립트에서 css 스타일을 표현하는 방법입니다. |
| classList | 요소의 클래스를 추가하거나 제거하여 스타일을 설정하는데 사용됩니다. |
| addEventListener | 자바스크립트에서 이벤트를 대상이 수신할 때마다 호출할 함수를 설정합니다. |
| trim() | 문자열 좌우에서 공백을 제거하는 함수입니다. |
| content | 텍스트를 추가할 수 있는 매우 간단한 프로퍼티입니다. |
| value | text 박스에 표시되는 글자입니다. |
정답일 경우 오답일 경우
