퀴즈 이펙트

정답입니다!

틀렸습니다!

소스 보기

// 문제 정보
const quizInfo = [
    {
        answerType: "웹디자인 기능사 2013년 05회",
        answerNum: "1",
        answerAsk: "디자인 형태의 개념에서 조화(harmony)를 이루는 법칙과 거리가 먼 것은?",
        answerChoice: [
            "균형",
            "대비",
            "통일",
            "색상"
        ],
        answerResult: "색상",
        answerEx: "조화를 이루는 법칙은 균형, 대비, 통일, 유사, 균일, 강약, 변화가 있습니다."
    },
    {
        answerType: "웹디자인 기능사 2013년 05회",
        answerNum: "2",
        answerAsk: "NCS 표색계에 대한 설명으로 옳은 것은?",
        answerChoice: [
            "색상환은 노랑(Y), 빨강(R), 파랑(B), 초록(G)으로 구분되어있다.",
            "기본 6색 중 흰색과 검정은 포함되지 않는다.",
            "20% 흰색도와 30%의 유채색도를 표시하고, 90%는 노랑색도를 지닌 백색이다.",
            "색지각 양의 합은 100이며, 이것은 명도, 채도, 색상의 합이다."
        ],
        answerResult: "색상환은 노랑(Y), 빨강(R), 파랑(B), 초록(G)으로 구분되어있다.",
        answerEx: "NCS표색계는 RED, BLUE, YELLOW, GREEN의 명도값인 WHITE, BLACK을 합해 총 6가지 기초단위를 가지고 표기하는 방식입니다. 20% 검정색도와 유채색도 30%이며 검은색 정도, 흰색성, 색채성의 합이 항상100이 됩니다."
    },
    {
        answerType: "웹디자인 기능사 2013년 05회",
        answerNum: "3",
        answerAsk: "디자인의 요소 중 “형”에 대한 설명으로 옳지 않은 것은?",
        answerChoice: [
            "한 개의 점은 공간의 위치를 가리킨다.",
            "점이 확대되면 면으로 이동된다.",
            "점의 운동에 의해서 선이 만들어 진다.",
            "이동하는 점의 자취가 입체를 이룬다."
        ],
        answerResult: "이동하는 점의 자취가 입체를 이룬다.",
        answerEx: "이동하는 점의 자취가 입체를 이루는 것은 구면이라고 하며 선이 이동한 자취는 면이라고 합니다."
    },
    {
        answerType: "웹디자인 기능사 2013년 05회",
        answerNum: "4",
        answerAsk: "우리나라의 교육부에 고시된 기본 색명은 몇 색상인가?",
        answerChoice: [
            "5",
            "10",
            "15",
            "20"
        ],
        answerResult: "20",
        answerEx: "먼셀 색체계라고 하며 현재 우리나라의 공업 규격에서 색의 삼속성에 의한 표기 방법으로 제정되었고, 교육용 20색상환으로 채택된 색체계입니다."
    },
    {
        answerType: "웹디자인 기능사 2013년 05회",
        answerNum: "5",
        answerAsk: "일반적으로 도구 개념으로 물건을 창조하는 디자인 분야는?",
        answerChoice: [
            "시각디자인 ",
            "제품디자인",
            "환경디자인",
            "공예디자인"
        ],
        answerResult: "제품디자인",
        answerEx: "도구 개념으로 물건을 창조하는 디자인은 제품디자인에 속합니다."
    },

];
    
const quizQuestion = document.querySelector(".quiz_question")   
const quizSelects = document.querySelector(".quiz_selects")
const quizType = document.querySelector(".quiz_type")
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) => {
    //alert(answer.textContent);
    let userAnswer = answer.textContent;                    //사용자가 체크한 정답
    let currentAnswer = quizInfo[quizCount].answerResult;   //문제의 정답[index못 들어감]
    if(userAnswer == currentAnswer){
        console.log("정답");
        quizScore++;
        quizView.classList.add("like");
    } 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);

<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">다음 문제로! Next Level 🏃🏻‍♀️</button>
            </div>
        </div>
    </div>
</main>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing:border-box;
}
a {
    text-decoration: none;
}
body {
    background-color: #f6f6f6;
    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;
    /*flex썼을 때 무언가와 사이에 공간을 두겠다라는 것*/
    align-items: center;
    padding: 10px;
    position: relative;
    z-index: 10;
}
#header::before {
    content: "";
    border: 4px ridge #a3a3a3;
    position: absolute;
    /*기준 되는 것에는 relative줘야함*/
    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;
}

/* dog */
.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 {
    transition: 0.2s ease-in;
}
.dog {
    padding-top: 50px;
}
.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: #451D1C;
    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;
    animation: movetail 0.1s linear infinite alternate forwards;
}
.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;
}
.like .dog .face::before {
    margin-top: 10px;
}
.like .dog .face::after{
    height: 85px;
}
.like .dog .eyes {
    top: 13%;
}
.like .dog .eyes::before,
.like .dog .eyes::after {
    width: 18px;
    height: 5px;
    margin: 0px 12.5%;
    transform: rotate(-37.5deg);
    border-radius: 20px;
}
.like .dog .eyes::after {
    transform: rotate(37.5deg);
}
.like .dog .nose {
    top: 18%;
}
.like .dog .mouth {
    top: 16.5%;
}
.like .dog .tongue::before {
    height: 12px;
}
.like .dog .tongue::after {
    height: 24px;
    animation: movetongue 0.1s linear 0.35s infinite alternate forwards;
}
.like .dog .chin {
    top: 34%;
}
.like .dog .tail {
    animation: movetail 0.1s linear infinite alternate forwards;
}
.dislike .dog .ears::before {
    transform: rotate(-50deg) translate(-7px, 2px);
}
.dislike .dog .ears::after {
    transform: rotate(50deg) translate(7px, 2px);
}
.dislike .dog .face::before {
    margin-top: 28px;
}
.dislike .dog .face::after {
    height: 55px;
}
.dislike .dog .eyes {
    top: 38%;
}
.dislike .dog .eyes::before,
.dislike .dog .eyes::after {
    width: 18px;
    height: 5px;
    margin: 0px 14.5%;
    transform: rotate(-37.5deg);
    border-radius: 20px;
}
.dislike .dog .eyes::after {
    transform: rotate(37.5deg);
}
.dislike .dog .teardrop {
    animation: cry 0.1s ease-in 0.25s forwards;
}
.dislike .dog .nose {
    top: 44%;
}
.dislike .dog .mouth {
    top: 42%;
}
.dislike .dog .chin {
    top: 52%;
}
.dislike .dog .tail {
    transform: rotate(0);
    animation: none;
}
@keyframes movetongue {
    100% {height: 27px;}
}
@keyframes movetail {
    0% {transform: rotate(37deg);}
    100% {transform: rotate(52deg);}
}
@keyframes cry {
    100% {visibility: visible;}
}