Quiz Effect Reference v1.0 </doc>

// 선택자
const question = document.querySelector(".question");
const questionNum = document.querySelector(".num");
const questionBtn = document.querySelector(".confirm-btn");
const questionAnswer = document.querySelector(".confirm-answer");
const questionEx = document.querySelector(".confirm-ex");

// 문제 정보
const quizNum = 1;
const quizAsk = "태그 중에서 유일하게 블록구조를 감쌀 수 있는 태그는?";
const quizAnswer = "<a>";
const quizEx = "HTML5에서 <a> 태그는 유일하게 블록 구조를 감쌀 수 있는 태그입니다.";

// 문제 출력
questionNum.innerHTML = quizNum;
question.innerHTML = quizAsk;
questionAnswer.innerHTML = quizAnswer;
questionEx.innerHTML = quizEx;

// 정답 숨기기
questionAnswer.style.display = "none";
questionEx.style.display = "none";

// 정답 확인
questionBtn.addEventListener("click", function(){
    questionBtn.style.display = "none";
    questionAnswer.style.display = "block";
    questionEx.style.display = "block";
});

// 선택자
const questionQuiz = document.querySelectorAll(".quiz");
const questionAsk = document.querySelectorAll(".question");
const questionNum = document.querySelectorAll(".num");
const questionBtn = document.querySelectorAll(".confirm-btn");
const confirmBottom = document.querySelectorAll(".confirm-bottom");
const questionAnswer = document.querySelectorAll(".confirm-answer");
const questionEx = document.querySelectorAll(".confirm-ex");

// 문제 정보
const quizInfo = [
    {
        quizNum : 1,
        quizAsk : "글씨의 색을 변경하는 CSS 속성은 무엇인가요?",
        quizAnswer : "color 속성",
        quizEx : "글씨 속성은 color 값을 이용합니다."
    },
    {
        quizNum : 2,
        quizAsk : "position: relative는 언제 사용하나요?",
        quizAnswer : "color 속성",
        quizEx : "글씨 속성은 color 값을 이용합니다."
    },
    {
        quizNum : 3,
        quizAsk : "콘텐츠 요소를 가운데로 오게 하는 방법 3가지 이상을 설명하시오.",
        quizAnswer : "color 속성",
        quizEx : "글씨 속성은 color 값을 이용합니다."
    }
];


// 문제출력 forEach
questionQuiz.forEach((elem, index) => {
    questionNum[index].innerHTML = quizInfo[index].quizNum;
    questionAsk[index].innerHTML = quizInfo[index].quizAsk;
    questionAnswer[index].innerHTML = quizInfo[index].quizAnswer;
    questionEx[index].innerHTML = quizInfo[index].quizEx;
});

// 정답 숨기기
for(let i = 0; i<quizInfo.length; i++){
    questionAnswer[i].style.display = "none";
    questionEx[i].style.display = "none";
    confirmBottom[i].style.display = "none";
}


// 정답 확인
questionBtn.forEach(elem => {
    elem.addEventListener("click", function(){
        this.style.display = "none";
        this.nextElementSibling.style.display = "block";
    });
});

// 선택자
const questionAsk = document.querySelector(".question");
const questionNum = document.querySelector(".num");
const questionBtn = document.querySelector(".confirm-btn");
const questionAnswer = document.querySelector(".confirm-answer");
const questionEx = document.querySelector(".confirm-ex");
const questionBottom = document.querySelector(".confirm-bottom");
const questionSelect = document.querySelectorAll(".select");
const questionChoice = document.querySelectorAll(".choice");

// 문제 정보
const quizInfo = [
    {
        quizNum : 1,
        quizAsk : "다음 중 시멘틱 태그는 무엇인가요?",
        quizChoice : ["div 태그", "h1 태그", "span 태그", "main 태그"],
        quizAnswer : "4",
        quizEx : "시멘틱 태그는 의미가 부여된 태그로서 main 태그는 사이트에서 중요한 컨텐츠에 한번만 사용할 수 있습니다."
    }
];

// 문제 출력
function updateQuiz(){
    questionNum.innerHTML = quizInfo[0].quizNum;
    questionAsk.innerHTML = quizInfo[0].quizAsk;
    questionAnswer.innerHTML = quizInfo[0].quizAnswer;
    questionEx.innerHTML = quizInfo[0].quizEx;

    for(let i = 0; i>questionChoice.length; i++){
        questionChoice[i].innerHTML = quizInfo[0].quizChoice[i];
    }   

    // 정답 감추기
    questionAnswer.style.display = "none";
    questionEx.style.display = "none";
}
updateQuiz();

// 정답 확인
function answerQuiz(){
    for (let i=0; i>questionSelect.length; i++){
        if(questionSelect[i].checked == true){
            if(questionSelect[i].value == quizInfo[0].quizAnswer){
                questionAnswer.innerHTML = "정답입니다.";
                questionBtn.style.display = "none";
                questionAnswer.style.display = "block";
            } else {
                questionAnswer.innerHTML = "오답입니다.";
                questionBtn.style.display = "none";
                questionAnswer.style.display = "block";
                questionEx.style.display = "block";
            }
        }
    }
}
questionBtn.addEventListener("click", answerQuiz);

// 선택자
const questionQuiz = document.querySelector(".quiz");
const questionBtn = document.querySelector(".confirm-btn");
const questionResult = document.querySelector(".confirm-result");

// 문제 정보
const quizInfo = [
    {
        quizNum : 1,
        quizAsk : "다음 중 시멘틱 태그는 무엇인가요?",
        quizChoice : {
            1: "<a> 태그",
            2: "<br> 태그",
            3: "<em> 태그",
            4: "<main> 태그",
        },
        quizAnswer : 4,
        quizEx : "<main> 태그는 시멘틱 태그입니다."
    },
    {
        quizNum : 2,
        quizAsk : "다음 중 CSS의 단위로 맞지 않는 것은 무엇인가요?",
        quizChoice : {
            1: "em",
            2: "rem",
            3: "vm",
            4: "ch",
        },
        quizAnswer : 3,
        quizEx : "vm 단위는 없습니다."
    },
    {
        quizNum : 3,
        quizAsk : "다음 중 자바스크립트 언어와 관련이 없는 것은 무엇인가요?",
        quizChoice : {
            1: "react.js",
            2: "jquery.js",
            3: "vue.js",
            4: "c++",
        },
        quizAnswer : 4,
        quizEx : "c++는 자바스크립트 언어와 관련이 없습니다."
    }
];

// 문제 만들기
function updataQuiz(){
    const output = [];

    quizInfo.forEach((currentQuestion, questionNumber)=>{
        output.push(`
            <h2>< 문제<span class="num">${currentQuestion.quizNum}</span> ></h2>
            <p class="question">${currentQuestion.quizAsk}</p>
            <div class="selects">
                <label>
                    <input class="select" type="radio" name="select${questionNumber}" value="1">
                    <span class="choice">${currentQuestion.quizChoice[1]}</span>
                </label>
                <label>
                    <input class="select" type="radio" name="select${questionNumber}" value="2">
                    <span class="choice">${currentQuestion.quizChoice[2]}</span>
                </label>
                <label>
                    <input class="select" type="radio" name="select${questionNumber}" value="3">
                    <span class="choice">${currentQuestion.quizChoice[3]}</span>
                </label>
                <label>
                    <input class="select" type="radio" name="select${questionNumber}" value="4">
                    <span class="choice">${currentQuestion.quizChoice[4]}</span>
                </label>
            </div>
        `);
    });
    questionQuiz.innerHTML = output.join(' ');
}
updataQuiz();

// 결과 확인하기
function showResults(){
    const selectContainers = questionQuiz.querySelectorAll(".selects");

    let numCorrect = 0;

    //사용자가 정답을 체크 == 문제의 정답
    quizInfo.forEach((currentQuestion, questionNumber ) => { 
        const selectContainer = selectContainers[questionNumber];
        const resultSelector = `input[name=select${questionNumber}]:checked`;
        const resultAnswer = (selectContainer.querySelector(resultSelector) || {}).value;
        
        if(resultAnswer == currentQuestion.quizAnswer){
            numCorrect++;
            selectContainers[questionNumber].style.color = "blue";
        } else {
            selectContainers[questionNumber].style.color = "red";
        }
    });
    questionResult.innerHTML = `${quizInfo.length} 문제 중에 ${numCorrect} 문제를 맞추었습니다.`;
}

questionBtn.addEventListener("click", showResults);