퀴즈 이펙트

웹디자인기능사 필기 (2016년 1회 기출문제)

1.
VRML을 만들 수 있는 저작도구가 아닌 것은?

정답입니다!

틀렸습니다!

웹디자인기능사 필기 (2016년 1회 기출문제)

2.
다음 HTML 태그 중 성격이 다른 태그는?

정답입니다!

틀렸습니다!

웹디자인기능사 필기 (2016년 1회 기출문제)

3.
웹브라우저의 기능으로 옳지 않은 것은?

정답입니다!

틀렸습니다!

웹디자인기능사 필기 (2016년 1회 기출문제)

4.
서로 근접해 있는 색들의 영향으로 인하여 닮은 색으로 변해 보이는 현상은 ?

정답입니다!

틀렸습니다!

fkdldhs8484@gmail.com

소스 보기

<div class="quiz__wrap">
    <div class="quiz">
        <span class="quiz__type"></span>
        <h2 class="quiz__question">
            <span class="number"></span>
            <div class="ask">
        </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">
            <input type="text" class="input" placeholder="정답을 적어주세요!">
            <button class="confirm">정답확인하기</button>
            <div class="Result"></div>
        </div>
    </div>
</div>

/* 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: "Cafe24Dangdanghae";
        line-height: 1.3;
    }
    
    .quiz__question .number {
        color: rgb(160, 86, 86);
    }
    
    .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;
        background-color: #d6d6d6;
        font-family: "Cafe24Dangdanghae";
        cursor: pointer;
        padding: 13px 20px;
    }
    
    .quiz__answer .result {
        width: 100%;
        padding: 13px 20px;
        font-size: 22px;
        line-height: 1.3;
        box-sizing: border-box;
        text-align: center;
        font-family: "Cafe24Dangdanghae";
        border: 6px ridge #cacaca;
    }
    
    .quiz__answer .input {
        width: 100%;
        border: 6px ridge #cacaca;
        font-size: 22px;
        padding: 13px 20px;
        background-color: #fff;
        font-family: "Cafe24Dangdanghae";
        margin-bottom: 10px;
    }
    
    .quiz__view {
        background-color: #f5f5f5;
        font-family: "Cafe24Dangdanghae";
        position: relative;
        overflow: hidden;
    }
    
    .quiz__view .true {
        width: 120px;
        height: 120px;
        line-height: 120px;
        background-color: rgb(160, 86, 86);
        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: #fff;
        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;
    }

 //선택자 (quiz 문제가 여러개면 querySelector뒤에 All을 붙여야한다.)
const quizType = document.querySelectorAll(".quiz__type");   //퀴즈종류
const quizNumber = document.querySelectorAll(".quiz__question .number"); //퀴즈번호
const quizAsk = document.querySelectorAll(".quiz__question .ask"); //퀴즈 질문
const quizConfirm = document.querySelectorAll(".quiz__answer .confirm"); //정답확인버튼
const quizResult = document.querySelectorAll(".quiz__answer .Result"); //정답결과
const quizinput = document.querySelectorAll(".quiz__answer .input"); //사용자 정답
const quizview = document.querySelectorAll(".quiz__view"); //강아지

// 문제정보
const quizInfo = [
    {
        answerType: "웹디자인기능사 필기 (2016년 1회 기출문제) ",
        answerNum: "1",
        answerAsk: "VRML을 만들 수 있는 저작도구가 아닌 것은?",
        answerResult: "cosmoplayer"
    },
    {
        answerType: "웹디자인기능사 필기 (2016년 1회 기출문제) ",
        answerNum: "2",
        answerAsk: "다음 HTML 태그 중 성격이 다른 태그는?",
        answerResult: ""
    },
    {
        answerType: "웹디자인기능사 필기 (2016년 1회 기출문제) ",
        answerNum: "3",
        answerAsk: "웹브라우저의 기능으로 옳지 않은 것은?",
        answerResult: "사진합성"
    },
    {
        answerType: "웹디자인기능사 필기 (2016년 1회 기출문제) ",
        answerNum: "4",
        answerAsk: "서로 근접해 있는 색들의 영향으로 인하여 닮은 색으로 변해 보이는 현상은 ?",
        answerResult: "동화현상"
    },
]
// for (let i=0; i {
    quizType[i].textContent = quizInfo[i].answerType;
    quizNumber[i].textContent = quizInfo[i].answerNum + ". ";
    quizAsk[i].textContent = quizInfo[i].answerAsk;
    quizResult[i].textContent = quizInfo[i].answerResult;
})
for(let i=0; i {
    quizResult[i].style.display = "none";
});
quizConfirm.forEach((btn, num) => {
    btn.addEventListener("click", () => {
        
        const userWord = quizinput[num].value;
        
        if(userWord == quizInfo[num].answerResult){
            //정답
            quizview[num].classList.add("like");
            quizConfirm[num].style.display = "none";
        }else{
            // 오답
            quizview[num].classList.add("dislike");
            quizConfirm[num].style.display = "none";
            quizResult[num].style.display = "block"; //틀리면 정답이 나옴
            quizinput[num].style.display = "none" //
        }
    })
});

1. VRML을 만들 수 있는 저작도구가 아닌 것은?

2. 다음 HTML 태그 중 성격이 다른 태그는?

3. 웹브라우저의 기능으로 옳지 않은 것은?

4. 서로 근접해 있는 색들의 영향으로 인하여 닮은 색으로 변해 보이는 현상은 ?

1.
VRML을 만들 수 있는 저작도구가 아닌 것은?

2.
다음 HTML 태그 중 성격이 다른 태그는?

3.
웹브라우저의 기능으로 옳지 않은 것은?

4.
서로 근접해 있는 색들의 영향으로 인하여 닮은 색으로 변해 보이는 현상은 ?