Quiz Effect - 주관식 : 여러문제 정답 쓰고 확인하기

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 : "css",
        answerNum : 1,
        answerAsk : "웹 페이지를 꾸미기 위해서 사용하는 언어는 무엇입니까?",
        answerResult : "css"
    },
    {
    	answerType : "jquery",
        answerNum : 2,
        answerAsk : "자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리는 무엇입니까?",
        answerResult : "jquery"
    },
    {
   		answerType : "php",
    	answerNum : 3,
    	answerAsk : "C언어를 기반으로 만들어진 서버 측에서 실행되는 서버 사이드 스크립트 언어는 무엇입니까?",
    	answerResult : "php"
    }
];

//문제 출력
// 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) => {								   //querySelectorAll(다중 선택자)를 사용하여 forEach문 사용
//	  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();		// 변수 userWord에 배열index값의 input 값을 소문자화 + 공백제거

	if(userWord == quizInfo[num].answerResult){		//사용자가 적은 값과 answerResult값이 같으면 if문 출력 
    	quizView[num].classList.add("like");		
        quizConfirm[num].style.display = "none";
    } else {
    	quizView[num].classList.add("dislike");		//사용자가 적은 값과 answerResult값이 같지 않으면 else문 출력
        quizConfirm[num].style.display = "none";
        quizResult[num].style.display = "block";
        quizInput[num].style.display = "none";
    }
    });
});

퀴즈 이펙트