Quiz Effect - 주관식 여러개 정답 쓰고 확인

const quiz = document.querySelectorAll(".quiz");
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: 2,
        answerAsk: "웹 페이지를 다른 페이지로 연결하는 링크는 무엇입니까?",
        answerResult: "hypertext"
    },
    {
        answerType: "css",
        answerNum: 3,
        answerAsk: "모든 형태의 모든 요소를 선택하는 선택자는?",
        answerResult: "*"
    }
];

//배열로 저장된 문제 정보들을 브라우저에 출력한다.
quizInfo.forEach((e, i) => {    //배열 요소(e), 배열 인덱스(i)
    quizType[i].textContent = quizInfo[i].answerType;   //i번째 quiz박스에 i번째 배열 요소의 answerType 입력
    quizNumber[i].textContent = quizInfo[i].answerNum + ". ";  //i번째 quiz박스에 i번째 배열 요소의 answerNum 입력
    quizAsk[i].textContent = quizInfo[i].answerAsk;         //i번째 quiz박스에 i번째 배열 요소의 answerAsk 입력
    quizResult[i].textContent = "정답은 " + quizInfo[i].answerResult + "입니다."; //i번째 quiz박스에 i번째 배열 요소의 answerResult 입력
})

//정답 숨기기, 모든 정답은 일단 숨긴다.
quizResult.forEach(el => {
    el.style.display = "none";
})

//정답 확인
quizConfirm.forEach((e, num) => {   //모든 확인 버튼을 읽어온다.
    e.addEventListener("click", () => {     //확인 버튼 클릭 시

        //사용자 정답 = quizInfo 정답
        const userWord = quizInput[num].value.toLowerCase().trim();     //input박스로 읽어온 사용자 답안을 모두 소문자로,공백문자제거
        if (userWord == quizInfo[num].answerResult) {       //답안과 정답이 같으면
            quizView[num].classList.add("like");        //강아지 like애니메이션
            quizConfirm[num].style.display = "none";    //확인 버튼 사라짐
        } else {    //답안과 정답이 다르면
            quizView[num].classList.add("dislike");     //강아지dislie애니메이션
            quizInput[num].style.display = "none";      //input박스 사라짐
            quizResult[num].style.display = "block";    //정답 박스 나타남
            quizConfirm[num].style.display = "none";    //확인 버튼 사라짐
        }
    })
})

 

퀴즈 이펙트 여러 문제 정답쓰고확인 사이트