Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 157

Warning: in_array() expects parameter 2 to be array, bool given in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 476

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 484
コーヒー生豆外観判別ゲーム 2種類存在する選択肢から、正しい選択肢同士を選ぶゲームです。選択肢には、①産地(A〜E)と、②外観(1〜5)の特徴の2種類が存在しています。①産地と②外観の特徴を、それぞれ正しいペアにしましょう。 ①産地 A:ブラジル B:コロンビア C:エチオピアモカ D:マンデリン E:ベトナムロブスタ ②外観の特徴 1:この中で、最も強い深緑色。 2:この中では黄色に近い。チャフが多めに付着している。 3:センターカットが端まで切れていない、豆の一方が尖っている物がある。欠点豆が目立つ。 4:この中では黄色に近い。長い豆と短い豆が混在している。 5:この中では緑に近い。チャフの付着が少ない。選択肢には、①なら『ブラジル』、②なら『この中で、最も強い深緑色』などを表示します回答が終わったら、正誤判定と、答えを表示します。答えの組み合わせは、①Aと②2,①Bと②5,①Cと②4,①Dと②1,①Eと②3です。Aや1には、選択肢の内容(Aならブラジル、1なら「この中で、最も強い深緑色」)を表示します。's game | AI game creator

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

No:4012

2717

←

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]現在の新着人気ランキング

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>
```