02-01 Let's Practice Vocab

TOPIC: setNextQuestion()関数の定義

CHECK

1. nextBtnEl, answersElの設定
2. resetState()の定義
   1. Next ボタンを隠す
   2. while ループを使い answersEl の中に child が見つかるうちは Answer Element のなかの child を消す。つまり Answer Element の中身を空っぽにする
   3. 4 択が入っているanswersElが空っぽになるのを確認する

// ELEMENTS
// --------------------------------

// 画面最初のスタートボタン
const startBtnEl = document.getElementById("start-btn")

// QuestionボックスとAnswersボックスが入っているElement
const questionAnswersContainerEl = document.getElementById(
  "question-answers-container"
)

// ゲーム開始時のHeaderを表すElement
const headerContainerEl = document.getElementById("header-container")

// ゲームが始まったあとの画面上部の小さなHeaderを表すElement
const headerSmallEl = document.getElementById("header-small")

// NEW!!
// 次のの問題を表示するボタン
const nextBtnEl = document.getElementById("next-btn")

// NEW!!
// 4択全てを入れておくElement
const answersEl = document.getElementById("answers")

// VARIABLES
// --------------------------------

// ランダムにシャッフルされたQuestionオブジェクトが入っているarray
let shuffledQuestions

// 現在の問題のIndex番号(1ずつたされる)
let currentQuestionIndex

// EVENT LISTENERS
// --------------------------------

// スタートボタンのクリックを聞くListener
startBtnEl.addEventListener("click", startGame)

// FUNCTIONS
// --------------------------------

// ゲームを始めるFunction
function startGame() {
  // スタートボタンを隠す
  startBtnEl.classList.add("hide")
  // questions array にある全てのQuestionオブジェクトをランダムに並べ替える
  shuffledQuestions = questions.sort(() => Math.random() - 0.5)

  // currentQuestionIndexを0に設定する
  currentQuestionIndex = 0

  // questionAnswersContainerEl についてhideを消し、表示する
  questionAnswersContainerEl.classList.remove("hide")

  // スタート画面のHeaderを消す
  headerContainerEl.style["display"] = "none"

  // 小さなHeaderを画面上部に表示する
  headerSmallEl.classList.remove("hide")

  // 次の質問を表示する
  setNextQuestion()
}

// 次の質問を表示するFunction
function setNextQuestion() {
  // NEW!!
  // Nextボタンを消し、現在表示されている4択Answerを全て消す
  resetState()
}

// NEW!!
// Nextボタンを消し、現在表示されている4択Answerを全て消すFunction
function resetState() {
  // Nextボタンを隠す
  nextBtnEl.classList.add("hide")
  // Answers Element(全ての4択が入っているElement)に
  // childが見つかるうちは
  while (answersEl.children[0]) {
    // Answer Elementのなかのchildを消す
    // つまりAnswer Elementの中身を空っぽにする
    answersEl.removeChild(answersEl.children[0])
  }
}

const questions = [
  {
    target_num: 1,
    jp: "現代の科学技術は私たちの生活を大いに[向上させた]。",
    en: "Modern technology has greatly (     ) our lives.",
    answers: [
      {
        text: "considered",
        correct: false,
      },
      {
        text: "improved",
        correct: true,
      },
      {
        text: "concerned",
        correct: false,
      },
      {
        text: "included",
        correct: false,
      },
    ],
  },
  {
    target_num: 2,
    jp: "生活の質はエネルギー使用に直接[関連し]てはいない。",
    en: "The quality of life is not directly (     ) to energy use.",
    answers: [
      {
        text: "produced",
        correct: false,
      },
      {
        text: "related",
        correct: true,
      },
      {
        text: "provided",
        correct: false,
      },
      {
        text: "improved",
        correct: false,
      },
    ],
  },
  {
    target_num: 3,
    jp: "言語はすべて私たちに社会に関する貴重な情報を[与える]ことができる。",
    en: "All languages can (     ) us with valuable information about society.",
    answers: [
      {
        text: "provide",
        correct: true,
      },
      {
        text: "include",
        correct: false,
      },
      {
        text: "relate",
        correct: false,
      },
      {
        text: "concern",
        correct: false,
      },
    ],
  },
]