[QUIZ] 퀴즈 만들기05 : 객관식 60문제

퀴즈 객관식 유형 : 60문제

이번 시간에는 자바스크립트를 통해 문제 텍스트들을 직접 해당 란에 넣어서 제작해봅시다!
그 뒤 조건문을 통해 정답 갯수와 문제의 총 갯수를 구하는 식을 만들어 봅시다.

---

! 미리 보기 !

원본 소스 보기

원본 페이지 보기

---

#1. 퀴즈 인포 (문제 모음) 만들기

데이터 저장 타입인 배열안 객체를 통해 각각의 퀴즈 문제를 키와 값으로 데이터화 시켜 저장해줍니다.

const quizInfo = [
    {
        answerType : "웹디자인기능사 2015년 01회",
        answerNum : "1",
        answerAsk : "웹 디자인에 대한 설명으로 거리가 먼 것은?",
        answerChoice : {
            1: "웹 페이지를 디자인하고 제작하는 것을 의미한다.",
            2: "웹 디자인은 개인용 홈페이지 이외에 기업용 등 다양하다.",
            3: "웹 디자인은 Web과 Design이라는 두 가지 개념이 결합된 것이다.",
            4: "기업, 단체, 행사의 특징과 성격에 맞는 시각적 상징물을 말한다.",
        },
        answerResult : "4",
        answerEx : "기업을 상징하는 것은 CI이다.",
    },
    {
        answerType : "웹디자인기능사 2015년 01회",
        answerNum : "2",
        answerAsk : "디자인의 심미성에 대한 설명으로 맞는 것은?",
        answerChoice : {
            1: "아름다움을 느끼는 미적 의식이며 주관적일 수 있다.",
            2: "감성적인 부분으로 모든 사람에게 동일하게 나타난다.",
            3: "합리적이며 객관적인 미적 활동이다.",
            4: "국가, 민족, 관습, 시대와 관계없이 동일하게 나타난다.",
        },
        answerResult : "1",
        answerEx : "심미성 : 형태와 색채조화를 이루어 '아름다움'의성징을 만들어내는 것 대중형의 조형성이라고도 말하며, 시대적인 미의 기준, 사회적인 개성에 따라 변화된다.",
    },
    {
        answerType : "웹디자인기능사 2015년 01회",
        answerNum : "3",
        answerAsk : "동시 대비에 해당하지 않는 것은?",
        answerChoice : {
            1: "색상 대비",
            2: "명도 대비",
            3: "보색 대비",
            4: "한난 대비",
        },
        answerResult : "4",
        answerEx : "서로 가까이 놓여진 두개 이상의 색을 동시에 볼 때 일어나는 색채대비를 말한다. 동시대비는 색채의 3속성들의 차이에 따른 지각변화에 따라서 명도대비, 색상대비, 채도대비, 보색대비로 구분된다. 심리에 관한 색용어. 서로 반대되거나 대단히 틀리는 감각, 감정 등이 동시에 비교하면, 그 한쪽 또는 양쪽의 특성이 한층 명백해 지는 일. 예를들면, 똑같은 회색의 원(圓)을 흰종이와 검은 종이 위에 놓고 볼 때 검은종이 위에서는 희게 보이고, 흰종이 위에서는 검게 보이는 것 등이 동시적 대비이다.",
    }, .........
    //위와 같은 방법으로 60문제를 쭉 나열해줍니다.

---

#2. push()와 join()을 통해 퀴즈 문자열 넣기

데이터를 실행해 줄 함수를 만든 뒤 push()와 문자열을 작성 할 ``(백틱), ${} 그리고 join('')을 이용하여 배열 안에 문자열을 넣어 줍시다!
이 때 push로 가져 올 것은 html로 작성한 코드이기 때문에 기존에 html로 작업했던 코드들은 주석처리 하거나 삭제해줍니다!

const updateQuiz = () => {
const exam = []; //문자열을 넣을 배열을 exam 상수에 저장해줍니다.

    quizInfo.forEach((question, number) => {
        exam.push(`
            <div class="quiz">
                <span class="quiz__type">${question.answerType}</span>
                <h2 class="quiz__question">
                    <span class="number">${question.answerNum}. </span>
                    <div class="ask">${question.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">${question.answerChoice[1]}</span>
                        </label>

                        <label for="select2${number}">
                            <input type="radio" id="select2${number}" class="select" name="select${number}" value="2">
                            <span class="choice">${question.answerChoice[2]}</span>
                        </label>
                        
                        <label for="select3${number}">
                            <input type="radio" id="select3${number}" class="select" name="select${number}" value="3">
                            <span class="choice">${question.answerChoice[3]}</span>
                        </label>
                        
                        <label for="select4${number}">
                            <input type="radio" id="select4${number}" class="select" name="select${number}" value="4">
                            <span class="choice">${question.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();

---

#3. 함수 안에 반복문과 조건문을 작성하여 정답 확인하기
+ 문제 갯수와 맞힌 갯수 확인하기

익명 화살표 함수와 forEach문, if문을 통해 사용자가 체크한 값과 정답 값을 비교하고 처리하는 식을 만들어봅시다.

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


    //사용자가 체크한 보기와 문제 정답이 같은지 확인하기 (사용자가 체크한 보기 == 문제 정답)
    quizInfo.forEach((question, number) => {
        const userSelector = `input[name=select${number}]:checked`; //사용자가 체크한 것
        const quizSelectsWrap = quizSelects[number];                //문제 번호  : number(index)가 0일 땐 첫 번째 문제, 1이면 두 번째 문제라는 것을 quizSelectsWrap으로 설정한 것 입니다.
        const userAnswer = (quizSelectsWrap.querySelector(userSelector) || {}).value; //정답 체크를 하지 않은 경우를 생각하여 or을 이용해 빈 공백도 답처리가 될 수 있도록 한다. (사용자 체크 찾기)
        const quizView = document.querySelectorAll(".quiz__view");  //강아지

        if(userAnswer == question.answerResult){
            console.log("정답")
            quizView[number].classList.add("like");
            quizScore++; //정답이 맞을 때 마다 Score 하나씩 올리기
        } else {
            console.log("오답")
            quizView[number].classList.add("dislike");
            const divBox = document.createElement("div");
            const divBox2 = document.createElement("div");
            quizSelectsWrap.appendChild(divBox).innerHTML = `
${question.answerEx}
`
            quizSelectsWrap.appendChild(divBox2).innerHTML = `
정답은 ${question.answerResult} 입니다.
`
        }
    });

    //전체 문제수와 사용자가 맞힌 갯수 확인하기
    let scoreSet = Math.floor(quizScore * 100 / quizInfo.length); //Math.floor : 소숫점을 없애준다. | 맞힌 개수 나누기 퀴즈 총 갯수 x 100

    if(quizScore >= 60){ //맞힌 개수가 60점 이상인 경우 합격 아닌 경우 불합격
        document.querySelector(".quiz__confirm .ex").innerHTML = `당신은 ${quizInfo.length} 문제 중 ${quizScore}을 맞추셨습니다. ! 합격 !`
    } else {
        document.querySelector(".quiz__confirm .ex").innerHTML = `당신은 ${quizInfo.length} 문제 중 ${quizScore}을 맞추셨습니다. ! 불합격 !`
    }
}
document.querySelector(".quiz__confirm .check").addEventListener("click", answerQuiz); //정답을 클릭했을 때 앤써 퀴즈를 실행시켜라.