정답입니다!
틀렸습니니다!
source view
JAVASCRIPT
HTML
CSS 
const quizInfo = [
    {
        answerType: "웹디자인기능사 2012년 01회",
        answerNum: "1",
        answerAsk: "“Redesign”에 대한 설명으로 옳은 것은?",
        answerChoice: [
            "제품의 원상태를 재생한는 작업이다.",
            "기존상품의 개선안을 찾아서 새로운 디자인을 개발하는 작업이다.",
            "새로운 제품을 위한 신제품을 개발하는 작업이다.",
            "실제 제품생산에 들어가기 전에 샘플을 디자인하는 작업이다.",
        ],
        answerResult: "기존상품의 개선안을 찾아서 새로운 디자인을 개발하는 작업이다.",
        answerEx: "Redesign”는 기존상품의 개선안을 찾아서 새로운 디자인을 개발하는 작업이다.",
    },
    {
        answerType: "웹디자인기능사 2012년 01회",
        answerNum: "2",
        answerAsk: "착시에 대한 설명으로 옳은 것은?",
        answerChoice: [
            "눈에 의한 생리적 작용에 따라 형태나 색채 등이 실제와 다르게 지각되는 것을 말한다.",
            "각 부분 사이에 강한 힘과 약한 힘이 규칙적으로 연속될 때 생기는 것을 말한다.",
            "시각상 힘의 안정을 주면 보는 사람에게 안정감을 주고 명쾌한 감정을 느끼게 하는 것을 말한다.",
            "부분과 전체 사이에 디자인 요소들이 잘 어울려서 균형을 유지하는 상태를 느끼게 하는 것을 말한다.",
        ],
        answerResult: "눈에 의한 생리적 작용에 따라 형태나 색채 등이 실제와 다르게 지각되는 것을 말한다.",
        answerEx: "착시는 눈에 의한 생리적 작용에 따라 형태나 색채 등이 실제와 다르게 지각됩니다.",
    },
    {
        answerType: "웹디자인기능사 2012년 01회",
        answerNum: "3",
        answerAsk: "제과점 홈페이지를 제작할 때 식욕을 돋우는 색채 계획과 가장 거리가 먼 것은?",
        answerChoice: ["녹색", "주황", "노랑", "빨강"],
        answerResult: "녹색",
        answerEx: "녹색은 식욕을 돋우는 색체 계획가 거리가 멀다.",
    },
    {
        answerType: "웹디자인기능사 2012년 01회",
        answerNum: "4",
        answerAsk: "주전자, 냉장고, 자동차를 디자인하는 디자인 영역은?",
        answerChoice: ["패션디자인", "시각디자인", "노랑환경디자인", "제품디자인"],
        answerResult: "제품디자인",
        answerEx: "모두 제품에 속하므로 제품 디자인이다.",
    },
    {
        answerType: "웹디자인기능사 2012년 01회",
        answerNum: "5",
        answerAsk: "레터링(Lettering)에 대한 설명으로 틀린 것은?",
        answerChoice: [
            "글자체, 글자 크기, 글자 사이, 여백 등을 조절하여 읽기에 편하도록 구성하는 표현기술이다.",
            "넓은 뜻으로 글자 디자인, 글자 표현 등의 글자 자체를 의미한다.",
            "어떤 디자인을 위한 특정한 목적을 가지는 글자를 묘사하는 것을 말한다",
            "글자라는 소재를 사용하여 어떤 의도를 표현하고 전달하려는 것이다.",
        ],
        answerResult: "글자체, 글자 크기, 글자 사이, 여백 등을 조절하여 읽기에 편하도록 구성하는 표현기술이다.",
        answerEx: "레터링(Lettering)은 글자체, 글자 크기, 글자 사이, 여백 등을 조절하여 읽기에 편하도록 구성하는 표현기술이다.",
    },
];

    const quizQuestion = document.querySelector(".quiz__question");
    const quizSelects = document.querySelector(".quiz__selects");
    const quizType = document.querySelector(".quiz__type");
    const quizResult = document.querySelector(".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>
    `;
    const typeTag = `
        <span class="quiz__type">${quizInfo[index].answerType}</span>
    `;

    //문제 출력
    quizQuestion.innerHTML = questionTag;
    quizSelects.innerHTML = choiceTag;
    quizType.innerHTML = typeTag;
    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; // 문제 정답

    if (userAnswer == currentAnswer) {
        console.log("정답");
        quizView.classList.add("like");
        quizScore++;
    } 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">다음 문제 보기</button>
            </div>
        </div>
    </div>
</main>

body {
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;
/* 콘텐츠 양쪽 정렬 */
align-items: center;
padding: 10px;
position: relative;
z-index: 10;
}

#header::before {
content: '';
border: 4px ridge #a3a3a3;
position: absolute;
/* 기준점 */
left: 5px;
top: 5px;
width: calc(100% - 10px);
height: calc(100% - 10px);
box-sizing: border-box;
z-index: -1;
}

#header h1 {
font-family: "DungGeunMo";
padding: 3px 3px 5px 10px;
font-size: 30px;
color: rgb(255, 149, 0);
}

#header h1 em {
font-size: 16px;
font-style: normal;
color: #fff;
}
#header h1 a {
color: rgb(255, 149, 0);
}

@media (max-width:600px) {
#header h1 em {
    display: none;
}
}

#header nav {
padding-right: 10px;
}

#header nav li {
display: inline;
}

#header nav li a {
font-family: "DungGeunMo";
color: #fff;
padding: 0 10px;
border: 1px dashed #fff;
}

#header nav li.active a {
color: rgb(117, 57, 0);
background: rgb(255, 149, 0);
}

#footer {
background: #fff;
text-align: center;
padding: 20px;
width: 100%;
box-sizing: border-box;
position: fixed;
left: 0;
bottom: 0;
z-index: 10000;
}

#footer a {
color: #000;
font-family: "DungGeunMo";
}

#footer a:hover {
text-decoration: underline;
}

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

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

.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 {
font-family: 'PyeongChang';
border-top: 6px ridge #cacaca;
border-bottom: 6px ridge #cacaca;
padding: 20px;
line-height: 1.3;
}

.quiz__question .number {
color: rgb(255, 149, 0);
}

.quiz__question .ask {
display: inline;
}

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

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

.quiz__answer .result {
font-family: 'PyeongChang';
border: 6px ridge #cacaca;
width: 100%;
font-size: 22px;
padding: 13px 20px;
box-sizing: border-box;
text-align: center;
display: none;
}

.quiz__view {
background-color: #f5f5f5;
}


/* 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;
}

*:before,
*:after {
box-sizing: border-box;
}

.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 {
z-index: 1;
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;
}

.dog.like .face::before {
margin-top: 10px;
}

.dog.like .face::after {
height: 85px;
}

.dog.like .eyes {
top: 13%;
}

.dog.like .eyes::before,
.dog.like .eyes::after {
width: 18px;
height: 5px;
margin: 0px 12.5%;
transform: rotate(-37.5deg);
border-radius: 20px;
}

.dog.like .eyes::after {
transform: rotate(37.5deg);
}

.dog.like .nose {
top: 18%;
}

.dog.like .mouth {
top: 16.5%;
}

.dog.like .tongue::before {
height: 12px;
}

.dog.like .tongue::after {
height: 24px;
animation: movetongue 0.1s linear 0.35s infinite alternate forwards;
}

.dog.like .chin {
top: 34%;
}

.dog.like .tail {
animation: movetail 0.1s linear infinite alternate forwards;
}

.dog.dislike .ears::before {
transform: rotate(-50deg) translate(-7px, 2px);
}

.dog.dislike .ears::after {
transform: rotate(50deg) translate(7px, 2px);
}

.dog.dislike .face::before {
margin-top: 28px;
}

.dog.dislike .face::after {
height: 55px;
}

.dog.dislike .eyes {
top: 38%;
}

.dog.dislike .eyes::before,
.dog.dislike .eyes::after {
width: 18px;
height: 5px;
margin: 0px 14.5%;
transform: rotate(-37.5deg);
border-radius: 20px;
}

.dog.dislike .eyes::after {
transform: rotate(37.5deg);
}

.dog.dislike .teardrop {
animation: cry 0.1s ease-in 0.25s forwards;
}

.dog.dislike .nose {
top: 44%;
}

.dog.dislike .mouth {
top: 42%;
}

.dog.dislike .chin {
top: 52%;
}

.dog.dislike .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;
}
}