quizEffect03 - JS로 문제 내기

HTML 구성

<h2 class="quiz__type">HTML 퀴즈</h2>
<h3 class="quiz__question">
    <span class="quiz__number"></span>
    <span class="quiz__ask"></span>
</h3>
<div class="quiz__view">
    <div class="true">정답입니다!</div>
    <div class="false">틀렸습니다!</div>
    <div class="dog">
        <div class='head'>
            <div class='ears'></div>
            <div class='face'></div>
            <div class='eyes'>
              <div class='teardrop'></div>
            </div>
            <div class='nose'></div>
            <div class='mouth'>
              <div class='tongue'></div>
            </div>
            <div class='chin'></div>
          </div>
          <div class='body'>
            <div class='tail'></div>
            <div class='legs'></div>
          </div>
    </div>
</div>
<div class="quiz__answer">
    <input type="text" placeholder="정답을 적어주세요!" class="quiz__input">
    <button class="quiz__confirm">정답 확인하기</button>
    <div class="quiz__result"></div>
</div>

 

JS 구성

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 : "소문자로 변환하는 문자열 객체의 이름은 무엇입니까?",
        answerResult : "toLowerCase"
    },
    {
        answerType : "javascript",
        answerNum : 3,
        answerAsk : "공백을 제거하는 문자열 객체의 이름은 무엇입니까?",
        answerResult : "trim"
    }
];

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((e, i) => {
    e.addEventListener("click", () => {

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

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

 

링크 : https://sungilryuu.github.io/webs_class/javascript/effect/quizEffect03.html