...
728x90
반응형
문제와 정답을 적을 수 있는 화면 만들기
퀴즈화면 예시
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/quiz.css">
<link rel="stylesheet" href="css/reset.css">
<link href="https://unpkg.com/pattern.css" rel="stylesheet">
</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:gnsrbdi@naver.com">gnsrdbi@naver.com</a>
</footer>
<!-- //footer -->
</body>
</html>
HTML 정리해보기
앞서 게시한 퀴즈화면 만들기 1번과 같은 형식으로 구조를 짰습니다.
CSS 문서 작성
.quiz__answer .input {
background-color: #fff;
border: 6px groove #cacaca;
width: 100%;
font-family: HealthsetGothic;
padding: 10px 20px;
font-size: 22px;
margin-bottom: 10px;
}
.quiz__footer::before {
content: "✔Tip";
color: #F5534F;
font-weight: bold;
}
CSS 정리해보기
나머지 부분은 앞에 만들었던 1번 페이지와 동일합니다. 2번 페이지에서는 사용자가 입력하는 값을 받아 정답 확인 하는 기능을 추가하고, 아래에 해설을 적어주는 Tip영역을 만들어 주었습니다.
JAVASCRIPT 문서 작성
// 선택자
const quizWrap = document.querySelector(".quiz__wrap");
const quizTitle = quizWrap.querySelector(".quiz__title span");
const quizTime = quizWrap.querySelector(".quiz__title em");
const quizQuetionNum = 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 dog__wrap = quizWrap.querySelector(".dog__wrap");
const quizFooter = quizWrap.querySelector(".quiz__footer");
const quizAnswerInput = quizWrap.querySelector(".quiz__answer .input");
// 문제 정보
const infoType = "정보처리 기능사";
const infoTime = "2011년 5회";
const infoNumber = "2";
const infoQuestion = "프레젠테이션에서 화면 전체를 전환하는 단위를 의미하는 것은?"
const infoAnswer = "슬라이드";
const infoDesc = "슬라이드는 프레젠테이션의 화면 전체를 말하고 개체는 화면을 구성하는 개개의 요소를 말한다."
// 문제 출력
quizTitle.textContent = infoType;
quizTime.textContent = infoTime;
quizQuetionNum.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();
quizAnswerConfirm.style.display = "none";
quizAnswerInput.style.display = "none";
quizAnswerResult.style.display = "block";
quizFooter.style.display = "block";
if(infoAnswer == userAnswer){
// alert("정답");
// 정답 버튼 제거
quizAnswerResult.style.color = "green";
dog__wrap.classList.add("like");
} else {
// alert("오답");
quizAnswerResult.style.color = "red";
dog__wrap.classList.add("dislike");
}
});
JAVASCRIPT 정리해보기
javascript 역시 1번 페이지와 동일한 형식에 사용자 값을 받아와 정답과 비교하는 속성을 추가해 주었습니다.
추가한 부분에 대한 설명으로는
- trim() : 문자열의 양쪽 끝에 있는 공백을 제거한 후, 결과 문자열을 반환합니다.
- value : HTML 폼 요소의 현재 값을 나타내거나 값을 변경할 수 있도록 하는 속성입니다.
- textContent : HTML 요소의 모든 자식 노드의 텍스트 콘텐츠를 반환하거나, 텍스트 콘텐츠를 수정할 수 있도록 하는 속성으로 innerText와 같은 역할입니다.
- classlist : HTML 요소의 클래스를 조작하는 데 사용되는 속성입니다.
1번 페이지와 동일하게 quizAnswerConfirm.addEventListner("click") 부분에 함수를 넣었습니다.
추가된 내용으로는 사용자에게 받아온 결과 값이 정답과 같으면 'like'를 dog__wrap부분의 클래스로 추가하고, 정답을 초록색 글씨로 나타나게 하고 정답과 다르면 'dislike'를 추가하고 정답을 빨간색 글씨로 나타나게 하는 조건문을 넣었습니다.
이상으로 두 번째 퀴즈페이지를 만들어보았습니다 !
728x90
반응형