“ 우리는 프로그래머 3대 미덕을 잘 알고 있다.
– 게으름, 괴팍함, 그리고 자만심. ”- Larry Wall
Perl 언어의 창시자
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값들을 차례대로 추가주면 완성된 화면이 나옵니다.