퀴즈 만들기05/ 객관식 다중형

퀴즈 만들기_객관식 유형(다중)

이번시간에는 객관식 유형(다중형)을 만들어보겠습니다! 이번엔 60문항이나 만들어야 하는데 일일히 html태그로 입력하기는 번거로우므로 스크립트를 잘~ 이용해서 작업해보겠습니다.

원본 소스 보기 원본 사이트

---

HTML 소스

js를 이용해서 quiz__wrap안에 기존의 소스들을 반복해서 넣어주기 위해 안의 내용들은 제거합니다.

<main id="main">
    <div class="quiz__wrap">
    <div>
<main>

JAVASCRIPT 소스

exam.push(``)
quizWrap.innerHTML = exam.join('');

const exam = []으로 배열형식으로 exam을 지정했습니다. push()메서드는 값을 배열로 넣어주는 메서드인데요. 배열로 값이 들어가는 특성때문에 ,(쉼표)로 각각 구분이 됩니다. 그래서 저희가 원하는 기존의 소스형식대로 들어갈 수가 없게 되는겁니다. 그래서 추가로 push로 밀어넣은 데이터를 받은 exam을 join('')을 통해서 ,(쉼표)를 제거해주는 것입니다.

if(count >= 36){
     document.querySelector(".quiz__confirm .ex").innerHTML = count + "/" + quizInfo.length + "<br>합격";
} else {
     document.querySelector(".quiz__confirm .ex").innerHTML = count + "/" + quizInfo.length + "<br>불합격";
}

웹디자인기능사 시험은 36개이상이면 합격입니다. 스크립트를 참고하시면 정답(.like가 붙는)의 경우에는 처음 0으로 선언된 count의 값을 1개씩 증가시켜줍니다. 그래서 마지막에 if문의 조건에 해당하는 값은 정답의 갯수와 일치하겠죠. 그렇다면 저희가 원하는 조건은 '36개이상은 합격, 36개 미만은 불합격 이겠네요!'
그러므로 정답갯수가 36개 이상인 경우에는 class=ex의 태그에
document.querySelector(".quiz__confirm .ex").innerHTML = count + "/" + quizInfo.length + "<br>합격";
36개미만(=불합격)인 경우엔
document.querySelector(".quiz__confirm .ex").innerHTML = count + "/" + quizInfo.length + "<br>불합격";
을 넣어주면 됩니다!

const quizInfo = [
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "1",
        answerAsk: "굿 디자인(good design)을 위한 디자인의 조건에 포함되지 않는 것은?",
        answerChoice: {
            1: "합목적성",
            2: "독창성",
            3: "심미성",
            4: "모방성",
        },
        answerResult: "4",
        answerEx : "디자인의 조건은 합목적성, 경제성, 심미성, 독창성, 질서성이 있습니다."
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "2",
        answerAsk: "다음이 설명하는 것은? - 주어진 길이를 가장 이상적으로 나누는 비를 말하며 근사값이 약 1.619인 무리수",
        answerChoice: {
            1: "비례",
            2: "황금비율",
            3: "삼각분할",
            4: "프로포션",
        },
        answerResult: "2",
        answerEx : "황금비율(길이를 둘로 나누었을때 같은 비율)"
    },
    ...60번까지!!
];

let count = 0;
//맞춘 개수를 증가시켜주기 위해 변수는 const가 아닌 let을 이용하고, 전역변수로 선언합니다.

const quizWrap = document.querySelector(".quiz__wrap");
//기존 html의 문제가 들어가는 박스에 해당하는 부분에 js로 넣기위해 선택자로 지정해줍니다.


const updateQuiz = () => { 
    const 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();



// 정답 확인
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;
        //체크한것의 벨류값을 가져와서 비교해야 하므로 ().value 그리고 빈객체(=미선택)도 일단 가져오기위해 or사용
        const quizView = document.querySelectorAll(".quiz__view");          //강아지

        if(userAnswer == question.answerResult){
            console.log("정답")
            quizView[number].classList.add("like");
            count ++;
            
        } else{
            console.log("오답")
            quizView[number].classList.add("dislike");
            const divBox = document.createElement("div");
            quizSelectsWrap.appendChild(divBox).innerHTML = `<p class=result>
                ${question.answerEx}</p>`;
        }
            if(count >= 36){
                    document.querySelector(".quiz__confirm .ex").innerHTML = count + "/" + quizInfo.length + "<br>합격";
                } else {
                    document.querySelector(".quiz__confirm .ex").innerHTML = count + "/" + quizInfo.length + "<br>불합격";
                }
    });