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 quizeView = document.querySelectorAll(".quiz__view")      //문제 화면
const quizInput = document.querySelectorAll(".quiz__input"); //사용자 정답

//문제 정보
const quizInfo = [
    {
        answerType : "javascript",
        answerNum : 1,
        answerAsk : "객체 기반의 스크립트 프로그래밍 언어는 무엇입니까?",
        answerResult : "javascript"
    },
    {
        answerType : "html",
        answerNum : 2,
        answerAsk : "웹 페이지를 다른 페이지로 연결하는 링크는 무엇입니까?",
        answerResult : "Hypertext"
    },
    {
        answerType : "css",
        answerNum : 3,
        answerAsk : "모든 형태의 모든 요소를 선택하는 선택자는?",
        answerResult : "*"
    }        
];
    
//문제 출력
// quizType[0].textContent = quizInfo[0].answerType;
// quizType[1].textContent = quizInfo[1].answerType;
// quizType[2].textContent = quizInfo[2].answerType;

// quizNumber[0].textContent = quizInfo[0].answerNum + ". ";
// quizNumber[1].textContent = quizInfo[1].answerNum + ". ";
// quizNumber[2].textContent = quizInfo[2].answerNum + ". ";

// quizAsk[0].textContent = quizInfo[0].answerAsk;
// quizAsk[1].textContent = quizInfo[1].answerAsk;
// quizAsk[2].textContent = quizInfo[2].answerAsk;

// quizResult[0].textContent = quizInfo[0].answerResult;
// quizResult[1].textContent = quizInfo[1].answerResult;
// quizResult[2].textContent = quizInfo[2].answerResult;

// //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((e, 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[num].style.display = "block";

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

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

https://jiseonpack.github.io/webs_class/javascript/effect/quizEffect03.html

퀴즈 이펙트