퀴즈 이펙트

정답입니다!

오답입니다!

소스 보기

JAVSCRIPT

HTML

CSS

//문제 정보
const quizInfo = [
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "3",
        answerAsk: "디자인에서 사용되는 용어 설명으로 잘못된 것은?",
        answerChoice: [
            "2차원의 화면이나 형식 위에, 3차원의 공간에 존재하는 형(shape)이나 형태(form)를 표시하는 것을 투시(perspective)라 한다.",
            "장소나 위치 또는 방위가 변화되는 과정이나 움직임을 시차(parallax)라고 한다.",
            "점진적 변화, 규칙적 단계에 의해 진행되는 변화과정을 그라데이션(gradation)이라고 한다.",
            "시각적 영역 안에서 어떤 형이나 형태가 다른 형이나 형태를 부분적으로 덮어 감추어지는 현상을 중첩이라 한다."
        ],
        answerResult: "장소나 위치 또는 방위가 변화되는 과정이나 움직임을 시차(parallax)라고 한다.",
        answerEx: "시차(parallax)란 어떤 물체를 서로 다른 두 지점에서 보았을 때 생기는 방향의 차이를 말합니다."
    },

    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "4",
        answerAsk: "병원 수술실의 색채계획으로 가장 적당한 배색은?",
        answerChoice: [
            "갈색계열",
            "무채색계열",
            "녹색계열",
            "보라색계열"
        ],
        answerResult: "녹색계열",
        answerEx: "병원 수술실의 색채계획으로 가장 적당한 배색은 '녹색계열'입니다."
    },

    {
        ...
    }
];

//선택자
const quizType = document.querySelector(".quiz__type")                  //유형
const quizQuestion = document.querySelector(".quiz__question");         //문제 번호, 질문
const quizSelects = document.querySelector(".quiz__selects");           //객관식 보기
const quizResult = document.querySelector(".quiz__answer .result")      //해설
const quizConfirm = document.querySelector(".quiz__answer .confirm")    //정답 확인버튼
const quizView = document.querySelector(".quiz__view")                 //강아지

let quizCount = 0;  // 변수의 시작값 설정
let quizScore = 0;

//문제 출력
const updateQuiz = (index) => {
    const questionTag = `
        <span class="number">${quizInfo[index].answerNum}. </span>
        <div class="ask">${quizInfo[index].answerAsk}</div>
    `;
    const choiceTag = `
        <label for="select1">
            <input type="radio" id="select1" class="select" name="select" value="1">
            <span class="choice">${quizInfo[index].answerChoice[0]}</span>
        </label>
        <label for="select2">
            <input type="radio" id="select2" class="select" name="select" value="2">
            <span class="choice">${quizInfo[index].answerChoice[1]}</span>
        </label>
        <label for="select3">
            <input type="radio" id="select3" class="select" name="select" value="3">
            <span class="choice">${quizInfo[index].answerChoice[2]}</span>
        </label>
        <label for="select4">
            <input type="radio" id="select4" class="select" name="select" value="4">
            <span class="choice">${quizInfo[index].answerChoice[3]}</span>
        </label>
    `;

    //문제 출력
    quizType.innerHTML = quizInfo[index].answerType;    //퀴즈 유형
    quizQuestion.innerHTML = questionTag;   //번호, 질문
    quizSelects.innerHTML = choiceTag;      //객관식 보기
    quizResult.innerHTML = quizInfo[index].answerEx;    //해설

    const quizChoice = quizSelects.querySelectorAll(".choice");

    for (let i = 0; i < quizChoice.length; i++) {
        quizChoice[i].setAttribute("onclick", "choiceSelected(this)");
    }

    // 문제, 해설 숨기기
    quizResult.style.display = "none";
    quizConfirm.style.display = "none";
}
updateQuiz(quizCount);

const choiceSelected = (answer) => {
    let userAnswer = answer.textContent;    //사용자가 체크한 정답
    let currentAnswer = quizInfo[quizCount].answerResult;   //문제 정답

    if (userAnswer == currentAnswer) {
        // console.log("정답");
        quizView.classList.add("like");
        quizScore++;
    } else {
        // console.log("오답");
        quizView.classList.add("dislike");
        quizResult.style.display = "block";
    }
    quizConfirm.style.display = "block";
}

//정답 확인 버튼

const answerQuiz = () => {
    if (quizInfo.length - 1 == quizCount) {
        quizConfirm.textContent = `총 ${quizInfo.length} 문제 중에 ${quizScore} 문제를 맞추었습니다.`;
    }       //마지막 문제 완료 후 정답 갯수 확인
    quizCount++;
    updateQuiz(quizCount);
    quizView.classList.remove("like", "dislike");
}
quizConfirm.addEventListener("click", answerQuiz)

<header id="header">
    <h1><a href="../javascript01.html">Quiz</a> <em>객관식(여러문제) 확인하기 : 슬라이드 형식</em></h1>
    <nav>
        <ul>
            <li><a href="quizEffect01.html">1</a></li>
            <li><a href="quizEffect02.html">2</a></li>
            <li><a href="quizEffect03.html">3</a></li>
            <li><a href="quizEffect04.html">4</a></li>
            <li><a href="quizEffect05.html">5</a></li>
            <li class="active"><a href="quizEffect06.html">6</a></li>
        </ul>
    </nav>
</header>
<!-- //header -->

<main id="main">
    <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="true">정답입니다!</div>
                <div class="false">오답입니다!</div>
                <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">
                <div class="quiz__selects">
                    <!-- <label for="select1">
                        <input type="radio" id="select1" class="select" name="select" value="1">
                        <span class="choice"></span>
                    </label>
                    <label for="select2">
                        <input type="radio" id="select2" class="select" name="select" value="2">
                        <span class="choice"></span>
                    </label>
                    <label for="select3">
                        <input type="radio" id="select3" class="select" name="select" value="3">
                        <span class="choice"></span>
                    </label>
                    <label for="select4">
                        <input type="radio" id="select4" class="select" name="select" value="4">
                        <span class="choice"></span>
                    </label> -->
                </div>
                <div class="result"></div>
                <button class="confirm">다음 문제 보기</button>
            </div>
        </div>
    </div>
</main>
<!-- //main -->

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;
}

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

.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: 'KyoboHandwriting2019';
    line-height: 1.3;
}

.quiz__question .number {
    color: #F7AA2B;
}

.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: 'KyoboHandwriting2019';
    cursor: pointer;
}

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

.quiz__answer .input {
    width: 100%;
    border: 6px ridge #cacaca;
    font-size: 22px;
    padding: 13px 20px;
    background-color: #fff;
    font-family: 'KyoboHandwriting2019';
    margin-bottom: 10px;
}

.quiz__view {
    background-color: #f5f5f5;
    font-family: 'KyoboHandwriting2019';
    position: relative;
    overflow: hidden;
}

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

.quiz__view .false {
    width: 120px;
    height: 120px;
    line-height: 120px;
    background-color: rgba(255, 0, 0, 0.795);
    border-radius: 50%;
    text-align: center;
    position: absolute;
    right: 70%;
    top: 100px;
    opacity: 0;
    color: #fff;
}

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

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

.quiz__selects {
    margin: 5px 0;
}

.quiz__selects label {
    display: flex;
}

.quiz__selects label input {
    position: absolute;
    left: -9999px;
}

.quiz__selects label span {
    font-size: 20px;
    line-height: 1.3;
    font-family: 'KyoboHandwriting2019';
    padding: 10px;
    display: flex;
    align-items: center;
    width: 100%;
    border-radius: 5px;
    cursor: pointer;
}

.quiz__selects label span::before {
    content: '';
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    margin-right: 15px;
    display: flex;
    flex-shrink: 0;
    box-shadow: inset 0px 0px 0px 2px #F7AA2B;
    transition: all 0.25s;
}

.quiz__selects label input:checked+span {
    background-color: #fccf86;
}

.quiz__selects label input:checked+span::before {
    box-shadow: inset 0px 0px 0px 10px #F7AA2B;
}

.quiz__confirm {
    width: 100%;
    text-align: center;
}

.quiz__confirm .ex{
    margin-top: 50px;
    font-size: 50px;
    font-weight: bold;
}

.quiz__confirm .check {
    font-size: 22px;
    line-height: 1.3;
    padding: 13px 60px;
    border: 6px ridge #cacaca;
    box-sizing: border-box;
    text-align: center;
    font-family: 'KyoboHandwriting2019';
    cursor: pointer;
    margin: 40px 0;
    transition: background 0.3s;
}

.quiz__confirm .check:hover{
    background: #f7a92be4;
}

@keyframes wooble {
    0% {
        transform: translateX(0) rotate(0deg);
        /* X축으로 0% 만큼 이동시킵니다, 0도 만큼 회전시킵니다. */
    }

    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);
    }
}