퀴즈 이펙트

소스 보기

Javascript

HTML

//문제 정보
    const quizInfo = [
        {
            answerType : "웹디자인기능사 2012년 5회",
            answerNum : "1",
            answerAsk : "제품 디자인 과정 중 「완성 예상도」라고도 하며 실물처럼 충실하고 정확히 표현하는 것을 무엇이라고 하는가?",
            answerChoice : {
                1: "렌더링(RENDERING)",
                2: "드로잉(DRAWING)",
                3: "스케치(SKETCH)",
                4: "모델링(MODELING)"
            },
            answerResult : "1",
            answerEx : "드로잉 : 연필·펜·크레용 등으로 대상물의 윤곽만을 그리는 그 자체로서 독립된 그림

스케치 : 대상을 세부적으로 묘사하지 않고 빨리 그리는 것

모델링 : 모형을 만드는 일을 의미" 
        },
        {
            answerType : "웹디자인기능사 2012년 5회",
            answerNum : "2",
            answerAsk : "다음 중 주위색의 영향으로 오히려 인접색에 가깝게 느껴지는 현상을 의미하는 것은?",
            answerChoice : {
                1: "대비 현상",
                2: "동화 현상",
                3: "색의 수축성",
                4: "중량 현상"
            },
            answerResult : "2",
            answerEx : "대비현상 : 어떤 색이 다른 색의 영향으로 인하 여 실제와는 다른 색으로 변해 보이는 현상

색의 수축성 : 색의 면적이 실제 면적보다 작게 또는 크게 느껴지는 심리현상을 의미" 
        },
        .
        .
        .
        {
            answerType : "웹디자인기능사 2012년 5회",
            answerNum : "60",
            answerAsk : "디자인 구체화 단계에서 구상되어진 디자인을 구현하기 위해서 사용되는 프로그램과 그 역할이 잘못 설명된 것은?",
            answerChoice : {
                1: "VScode : HTML 코딩할 때 사용",
                2: "포토샵 : 이미지의 변형 및 아이콘 제작에 사용",
                3: "플래시 : 동영상 및 사운드 편집에만 사용",
                4: "케이크워크 : 사운드 편집 및 변환에 사용"
            },
            answerResult : "3",
            answerEx : "플래시: 벡터 도형 처리 기반의 애니메이션 제작용 소프트웨어"
        }
    ];
    
    const quizWrap = document.querySelector(".quiz__wrap");
    let quizScore = 0;

    const updateQuiz = () => {
        const exam = [];

        quizInfo.forEach((question, number) => {
            exam.push(`
                <div class="quiz">
                <span class="quiz__type">${quizInfo[number].answerType}</span>
                <h2 class="quiz__question">
                    <span class="number">${quizInfo[number].answerNum}</span>
                    <div class="ask">${quizInfo[number].answerAsk}</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${number}">
                            <input type="radio" id="select1${number}" class="select" name="select${number}" value="1">
                            <span class="choice">${quizInfo[number].answerChoice[1]}</span>
                        </label>
                        <label for="select2${number}">
                            <input type="radio" id="select2${number}" class="select" name="select${number}" value="2">
                            <span class="choice">${quizInfo[number].answerChoice[2]}</span>
                        </label>
                        <label for="select3${number}">
                            <input type="radio" id="select3${number}" class="select" name="select${number}" value="3">
                            <span class="choice">${quizInfo[number].answerChoice[3]}</span>
                        </label>
                        <label for="select4${number}">
                            <input type="radio" id="select4${number}" class="select" name="select${number}" value="4">
                            <span class="choice">${quizInfo[number].answerChoice[4]}</span>
                        </label>
                    </div>
                </div>
            </div>
            `);
            
        });
        
        exam.push(`
            <div class="quiz__confirm">
                <button class="check">정답 확인하기</button>
                <div class="ex"></div>
            </div>
        `);

        quizWrap.innerHTML = exam.join('');
    }
    updateQuiz();

    //정답 확인
    const answerQuiz = () => {
        const quizSelects = document.querySelectorAll(".quiz__selects");    //객관식 보기

        //사용자가 체크한 보기 == 문제 정답
        quizInfo.forEach((question, number) => {
            const userSelector = `input[name=select${number}]:checked`; //사용자가 체크한 것
            const quizSelectsWrap = quizSelects[number];
            const userAnswer = (quizSelectsWrap.querySelector(userSelector) || {}).value;
            const quizView = document.querySelectorAll(".quiz__view");  //강아지

            //console.log(userAnswer);

            if(userAnswer == question.answerResult){
                //console.log("정답");
                quizView[number].classList.add("like");
                quizScore++;
            } else {
                //console.log("오답");
                quizView[number].classList.add("dislike");
                const divBox = document.createElement("div");
                quizSelectsWrap.appendChild(divBox).innerHTML = `<p class="result">${question.answerEx}</p>`;
            }
        });

        //전체 문제 수
        //console.log(quizInfo.length);

        //내가 맞힌 수
        //console.log(quizScore);

        if (36 <= quizScore){
            document.querySelector(".ex").textContent = "전체" + quizInfo.length + "개 중 " + quizScore + "개 정답으로, 합격입니다."
        } else {
            document.querySelector(".ex").textContent = "전체" + quizInfo.length + "개 중 " + quizScore + "개 정답으로, 불합격입니다."
        }
    }
    
    //정답 클릭
    document.querySelector(".quiz__confirm .check").addEventListener("click", answerQuiz);

<div class="quiz__wrap"></div>