반응형
퀴즈 사이트
퀴즈를 풀어볼 수 있는 사이트를 만들어 보겠습니다.
와~ 강아지가 너무 귀엽습니다!
사이트를 어떻게 만들었는지 코드를 한번 보겠습니다~
<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 <em>정답 확인하기 유형</em></a></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-->
뭐 이제 하두 많이봐서 머릿속으로 대~충 그림이 그려집니다.
중간에 움직이는 강아지가 들어가기에 코드가 길어보이지만 강아지만 뺀다면 그리 길지도 않습니다.
한 화면에 문제, 답이 계속 바뀌어야 하기때문에 태그 쪽 안에 글씨를 일일이 써줄 수 없습니다.
그래서 자바스크립트에,
<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 = "연변대비";
const infoConfirm = "정답 확인하기";
//문제 출력
quizTitle.innerText = infoType;
quizTime.innerText = infoTime;
quizQuestionNum.innerText = infoNumber;
quizQuestion.innerText = infoQuestion;
quizAnswerResult.innerText = infoAnswer;
quizAnswerConfirm.innerText = infoConfirm;
//정답 숨기기
quizAnswerResult.style.display = "none";
//정답 확인
quizAnswerConfirm.addEventListener("click", function(){
quizAnswerResult.style.display = "block";
quizAnswerConfirm.style.display = "none";
});
</script>스크립트 부분입니다. 이곳은 레이아웃을 만들고 그 공간에 제목, 문제, 답, 이메일 들어가는 글이 많기에
이곳에서 공간에 들어갈 자리와 글을 정리해줍니다.
선택자는 글이 들어갈 자리를 말합니다.
문제 정보는 들어갈 내용을 말합니다.
문제 출력은 선택자와 문제 정보를 합쳐, 자리에 글을 넣어 출력해줍니다.
정답 숨기기는 계속 노출되어 있는 답을 숨겨줍니다.
정답 확인은 함수를 클릭 했을시이용해 숨겨진 정답이 나오는 동시에, 정답 확인하기 버튼이 숨겨집니다.
아직 미완성이지만 뼈대는 다 만들어진거같습니다.
완성이 되면 또 글을 올리겠습니다~
[ 안녕하개~ ]