728x90
퀴즈사이트 만들기
저번 게시물에서 기본 퀴즈사이트 레이아웃을 만들었다면 이번엔 정답 입력 후 입력 값에 따라 강아지 모션이 변하는 사이트를 만드는 방법입니다.
※정답을 입력해 보세요
코드블럭
<!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">
</head>
<body>
<header id="header">
<h1><a href="../javascript14.html"></a> Quiz <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:lee3ll@naver.com">lee3ll@naver.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 quizDesc = quizWrap.querySelector(".quiz__desc");
const quizAnswerConfirm = quizWrap.querySelector(".quiz__answer .confirm");
const quizAnswerResult = quizWrap.querySelector(".quiz__answer .result");
const quizAnswerInput = quizWrap.querySelector(".quiz__answer .input");
const dogWrap = quizWrap.querySelector(".dog__wrap")
const quizFooter = quizWrap.querySelector(".quiz__footer");
//문제 정보
const infoType = "정보처리 기능사";
const infoTime = "2011년 5회";
const infoNumber = "2";
const infoQuestion = "프레젠테이션에서 화면 전체를 전환하는 단위를 의미하는것은?";
const infoAnswer = "슬라이드";
const infoDesc ="슬라이드는 프레젠테이션의 화면 전체를 말하고 개체는 화면을 구성하는 개개의 요소를 말한다";
//문제 출력
quizTitle.textContent = infoType;
quizTime.textContent = infoTime;
quizQuestionNum.innerText = infoNumber;
quizQuestion.innerText = infoQuestion;
quizDesc.textContent = infoDesc;
quizAnswerResult.textContent = infoAnswer;
//정답 &해설 숨기기
quizAnswerResult.style.display = "none";
quizFooter.style.display = "none";
//사용자 정답
quizAnswerConfirm.addEventListener("click", function(){
const userAnswer = quizAnswerInput.value.trim();
quizAnswerInput.style.display = "none"; //인풋박스 숨김
quizAnswerConfirm.style.display = "none"; //정답 확인 버튼 숨김
quizAnswerResult.style.display = "block"; //정답 보이기
quizFooter.style.display = "block"; //해설 보이기
if(infoAnswer == userAnswer){
// alert("정답입니다.")
dogWrap.classList.add("like"); //정답 버튼 제거, 강아지 스마일
} else {
// alert("오답입니다.")
dogWrap.classList.add("dislike");
}
});
</script>
</body>
</html>main코드는 이전과 같기때문에 복사해줍니다.
코드보충설명
| Input | 사용자가 값을 입력할 수 있는 텍스트 상자, 체크박스, 라디오 버튼 등을 생성. <input> 요소는 다양한 속성(attribute)을 가질 수 있다. (ex) 'id' , 'name', 'value', 'required', 'plaoeholder', 'plaoeholder', 'disable') |
| value | html의 입력요소에서 사용되는 속성 중 하나. 이 속성은 사용자가 입력한 값을 나타내며, 문자열 데이터를 가진다. |
| trim | JavaScript에서 문자열(String)의 양쪽 끝에 있는 공백(스페이스, 탭, 개행 등)을 제거하는 함수. 'trim'함수는 문자열 객체의 메소드로 제공. 따라서 문자열 객체의 변수 또는 리터럴 값 뒤에 'trim()'을 붙여서 사용 가능. |
|
textContent
|
DOM 요소의 속성 중 하나로, 해당 요소에 포함된 텍스트 콘텐츠를 나타내는 문자열을 반환하는 것으로 모든 자식 요소의 텍스트를 결합하여 반환 textContent는 HTML 태그를 제거하지 않고 모든 텍스트를 반환하기 때문에, XSS(Cross-Site Scripting) 공격 등의 보안 이슈에 주의. |