정답을 맞추면 강아지가 웃고 틀리면 우는 방식의 사이트를 제작 하였습니다.
먼저 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>퀴즈 이펙트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:ebmdols@naver.com">ebmdols@naver.com</a>
</footer>
<!-- //footer -->
</body>
</html>다음은 자바 스크립트 코드 입니다.
<script>
// 선택자
const quizWrap = document.querySelector(".quiz__wrap");
const quizTitle = quizWrap.querySelector(".quiz__title span");
const quizTime = quizWrap.querySelector(".quiz__title em");
const quizNumber = 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;
quizNumber.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>css 스타일 시트는 어제 만든 사이트와 똑같이 적용됩니다.
어려운 용어를 정리해 보겠습니다.
querySelector : 웹 개발에서 사용하는 JavaScript의 메서드 중 하나로, 문서 객체 모델(DOM)에서 특정 CSS 선택자로 요소(element)를 찾아 반환하는 역할을 합니다.
메서드: 객체(object)에 속한 함수(function)입니다. 객체는 자바스크립트에서 데이터와 해당 데이터를 조작하는 함수를 하나의 단위로 묶어 놓은 것을 말하며, 메서드는 이러한 객체 내의 함수를 가리킵니다.
textContent : 요소(element)의 텍스트 콘텐츠(text content)를 반환하거나 설정하는 속성(property)입니다. 이 속성을 사용하면 HTML 요소 내부의 텍스트 값을 쉽게 가져올 수 있으며, 해당 값을 변경하여 요소의 내용을 업데이트할 수도 있습니다.
속성 : 객체(object)에 속한 데이터(data)의 값(value)을 가리키는 이름(name)과 값(value)의 쌍(pair)입니다. 객체는 속성들의 집합으로 이루어져 있으며, 이러한 속성들은 객체의 상태(state)를 나타내거나, 객체의 동작(behavior)을 제어합니다.
objectName.propertyName여기서 "objectName"은 속성이 속한 객체의 이름, "propertyName"은 속성의 이름입니다. 이를 통해 해당 객체의 속성 값을 가져올 수 있습니다.
place holder : HTML 폼 요소에서 사용되는 속성으로, 폼 입력란(input field)이 비어 있을 때 보여주는 임시 텍스트입니다. 즉, 입력란에 사용자가 값을 입력하기 전에는 placeholder로 지정된 텍스트가 나타나며, 사용자가 값을 입력하면 해당 텍스트는 사라집니다.
trim : trim() 메서드는 문자열에서 앞뒤 공백을 제거하는 역할을 합니다. 이 메서드는 문자열의 시작과 끝에 있는 공백을 제거하며, 문자열 중간에 있는 공백은 제거하지 않습니다.
value : JavaScript에서 value는 HTML 폼 요소(form element)에서 사용되는 속성으로, 사용자가 입력한 값을 나타냅니다. value 속성은 주로 입력란(input field), 체크박스(checkbox), 라디오 버튼(radio button) 등과 같은 폼 요소에서 사용됩니다.
addEventListner() : addEventListener() 메서드는 지정된 요소에 이벤트 핸들러를 등록하는 함수입니다. 이 메서드를 사용하여 클릭, 마우스 오버, 키 입력 등과 같은 이벤트가 발생할 때, 실행할 JavaScript 코드를 지정할 수 있습니다.