00 Let's Practice Vocab

事前準備

1. VSCode を立ち上げ以下の 3 つのファイルを作成する
   1. index.html
   2. style.css
   3. script.js
2. 以下の"Assets"にある index.htmlと style.cssのリンクをたどり、作成した対応するファイルに内容をコピペする。
3. Javascript の学習を開始

Assets

以下のファイルを自分のプロジェクトフォルダに作成し、中身をコピしよう。

index.html

• index.htmlへのリンク

style.css

• style.cssへのリンク

---

01 Let's Practice Vocab

TOPIC: Start ボタンの処理

CHECK

1. startBtnElを取得
2. shuffledQuestions変数を設定
3. startBtnElに Event Listener を設定
4. startGame()を設定
   1. startBtnを隠す
   2. Math.random() - 0.5 を理解
   3. shuffledQuestionを表示し、ランダムにシャッフルされているかを確認

script.js

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

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

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

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

// 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)

  console.log("shuffledQuestions", shuffledQuestions)
}

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,
      },
    ],
  },
]

---