原子記号アプリ改良

JavaScript コメントを残す

以前作った原子記号アプリの改良を試みました。前記事はこちら。　

前回の反省から、改善点として

①　得点などの表示

②　エンターキーで入力

に取り組みました。２週間以上もかかりましたが・・・。

前はこのような感じで、縦にダダ長く、入力した後にエンターキーボタンをクリックするなど

非常に使いにくかったです。

今回は、まず正解と不正解の数をカウントする機能をつけました。

let correctNum = 0;
let incorrectNum = 0;

初期化して、正誤判定の際に正解、不正解に分けてカウントアップしていくやり方です。

これは難しくなかったです。

次にエンターキーで入力です。

かなり汗をかきながらググっていたところ

mdn web docsに書かれているのを見つけました。

window.addEventListener(
  "keydown",
  function (e) {
    if (e.key === "Enter") {
      forward();
    }
  },
  true
);

エンターキーを押すと、正誤判定の関数が発火する仕組みになっています。

更に改良点として

③　問題をランダムに排出する

を付け加えました。

出来上がりはこちらです。

大分使いやすくなったのではないでしょうか。

UIはまだまだ改良の余地はありますが、ひとまず使いまわしができそうなものが出来でうれしいです。

DBとやり取りして、記録を残せるようになると良いのですが。

それにはまだまだ勉強が足りないようです・・・。

最後にコードです。

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Random Question</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&family=Open+Sans&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="src/styles.css">
    <script src="./src/set.js"></script>
  </head>
  <body>
    <body>
        <h1>元素記号を答えよう</h1>
        <div class ="message"id="try-again"></div>
        <div class="point-container">          
         <div class="correct">
          <h2>正解</h2>
           <div  id="correct"> 0</div>
         </div>
         <div class="incorrect">
          <h2>不正解</h2>
           <div id="incorrect">0</div>
         </div>
         </div>
        <div class="question-container" id="question"></div>
    
        <div class="anser-container">
          <input
            class="input-text"
            id="input-text"
            type="text"            
          />
          <button id="btn" id="btn">決定</button>
        </div>
    
    <script src="src/app.js"></script>
  </body>
</html>

CSS

body {
  justify-content: center;
  text-align: center;
  align-items: center;
  font-family: sans-serif;
}
h1 {
  font-family: "M PLUS Rounded 1c", sans-serif;
}
.select-container {
  display: flex;
}
.message {
  font-size: 30px;
  font-family: "Open Sans", sans-serif;
}
.point-container {
  display: flex;
  justify-content: center;
  text-align: center;
  font-family: "M PLUS Rounded 1c", sans-serif;
}
h2 {
  font-size: 20px;
  font-family: "M PLUS Rounded 1c", sans-serif;
}
#correct {
  font-size: 70px;
  font-family: "M PLUS Rounded 1c", sans-serif;
}
#incorrect {
  font-size: 70px;
  font-family: "M PLUS Rounded 1c", sans-serif;
}
.correct {
  width: 180px;
  height: 200px;
  background-color: gold;
  font-family: "M PLUS Rounded 1c", sans-serif;
}
.incorrect {
  width: 180px;
  height: 200px;
  background-color: indianred;
  font-family: "M PLUS Rounded 1c", sans-serif;
}
.question-container {
  width: 360px;
  height: 100px;
  background-color: lightblue;
  margin-left: auto;
  margin-right: auto;
  font-size: 50px;
  font-family: "M PLUS Rounded 1c", sans-serif;
}

.anser-container {
  display: flex;
  width: 360px;
  margin-left: auto;
  margin-right: auto;
  font-family: "Open Sans", sans-serif;
}

input {
  width: 60%;
  height: 100px;
  font-size: 60px;
  text-align: center;
  font-family: "Open Sans", sans-serif;
}

button {
  width: 40%;
  font-size: 30px;
  font-family: "M PLUS Rounded 1c", sans-serif;
}

set.js （問題と答えの配列）

"use strict";
//////問題を配置///////////////////////////////
const questions = [
  { name: "水素", ans: "H" },
  { name: "ヘリウム", ans: "He" },
  { name: "炭素", ans: "C" },
  { name: "窒素", ans: "N" },
  { name: "酸素", ans: "O" },
  { name: "フッ素", ans: "F" },
  { name: "ネオン", ans: "Ne" },
  { name: "ナトリウム", ans: "Na" },
  { name: "マグネシウム", ans: "Mg" },
  { name: "アルミニウム", ans: "Al" },
  { name: "硫黄", ans: "S" },
  { name: "リン", ans: "P" },
  { name: "塩素", ans: "Cl" },
  { name: "アルゴン", ans: "Ar" },
  { name: "カリウム", ans: "K" },
  { name: "カルシウム", ans: "Ca" },
  { name: "金", ans: "Au" },
  { name: "銀", ans: "Ag" },
  { name: "銅", ans: "Cu" },
  { name: "亜鉛", ans: "Zn" },
  { name: "鉛", ans: "Pb" },
  { name: "バリウム", ans: "Ba" },
  { name: "ニッケル", ans: "Ni" },
  { name: "鉄", ans: "Fe" },
  { name: "スズ", ans: "Sn" },
  { name: "白金", ans: "Pt" },
  { name: "水銀", ans: "Hg" },
  { name: "二酸化炭素", ans: "CO2" },
  { name: "水", ans: "H2O" },
  { name: "二酸化硫黄", ans: "SO2" },
  { name: "二酸化窒素", ans: "NO2" },
  { name: "一酸化炭素", ans: "CO" },
  { name: "水素分子", ans: "H2" },
  { name: "窒素分子", ans: "N2" },
  { name: "酸素分子", ans: "O2" },
];

app.js

"use strict";
/// ここからランダムの配列を生成///
const arry1 = [];
const arry2 = [];
let n = questions.length;
const makeArry = () => {
  for (let i = 0; i < n; i++) {
    arry1.push(i);
  }
};
makeArry();
const len = arry1.length;
for (let n = len; n > 0; n--) {
  const index = Math.floor(Math.random() * n);
  arry2.push(arry1[index]);
  arry1.splice(index, 1);
}
///最初の問題とメッセージをセット///
///↓ id.innreTextでテキストを表示できる！！！///
question.innerText = questions[arry2[0]].name;
const message = document.getElementById("try-again");
message.textContent = "Let's try";
///正解と不正解の数を表示するdivを取得
const correct = document.getElementById("correct");
const incorrect = document.getElementById("incorrect");
///ランダムで生成された配列のインデックスと正解数、不正解数を初期化///
let index = 0;
let correctNum = 0;
let incorrectNum = 0;
///正誤判定の関数///
const forward = () => {
  const $inputText = document.getElementById("input-text").value;
  /// 終わりの問題の2つ前までならこちらへ分岐///
  if (index + 1 < n) {
    message.textContent = "";
    ///もし正解なら////
    if ($inputText === questions[arry2[index]].ans) {
      index++;
      correctNum++;
      question.innerText = questions[arry2[index]].name;
      correct.textContent = correctNum;
      document.getElementById("input-text").value = "";
      message.textContent = "Continue!";
      ///正解でなければ///
    } else {
      incorrectNum++;
      incorrect.textContent = incorrectNum;
      document.getElementById("input-text").value = "";
      message.textContent = "Try again!";
    }
    ///終わりの問題の1つ前になったらこちらへ分岐///
    ///次にクリックした時に出るのが最後の問題///
    ///もし正解ならフィニッシュ///
  } else if ($inputText === questions[arry2[index]].ans) {
    index++;
    correctNum++;
    correct.textContent = correctNum;
    message.textContent = "You're finished!";
    document.getElementById("input-text").value = "OK!";
    ///正解でなければ、トライアゲイン///
  } else {
    document.getElementById("input-text").value = "";
    message.textContent = "Try again!";
  }
};
///決定ボタンを押した時に関数を発火///
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
  if (document.getElementById("input-text").value !== "") {
    forward();
  }
});

///パソコン用にエンターキーでも入力可設定///
window.addEventListener(
  "keydown",
  function (e) {
    if (e.key === "Enter") {
      forward();
    }
  },
  true
);
ブログランキング

返信を残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA