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 : "javascript",
        answerNum : 1,
        answerAsk : "객체 기반의 스크립트 프로그래밍 언어는 무엇입니까?",
        answerResult : "javascript"
    },
    {
    	answerType : "javascript",
        answerNum : 2,
        answerAsk : "javascript에서 변하는 데이터(값)를 저장할 수 있는 메모리 공간은 무엇입니까?",
        answerResult : "변수"
    },
    {
    	answerType : "javascript",
        answerNum : 3,
        answerAsk : "javascript에서 변하지 않는 데이터(값)를 저장할 수 있는 메모리 공간은 무엇입니까?",
        answerResult : "상수"
    }
];

//문제 출력
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", () => {
    
    //사용자 정답 == 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";
    	quizResult[num].style.display = "block";
    	quizInput[num].style.display = "none";
    	}
	});
});