퀴즈 이펙트

웹디자인기능사 기출문제 2014년 07월 20일(4회)

1.
물리적인 빛이 우리의 눈에서 색채로 지각되어 범위의 파장 한계 내에 있는 스펙트럼을 의미하는 것은 무엇인가요?

정답입니다!

틀렸습니다!

웹디자인기능사 기출문제 2014년 07월 20일(4회)

2.
따뜻한 색채는 차가운 색채와 함께 있을 때 더욱 따뜻하게 느껴지고, 차가운 색채도 따뜻한 색채와 함께 있을 때 더욱 호소력이 강해지는 색의 대비는 무엇인가요?

정답입니다!

틀렸습니다!

웹디자인기능사 기출문제 2014년 07월 20일(4회)

3.
선(Line) 표시에서 면으로 변화하는 상태를 자연스럽게 조작할 수 있는 질감 묘사 모델링으로 복잡한 자연경관이나 불규칙한 성질을 가진 것들을 표현할 수 있게 된 모델은 무엇인가요?

정답입니다!

틀렸습니다!

웹디자인기능사 기출문제 2014년 07월 20일(4회)

4.
변화되는 여러 개의 장면을 연속적으로 나타내어 움직이는 것처럼 표현하는 기술은 무엇인가요?

정답입니다!

틀렸습니다!

소스보기

Javascript

HTML

CSS

//선택자
const quizType = document.querySelectorAll(".quiz__type");                 //퀴즈 종류
const quizNum = document.querySelectorAll(".quiz__question .number");      //퀴즈 번호
const quizAsk = document.querySelectorAll(".quiz__question .ask");         //퀴즈 질문
const quizConfirm = document.querySelectorAll(".quiz__answer .confirm");   //퀴즈 확인 버튼
const quizInput = document.querySelectorAll(".quiz__answer .input")         //사용자 정답
const quizResult = document.querySelectorAll(".quiz__answer .result");     //퀴즈 결과
const quizView = document.querySelectorAll(".quiz__view")                  //강아지
//문제 정보

const quizInfo = [
    {
        answerType: "웹디자인기능사 기출문제 2014년 07월 20일(4회)",
        answerNum: 1 + ". ",
        answerAsk: "물리적인 빛이 우리의 눈에서 색채로 지각되어 범위의 파장 한계 내에 있는 스펙트럼을 의미하는 것은 무엇인가요?",
        answerResult: "가시광선"
    },
    {
        answerType: "웹디자인기능사 기출문제 2014년 07월 20일(4회)",
        answerNum: 2 + ". ",
        answerAsk: "따뜻한 색채는 차가운 색채와 함께 있을 때 더욱 따뜻하게 느껴지고, 차가운 색채도 따뜻한 색채와 함께 있을 때 더욱 호소력이 강해지는 색의 대비는 무엇인가요?",
        answerResult: "한난대비"
    },
    {
        answerType: "웹디자인기능사 기출문제 2014년 07월 20일(4회)",
        answerNum: 3 + ". ",
        answerAsk: "선(Line) 표시에서 면으로 변화하는 상태를 자연스럽게 조작할 수 있는 질감 묘사 모델링으로 복잡한 자연경관이나 불규칙한 성질을 가진 것들을 표현할 수 있게 된 모델은 무엇인가요?",
        answerResult: "프랙탈 모델"
    },
    {
        answerType: "웹디자인기능사 기출문제 2014년 07월 20일(4회)",
        answerNum: 4 + ". ",
        answerAsk: "변화되는 여러 개의 장면을 연속적으로 나타내어 움직이는 것처럼 표현하는 기술은 무엇인가요?",
        answerResult: "애니메이션"
    }
]
    
quizInfo.forEach((_, i) => {
    quizType[i].textContent = quizInfo[i].answerType;
    quizNum[i].textContent = quizInfo[i].answerNum;
    quizAsk[i].textContent = quizInfo[i].answerAsk;
    quizResult[i].textContent = quizInfo[i].answerResult;
});


quizInfo.forEach((_, i) => quizResult[i].style.display = "none");



quizConfirm.forEach( (btn, num) => {
    btn.addEventListener("click", () => {
        //사용자 정답
        const userWord = quizInput[num].value.toLowerCase().replace(/ /g, "");
        let result = quizInfo[num].answerResult.toLowerCase().replace(/ /g, "");
        //console.log(userWord)
        if(userWord == result) {
            quizView[num].classList.add("like");
            btn.style.display = "none";
        } else {
            quizView[num].classList.add("dislike");
            btn.style.display = "none";
            quizResult[num].style.display = "block"; 
            quizInput[num].style.display = "none"; 
        }
    });
} );

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

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

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

.quiz__type {
    background-color: #b7c3d8;
    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: #dc496f;
}

.quiz__question .ask {
    display: inline;
    color: var(--black);
}

.quiz__answer {
    border-top: 6px ridge #cacaca;
    padding: 10px;
    background-color: #f5f5f5;
}
.quiz__answer .input {
    border: 6px ridge #cacaca;
    width: 100%;
    font-size: 22px;
    padding: 13px 20px;
    margin-bottom: 10px;
    background-color: #fff;
    font-family: "Cafe24Dangdanghae";
    box-sizing: border-box;
}

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

.quiz__confirm {
    width: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    font-family: "Cafe24Danggdanghae";
}
.quiz__confirm .check {
    font-size: 22px;
    line-height: 1.3;
    padding: 13px 60px;
    border: 6px ridge #cacaca;
    margin: 40px 0;
    transition: background 0.3s;
}
.quiz__confirm .check:hover {
    background-color: #f7a92be4;
}
.quiz__confirm .ex {
    width: 400px;
    overflow-wrap: break-word;
    display: none;
    font-size: 20px;
    line-height: 1.3;
    padding: 13px 60px;
    border: 6px ridge #cacaca;
    font-family: "Cafe24Danggdanghae";
    margin: 40px 0;
    background-color: #f7a92be4;
}

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

.quiz__selects {
    max-width: 5px 0;;
    
}
.quiz__selects label{
    display: flex;
}

.quiz__selects label input {
    position: absolute;
    left: -9999px;
}
.quiz__selects label span, .choice__result{
    font-size: 20px;
    line-height: 1.3;
    font-family: "Cafe24Dangdanghae";
    padding: 10px 30px 10px 20px;
    display: flex;
    align-items: center;
    width: 100%;
    border-radius: 5px;
}
.choice__result {
    overflow-wrap: break-word;
    width: 100%;
    display: inline-block;
}


.quiz__selects label span::before {
    content: '';
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #fff;
    display: flex;
    flex-shrink: 0;
    box-shadow: inset 0px 0px 0px 3px #62261E;
    transition:  all 0.25s;
    margin-right: 15px;
}
.quiz__selects label input:checked + span{
    background-color: #62261e58;
}
.quiz__selects label input:checked + span::before {
    content: '';
    box-shadow: inset 0px 0px 0px 15px #62261E;
}

.quiz__view {
    background-color: #f5f5f5;
    position: relative;
    overflow: hidden;
}
.quiz__view .true {
    width: 120px;
    height: 120px;
    background-color: #a74d38;
    border-radius: 50%;
    text-align: center;
    line-height: 120px;
    position: absolute;
    left: 70%;
    top: 100px;
    color: #fff;
    opacity: 0;
    font-family: "Cafe24Dangdanghae";
}
.quiz__view .false {
    width: 120px;
    height: 120px;
    background-color: #4f5983;
    border-radius: 50%;
    text-align: center;
    line-height: 120px;
    position: absolute;
    right: 70%;
    top: 100px;
    color: #fff;
    opacity: 0;
    font-family: "Cafe24Dangdanghae";
}
.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(-2deg);}
    60%  {transform: translatex(10%) rotate(1deg);}
    75%  {transform: translatex(-5%) rotate(-1deg);}
    100% {transform: translatex(0) rotate(0deg);}
}