728x90
반응형
정답 확인하기 유형
CSS를 이용해 사이트 하나를 꾸며 줍니다.
javascript를 이용해 정답 확인하기 유형을 알아 보겠습니다.
<!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="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">
<button class="confirm">정답 확인하기</button>
<div class="result"></div>
</div>
</div>
<div class="quiz__contents"></div>
<div class="quiz__footer"></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 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>
1.변수를 만들어 문자나 숫자를 출력하거나 지정하고 싶은 태그에 CSS선택자를 'querySelector' 이용해 지정하여 줍니다. ('quizWrap'만 'document'인 이유: 전체를 'document'로 하면 데이터가 많을때 가져와야하는 데이터 외에 또 다른 데이터까지 읽고나서 가져오기 때문에 불러오는 속도에 영향을 끼쳐 느려 지는 것을 방지 하기 위해 'quizWrap'로 바꾸어 이와 관련된 데이터만을 읽고 가져오라고 하고있습니다.)
//선택자
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");
2.변수를 만들어 문자와 숫자 등을 저장해 주고, 'innerText'를 이용해 문자와 숫자를 위에서 지정해논 태그 쪽 으로 보내 줍니다.
const infoType = "웹디자인 기능사";
const infoTime = "2012년 1회";
const infoNumber ="1";
const infoQuestion = "인접하는 두 색의 경계 부분에 색상, 명도, 채도의 대비가 더욱 강하게 일어나는 현상을 무엇이라고 하는가?";
const infoAnswer = "연변대비";
quizTitle.innerText = infoType; //Text첫부분 대문자
quizTime.innerText = infoTime;
quizQuestionNum.innerText = infoNumber;
quizQuestion.innerText = infoQuestion;
quizAnswerResult.innerText = infoAnswer;
3.정답을 숨기기 위해 'quizAnswerResult'에 위치한 문자를 style.display = "none"으로 해 안보이게 해줍니다.
quizAnswerResult.style.display = "none";이렇게 까지하면 다음 이미지 처럼 글자와 문자가 나오고 답은 안보이게 됩니다.
4.'정답 확인하기'를 누르면 정답이 나오게 하기위해 'addEventListener()' 함수를 이용해 줍니다.
quizAnswerConfirm.addEventListener("click", function(){ //정답 확인하기를 클릭을했을때
quizAnswerResult.style.display = "block"; //정답이 나오고,
quizAnswerConfirm.style.display = "none"; //정답확인하기는 안보이게 해준다.
})
그럼 위와같이 답이 나옵니다.
※속성 정리
| querySelector | CSS 선택자를 사용하여 요소를 선택하는 JavaScript 메서드입니다. querySelector 메서드는 문서 내에서 첫 번째로 일치하는 요소를 반환합니다. CSS 선택자를 인수로 전달하여 선택하려는 요소를 지정할 수 있습니다 |
| innerText | JavaScript에서 HTML 요소의 내용을 설정하거나 반환하는 속성입니다. 요소의 내용이란 해당 요소가 표시하는 텍스트 내용을 말합니다. innerText를 사용하면 JavaScript에서 HTML 요소의 내용을 동적으로 변경할 수 있습니다. |
| addEventListener | JavaScript에서 이벤트를 처리하는 데 사용되는 함수입니다. 이 함수를 사용하여 특정 이벤트가 발생했을 때 실행할 함수를 등록할 수 있습니다. |
강아지 이미지 출처: 좋아요! 싫어요!가 분명한 강아지 애니메이션