단어카드페이지 - 올바른 답인지 체크하는 기능

[chickiyeah]

고려해야할 점

• 답 적었을 때 정답인지 아닌지 판단하기(엔터키 or 클릭으로 실행)
• 정답이라면 다음 문제로 넘어가기
• 여러가지 의미 중 하나라도 맞으면 정답으로 간주하기
• 문제가 끝났으면 끝났다 하기
• 한국어 정답 2개 이상일 때 다 적든 하나만 적든 정답(해결) => 순서대로 안 적으면 오답이라 처리하는 오류 해결하기

코드

let data = [
    {
      Author : 1,
      English : "answer",
      Korea : ["정답","정답이다"],
      Speak:"엔설",
      category : "수능영단어",
      Created_At : "2023,04,04,15,24,25",
    },
    {
      Author : 'id_name',
      English : "hungry",
      Korea : ["배고프다","배고픈"],
      Speak : "헝그리",
      category : "수능영단어",
      Created_At :"2023,04,04,15,24,25",
    },
    {
      Author : 'id_name',
      English : "happy",
      Korea : ["행복하다","행복한"],
      Speak : "해피",
      category : "수능영단어",
      Created_At :"2023,04,04,15,24,25",
    },
    {
      Author : 'id_name',
      English : "bye",
      Korea : ["잘가"],
      Speak : "바이",
      category : "수능영단어",
      Created_At :"2023,04,04,15,24,25",
    },
]

const container = document.querySelector(".container");
const w = document.querySelector(".word");
const a = document.querySelector(".answer");
const s = document.querySelector(".submit");
const inf = document.querySelector(".inf");

let num = 0;

// 공백인데 정답버튼 클릭하면 input에 포커스 주기
// 공백이 아니라면 checkAnswer실행하기
s.addEventListener("click", function () {
    if (a.value.length <= 0) {
      inf.textContent = "답을 입력해주세요.";
      a.focus();
    } else {
      checkAnswer();
    }
  });
  //input에서 엔터키 누르면 정답 버튼 누르기
  a.addEventListener("keydown", function (e) {
    if (e.keyCode === 13) {
      e.preventDefault();
      s.click();
    }
  });
  //영단어 보여주는 칸엔 data 배열의 English만 보여주기
  w.textContent = data[num].English;

  //정답이 맞는지 확인해주는 기능
  function checkAnswer() {
    const answerWords = a.value.split(',');
    // 정답 1개 or 2개 입력했을때 맞다고 하기 && 순서가 바뀌어도 정답 인식하기
    const answerWordsTrimmed = answerWords.map(word => word.trim()).sort();
    const isCorrect = (data[num].Korea.some((x) => answerWordsTrimmed.includes(x)));
    if (isCorrect) {
      inf.textContent = "정답입니다!";
      console.log(isCorrect);
      num += 1;
      if (num >= data.length) {
        //정답 입력 공간 없애기
        container.textContent = "수고하셨습니다.";
        a.disabled = true;
        s.disabled = true;
      } else {
        a.value = "";
        w.textContent = data[num].English;
      }
    } else {
      inf.textContent = "틀렸습니다! 다시 시도해보세요.";
      a.focus();
      a.value = "";
    }
  }