퀴즈 이펙트

정답입니다 !

틀렸습니다 !

소스 보기

//선택자
//타입이 여러개 중에 선택해서 불러오기 -> querySelector"All" 여러개 있다고 알려주기
const quizType = document.querySelector(".quiz__type");                     //퀴즈 종류
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 : "웹디자인기능사 2016년 04회",
    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<quizSelect.length; i++ ){
    quizChoice[i].textContent = quizInfo[0].answerChoice[i];
}

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

//정답 확인
function answerQuiz(){
//사용자가 선택한 정답과 문제 정답 일치 비교
//사용자가 클릭한 input 박스를 가지고 와야함 > checked(.css)

//보기가 4개 반복문으로 확인
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";
        }
    }
}
}

//정답 클릭
quizConfirm.addEventListener("click", answerQuiz);

<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>
            <!-- 라디오 원 체크 네모/ name은 input 박스에만 적용 가능/ 블럭처리 위해 div 박스 안으로/ 다시 div를 라벨(인라인구조)로 바꿔서 누구껀지 표시 -->
        </div>

        <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: "NanumBarunpen";
line-height: 1.3;
}

.quiz__question .number {
padding: 0 10px;
border-radius: 10px;
background-color: #f69a06a0;
color: #fff;
font-size: 20px;
}

.quiz__question .ask {
display: inline;
}

.quiz__answer {
border-top: 6px ridge #cacaca;
padding: 10px;
background-color: #f5f5f5;
}

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

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

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

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

.quiz__view .true {
width: 120px;
height: 120px;
line-height: 120px;
background-color: #f69a06a0;
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: rgba(105, 105, 105, 0.152);
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__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: "NanumBarunpen";
padding: 10px 10px 10px 10px;
display: flex;
align-items: center;
width: 100%;
border-radius: 10px;
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 4px #f69a06a0;
transition: all 0.25s;
}
/* 친구일때는 + */
.quiz__selects label input:checked + span {
background-color: #f69a0621;
}
.quiz__selects label input:checked + span::before {
box-shadow: inset 0px 0px 0px 8px #f69a06a0;
}
.quiz__confirm {
width: 100%;
text-align: center;
}
.quiz__confirm .check {
border: 6px ridge #cacaca;
font-size: 22px;
line-height: 1.3;
padding: 13px 60px;
box-sizing: border-box;
text-align: center;
font-family: "NanumBarunpen";
cursor: pointer;
margin: 40px 0;
transition: background 0.3s;
}
.quiz__confirm .check:hover {
background: #f69a0668;
}

@keyframes wobble {

/* 0% 시작 ~ 100% 끝 */
0% {
    transform: translateX(0) rotate(0deg);
}

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