퀴즈 객관식 확인하기

- Frederick Philips Brooks
Mythical Man-Month 저자

728x90

위에는 완성된 화면입니다.

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>퀴즈 이펙트03</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/quiz.css">
</head>
<body>
    <header id="header">
        <h1><a href="../javascript14.html">Quiz</a><em>객관식 확인하기</em></h1>
        <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>
        </ul>
    </header>
    <!-- //header -->
    
    <main id="main">
        <div class="quiz_wrap">

            <div class="quiz">
                <div class="quiz_header">
                    <h2 class="quiz_title"></h2>
                </div>
                <div class="quiz_main">
                    <div class="quiz_quection">
                    </div>
                    <div class="quiz_view">
                        <div class='dog_wrap'>
                            <div class="ture">정답입니다.</div>
                            <div class="false">틀렸습니다!</div>
                            <div class='card-container'>
                                <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>
                    </div>
                    <div class="quiz_choice">
                        <label for="choice1">
                            <input type="radio" id="choice1" value="1" name="choice">
                            <span></span>
                        </label>
                        <label for="choice2">
                            <input type="radio" id="choice2" value="2" name="choice">
                            <span></span>
                        </label>
                        <label for="choice3">
                            <input type="radio" id="choice3" value="3" name="choice">
                            <span></span>
                        </label>
                        <label for="choice4">
                            <input type="radio" id="choice4" value="4" name="choice">
                            <span></span>
                        </label>
                        
                    </div>
                    <div class="quiz_answer">
                        <button class="confirm">정답 확인 하기</button>
                    </div>
                </div>
                <div class="quiz_desc"></div>
            </div>
        </div>
    </main>
    <!-- //main -->
    
    <footer id="footer">
        <a href="mailto:ture403@gmail.com">ture403@gmail.com</a>
    </footer>
 </body>

CSS 코드입니다.

/* header */
#header {
    position: fixed;
    left: 0;
    top: 0;
    background-color: #262626;
    color: #fff;
    padding: 10px;
    margin-bottom: 100px;
    width: 100%;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
}
#header::before {
    content: "";
    border: 4px ridge #a3a3a3;
    position: absolute;
    left: 5px;
    top: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
}
#header h1 {
    font-size: 28px;
    padding: 5px 5px 5px 10px;
    font-family: 'DungGeunMo';
    position: relative;
    z-index: 10;
}
#header h1 a {
    color: #fff;
}
#header h1 em {
    font-size: 0.5em;
}
#header ul {
    padding: 5px;
}
#header li {
    display: inline;
    z-index: 10;
    position: relative;
}
#header li a {
    color: #fff;
    font-family: 'DungGeunMo';
    border: 1px dashed #fff;
    display: inline-block;
    padding: 5px;
}
#header li.active a,
#header li a:hover {
    background-color: #fff;
    color: #000;
}


/* footer */
#footer {
    position: fixed;
    left: 0;
    bottom: 0;
    background-color: #262626;
    width: 100%;
    text-align: center;
}
#footer a {
    color: #fff;
    padding: 20px;
    display: block;
    font-family: 'DungGeunMo';
    position: relative;
    z-index: 10;
}
#footer::before {
    content: "";
    border: 4px ridge #a3a3a3;
    position: absolute;
    left: 5px;
    top: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    
}

#main {
    padding: 100px 0;
}

/* quiz_wrap */
.quiz_wrap {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: flex-start;
}
.quiz_wrap .quiz {
    width: 500px;
    background-color: #fff;
    border: 8px ridge #ecb2b2;
    margin: 10px;
}
.quiz_title {
    background-color: #ecb2b2;
    border: 3px ridge #ecb2b2;
    border-bottom-width: 6px;
    padding: 5px;
    font-family: 'DungGeunMo';
    font-size: 16px;
    color: #3b3b3b;
    text-align: center;
}
.quiz_quection {
    padding: 20px;
    font-size: 24px;
    font-family: 'arial';
    line-height: 1.4;
    font-weight: bold;
    border-bottom: 6px ridge #ecb2b2;
}
.quiz_quection em {
    color: hotpink;
}
.quiz_answer {
    padding: 20px;
    font-size: 24px;
    font-family: 'arial';
    text-align: center;
    /* border-bottom: 6px ridge #cacaca; */
}
.quiz_answer .confirm {
    background-color: #ecb2b2;
    border: 6px ridge #ecb2b2;
    width: 100%;
    font-family: 'arial';
    padding: 10px 20px;
    font-size: 22px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    text-shadow: 2px 2px 0px rgba(212, 153, 153, 0.7);

}
.quiz_answer .confirm:hover{
    background-color: #c77676;
}
.quiz_answer .result {
    background-color: #fff;
    border: 6px ridge #ecb2b2;
    width: 100%;
    font-family: 'arial';
    padding: 10px 20px;
    font-size: 22px;
    /* display: none; */
}
.quiz_answer .input{
    background-color: #fff;
    border: 6px groove #ecb2b2;
    width: 100%;
    font-family: 'arial';
    padding: 10px 20px;
    font-size: 22px;
    text-align: center;
    margin-bottom: 10px;
}
.quiz_view {
    border-bottom: 6px ridge #ecb2b2;
    overflow: hidden;
}
.quiz_desc {
    border-top: 6px ridge #ecb2b2;
    padding: 20px;
    font-family: "arial";
    background-color: #f5f5f5;

}
.quiz_desc::before {
    content: "👍Tip ";
    color: hotpink;
    font-weight: bold;
}
.quiz_choice{
    border-bottom: 6px ridge #ecb2b2;
    padding: 20px;
}
.quiz_choice label {
    display: flex;
}
.quiz_choice label input {
    position: absolute;
    clip:rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: 1px;
    overflow: hidden;
}
.quiz_choice label span {
    font-size: 20px;
    line-height: 1.3;
    padding: 6px;
    display: flex;
    cursor: pointer;
    margin: 2px 0;
}

.quiz_choice label span::before{
    content: "";
    width: 26px;
    height: 26px;
    border-radius: 50%;
    margin-right: 15px;
    background: #fff;
    box-shadow: inset 0 0 0 4px #3b3b3b;
    transition: all 0.2s;
}
.quiz_choice label input:checked + span{
    background-color: #e27ed5;
}
.quiz_choice label input:checked + span::before{
    box-shadow: inset 0 0 0 8px #3b3b3b;
}
/* dog_wrap */

.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, 
.dog_wrap {
    transition: 0.2s ease-in;
    position: relative;
    }
.dog_wrap .ture {
    width: 120px;
    height: 120px;
    line-height: 120px;
    background-color: #F5534F;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    position: absolute;
    left: 70%;
    top: 100px;
    opacity: 0;
    z-index: 2;
}
.dog_wrap .false {
    width: 120px;
    height: 120px;
    line-height: 120px;
    background-color: #F5534F;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    position: absolute;
    right: 70%;
    top: 100px;
    opacity: 0;
    z-index: 2;
}
.dog_wrap.like .ture {
    opacity: 1;
    animation: wobble 0.6s;
}
.dog_wrap.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(-3deg);}
    60% {transform: translateX(10%) rotate(2deg);}
    75% {transform: translateX(-5%) rotate(-1deg);}
    100% {transform: translateX(0) rotate(0deg);}
}

.card-container {
    position: relative;
    width: 360px;
    height: 378px;
    margin: auto;
    padding-top: 125px;
    border-radius: 3%;
    z-index: 0;
}
.card-container::before,
.card-container::after {
    content: "";
    position: absolute;
    height: 100%;
    margin: auto;
    left: 0;
    right: 0;
    border-radius: 3%;
    z-index: -1;
}
.card-container::before {
    top: 3%;
    width: 93%;
    background: rgba(212, 153, 153, 0.7);
}
.card-container::after {
    top: 5.5%;
    width: 85%;
    background: rgba(182, 135, 135, 0.35);
}
.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;
}

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

@keyframes movetongue {
    100% {
        height: 27px;
    }
}

@keyframes movetail {
    0% {
        transform: rotate(37deg);
    }

    100% {
        transform: rotate(52deg);
    }
}

@keyframes cry {
    100% {
        visibility: visible;
    }
}

.like {
    background-color: #c746b6;
    transition: 0.3s;
}
.like .face::before {
    margin-top: 10px;
}

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

.like .eyes {
    top: 13%;
}

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

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

.like .nose {
    top: 18%;
}

.like .mouth {
    top: 16.5%;
}

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

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

.like .chin {
    top: 34%;
}

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

.dislike {
    background-color: #555;
}

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

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

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

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

.dislike .eyes {
    top: 38%;
}

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

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

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

.dislike .nose {
    top: 44%;
}

.dislike .mouth {
    top: 42%;
}

.dislike .chin {
    top: 52%;
}

.dislike .tail {
    transform: rotate(0);
}

JS 코드 입니다.

//선택자
const quizWrap =document.querySelector(".quiz_wrap");
const quizTitle =quizWrap.querySelectorAll(".quiz_title");  //시험 종목,시간
const quizNumer = quizWrap.querySelectorAll(".quiz_quection em"); //시험 번호
const quizQuection = quizWrap.querySelectorAll(".quiz_quection span"); //시험 문제
const quizAnswerConfirm = quizWrap.querySelectorAll(".quiz_answer .confirm"); //시험 정답 확인
const quizAnswerResult = quizWrap.querySelectorAll(".quiz_answer .result"); //시험 정답
const quizAnswerInput = quizWrap.querySelectorAll(".quiz_answer .input"); // 정답 박스
const quizDesc = quizWrap.querySelectorAll(".quiz_desc"); //문제 해설
const dogWrap = quizWrap.querySelectorAll(".dog_wrap");

//문제정보
const quizInfo = [
    {
        infoType : "정보처리 기능사",
        infoTime : "2011년도 4회",
        infoNumber : "1",
        infoQuection : "UNIX에서 현재 작업 디렉터리 경로를 화면에 출력하는 명령어는?",
        infoAnswer : "pwd",
        infoDesc : "pwd는 디렉토리의 절대경로를 표시합니다."
    },{
        infoType : "정보처리 기능사",
        infoTime : "2011년도 4회",
        infoNumber : "2",
        infoQuection : "윈도우 98에서 ‘시스템 도구’ 메뉴에 포함되지 않는 것은?",
        infoAnswer : "디스크 포맷",
        infoDesc : "디스크 공간늘림(DBLSPACE) 디스크 검사(SCANDISK) 디스크 조각 모음(DEFRAG) 디스크 정리 백업 등이 있어요"
    },{
        infoType : "정보처리 기능사",
        infoTime : "2011년도 4회",
        infoNumber : "3",
        infoQuection : "DOS 명령어 중 텍스트 파일의 내용을 출력하는 명령은?",
        infoAnswer : "TYPE",
        infoDesc : "DOS의 여러 명령어중 TYPE 명령어가 텍스트 파일의 내용을 출력하는 명령어 입니다."
    },
];

// 문제 출력

quizInfo.forEach(function(el,index){
    quizTitle[index].innerHTML = quizInfo[index].infoType +" "+ quizInfo[index].infoTime;
    quizNumer[index].textContent = quizInfo[index].infoNumber;
    quizQuection[index].textContent = quizInfo[index].infoQuection;
    quizAnswerResult[index].textContent = quizInfo[index].infoAnswer;
    quizDesc[index].textContent = quizInfo[index].infoDesc;
})

quizInfo.forEach(function(el,index){
    quizAnswerResult[index].style.display = "none";
    quizDesc[index].style.display = "none";
});

quizAnswerConfirm.forEach((btn,num)=>{
    btn.addEventListener("click", function(){
        //사용자 정답
        const userAnswer = quizAnswerInput[num].value.trim();
        quizAnswerInput[num].style.display = "none"; //input 숨김
        quizAnswerConfirm[num].style.display = "none"; //정답 확인 버튼 숨김
        quizAnswerResult[num].style.display = "block"; // 정답 화면 보이기
        quizDesc[num].style.display = "block"; //해설 보이기

        //사용자 정답 == 문제 정답
        if(userAnswer == quizInfo[num].infoAnswer){
            dogWrap[num].classList.add("like");
        }else {
            dogWrap[num].classList.add("dislike");
        }

    })
});

HTHL,CSS 는 전에 있던 것에 추가만 한것입니다.

자바스크립트에 대해 코드를 한번 써보겠습니다.

먼저 선택자를 불러옵니다. 필요한 요소를 변수에 담아서 저장합니다.

그리고 문제 정보를 배열을 변수에 저장했습니다.

그다음 각 요소에 배열 안에 있는 값을 해당 요소에 넣어 주었습니다. 넣어 줄떄 forEach문을 써서 넣어 주었습니다.

forEach문은 매개변수 첫번째는 element로 각 요소의 값 2번쨰는 index 값 3번쨰는 배열을 담아 내보내주는 함수입니다.

첫번쨰 forEach문을 통해서 infoType, infoTime, infoNumber, infoQuection, iinfoAnswer, infoDesc 값을 넣어 주었습니다.

두번쨰 forEach문은 결과값 그리고 해설을 숨겨 주었습니다.

정답확인버튼(quizAnswerConfirm)을 클릭할떄 발생하는 이벤트 함수를 써서 그안에 작업을 했습니다.

그안에 값을 가져와서 담아주는 변수를 지정했습니다. 변수 양옆에 공백을 지워주는 trim()을 썼습니다.

그리고 그안에 이제 if문을 써서 가져온값과 quizinfo 안에 있는 정답과 맞으면 웃는 강아지로 변하고 아니면 우는 강아지로 변하게 설정을 했습니다.

그리고 클릭했을때 또 입력박스, 정답확인 박스 를 숨겼습니다.

그리고 정답화면과,설명을 화면에 표출했습니다.

용어정리

데이터 저장 : 배열, 객체
데이터 불러오기 : for문 forEach()문
데이터 제어하기 : if문
querySelectorAll() :querySelectorAll() 메소드는 자바스크립트의 Document 객체의 메소드 중 하나로, HTML 문서 내에서 특정 CSS 선택자를 사용하여 요소를 선택하고 NodeList 객체를 반환합니다. 이 메소드는 일치하는 모든 요소를 반환합니다.
innerHTML : innerHTML은 자바스크립트에서 사용되는 속성 중 하나로, HTML 요소의 내용을 동적으로 변경할 수 있게 해줍니다.

완성된사진 경로

https://ture403.github.io/web2023/javascript/quiz/quizEffect03.html

완성된 코드 경로

https://github.com/ture403/web2023/blob/main/javascript/quiz/quizEffect03.html

june blog