“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
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/reset.css">
<link rel="stylesheet" href="css/quiz.css">
</head>
<body>
<header id="header">
<h1><a href="../javascript14.html">Quiz</a> <em>주관식 확인하기 유형</em></h1>
<ul>
<li><a href="quizEffext01.html">1</a></li>
<li class="active"><a href="quizEffext02.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:jeongyouna_@naver.com">jeongyouna_@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 quizQuestionNum = 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 quizAnsweInput = 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 = quizAnsweInput.value.trim();
quizAnsweInput.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>HTML 들여다보기
- 저번 시간에 썼던 HTML코드를 복사 붙이기로 가져왔습니다.
- Script를 사용해서 내용을 출력해 줍니다.
- 문제 정보에 대해 작성해 준 후 선택자를 묶어준 태그들을 저번시간과 같이 queryselector를 주고 괄호로 . 을 써서 class명을 써줍니다.
- 저번 시간에는 innerText를 썼지만 오늘은 textContent를 사용해 줍니다. textContent는 HTMl에서 쓰이는 속성 중 하나이며 요소 내부의 텍스트를 나타냅니다.
- 문제 출력은 저번과 비슷하지만 textcontent를 이용해서 quizetitle은 infotype "정보처리기능사"를 출력할 수 있습니다.
- quizTim은 infoTime "2011년 5회"를 출력하고 quizQuestionNum은 infoNumber "2"를 출력합니다.quizQuestion는 infoQuestion 작성해준 문제를 출력해주고 quizDesc는 infoDesc로 설명이 나옵니다. quizAnswerResult는 infoAnswer 정답이 나올 수 있습니다.
- 정답&해설 숨기기 위해서 써주는 기능은 .style.display="none";으로 표시해주면 나오지 않고 다시 나오게 하려면 "block"을 써주면 됩니다.
- 사용자가 정답을 쓸 때 정답이 맞을 때 강아지가 웃고 있는 모양이 나오고 정답이 틀렸을때 강아지가 시무룩한 표정이 나오기 위해서는 addEventListener를 사용해서 "click"클릭 하때 실행 되도록 function(){}을 사용해 줍니다.여기서 value와 trim을 사용해 주는데value는 값을 나타내주는 속성인데 input값에서는 입력 필드의 현재 값을 나타냅니다.
- 그리고 차례대로 인풋박스를 숨겨주고 정답확인 버튼을 숨겨주고 정답보이기 해설 보이기 순으로 스크립트를 짜줍니다.
- 정답을 쓰는데 공백이 생기면 오답이라고 뜨는데 이 점을 바로잡아주기 위해서 trim은 함수 문자열의 공백을 제거해주는 효과를 나타냅니다.
- 후에 강아지 웃는 모양 우는 모양을 위해서 dogWrap에서 classlist로 "like""dislike"로 선언해 줍니다. 정답이나 오답을 쓰게 된다면 classlist의 속성으로 인하여 dogWrap에서 요소에 like를 추가하고 또 제거되며 dislike가 추가되고 제거되면서 강아지의 모양이 바뀔 수 있습니다.
CSS 코드
/* header */
#header {
position: fixed;
left: 0;
top: 0;
background-color: #262626;
color: #fff;
padding: 10px;
margin-bottom: 100px;
width: 100%;
z-index: 1000;
display: flex;
justify-content: space-between;
}
#header::before {
content: '';
border: 4px ridge#c5c5c5;
position: absolute;
left: 5px;
top: 5px;
width: calc(100% - 10px);
height: calc(100% - 10px);
}
#header h1 {
font-size: 28px;
padding: 5px 5px 5px 10px;
font-family: 'DungGeunMo';
z-index: 10;
position: relative;
}
#header h1 a {
color: #fff;
}
#header h1 em {
font-size: 0.5em;
}
#header ul {
padding: 5px;
}
#header li {
display: inline;
z-index: 10;
position: relative;
}
#header li a {
color: #fff;
font-family: 'DungGeunMo';
border: 1px dashed #fff;
display: inline-block;
padding: 5px;
}
#header li.active a,
#header li a:hover {
background-color: #fff;
color: #000;
}
/* footer */
#footer {
position: fixed;
left: 0;
bottom: 0;
background-color: #262626;
width: 100%;
text-align: center;
}
#footer a {
color: #fff;
padding: 20px;
display: block;
font-family: 'DungGeunMo';
z-index: 10;
position: relative;
}
#footer::before {
content: '';
border: 4px ridge#a3a3a3;
position: absolute;
left: 5px;
top: 5px;
width: calc(100% - 10px);
height: calc(100% - 10px);
}
#main {
padding: 100px 0;
}
/* quiz__wrap */
.quiz__wrap {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.quiz__wrap .quiz {
width: 500px;
background-color: #ffffff;
border: 8px ridge #cacaca;
}
.quiz__title {
background-color: #fff7ca;
border: 3px ridge #bab9b9;
border-bottom-width: 6px;
padding: 5px;
font-family: 'DungGeunMo';
font-size: 16px;
color: #3d3d3d;
text-align: center;
}
.quiz__question {
padding: 20px;
font-size: 24px;
font-family: 'suncheon';
font-weight: 300;
line-height: 1.5;
border-bottom: 6px ridge #cacaca;
}
.quiz__question em {
color: #125ca2;
}
.quiz__answer {
font-family: 'suncheon';
padding: 20px;
text-align: center;
font-size: 24px;
/* border-bottom: 6px ridge #cacaca; */
}
.quiz__answer .confirm {
background-color: #fff091;
border: 6px ridge #cacaca;
width: 100%;
font-family: 'DungGeunMo';
padding: 20px;
font-size: 10px 22px;
cursor: pointer;
transition: all 0.3s;
font-weight: bold;
}
.quiz__answer .confirm:hover{
background-color: #efdd75;
}
.quiz__answer .result {
background-color: #ffffff;
border: 6px groove #cacaca;
width: 100%;
font-family: 'suncheon';
padding: 10px 20px;
font-size: 22px;
}
.quiz__answer .input{
background-color: #ffffff;
border: 6px groove #cacaca;
width: 100%;
font-family: 'suncheon';
padding: 10px 20px;
font-size: 22px;
text-align: center;
margin-bottom: 10px;
}
.quiz__view {
border-bottom: 6px ridge#cacaca;
overflow: hidden;
}
.quiz__footer {
border-top: 6px ridge #cacaca;
padding: 20px;
font-family: 'suncheon';
background-color: #fffae4;
}
.quiz__footer::before {
content: "✔️Tip";
color: #ff5050;
font-weight: bold;
}
.quiz__desc {
padding-top: 5px;
}CSS 들여다보기
- 저번 퀴즈 효과와 비슷해서 dog wrap 위 쪽 코드들을 가져왔습니다.
- quiz__footer가 추가 되었는데 before라는 가상요소를 사용해서 아래 문제해설같은 박스르 만들어 줍니다.
- 필요한 css값들을 차례대로 추가주면 완성된 화면이 나옵니다.