움직이는 귀여운 강아지를 넣어 만든 퀴즈 두 번째 사이트

“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”

- Frederick Philips Brooks
Mythical Man-Month 저자

728x90

안녕하세요 o((>ω< ))o 오늘은 저번에 했던 작업을 토대로 조금 더 다듬어보고

문제 내용을 하나 더 추가해보도록 하겠습니다.
(저번 작업 link : https://xoouxa58.tistory.com/29)

정답을 입력한 완성 화면

코드

<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__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 -->

어제와 동일한 코드이지만 추가 작업을 해주도록 하겠습니다.

사용자가 정답을 적어야하기 때문에 정답을 적는 칸을 만들어줍니다.

quiz__answer 안에 input태그를 만들어 답을 입력하는 칸도 만들어줍니다.

또, 정답을 적고 확인했을 때, 해설을 확인할 수 있도록 quiz__footer 아래에

desc, 설명 칸을 만들어 해설을 넣어줄 영역을 지정해줍니다.

reset.css코드 입니다.

@import url('https://webfontworld.github.io/DungGeunMo/DungGeunMo.css');
@import url('https://webfontworld.github.io/daegu/DalseoHealing.css');



* {
    margin: 0;
    padding: 0;
}
*, *::before, *::after {
    box-sizing: border-box;
}
a {
    text-decoration: none;
    color: #ffffff;
}
h1,h2,h3,h4,h5,h6{
    font-weight: normal;
}
li,ul,ol {
    list-style: none;
}
img{
    vertical-align: top;
    width: 100%;
}
em {
    font-style: normal;
}
body {
    background:
        radial-gradient(#8cffb8 3px, transparent 4px),
        radial-gradient(#edffc4 3px, transparent 4px),
        linear-gradient(#fff 4px, transparent 0),
        linear-gradient(45deg, transparent 74px, transparent 75px, #edffc4 75px, #edffc4 76px, transparent 77px, transparent 109px),
        linear-gradient(-45deg, transparent 75px, transparent 76px, #edffc4 76px, #edffc4 77px, transparent 78px, transparent 109px),
        #fff;
    background-size: 109px 109px, 109px 109px, 100% 6px, 109px 109px, 109px 109px;
    background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
}

quiz css 코드입니다.


/* header */
#header {
    position: fixed;
    left: 0;
    top: 0;
    background-color: #ffd9d9;
    color: #fff;
    padding: 10px;
    width: 100%;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
}
#header::before {
    content: '';
    border: 4px ridge pink;
    position: absolute;
    left: 5px;
    top: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
}
#header h1{
    font-size: 28px;
    padding: 0px 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;
    width: 100%;
    background-color: #ffd9d9;
    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 pink;
    position: absolute;
    left: 5px;
    top: 5px;
    width: calc(100% - 16px);
    height: calc(100% - 18px);
}
#main {
    padding: 100px 0;
}
/* quiz__wrap */
.quiz__wrap {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.quiz__wrap .quiz{
    width: 500px;
    background-color: #f3ffda;
    border: 8px ridge #ff9494;

}
.quiz__header{}
.quiz__title{
    background-color: #ff6d6d;
    border: 3px ridge #ff4646;
    border-bottom-width: 6px;
    padding: 5px;
    font-family: 'DungGeunMo';
    font-size: 16px;
    color: #ffffff;
    text-align: center;
}
.quiz__main{}
.quiz__question {
    padding: 20px;
    font-size: 24px;
    font-family: 'DalseoHealing';
    font-weight: bold;
    line-height: 1.5;
    border-bottom: 6px ridge #71ffa5;
}
.quiz__question em {
    color : #ffd876
}
.quiz__answer {
    font-family: 'DalseoHealing';
    padding: 20px;
    text-align: center;
    font-size: 24px;
    /* border-bottom: 6px ridge #05e658; */
}
.quiz__answer .confirm {
    background-color: #98f1b3;
    border: 3px ridge #dcffa4;
    width: 100%;
    font-family: 'DalseoHealing';
    padding: 10px 20px;
    font-size: 22px;
    cursor: pointer;
    transition: all 0.3s;
    text-shadow: 1px 1px 0px #007d2a;
    font-weight: bold;
}
.quiz__answer .confirm:hover {
    background-color: #7fff7a;
}
.quiz__answer .result {
    background-color: #78ffa0;
    border: 3px ridge #dcffa4;
    width: 100%;
    font-family: 'DalseoHealing';
    padding: 10px 20px;
    font-size: 22px;
    /* display: none; */
}
.quiz__answer .input{
  background-color: #fff;
  border: 6px ridge #cacaca;
  width: 100%;
  font-family: 'DalseoHealing';
  padding: 10px 20px;
  font-size: 22px;
}
.quiz__answer .input{
  background-color: #fff;
  border: 6px groove #cacaca;
  width: 100%;
  font-family: 'DalseoHealing';
  padding: 10px 20px;
  font-size: 22px;
  margin-bottom: 10px;
}
.quiz__view {
    border-bottom: 6px ridge #fd8383;
    overflow: hidden;
}
.quiz__footer{
  border-top: 6px ridge #cacaca;
  padding: 20px;
  font-family: 'DalseoHealing';
  background-color: #f5f5f5;
}
.quiz__footer::before {
  content: "📍 Tip";
  color:rgb(255, 157, 157);
  font-weight: bold;
}
/* dog__wrap */
.dog .tail, 
.dog .chin, 
.dog .tongue::before, 
.dog .tongue::after, 
.dog .mouth, 
.dog .nose, 
.dog .teardrop, 
.dog .eyes, 
.dog .face::before, 
.dog .face::after, 
.dog .ears::before, 
.dog .ears::after, 
.dog__wrap {
    transition: 0.2s ease-in;
}
.card-container {
    position: relative;
    width: 360px;
    height: 378px;
    margin: auto;
    padding-top: 125px;
    border-radius: 3%;
    z-index: 0;
}
.card-container::before {
    top: 3%;
    width: 93%;
}
.card-container::after {
    top: 5.5%;
    width: 85%;
}
  
.dog .head,
.dog .body {
    position: relative;
    width: 115px;
}
.dog .head {
    height: 115px;
    border-radius: 50% 50% 0 0;
    margin: 0 auto;
}
.dog .ears {
    position: relative;
    top: -14%;
    width: 100%;
}
.dog .ears::before, .dog .ears::after {
  content: "";
  position: absolute;
  top: 0;
  width: 35px;
  height: 70px;
  background: #CB7A1D;
  border-top: 11px solid #F7AA2B;
  border-left: 7px solid #F7AA2B;
  border-right: 7px solid #F7AA2B;
}
.dog .ears::before {
  left: 0;
  border-radius: 50% 45% 0 0;
}
.dog .ears::after {
  right: 0;
  border-radius: 45% 50% 0 0;
}
.dog .face {
  position: absolute;
  background: #F7AA2B;
  width: 100%;
  height: 100%;
  border-radius: 50% 50% 0 0;
}
.dog .face::before, .dog .face::after {
  content: "";
  display: block;
  margin: auto;
  background: #FEFEFE;
}
.dog .face::before {
  width: 15px;
  height: 35px;
  margin-top: 24px;
  border-radius: 20px 20px 0 0;
}
.dog .face::after {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  width: 60px;
  height: 65px;
  border-radius: 45% 45% 0 0;
}
.dog .eyes {
  position: relative;
  top: 29%;
  text-align: center;
}
.dog .eyes::before, .dog .eyes::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 100%;
  background: #451d1c;
  margin: 0 14.5%;
}
.dog .teardrop {
  position: absolute;
  top: 125%;
  left: 19%;
  width: 6px;
  height: 6px;
  border-radius: 0 50% 50% 50%;
  transform: rotate(45deg);
  background: #FEFEFE;
  visibility: hidden;
}
.dog .nose {
  position: relative;
  top: 35%;
  width: 16px;
  height: 8px;
  border-radius: 35px 35px 65px 65px;
  background: #451d1c;
  margin: auto;
}
.dog .mouth {
  position: relative;
  top: 34.5%;
  width: 4px;
  height: 6px;
  margin: 0 auto;
  text-align: center;
  background: #451d1c;
}
.dog .mouth::before, .dog .mouth::after {
  content: "";
  position: absolute;
  top: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 4px solid #451d1c;
  border-left-color: transparent;
  border-top-color: transparent;
  z-index: 2;
}
.dog .mouth::before {
  transform: translateX(-89%) rotate(45deg);
}
.dog .mouth::after {
  transform: translateX(-2px) rotate(45deg);
}
.dog .tongue {
  position: relative;
  z-index: 1;
}
.dog .tongue::before, .dog .tongue::after {
  content: "";
  position: absolute;
}
.dog .tongue::before {
  top: 10px;
  left: -7px;
  width: 18px;
  height: 0;
  border-radius: 50%;
  background: #813c3b;
  z-index: -1;
}
.dog .tongue::after {
  top: 14px;
  left: -4px;
  width: 12px;
  height: 0;
  border-radius: 20px;
  background: #F5534F;
  z-index: 5;
}
.dog .chin {
  position: relative;
  top: 47.5%;
  margin: 0 auto;
  width: 12px;
  height: 12px;
  border-top: 10px solid #e8e7ec;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-radius: 2px;
  z-index: 0;
}
.dog .body {
  position: relative;
  height: 139px;
  margin: auto;
  z-index: 0;
}
.dog .body::before, .dog .body::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 100%;
  margin: auto;
  background: #F7AA2B;
}
.dog .body::after {
  top: -2px;
  bottom: -1px;
  width: 60px;
  background: #FEFEFE;
}
.dog .tail {
  position: absolute;
  left: -60%;
  bottom: 1px;
  background: #F7AA2B;
  width: 93px;
  height: 15px;
  transform: rotate(45deg);
  transform-origin: 100% 50%;
  border-radius: 25px 0 0 25px;
  z-index: -2;
}
.dog .legs {
  position: absolute;
  bottom: 0;
  left: -10%;
  width: 120%;
  height: 15%;
  background: #F7AA2B;
  border-radius: 10px 10px 0 0;
}
.dog .legs::before, .dog .legs::after {
  content: "";
  position: absolute;
  bottom: 1px;
  background: #CB7A1D;
  z-index: -1;
}
.dog .legs::before {
  left: -7.5%;
  width: 115%;
  height: 55%;
  border-radius: 5px 5px 0 0;
}
.dog .legs::after {
  left: -3.5%;
  width: 107%;
  height: 250%;
  border-radius: 20px 20px 35px 35px;
}
@keyframes movetongue {
  100% {
    height: 27px;
  }
}
@keyframes movetail {
  0% {
    transform: rotate(37deg);
  }
  100% {
    transform: rotate(52deg);
  }
}
@keyframes cry {
  100% {
    visibility: visible;
  }
}

.like {
  background: #ffc1aa;
}

.like .face::before {
  margin-top: 10px;
}

.like .face::after {
  height: 85px;
}

.like .eyes {
  top: 13%;
}

.like .eyes::before,
.like .eyes::after {
  width: 18px;
  height: 5px;
  margin: 0px 12.5%;
  transform: rotate(-37.5deg);
  border-radius: 20px;
}

.like .eyes::after {
  transform: rotate(37.5deg);
}

.like .nose {
  top: 18%;
}

.like .mouth {
  top: 16.5%;
}

.like .tongue::before {
  height: 12px;
}

.like .tongue::after {
  height: 24px;
          animation: movetongue 0.1s linear 0.35s infinite alternate forwards;
}

.like .chin {
  top: 34%;
}

.tail {
          animation: movetail 0.1s linear infinite alternate forwards;
}


.dislike {
  background: #cdcdf6;
}

.dislike .ears::before {
  transform: rotate(-50deg) translate(-7px, 2px);
}

.dislike .ears::after {
  transform: rotate(50deg) translate(7px, 2px);
}

.dislike .face::before {
  margin-top: 28px;
}

.dislike .face::after {
  height: 55px;
}

.dislike .eyes {
  top: 38%;
}

.dislike .eyes::before,
.dislike .eyes::after {
  width: 18px;
  height: 5px;
  margin: 0px 14.5%;
  transform: rotate(-37.5deg);
  border-radius: 20px;
}

.dislike .eyes::after {
  transform: rotate(37.5deg);
}

.dislike .teardrop {
          animation: cry 0.1s ease-in 0.25s forwards;
}

.dislike .nose {
  top: 44%;
}

.dislike .mouth {
  top: 42%;
}

.dislike .chin {
  top: 52%;
}

.dislike .tail {
  transform: rotate(0);
}

CSS 선택자

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 quizAnswerInput = quizWrap.querySelector(".quiz__answer .input");
const dogWrap = quizWrap.querySelector(".dog__wrap");
const quizFooter = quizWrap.querySelector(".quiz__footer");

새로 들어간 것은 해설인 quizDesc, quizFooter, 정답을 입력해주는 칸 quizAnswerInput을 추가해주었습니다.

문제 정보 입력

const infoType = "정보처리 기능사";
const infoTime = " 2011년 5회";
const infoNumber = "2";
const infoQeustion = "프리젠테이션에서 화면 전체를 전환하는 단위를 의미하는 것은?";
const infoAnswer = "슬라이드";
const infoDesc = "슬라이드는 프리젠테이션의 화면 전체를 말하고 개체는 화면을 구성하는 개개의 요소를 말한다.";

새로 해설이 추가되었으니 infoDesc를 통해 해설을 적어줍니다.

quizTitle.textContent = infoType;
quizTime.textContent = infoTime;
quizQuestionNum.textContent = infoNumber;
quizQuestion.textContent = infoQeustion;
quizDesc.textContent = infoDesc;
quizAnswerResult.textContent = infoAnswer;

.textContent를 이용해 문제와 답을 출력해줍니다. 전엔 innerText를 사용하였지만 오늘은 textContent를 사용하였습니다.

quizAnswerResult.style.display = "none";
quizFooter.style.display = "none";

style.display = "none";을 이용해 정답과 해설을 잠시 숨겨줍니다.

quizAnswerConfirm.addEventListener("click", function(){
    const userAnswer = quizAnswerInput.value.trim();
    quizAnswerConfirm.style.display = "none";   // 정답 확인 버튼 숨김
    quizAnswerInput.style.display = "none";     // 인풋 박스 숨김
    quizAnswerResult.style.display = "block";   // 정답 보이기
    quizFooter.style.display = "block";         // 해설 보이기

    if(infoAnswer == userAnswer){
        dogWrap.classList.add("like");
    } else {
        dogWrap.classList.add("dislike");
    }
});

이제 사용자가 값을 입력했을 때 정답인지 오답인지 판단해주기 위해

사용자가 클릭했을 때 함수 안 value라는 것을 이용해 결과를 출력해보겠습니다.

완성본 입니다.

정답인 "슬라이드" 를 적어주시면 웃고 있는 강아지가 나옵니다.

📍 모르는 언어 정리하기

value

자바스크립트에서 value(값)은 변수(variable)나 상수(constant)에 저장되는 데이터를 의미합니다.

변수는 값을 할당할 수 있는 메모리 공간이며, 상수는 값을 변경할 수 없는 변수입니다.

변수와 상수를 사용하여 값을 저장하고, 저장된 값을 이용하여 다양한 연산과 처리를 할 수 있습니다.

trim

자바스크립트에서 trim() 메소드는 문자열의 양 끝에 있는 공백(스페이스, 탭, 줄바꿈 등)을

제거한 새로운 문자열을 반환합니다.

trim() 메소드는 원본 문자열을 변경하지 않고, 새로운 문자열을 반환합니다.

따라서 trim() 메소드를 사용하여 문자열의 양 끝에 있는 공백을 제거해도 원본 문자열은 그대로 유지됩니다.

textcontent

자바스크립트에서 textContent 속성은 HTML 요소(element)의 모든 자식 노드(child node)를 포함한

텍스트 콘텐츠(text content)를 가져오거나 설정합니다.

textContent 속성은 HTML 요소의 자식 노드를 포함한 모든 텍스트 콘텐츠를 반환합니다.

따라서 textContent 속성을 사용하여 HTML 요소의 텍스트 콘텐츠를 가져올 때는, 자식 요소에 포함된

텍스트도 모두 가져올 수 있습니다.

✨ 오늘도 감사합니다.

'HTML' 카테고리의 다른 글

퀴즈 만들기 세번째 (14)	2023.03.14
내 스타일대로 만드는 이미지 유형 페이지 (16)	2023.03.12
움직이는 귀여운 강아지를 넣어 만든 퀴즈 사이트 (16)	2023.03.08
내 스타일대로 만드는 카드 유형 페이지 (16)	2023.03.07
섹션<section>과 관련된 태그 한 번에 정리 (14)	2023.02.22

xoouxa