1. 퀴즈 풀기 사이트 로직

1. 메인 페이지에서 어떤 종류의 퀴즈를 풀것인지 선택한다.
2. 퀴즈의 정보와 입력창을 화면에 출력한다.
3. 입력창에 답을 입력한다.
4. 입력창에 답이 정답인지 오답인지 판별한다.
   4.1. 정답이면 정답 갯수를 카운트한다.
   4.2. 오답이면 오답 갯수를 카운트한다.
5. 마지막 문제인지 판별한다.
   5.1. 마지막 문제가 아니라면 다음 문제를 화면에 출력한다.
   5.2. 마지막 문제면 퀴즈의 정보는 화면에서 지운다.
   5.3. 정답의 갯수와 오답의 갯수를 화면에 출력한다.

---

2. 구현

const input = document.querySelector("input"),
start = document.querySelector(".start"),
nextQuizBtn = document.getElementById("nextQuizBtn"),
hiddenQuiz = document.querySelector(".quiz"),
h1Tag = document.querySelector(".title");

let ringtAnswer = 0, wrongAnswer = 0, i = 0;

const quiz = [
    {
        carImg : "1.jpg",
        correctAnswer : "k8",
    },
    {
        carImg : "2.jpg",
        correctAnswer : "펠리세이드",
    },
    {
        carImg : "3.jpg",
        correctAnswer : "쏘렌토",
    },
    {
        carImg : "4.jpg",
        correctAnswer : "카니발",
    },
    {
        carImg : "5.jpg",
        correctAnswer : "싼타페",
    },
    {
        carImg : "6.jpg",
        correctAnswer : "k5",
    },
    {
        carImg : "7.jpg",
        correctAnswer : "투싼",
    },
    {
        carImg : "8.jpg",
        correctAnswer : "제네시스g80",
    },
    {
        carImg : "9.jpg",
        correctAnswer : "아이오닉6",
    },
    {
        carImg : "10.jpg",
        correctAnswer : "제네시스gv80",
    },
]

const nextQuizBtnClick = () => {
    //3. 입력창에 답을 입력한다.
    const answer = input.value;
    //4. 입력창에 답이 정답인지 오답인지 판별한다.
    if(answer === quiz[i].correctAnswer) {
        // 4.1. 정답이면 정답 갯수를 카운트한다.
        ringtAnswer++;
    }
    else  {
        //4.2. 오답이면 오답 갯수를 카운트한다.
        wrongAnswer++;
    }
    
    i++; //다음 퀴즈를 넘어가기 위해 증감연산자 사용

    //5. 마지막 문제인지 판별한다.
    if(i < quiz.length) {
        //5.1. 마지막 문제가 아니라면 다음 문제를 화면에 출력한다.
        input.value = '';

        document.querySelector(".carImg").remove();

        paintQuiz();
    }
    else {
        //5.2. 마지막 문제면 퀴즈의 정보는 화면에서 지운다.
        document.querySelector(".carImg").remove();
        hiddenQuiz.classList.add("hidden");
        h1Tag.classList.add("hidden");
        //5.3. 정답의 갯수와 오답의 갯수를 화면에 출력한다.
        const span = document.createElement("span");
        span.className = "anwserCount";
        span.innerText = `⭕ ${ringtAnswer} ❌ ${wrongAnswer}`;
        document.body.appendChild(span);
    }
}

const paintQuiz =  () => {
    const getCarImg = document.createElement("img");
    getCarImg.className = "carImg";
    getCarImg.src = `/QuizSite/img/${quiz[i].carImg}`;
    h1Tag.after(getCarImg);
}

//1. 메인 페이지에서 어떤 종류의 퀴즈를 풀것인지 선택한다.
//2. 퀴즈의 정보와 입력창을 화면에 출력한다.
paintQuiz();

nextQuizBtn.addEventListener("click", nextQuizBtnClick);

---

3. 출력화면

4. 느낀점

일단 처음으로 내가 생각한 로직을 활용하여 만들어낸 사이트라 너무 뿌듯하고
이 퀴즈 풀기 웹 사이트를 만들면서 이해하고 깨달음 점.
1. js 배열의 이해
2. classList를 remove(), add()하는 개념
3. js-append, prepend, after, before을 활용해 HTML 구조에 콘텐츠나 요소를 추가하여 DOM(Document Object Model)을 조작하는 개념
퀴즈 풀기 웹 사이트를 만들면서 어려웠던 점.
1. 마지막 문제가 아닐때 다음 문제를 출력해야되는데 어떻게 해야될지 꽤 오래 걸렸다.
-> 내가 선언한 함수에 대한 이해가 부족했던거 같다. 다음부터 함수를 만들때 이 함수의 역할을 잘 이해하고 인지해야겠다고 생각했다.