quizEffect03

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

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 : "html",
        answerNum : 1,
        answerAsk : "컨텐츠의 구조를 정의하는 마크업 언어는 무엇일까요?",
        answerResult : "html"
    },
    {
        answerType : "CSS",
        answerNum : 3,
        answerAsk : "웹페이지를 꾸미기 위해 사용하는 언어는 무엇입니까?",
        answerResult : "css"
    },
]

//문제출력
quizInfo.forEach((el, index) => {								//quizInfo의 element값을 el에 index값을 index에 저장
    quizType[index].textContent = quizInfo[index].answerType;		//index번째 quizType에 quizInfo의 index번째 answerType 출력
    quizNumber[index].textContent = quizInfo[index].answerNum + ".";//index번째 quizNumber에 quizInfo의 index번째 answerNum 출력
    quizAsk[index].textContent = quizInfo[index].answerAsk;			//index번째 quizAsk에 quizInfo의 index번째 answerAsk 출력
    quizResult[index].textContent = `정답은 : ${quizInfo[index].answerResult} 입니다.`;	//index번째 quizResult에 정답은  quizInfo의 index번째 answerResult  입니다. 출력
});

//정답 숨기기
quizResult.forEach(el => {		//quizResult의 element값 el에 저장
    el.style.display = "none";		//el에 스타일 display none 추가
});

//정답 확인
quizConfirm.forEach((btn, num) => {				//quizConfirm의 element값을 btn에 index값을 num에 저장
    btn.addEventListener("click", () => {		//byn을 클릭 했을 때 이벤트 설정
        btn.style.display = "none";					//btn에 스타일 display none 추가
        quizResult[num].style.display = "block";	//num번째 quizResult에 스타일 display block 추가

        const userWord = quizInput[num].value.toLowerCase().trim();	
        //userWord에 num번째 quizInput의 값(사용자가 입력한 값) 저장(toLowerCase:소문자로, trim:띄어쓰기 없이)

     	if(userWord == quizInfo[num].answerResult){		//userWord가 num번째 quizInfo의 answerResult와 같을 때
            quizView[num].classList.add("like");		//num번째 quizView에 클래스 like 추가
            quizResult[num].style.display = "none";		//num번째 quizResult에 스타일 display none 추가
        } else {										//userWord가 num번째 quizInfo의 answerResult와 같지 않을 때
            quizView[num].classList.add("dislike");		//num번째 quizView에 클래스 dislike 추가
            quizInput[num].style.display = "none"		//num번째 quizInput에 스타일 display none 추가
        }
    });
});