Quiz Effect03 - 주관식 여러문제

const quizType = document.querySelectorAll(".quiz__type");                         //퀴즈 종류들
const quizNumber = document.querySelectorAll(".quiz__number");                     //퀴즈 번호
const quizAsk = document.querySelectorAll(".quiz__ask");                           //퀴즈 질문
const quizConfirm = document.querySelectorAll(".quiz__confirm");                   //퀴즈 확인 버튼
const quizResult = document.querySelectorAll(".quiz__result");                     //퀴즈 정답
const quizView = document.querySelectorAll(".quiz__view")                             //강아지
const quizInput = document.querySelectorAll(".quiz__input")                        //인풋박스

//문제정보
const quizInfo = [
    {answerType : "HTML", answerNum : 1, answerAsk : "네비게이션을 돕거나 소개를 나타내는 그룹을 표현하는 태그는 무엇인가요?", answerResult : "header"},
    {answerType : "HTML", answerNum : 2, answerAsk : "다른 페이지나 같은 페이지 안에 다른 부분으로 이어주는 네비게이션 링크로 구성된 섹션을 표현하는 태그는 무엇인가요?", answerResult : "nav"},
    {answerType : "HTML", answerNum : 3, answerAsk : "문서내에서 독립적인 컨텐츠를 나타내는 태그는 무엇인가요?", answerResult : "article"},
    {answerType : "HTML", answerNum : 4, answerAsk : "문서내에서 일반적인 섹션을 나타내는 태그는 무엇인가요?", answerResult : "section"},
    {answerType : "HTML", answerNum : 5, answerAsk : "주로 하단에서 저작권 정보나 서비스 제공자 정보를 나타내는 태그는 무엇인가요?", answerResult : "footer"},
    {answerType : "HTML", answerNum : 6, answerAsk : "문서의 내용 즉 컨텐츠들의 그룹을 나타내는 태그를 무엇인가요?", answerResult : "main"}
];

//문제출력
//for문
// for(let i=0; i<quizInfo.length; i++){
//     quizType[i].textContent = quizInfo[i].answerType;
//     quizNumber[i].textContent = quizInfo[i].answerNum + ". ";
//     quizAsk[i].textContent = quizInfo[i].answerAsk;
//     quizResult[i].textContent = quizInfo[i].answerResult;
// };
//forEach문
quizInfo.forEach((el, i) => {
    quizType[i].textContent = quizInfo[i].answerType;
    quizNumber[i].textContent = quizInfo[i].answerNum + ". ";
    quizAsk[i].textContent = quizInfo[i].answerAsk;
    quizResult[i].textContent = "정답은 : " + quizInfo[i].answerResult + " 입니다.";
})

//정답숨기기
quizResult.forEach(el => {
    el.style.display = "none";
});

//정답 확인
quizConfirm.forEach((btn, num) => {
    btn.addEventListener("click", () => {
        // btn.style.display = "none";
        // quizResult[i].style.display = "block";

        //사용자 정답 == quizInfo 정답
        const userWord = quizInput[num].value.toLowerCase().trim();

        if(userWord == quizInfo[num].answerResult){
            quizView[num].classList.add("like");
            quizConfirm[num].style.display = "none";
        } else {
            quizView[num].classList.add("dislike");
            quizConfirm[num].style.display = "none";
            quizInput[num].style.display = "none";
            quizResult[num].style.display = "block";
        }
    })
})

• js로 css 제어하기
• Node.textContent
• String.prototype.toLowerCase()
• String.prototype.trim()
• String.prototype.trimStart()
• String.prototype.trimEnd()
• add()/remove()
• forEach()