<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(".qiuz__question span");
const quizQuestionNum = quizWrap.querySelector(".qiuz__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;
quizQuestion.innerText = infoQuestion;
quizQuestionNum.innerText = infoNumber;
quizAnswerResult.innerText = infoAnswer;
// 정답 숨기기
quizAnswerResult.style.display = "none";
// 정답 확인
quizAnswerConfirm.addEventListener("click", function(){
quizAnswerResult.style.display = "block";
quizAnswerConfirm.style.display = "none";
});
</script>- 위의 사이트처럼 정답확인을 누르면 답이 나오는 사이트를 만들어 봅시다.!!
- 그 후 나중에 정답을 맞추었을 땐 강아지가 웃고, 틀렸을 땐 지금 처럼 울게 만들어 보는 것도 해보겠습니다.
<!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="qiuz__header">
<div class="quiz__title"><span></span><em></em></div>
</div>
<div class="qiuz__main">
<div class="qiuz__question">
<em></em>. <span></span>
</div>
<div class="qiuz__view">
<div class='dog__wrap dislike'>
<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="qiuz__footer"></div>
</div>
</div>
</main>
<!-- //main -->
<footer id="footer">
<a href="mailto:imkebab00@gmail.com">imkebab00@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(".qiuz__question span");
const quizQuestionNum = quizWrap.querySelector(".qiuz__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;
quizQuestion.innerText = infoQuestion;
quizQuestionNum.innerText = infoNumber;
quizAnswerResult.innerText = infoAnswer;
// 정답 숨기기
quizAnswerResult.style.display = "none";
// 정답 확인
quizAnswerConfirm.addEventListener("click", function(){
quizAnswerResult.style.display = "block";
quizAnswerConfirm.style.display = "none";
});
</script>
</body>
</html>- Javascript 포스팅 이니 중요한건 script부분이죠!
- 사실 body부분이나 css같은 이미지는 다른 곳에서 쉽게 가져올 수 있습니다.
<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(".qiuz__question span");
const quizQuestionNum = quizWrap.querySelector(".qiuz__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;
quizQuestion.innerText = infoQuestion;
quizQuestionNum.innerText = infoNumber;
quizAnswerResult.innerText = infoAnswer;
// 정답 숨기기
quizAnswerResult.style.display = "none";
// 정답 확인
quizAnswerConfirm.addEventListener("click", function(){
quizAnswerResult.style.display = "block";
quizAnswerConfirm.style.display = "none";
});
</script>- 스크립트 부분 입니다! 처음보는 것들도 있고 눈에 익은 것들도 조금 있네요!!
- 일단 querySelector 는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다.
- 예를들어 document.querySelector(".quiz__wrap") 는 문서(document)안에 있는 .quiz__wrap 이라는 것을 선택해준 것입니다.
- const quizWrap = document.querySelector(".quiz__wrap")는 그 선택한 것을 quizWrap이라는 이름의 변수로 저장을 해준 것 입니다.
- 그런 방식으로 글씨가 들어가야 하는 모든 요소를 선택해주었습니다.
- 그런 다음 // 문제 정보 부분에 시험명, 날짜, 문제번호, 문제, 답과 같은 내용을 변수에 지정해 주었습니다.
- 그리고 innerText 라는 함수를 통해 알맞은 요소에 필요한 내용을 넣어줍니다.
- "텍스트를 넣을 요소.innerText = 텍스트 내용" 의 형식을 가지고 있습니다.
- 마지막으로 정답을 숨겨놓았다가 정답확인을 누르면 정답확인이 사라지면서 정답이 나오게 해보겠습니다.
- 먼저 "quizAnswerResult.style.display = "none"" 으로 정답을 가려주었습니다.
- 요소를 저장한 변수(quizAnswerResult).style을 하면 그 변수의 스타일을 제어할 수 있습니다.
- 거기에 .display를 추가해주어 스타일 중에서도 display에 관한 것을 제어하였습니다.
- display : none은 css에서도 해당요소를 안보이게 해주는 명령어입니다. 스크립트에서는 ": "대신 "=" 을 써주었습니다.
- quizAnswerConfirm.addEventListener("click", function(){}); 은 quizAnswerConfirm을 "click" 했을 때 함수를 실행시킨다는 뜻입니다. 즉 지정된 행동을 하면 함수를 실행시키는 명령문 입니다.
- 함수 안에 위에서 가려주었던 정답을 display = "block"을 통해 다시 표현시켜주고, 가리고싶은 정답 확인하기 부분을 display = "none"을 통해 가려주면 됩니다.
- 끝~!!