소스 보기
Javascript 

// 선택자
const quizWrap = document.querySelector(".quiz__wrap");
const quizDate = quizWrap.querySelectorAll(".quiz__date");
const quizType = quizWrap.querySelectorAll(".quiz__type");
const quizNum = quizWrap.querySelectorAll(".quiz__question em");
const quizQuestion = quizWrap.querySelectorAll(".quiz__question span");
const quizAnswer = quizWrap.querySelectorAll(".quiz__answer");
const quizDesc = quizWrap.querySelectorAll(".quiz__desc");
const quizConfirm = quizWrap.querySelectorAll(".quiz__confirm");
const quizInput = quizWrap.querySelectorAll(".quiz__input input");
const quizAnimation = quizWrap.querySelectorAll(".quiz__animation");

// 문제 정보

const quizInfo = [
{
    infoDate : "2021년 4월",
    infoType : "웹디자인 기능사",
    infoNum : "1",
    infoQuestion : "디자인의 가장 중요한 조건으로, 기능성과 실용성을 갖춘 것을 의미하는 것은?",
    infoAnswer : "합목적성",
    infoDesc : "합목적성=목표성, 디자인의 가장 중요한 조건 디자인이 대상과 용도, 목적에 맞게 이루어져 있는것 기능성과 실용성이 모두 갖추어진 것"
},
{
    infoDate : "2022년 1회",
    infoType : "웹디자인 기능사",
    infoNum : "2",
    infoQuestion : "HTML 문서를 작성할 때 글자 사이를 공백으로 띄우기 위해 사용되는 것은?",
    infoAnswer : " ",
    infoDesc : "nbsp 'Non Breaking Space'의 약자로, HTML 문서에서 공백을 나타냄"
},
{
    infoDate : "2022년 2회",
    infoType : "웹디자인 기능사",
    infoNum : "3",
    infoQuestion : "정해진 시간에 여러 개의 정지된 화면을 보여주는것을 애니메이션이라고 한다. 이때 애니메이션에서 정지된 화면 한개를 무엇이라고 하는가?",
    infoAnswer : "프레임",
    infoDesc : "프레임은 정지된 화면 하나를 의미하며, 중요한 장면이 들어가는 프레임을 키프레임이라고 함"
}
];


// 문제 출력
// quizDate[0].textContent = quizInfo[0].infoDate;
// quizDate[1].textContent = quizInfo[1].infoDate;
// quizDate[2].textContent = quizInfo[2].infoDate;

// quizType[0].textContent = quizInfo[0].infoType;
// quizType[1].textContent = quizInfo[1].infoType;
// quizType[2].textContent = quizInfo[2].infoType;

// quizNum[0].textContent = quizInfo[0].infoNum;
// quizNum[1].textContent = quizInfo[1].infoNum;
// quizNum[2].textContent = quizInfo[2].infoNum;

// quizQuestion[0].textContent = quizInfo[0].infoQuestion;
// quizQuestion[1].textContent = quizInfo[1].infoQuestion;
// quizQuestion[2].textContent = quizInfo[2].infoQuestion;

// quizAnswer[0].textContent = quizInfo[0].infoAnswer;
// quizAnswer[1].textContent = quizInfo[1].infoAnswer;
// quizAnswer[2].textContent = quizInfo[2].infoAnswer;

// quizDesc[0].textContent = quizInfo[0].infoDesc;
// quizDesc[1].textContent = quizInfo[1].infoDesc;
// quizDesc[2].textContent = quizInfo[2].infoDesc;

// for()
// for(let i=0; i<quizInfo.length; i++){
//     quizDate[i].textContent = quizInfo[i].infoDate;
//     quizType[i].textContent = quizInfo[i].infoType;
//     quizNum[i].textContent = quizInfo[i].infoNum;
//     quizQuestion[i].textContent = quizInfo[i].infoQuestion;
//     quizAnswer[i].textContent = quizInfo[i].infoAnswer;
//     quizDesc[i].textContent = quizInfo[i].infoDesc;
// }

// forEach()
quizInfo.forEach((el, i) => {
quizDate[i].textContent = quizInfo[i].infoDate;
quizType[i].textContent = quizInfo[i].infoType;
quizNum[i].textContent = quizInfo[i].infoNum;
quizQuestion[i].textContent = quizInfo[i].infoQuestion;
quizAnswer[i].textContent = quizInfo[i].infoAnswer;
quizDesc[i].textContent = quizInfo[i].infoDesc;
});

// 정답 해설 숨기기
// quizAnswer[0].style.display = "none";
// quizAnswer[1].style.display = "none";
// quizAnswer[2].style.display = "none";

// quizDesc[0].style.display = "none";
// quizDesc[1].style.display = "none";
// quizDesc[2].style.display = "none";

// for()
// for(let i=0; i<quizInfo.length; i++){
//     quizAnswer[i].style.display = "none";
//     quizDesc[i].style.display = "none";
// }

// forEach()
quizInfo.forEach((el, i) => {
quizAnswer[i].style.display = "none";
quizDesc[i].style.display = "none";
})

// 정답확인
quizConfirm.forEach(function(btn, num){
btn.addEventListener("click", function(){
    const userAnswer = quizInput[num].value.trim().toLowerCase();
    const correctAnswer = quizInfo[num].infoAnswer.trim().toLowerCase();
        
    if(userAnswer == quizInfo[num].infoAnswer){
        quizAnimation[num].classList.add("like");
    } else {
        quizAnimation[num].classList.add("dislike");
    }

    quizConfirm[num].style.display = "none";
    quizInput[num].style.display = "none";
    quizAnswer[num].style.display = "block";
    quizDesc[num].style.display = "block";
});
});