Click here for free DL of the app version that can save data.

No:4012

2561

←

Prev Next

→

コーヒー生豆外観判別ゲーム 2種類存在する選択肢から、正しい選択肢同士を選ぶゲームです。選択肢..ALL
Developer もちきなこ｜Date and time 23/6/27 2:02:54
Build time 84.276 sec｜Game capacity 8.258KB｜

Script

産地と外観の特徴を合わせて正解を答えるコーヒー生豆外観判別ゲームです。以下が実装されたHTMLファイルとなります。

コーヒー生豆外観判別ゲーム

以下のうち、産地と外観の特徴を正しいペアにしてください。

①産地と②外観の特徴を、それぞれ正しいペアにしましょう。

このゲームでは、選択肢をシャッフルして表示し、ユーザーが正しい産地と外観の特徴のペアを選ぶようになっています。選択後に回答を提出することで、正しいかどうかの判定と、答えが表示されます。また、答えが表示された後はシャッフルされた選択肢が再度表示されるようになっています。スマホでも操作しやすいように、レスポンシブ対応のCSSが適用されています。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

Click here for free DL of the app version that can save data.

産地と外観の特徴を合わせて正解を答えるコーヒー生豆外観判別ゲームです。以下が実装されたHTMLファイルとなります。

```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>コーヒー生豆外観判別ゲーム</title>
    <style>
      body {
        font-family: sans-serif;
      }
      #container {
        width: 80%;
        max-width: 500px;
        margin: auto;
        text-align: center;
      }
      h1 {
        margin-top: 30px;
      }
      .question {
        margin-top: 50px;
        border: 2px solid #ddd;
        padding: 20px;
        border-radius: 10px;
      }
      .options {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        margin-top: 20px;
      }
      .option {
        text-align: center;
        padding: 10px;
        border: 3px solid #007bff;
        border-radius: 10px;
        cursor: pointer;
      }
      .option:hover {
        background-color: #007bff;
        color: #fff;
      }
      .selected {
        background-color: #007bff !important;
        color: #fff !important;
      }
      .submit-btn {
        margin-top: 30px;
        background-color: #007bff;
        color: #fff;
        padding: 10px 20px;
        border: none;
        border-radius: 10px;
        cursor: pointer;
        transition: all 0.2s ease;
      }
      .submit-btn:hover {
        background-color: #0056b3;
      }
      .result {
        margin-top: 30px;
        border: 2px solid #007bff;
        padding: 20px;
        border-radius: 10px;
      }
      .correct {
        color: green;
      }
      .incorrect {
        color: red;
      }
      .answer {
        margin-top: 20px;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <h1>コーヒー生豆外観判別ゲーム</h1>
      <div class="question">
        <p class="q-text">以下のうち、産地と外観の特徴を正しいペアにしてください。</p>
        <p class="q-desc">①産地と②外観の特徴を、それぞれ正しいペアにしましょう。</p>
        <div class="options">
          <div class="option" id="optionA"></div>
          <div class="option" id="optionB"></div>
          <div class="option" id="optionC"></div>
          <div class="option" id="optionD"></div>
          <div class="option" id="optionE"></div>
          <div class="option" id="option1"></div>
          <div class="option" id="option2"></div>
          <div class="option" id="option3"></div>
          <div class="option" id="option4"></div>
          <div class="option" id="option5"></div>
        </div>
        <button class="submit-btn" id="submitBtn">回答する</button>
      </div>
      <div id="resultBox"></div>
    </div>
    <script>
      const options = {
        A: "ブラジル",
        B: "コロンビア",
        C: "エチオピアモカ",
        D: "マンデリン",
        E: "ベトナムロブスタ",
        1: "この中で、最も強い深緑色",
        2: "この中では黄色に近い。チャフが多めに付着している",
        3: "センターカットが端まで切れていない、豆の一方が尖っている物がある。欠点豆が目立つ",
        4: "この中では黄色に近い。長い豆と短い豆が混在している",
        5: "この中では緑に近い。チャフの付着が少ない",
      };
      const correctAnswer = {
        A: "2",
        B: "5",
        C: "4",
        D: "1",
        E: "3",
      };
      const qText = document.querySelector(".q-text");
      const optionA = document.querySelector("#optionA");
      const optionB = document.querySelector("#optionB");
      const optionC = document.querySelector("#optionC");
      const optionD = document.querySelector("#optionD");
      const optionE = document.querySelector("#optionE");
      const option1 = document.querySelector("#option1");
      const option2 = document.querySelector("#option2");
      const option3 = document.querySelector("#option3");
      const option4 = document.querySelector("#option4");
      const option5 = document.querySelector("#option5");
      const optionsList = [
        optionA,
        optionB,
        optionC,
        optionD,
        optionE,
        option1,
        option2,
        option3,
        option4,
        option5,
      ];

// create new question
      const newQuestion = () => {
        // shuffle options
        const shuffledOptions = shuffle(optionsList);
        // set option text
        optionA.innerHTML = `①${options.A}`;
        optionB.innerHTML = `①${options.B}`;
        optionC.innerHTML = `①${options.C}`;
        optionD.innerHTML = `①${options.D}`;
        optionE.innerHTML = `①${options.E}`;
        option1.innerHTML = `②${options[1]}`;
        option2.innerHTML = `②${options[2]}`;
        option3.innerHTML = `②${options[3]}`;
        option4.innerHTML = `②${options[4]}`;
        option5.innerHTML = `②${options[5]}`;
        // remove selected class
        optionsList.forEach((option) => {
          option.classList.remove("selected");
        });
      };

// shuffle array randomly
      const shuffle = (array) => {
        let currentIndex = array.length;
        let randomIndex;

while (currentIndex !== 0) {
          randomIndex = Math.floor(Math.random() * currentIndex);
          currentIndex--;

[array[currentIndex], array[randomIndex]] = [
            array[randomIndex],
            array[currentIndex],
          ];
        }

return array;
      };

// check selected answer
      const checkAnswer = () => {
        let selectedOpt1, selectedOpt2;
        optionsList.forEach((option) => {
          if (option.classList.contains("selected")) {
            const optionText = option.innerHTML;
            if (optionText.charAt(0) === "①") {
              selectedOpt1 = optionText.charAt(1);
            } else {
              selectedOpt2 = optionText.slice(1);
            }
          }
        });
        const selectedAnswer = `${selectedOpt1}${selectedOpt2}`;
        const isCorrect = selectedAnswer in correctAnswer;
        showResult(isCorrect);
      };

// show result box with color and answer
      const showResult = (isCorrect) => {
        const resultBox = document.querySelector("#resultBox");
        resultBox.innerHTML = "";
        const resultText = document.createElement("p");
        if (isCorrect) {
          resultText.className = "correct";
          resultText.innerHTML = "正解です！";
        } else {
          resultText.className = "incorrect";
          resultText.innerHTML = "不正解です。";
        }
        const answerText = document.createElement("p");
        answerText.className = "answer";
        answerText.innerHTML = `正解は『${
          options[correctAnswer[selectedOpt1]]
        }』の『${options[selectedOpt2]}』です。`;
        resultBox.appendChild(resultText);
        resultBox.appendChild(answerText);
        newQuestion();
      };

// event listeners
      window.addEventListener("load", () => {
        newQuestion();
      });
      optionsList.forEach((option) => {
        option.addEventListener("click", () => {
          optionsList.forEach((opt) => opt.classList.remove("selected"));
          option.classList.add("selected");
        });
      });
      const submitBtn = document.querySelector("#submitBtn");
      submitBtn.addEventListener("click", () => {
        checkAnswer();
      });
    </script>
  </body>
</html>
```