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>퀴즈 이펙트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>
</header>
<!-- //header -->
<main id="main">
<div class="quiz__wrap">
<div class="quiz">
<div class="quize__header">
<h2 class="quiz__title"><span></span> <em></em></h2>
</div>
<div class="quize__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">
<button class="confirm">정답 확인하기</button>
<div class="result">연변대비</div>
</div>
</div>
<div class="quize__footer"></div>
</div>
</div>
</main>
<!-- //main -->
<footer id="footer">
<a href="mailto:kshkmn0929@naver.com">kshkmn0929@naver.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 quizAnswerConfirm = quizWrap.querySelector(".quiz__answer .confirm")
const quizAnswerResult = quizWrap.querySelector(".quiz__answer .result")
// 문제 정보
const infoType = "웹디자인 기능사";
const infoTime = "2012년 1회";
const infoNumber = "1";
const infoQuestion = "인접하는 두 색의 경계 부분에 색상, 명도, 채도의 대비가 더욱 강하게 일어나는 현상을 무엇이라고 하는가?"
const infoAnswer = "연변대비";
// 문제 출력
quizTitle.innerText = infoType;
quizTime.innerText = infoTime;
quizQuestionNum.innerText = infoNumber;
quizQuestion.innerText = infoQuestion;
quizAnswerResult.innerText = infoAnswer;
// 정답 숨기기
quizAnswerResult.style.display = "none";
// 정답 확인
quizAnswerConfirm.addEventListener("click", function(){
quizAnswerResult.style.display = "block";
quizAnswerConfirm.style.display = "none";
})
</script>
</body>
</html>
자바스크립트 각 주석에 대한 설명입니다.
선택자
- querySelector() 메서드를 사용하여 HTML 문서 내에서 지정된 클래스를 가진 요소를 선택합니다. 예를 들어, .quiz__wrap 클래스를 가진 요소를 quizWrap 변수에 할당합니다.
문제 정보
- infoType, infoTime, infoNumber, infoQuestion, infoAnswer 변수에 각각 문제 유형, 시험 년도, 문제 번호, 문제 내용, 정답을 저장합니다.
문제 출력
- 선택된 요소들의 innerText 속성을 이용하여, quizTitle, quizTime, quizQuestionNum, quizQuestion, quizAnswerResult 요소들에 저장된 문제 정보를 출력합니다.
정답 숨기기
- quizAnswerResult 요소의 style.display 속성을 "none"으로 설정하여, 정답이 나오지 않도록 합니다.
정답 확인
- quizAnswerConfirm 요소에 클릭 이벤트를 추가하여, 정답 확인 버튼을 클릭하면 quizAnswerResult 요소의 style.display 속성을 "block"으로 변경하고, quizAnswerConfirm 요소의 style.display 속성을 "none"으로 변경하여, 정답을 나타내고 버튼을 숨깁니다.