반응형
퀴즈 사이트 ( 2 )
주관식 문제를 풀 수 있도록 만들어 보겠습니다.
[ 염색했개~ ]
<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>
<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-->
<body> 안에 header는 맨 윗줄에 있는 제목이 원래 있었고,
맨 오른쪽에 첫번째 문제, 두번째 문제를 옮겨 다닐 수 있는 버튼을 추가했습니다.
<script>
//선택자
const quizWrap = document.querySelector(".quiz__wrap");
const quizTitle = quizWrap.querySelector(".quiz__title span");
const quizTime = quizWrap.querySelector(".quiz__title em");
const quizQuestionNum = quizWrap.querySelector(".quiz__question em");
const quizQuestion = quizWrap.querySelector(".quiz__question span");
const quizAnswerConfirm = quizWrap.querySelector(".quiz__answer .confirm");
const quizAnswerResult = quizWrap.querySelector(".quiz__answer .result");
const quizAnswerInput = quizWrap.querySelector(".quiz__answer .input");
const quizDesc = quizWrap.querySelector(".quiz__desc");
const quizFooter = quizWrap.querySelector(".quiz__footer");
const dogWrap = quizWrap.querySelector(".dog__wrap");
// 문제 정보
const infoType = "정보처리 기능사";
const infoTime = "2011년 5회";
const infoNumber = "2";
const infoQuestion = "프레젠테이션에서 화면 전체를 전환하는 단위를 의미하는 것은?";
const infoAnswer = "슬라이드";
const infoDesc = "슬라이드는 프레젠테이션의 화면 전체를 말하고 개체는 화면을 구성하는 개개의 요소를 말한다."
//문제 출력
quizTitle.textContent = infoType;
quizTime.textContent = infoTime;
quizQuestionNum.textContent = infoNumber;
quizQuestion.textContent = infoQuestion;
quizAnswerResult.textContent = infoAnswer;
quizDesc.textContent = infoDesc;
// 정답 & 해설 숨기기
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){
dogWrap.classList.add("like");
} else {
dogWrap.classList.add("dislike");
}
});
</script>
두번째 문제의 정보들 입니다.
quizAnswerConfirm.addEventListener("click", function() 이 부분이 새로 생겼는데,
Confirm 정답 확인 버튼을, click 클릭시, function( ) 함수를 실행해라. 그 함수안에는
userAnswer 사용자 입력값을 quizAnswerInput 정답 적는칸에 value 요소의 값으로 나타내라,
trim( ) 공백이 있다면 없애서.
그 다음 정답 확인버튼, 인풋 박스를 숨기고, 숨겨져 있는 정답과 설명을 보이게 해라. 이고 그다음은
if(infoAnswer == userAnswer) 이 문제의 답과, 사용자가 적은 답이 같다면,
dogWrap.classList.add("like"); 는 dogWrap 뒤에 like를 붙여 웃는 강아지를 보여주고,
else { dogWrap.classList.add("dislike");} 정답이 아니라면 dislike를 붙여 우는 강아지를 보여줍니다.
여기서 처음보는 메소드를 보면.
trim( ) : 문자열의 양쪽 끝에 있는 공백 문자(스페이스, 탭, 개행 등)를 제거하는 JavaScript 내장 함수입니다. textContent : HTML 요소의 텍스트 콘텐츠를 나타내는 JavaScript 프로퍼티입니다.
value : HTML 폼(form) 요소의 값(value)을 나타내는 JavaScript 프로퍼티입니다.
[ 정답 맞췄개~ ]
정답을 맞혔을 때 모습입니다!
참 귀엽죠~