- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형
퀴즈 이펙트 02 번
결과 화면 입니다.
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="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_quection">
<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:ture403@gmail.com">ture403@gmail.com</a>
</footer>
<!-- //footer -->
</body>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 #a3a3a3;
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';
position: relative;
z-index: 10;
}
#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';
position: relative;
z-index: 10;
}
#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: #fff;
border: 8px ridge #ecb2b2;
}
.quiz_title {
background-color: #ecb2b2;
border: 3px ridge #ecb2b2;
border-bottom-width: 6px;
padding: 5px;
font-family: 'DungGeunMo';
font-size: 16px;
color: #3b3b3b;
text-align: center;
}
.quiz_quection {
padding: 20px;
font-size: 24px;
font-family: 'arial';
line-height: 1.4;
font-weight: bold;
border-bottom: 6px ridge #ecb2b2;
}
.quiz_quection em {
color: hotpink;
}
.quiz_answer {
padding: 20px;
font-size: 24px;
font-family: 'arial';
text-align: center;
/* border-bottom: 6px ridge #cacaca; */
}
.quiz_answer .confirm {
background-color: #ecb2b2;
border: 6px ridge #ecb2b2;
width: 100%;
font-family: 'arial';
padding: 10px 20px;
font-size: 22px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s;
text-shadow: 2px 2px 0px rgba(212, 153, 153, 0.7);
}
.quiz_answer .confirm:hover{
background-color: #c77676;
}
.quiz_answer .result {
background-color: #fff;
border: 6px ridge #ecb2b2;
width: 100%;
font-family: 'arial';
padding: 10px 20px;
font-size: 22px;
/* display: none; */
}
.quiz_answer .input{
background-color: #fff;
border: 6px groove #ecb2b2;
width: 100%;
font-family: 'arial';
padding: 10px 20px;
font-size: 22px;
text-align: center;
margin-bottom: 10px;
}
.quiz_view {
border-bottom: 6px ridge #ecb2b2;
overflow: hidden;
}
.quiz_footer {
border-top: 6px ridge #ecb2b2;
padding: 20px;
font-family: "arial";
background-color: #f5f5f5;
}
.quiz_footer::before {
content: "👍Tip";
color: hotpink;
font-weight: bold;
}
.quiz_desc {
padding-top: 5px;
}자바스크립트 코드 입니다.
//선택자
const quizWrap =document.querySelector(".quiz_wrap");
const quizTitle =quizWrap.querySelector(".quiz_title span");
const quizTime =quizWrap.querySelector(".quiz_title em");
const quizNumer = quizWrap.querySelector(".quiz_quection em");
const quizQuection = quizWrap.querySelector(".quiz_quection span");
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 infoQuection = "프레젠테이션에서 화면 전체를 전환하는 단위를 의미하는것은?";
const infoAnswer = "슬라이드";
const infoDesc = "슬라이드는 프리젠테이션의 화면 전체를 말하고 개체는 화면을 구성하는 개개의 요소를 말한다.";
//문제출력
quizTitle.textContent = infoType;
quizTime.textContent = infoTime;
quizNumer.textContent = infoNumber;
quizQuection.textContent = infoQuection;
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"; //input 숨김
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");
}
});자바스크립트 공부하기
선택자 영역에서는 html에 있는 각 태그들의 class를 참조해서 불러와서 변수에 담아 주고 있습니다.
doument.querySelector 는 dom에서 해당하는 클래스를 찾아주는 역할을 합니다.
quizWrap.querySelector 은 quizWrap클래승 안에 있는 자식 클래스를 찾아주는 역할을 합니다.
문제 정보 에서는
변수로 하나씩 값을 넣어 주었습니다.
문제 출력
textContent 라는 메서드를 사용해서 html에 표출해 줍니다.
quizTitle.textContent = infotype 의 코드는 quizTitle 클래스에 있는 태그에 infotype 의 내용을 넣어 주는 것입니다.
이러한 식으로 데이터를 표출해 주었습니다.
style.속성 = "값" 은 css 스타일을 표현할 수 있습니다.
quizAnswerResult.style.display = "none"; 의 코드는 quizAnswerResult 변수안에 있는 클래스에 css스타일 display를 none 안보이게 처리를 했습니다.
그리고 이벤트 발생할수 있는 함수 addEventListener를 활용해서 코드를 써 보았습니다.
addEventListener("click") 클릭 이벤트를 통해서 기능을 구현했습니다.
지역변수 userAnswer = quizAnswerInput를 만들어서 거기에 정답을 입력해주는 박스의 클래스를 불러왔습니다.
userAnswer = quizAnswerInput.value를 써서 값을 가져올수 있습니다.
userAnswer = quizAnswerInput.value.trim()은 trim()함수를 써서 앞뒤에 공백을 제거 했습니다.
그리고 if문을 써서 가져온 값(userAnswer)과 정답(infoAnswer) 같으면 정답이면 강아지 화면이 웃는걸로 정답이 아니면 슬퍼하는 걸로 바꾸게 했습니다.