“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
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>Document</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/quiz.css">
</head>
우선 <head>는 전과 동일하게 <link>태그로 css와 연결시켜 작업해주고
<body>
<header id="header">
<h1><a href="../javascript14.html">Quiz <em>주관식 확인하기 유형</em></h1></a>
<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.hunmi961119@gmail.com">hunmi961119@gmail.com</a>
</footer>
<!-- //footer -->
<body>도 동일하지만
<header>태그 안에 링크를 걸어 다음퀴즈로 넘어가게 설정해줍니다.
일단 2개의 퀴즈를 만들었으니 2개만 만들어줬습니다.
하나씩 동일한 방법으로 추가해주면 되겠습니다.
<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.hunmi961119@gmail.com">hunmi961119@gmail.com</a>
</footer>
<!-- //footer -->
<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 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.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();
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>
이제 <script>를 이용해 가장 복잡한 부분을 작성해줍니다.
const로 선택자 데이터와 문제 정보의 데이터들을 입력해줍니다.
그리고 문제 출력, 정답 &해설 숨기기의 속성값을 지정해줍니다.
마지막으로 사용자 정답 부분을
함수를 통해 출력해냅니다.
잘 모르는 것들이 많아
밑에 따로 정리해보겠습니다.
💜 querySelector : 웹개발에서 사용되는 자바스크립트의 메서드입니다. Document 객체의 메서드 중 하나로 CSS 선택자를 사용하여 HTML 문서에서 요소를 선택하는 기능을 제공합니다.
💜 textContent : DOM요소의 덱스트 콘텐츠를 나타내는 속성입니다. 요소의 모든 자식 노드의 텍스트 콘텐츠를 문자열로 반환합니다.
innerText : 저번페이지에서는 이 속성을 썼었습니다. innerText 요소는 텍스트 콘텐츠를 반환하지만, HTML 태그는 무시합니다.
💜 trim() : 문자열의 양 끝 공백을 제거해줍니다. 위에서는 정답을 맞게 썼는데도 공백이 있어서 정답처리 되지 않는 오류가 생겨 trim()을 사용해 공백을 제거해주고 정답처리될 수 있게 작업해줬습니다.
반응형