자바스크립트 퀴즈 이펙트 만들기
오늘은 자바스크립트에서 배운 내용들을 기반으로 퀴즈 이펙트를 만들어보겠습니다~!!
완성화면은 이런 화면!
CSS설정한 부분은 너무 길고 복잡하니 패스하겠습니다! 스크립트 부분만 짚고 넘어가겠어요 📝
선택자 만들기
// 선택자
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");변수를 지정해주고 document.querySelector( )를 사용해 선택자를 만들어줍니다. 그리고 괄호 안에 각 내용에 맞는 이름들을 적어둡니다. 예를 들어 퀴즈 제목엔 "quiz__title", 결과엔 "quiz__anser" 등등 이름을 잘 구분하여 적어두면 소스가 깔끔해집니다. 여기서 quizWrap은 부모이기 때문에 document를 quizWrap에게만 설정해주고 나머지 자식 요소들에겐 document 대신 quizWrap을 써줘도 무방합니다!
문제 정보 적기
// 문제 정보
const infoType = "웹디자인 기능사";
const infoTime = " 2012년 1회";
const infoNumber = "1";
const infoQeustion = "인접하는 두 색의 경계 부분에 색상, 명도, 채도의 대비가 더욱 강하게 일어나는 현상을 무엇이라고 하는가?";
const infoAnswer = "연변대비";각 구역에 들어갈 문제 정보를 변수에 지정해줍니다. 선택자나 문제 정보를 적을 때는 중간에 대문자로 적어주세요!!
문제 출력하기
// 문제 정보
const infoType = "웹디자인 기능사";
const infoTime = " 2012년 1회";
const infoNumber = "1";
const infoQeustion = "인접하는 두 색의 경계 부분에 색상, 명도, 채도의 대비가 더욱 강하게 일어나는 현상을 무엇이라고 하는가?";
const infoAnswer = "연변대비";
// 문제 출력
quizTitle.innerText = infoType;
quizTime.innerText = infoTime;
quizQuestionNum.innerText = infoNumber;
quizQuestion.innerText = infoQeustion;
quizAnswerResult.innerTect = infoAnswer;선택자에 지정한 변수를 쓰고 innerText를 사용해 문제 정보를 적으면 문제들이 출력됩니다.
정답 숨기기, 확인하기
// 정답 숨기기
quizAnswerResult.style.display = "none";
// 정답 확인
quizAnswerConfirm.addEventListener("click", function(){
quizAnswerResult.style.display = "block";
quizAnswerConfirm.style.display = "none";
});정답을 숨겼다가 , 클릭하면 나타나게 할 수 있도록 quizAnswerResult 뒤에 .style.display = "none"를 붙여 정답을 숨겨줍니다. 그리고 addEventListener를 사용해 클릭하면 정답이 나올 수 있게 처리해줍니다!
밑은 완성된 코드와 페이지입니다!
<!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__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">
<button class="confirm">정답 확인하기</button>
<div class="result">연변대비</div>
</div>
</div>
<div class="quiz__footer"></div>
</div>
</div>
</main>
<!-- //main -->
<footer id="footer">
<a href="mailto:yds43557340@gmail.com">yds43557340@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 quizAnswerConfirm = quizWrap.querySelector(".quiz__answer .confirm");
const quizAnswerResult = quizWrap.querySelector(".quiz__answer .result");
// 문제 정보
const infoType = "웹디자인 기능사";
const infoTime = " 2012년 1회";
const infoNumber = "1";
const infoQeustion = "인접하는 두 색의 경계 부분에 색상, 명도, 채도의 대비가 더욱 강하게 일어나는 현상을 무엇이라고 하는가?";
const infoAnswer = "연변대비";
// 문제 출력
quizTitle.innerText = infoType;
quizTime.innerText = infoTime;
quizQuestionNum.innerText = infoNumber;
quizQuestion.innerText = infoQeustion;
quizAnswerResult.innerTect = infoAnswer;
// 정답 숨기기
quizAnswerResult.style.display = "none";
// 정답 확인
quizAnswerConfirm.addEventListener("click", function(){
quizAnswerResult.style.display = "block";
quizAnswerConfirm.style.display = "none";
});
</script>
</body>
</html>
https://yeodaseul4355.github.io/web2023/javascirpt/quiz/quizEffect01.html
용어 사전
| querySelector | 문서 내에서 원하는 요소를 선택하고, 해당 요소의 속성이나 텍스트 등을 변경하거나, 이벤트 리스너를 추가할 수 있습니다. |
| innerText | 요소의 내부 텍스트 콘텐츠를 설정하거나 가져오는 데 사용됩니다. |
| addEventListener | 이벤트를 처리하는 함수를 등록하는 데 사용됩니다. |
퀴즈 이펙트의 다른 유형 보러가기
퀴즈 이펙트 2: https://duektmf34.tistory.com/34
퀴즈 이펙트 3: https://duektmf34.tistory.com/41
퀴즈 이펙트 4: https://duektmf34.tistory.com/47
퀴즈 이펙트 5: https://duektmf34.tistory.com/57
728x90
반응형
