자바스크립트 활용편2 - 퀴즈이펙트 만들어보기

퀴즈 프로그램

웹디자인기능사 자격증을 준비하면서 퀴즈가 나오는 프로그램를 구현하였습니다.

자바스크립트-주관식

2번 문제입니다. 주관식으로 구성하였습니다.
빈칸에 알맞은 답을 입력하면 강아지얼굴이 웃으면서 정답입니다! 표시가 뜨도록 구성하였고
답이 틀리면 오답입니다! 표시가 뜨고 강아지 얼굴이 슬퍼지도록 하였습니다.

JS

//선택자
const quizType = document.querySelector(".quiz__type"); //퀴즈종류
const quizNumber = document.querySelector(".quiz__question .number"); //퀴즈번호
const quizAsk = document.querySelector(".quiz__question .ask"); //퀴즈 질문
const quizConfirm = document.querySelector(".quiz__answer .confirm") //정답확인버튼
const quizResult = document.querySelector(".quiz__answer .result") // 정답 결과
const quizInput = document.querySelector(".quiz__answer .input") // 사용자 정답
const quizView = document.querySelector(" .quiz__view")  //강아지 //뷰어로 바꾸어서 정답과 오답박스를 출력한다.


//문제 정보
const answerType = "웹디자인기능사";
const answerNum = "2";
const answerAsk = "기업의 새로운 이념 구축에 필요한 이미지와 커뮤니케이션 시스템을 의도적, 계획적으로 만들어내는 기업이미지통합 전략은 무엇인가요?"
let answerResult = "CIP"

//문제출력
quizType.innerText = answerType;
quizNumber.innerText = answerNum + ". ";
quizAsk.innerText = answerAsk;
quizResult.textContent = "정답은 :" +  answerResult + "입니다.";

//정답숨기기
quizResult.style.display = "none";

//정답 확인
quizConfirm.addEventListener("click", () => {      // 정답버튼을 클릭했을 때// 화살표함수를 사용해서 메서드를 만듬 
    quizInput.style.display = "none";
    quizResult.style.display = "block";
    quizConfirm.style.display = "none";
    
    //사용자 정답
    const userWord = quizInput.value.toLowerCase().trim(); // toLowerCase 소문자를 인식시켜준다./ trim빈칸을 인식해준다.
    answerResult = answerResult.toLowerCase().trim();


    // console.log(userWord)
    // console.log(answerResult)

    //사용자 정답 == 문제정답
    if (userWord == answerResult) {
        //정답
        quizView.classList.add("like");
        
        alert("정답입니다.")
        
    } else {
        //오답
        quizView.classList.add("dislike");
        alert("오답입니다.")
    }
});

HTML

 

<div class="quiz__wrap">
        <div class="quiz">
            <span class="quiz__type"></span>
            <h2 class="quiz__question">
                <span class="number"></span>
                <div class="ask">
                </div>
            </h2>
            <div class="quiz__view">
                <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 class="quiz__answer">
                <button class="confirm">정답 확인하기</button>  //버튼
                <div class="result"></div>
            </div>
        </div>
    </div>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

body {
    background-color: #f6f6f6;
    background-image:
        linear-gradient(90deg, #cdcccc 0px, #cdcccc 1px, transparent 1px, transparent 99px, transparent 100px),
        linear-gradient(#cdcccc 0px, #cdcccc 1px, transparent 1px, transparent 99px, transparent 100px),
        linear-gradient(#e0e0e0 0px, #e0e0e0 1px, transparent 1px, transparent 99px, transparent 100px),
        linear-gradient(90deg, #e0e0e0 0px, #e0e0e0 1px, transparent 1px, transparent 99px, transparent 100px),
        linear-gradient(transparent 0px, transparent 5px, #f6f6f6 5px, #f6f6f6 95px, transparent 95px, transparent 100px),
        linear-gradient(90deg, #e0e0e0 0px, #e0e0e0 1px, transparent 1px, transparent 99px, #e0e0e0 99px, #e0e0e0 100px),
        linear-gradient(90deg, transparent 0px, transparent 5px, #f6f6f6 5px, #f6f6f6 95px, transparent 95px, transparent 100px),
        linear-gradient(transparent 0px, transparent 1px, #f6f6f6 1px, #f6f6f6 99px, transparent 99px, transparent 100px),
        linear-gradient(#cdcccc, #cdcccc);
    background-size: 100px 100%, 100% 100px, 100% 10px, 10px 100%, 100% 100px, 100px 100%, 100px 100%, 100px 100px, 100px 100px;
}

#header {
    background: #262626;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    position: relative;
    z-index: 10;
}

#header::before {
    content: "";
    border: 4px ridge #a3a3a3;
    position: absolute;
    left: 5px;
    top: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    box-sizing: border-box;
    z-index: -1;
}

#header h1 {
    padding: 3px 3px 6px 10px;
    font-family: "DungGeunMo";
    font-size: 30px;
}
#header h1 a {
    color: #fff;
}
#header h1 em {
    font-size: 16px;
    font-style: normal;
}

@media (max-width: 600px) {
    #header h1 em {
        display: none;
    }
}

#header nav {
    padding-right: 10px;
}

#header nav li {
    display: inline;
}

#header nav li a {
    color: #fff;
    padding: 0 10px;
    border: 1px dashed #fff;
    font-family: "DungGeunMo";
}

#header nav li.active a {
    color: #000;
    background: #fff;
}

#footer {
    background: #fff;
    text-align: center;
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 150px;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 10000;
}

#footer a {
    color: #000;
    font-family: "DungGeunMo";
}

#footer a:hover {
    text-decoration: underline;
}

/* quiz__wrap */
.quiz__wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    margin-bottom: 150px;
}

.quiz {
    max-width: 500px;
    width: 100%;
    background-color: #fff;
    border: 8px ridge #cacaca;
    margin: 10px;
}

.quiz__type {
    background-color: #cacaca;
    text-align: center;
    display: block;
    font-size: 16px;
    border: 3px ridge #cacaca;
    color: #3b3b3b;
    font-family: "DungGeunMo";
    padding: 4px;
}

.quiz__question {
    border-top: 6px ridge #cacaca;
    border-bottom: 6px ridge #cacaca;
    padding: 20px;
    font-family: "DalseoHealing";
    line-height: 1.3;
}

.quiz__question .number {
    color: rgb(245, 32, 32)
}

.quiz__question .ask {
    display: inline;
}

.quiz__answer {
    border-top: 6px ridge #cacaca;
    padding: 10px;
    background-color: #f5f5f5;
}

.quiz__answer .confirm {
    border: 6px ridge #cacaca;
    width: 100%;
    font-size: 22px;
    padding: 13px 20px;
    background-color: #d6d6d6;
    font-family: "DalseoHealing";
    cursor: pointer;
}

.quiz__answer .result {
    width: 100%;
    font-size: 22px;
    padding: 13px 20px;
    border: 6px ridge #cacaca;
    box-sizing: border-box;
    text-align: center;
    font-family: "DalseoHealing";
}

.quiz__answer .input {
    width: 100%;
    border: 6px ridge #cacaca;
    font-size: 22px;
    padding: 13px 20px;
    background-color: #fff;
    font-family: "DalseoHealing";

    margin-bottom: 10px;
}

.quiz__view {
    background-color: #f5f5f5;
    font-family: "DalseoHealing";
    position: relative;
    /* position태그의 사용법이 궁금함 */
    overflow: hidden;
}

.quiz__view .true {
    width: 120px;
    height: 120px;
    line-height: 120px;
    background-color: rgb(9, 32, 206);
    color: #fff;
    border-radius: 50%;
    text-align: center;
    position: absolute;
    left: 70%;
    top: 100px;
    opacity: 0;
}

.quiz__view .false {
    width: 120px;
    height: 120px;
    line-height: 120px;
    background-color: rgb(191, 16, 16);
    border-radius: 50%;
    text-align: center;
    position: absolute;
    right: 70%;
    top: 100px;
    opacity: 0;
    /*투명도*/
}

.quiz__view.like .true {
    opacity: 1;
    animation: wobble 0.6s;
}

.quiz__view.dislike .false {
    opacity: 1;
    animation: wobble 0.6s;
}

@keyframes wobble {
    0%   {transform: translateX(0) rotate(0deg);}
    15%  {transform: translateX(-25%) rotate(-5deg);}
    30%  {transform: translateX(20%)  rotate(3deg)}
    45%  {transform: translateX(-15%) rotate(-3deg);}
    60%  {transform: translateX(10%)  rotate(2deg)}
    75%  {transform: translateX(-5%)  rotate(-1deg)}
    100% {transform: translateX(0) rotate(0deg)}
}

결과

원본 소스 보기