javascript/effect/quizEffect04.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>퀴즈 이펙트</title>

    <link rel="stylesheet" href="../assets/css/quiz.css">

    <link href="https://webfontworld.github.io/DungGeunMo/DungGeunMo.css" rel="stylesheet">
    <link href="https://webfontworld.github.io/Cafe24Dangdanghae/Cafe24Dangdanghae.css" rel="stylesheet">
    
</head>

<body>
    <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 class="active"><a href="quizEffect04.html">4</a></li>
                <li><a href="quizEffect05.html">5</a></li>
                <li><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"> <!--label은 인라인 구조이고 label의 for와 input id를 통해 연결시켜줌!-->
                            <input type="radio" id="select1" class="select" name="select" value="1"> <!--radio는 동그라미 checkbox는 네모/ name은 input박스여서 사용가능한 것/value는 보기의 이름값을 알려주기 위함-->
                            <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>
                    <button class="confirm">정답 확인하기</button>
                    <div class="result"></div>
                </div>
            </div>
        </div>
    </main>
    <!-- main -->

    <footer id="footer">
        <a href="mailto:noeyheyh9357@gmail.com">noeyheyh9357@gmail.com</a>

        <div class="window__wrap">
            <div class="window__btn">소스 보기</div>
                <div class="window__box">
                    <div class="title-bar">
                        <div class="minimize">
                            <div class="symbol"></div>
                            </div>
                        <div class="maximize">
                            <div class="symbol"></div>
                        </div>
                        <div class="close">
                            <div class="symbol"></div>
                        </div>
                        </div>
                        <div class="menu-bar">
                            <div class="active">
                                <em>javascript</em>
                            </div>
                            <div>
                                <em>Html</em>
                            </div>
                            <div>
                                <em>Css</em>
                            </div>
                        </div>
                        <div class="content-container">
                            <div class="content">
                                <div class="main">
                                    <div class="active">
<pre><code class="language-js">//선택자
const quizType = document.querySelector(".quiz_type");                   //퀴즈 종류 //다중 선택을 하려면 반드시 querySelectorAll로 해주어야함 
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 quizView = document.querySelector(".quiz_view");                  //강아지
const quizSelects = document.querySelector(".quiz_selects");            //객관식보기
const quizChoice = quizSelects.querySelectorAll(".choice");             //객관식 보기
const quizSelect= quizSelects.querySelectorAll(".select");              //객관식 보기
//데이터가 더 많아질 때

//문제정보
const quizInfo = [
    {
        answerType : "웹디자인 기능사 2013년 05회",
        answerNum : "1",
        answerAsk : "일반적으로 도구 개념으로 물건을 창조하는 디자인 분야는?",
        answerChoice : ["시각디자인", "제품디자인", "환경디자인", "공예디자인"],
        answerResult : "2",
        answerEx : "도구 개념으로 물건을 창조하는 디자인은 제품디자인에 속합니다."
    }
];
    
//문제 출력->실행문의 집합이 함수이므로 데이터가 많아질 시 자바스크립트에서는 함수로 블록화해주는게 편함!
function updateQuiz(){
        
    quizType.textContent = quizInfo[0].answerType;
    quizNumber.textContent = quizInfo[0].answerNum + ". ";
    quizAsk.textContent = quizInfo[0].answerAsk;
    quizResult.textContent = quizInfo[0].answerEx;
    
    //보기 출력
    for( let i = 0; i &lt; 4; i++ ){
        quizChoice[i].textContent = quizInfo[0].answerChoice[i];
    }
    
    //해설 숨기기
    quizResult.style.display = "none";
}
updateQuiz();

//정답 확인
function answerQuiz(){
    
    //사용자 선택한 정답 == 문제 정답
    //사용자가 클릭한 input --> checked(&lt;css)
    for( let i=0; i&lt;quizSelect.length; i++){
        if (quizSelect[i].checked == true){ //보기에 체크가 된 상태 //어디에 체크를 했는지 확인 후 정답 비교
            //체크된 번호 == 문제 번호
            if (quizSelect[i].value == quizInfo[0].answerResult){
                //alert("정답")
                quizView.classList.add("like")
            } else {
                //alert("오답")
                quizView.classList.add("dislike");
                quizResult.style.display = "block";
                quizConfirm.style.display = "none";
            }
        } else {
            // alert("정답을 체크하지 않았습니다.")
        }
    }
}
//정답 클릭
quizConfirm.addEventListener("click", answerQuiz);
</code></pre>
                                    </div>
                                    <div>
<pre><code class="language-html">&lt;main id="main"&gt;
    &lt;div class="quiz_wrap"&gt;
        &lt;div class="quiz"&gt;
            &lt;span class="quiz_type"&gt;&lt;/span&gt;
            &lt;h2 class="quiz_question"&gt;
                &lt;span class="number"&gt;&lt;/span&gt;
                &lt;div class="ask"&gt;&lt;/div&gt;
            &lt;/h2&gt;
            &lt;div class="quiz_view"&gt;
                &lt;div class="true"&gt;정답입니다!&lt;/div&gt;
                &lt;div class="false"&gt;틀렸습니다!&lt;/div&gt;
                &lt;div class="dog"&gt;
                    &lt;div class="head"&gt;
                        &lt;div class="ears"&gt;&lt;/div&gt;
                        &lt;div class="face"&gt;&lt;/div&gt;
                        &lt;div class="eyes"&gt;
                            &lt;div class="teardrop"&gt;&lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="nose"&gt;&lt;/div&gt;
                        &lt;div class="mouth"&gt;
                            &lt;div class="tongue"&gt;&lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="chin"&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="body"&gt;
                        &lt;div class="tail"&gt;&lt;/div&gt;
                        &lt;div class="legs"&gt;&lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="quiz_answer"&gt;
                &lt;div class="quiz_selects"&gt;
                    &lt;label for="select1"&gt; &lt;!--label은 인라인 구조이고 label의 for와 input id를 통해 연결시켜줌!--&gt;
                        &lt;input type="radio" id="select1" class="select" name="select" value="1"&gt; &lt;!--radio는 동그라미 checkbox는 네모/ name은 input박스여서 사용가능한 것/value는 보기의 이름값을 알려주기 위함--&gt;
                        &lt;span class="choice"&gt;&lt;/span&gt;
                    &lt;/label&gt;
                    &lt;label for="select2"&gt;
                        &lt;input type="radio" id="select2" class="select" name="select" value="2"&gt; 
                        &lt;span class="choice"&gt;&lt;/span&gt;
                    &lt;/label&gt;
                    &lt;label for="select3"&gt;
                        &lt;input type="radio" id="select3" class="select" name="select" value="3"&gt; 
                        &lt;span class="choice"&gt;&lt;/span&gt;
                    &lt;/label&gt;
                    &lt;label for="select4"&gt;
                        &lt;input type="radio" id="select4" class="select" name="select" value="4"&gt; 
                        &lt;span class="choice"&gt;&lt;/span&gt;
                    &lt;/label&gt;
                &lt;/div&gt;
                &lt;button class="confirm"&gt;정답 확인하기&lt;/button&gt;
                &lt;div class="result"&gt;&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/main&gt;
</code></pre>
                                    </div>
                                    <div>
<pre><code class="language-css">* {
    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;}
}
</code></pre>
                                </div>
                                </div>
                                <div class="scroll">
                                    <div class="start"></div>
                                    <div class="progress"></div>
                                    <div class="end"></div>
                                </div>
                            </div>
                            <div class="scroll -row">
                                <div class="start"></div>
                                <div class="progress"></div>
                                <div class="end"></div>
                            </div>
                        </div>
                    </div>
        </div>
            
    </footer>
    <!-- footer -->
    <script src="../assets/js/quiz_common.js"></script>
    <script>
        //선택자
        const quizType = document.querySelector(".quiz_type");                   //퀴즈 종류 //다중 선택을 하려면 반드시 querySelectorAll로 해주어야함 
        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 quizView = document.querySelector(".quiz_view");                  //강아지
        const quizSelects = document.querySelector(".quiz_selects");            //객관식보기
        const quizChoice = quizSelects.querySelectorAll(".choice");             //객관식 보기
        const quizSelect= quizSelects.querySelectorAll(".select");              //객관식 보기
        //데이터가 더 많아질 때

        //문제정보
        const quizInfo = [
            {
                answerType : "웹디자인 기능사 2013년 05회",
                answerNum : "1",
                answerAsk : "일반적으로 도구 개념으로 물건을 창조하는 디자인 분야는?",
                answerChoice : ["시각디자인", "제품디자인", "환경디자인", "공예디자인"],
                answerResult : "2",
                answerEx : "도구 개념으로 물건을 창조하는 디자인은 제품디자인에 속합니다."

            }
        ];
        
        //문제 출력->실행문의 집합이 함수이므로 데이터가 많아질 시 자바스크립트에서는 함수로 블록화해주는게 편함!
        function updateQuiz(){
            
            quizType.textContent = quizInfo[0].answerType;
            quizNumber.textContent = quizInfo[0].answerNum + ". ";
            quizAsk.textContent = quizInfo[0].answerAsk;
            quizResult.textContent = quizInfo[0].answerEx;
            
            //보기 출력
            for( let i = 0; i < 4; i++ ){
                quizChoice[i].textContent = quizInfo[0].answerChoice[i];
            }

            //해설 숨기기
            quizResult.style.display = "none";
        }
        updateQuiz();

        //정답 확인
        function answerQuiz(){
            //사용자 선택한 정답 == 문제 정답
            //사용자가 클릭한 input --> checked(<css)

            for( let i=0; i<quizSelect.length; i++){
                if (quizSelect[i].checked == true){ //보기에 체크가 된 상태 //어디에 체크를 했는지 확인 후 정답 비교
                    //체크된 번호 == 문제 번호
                    if (quizSelect[i].value == quizInfo[0].answerResult){
                        //alert("정답")
                        quizView.classList.add("like")
                    } else {
                        //alert("오답")
                        quizView.classList.add("dislike");
                        quizResult.style.display = "block";
                        quizConfirm.style.display = "none";
                    }
                } else {
                    // alert("정답을 체크하지 않았습니다.")
                }
            }
        }

        //정답 클릭
        quizConfirm.addEventListener("click", answerQuiz);
    </script>
</body>
</html>