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

No:5384

1270

←

Prev Next

→

コーヒーインストラクター1級コーヒーインストラクター1級の練習問題を解くことが出来ます。
Developer もちきなこ｜Date and time 23/6/30 0:41:10
Build time 52.705 sec｜Game capacity 5.986KB｜

Script

了解です。プログラムで解答できるコーヒーインストラクター1級の練習問題を作成します。以下のようなHTMLファイルを作成します。

コーヒーインストラクター1級の練習問題

このHTMLファイルをブラウザで開くと、コーヒーインストラクター1級の練習問題がプレイできる形式のゲームが表示されます。各問題に対して3つの選択肢の中から正解を選ぶ形式です。選択肢をタップすると、選択肢が正しいかどうかが表示され、次の問題に進むことができます。全ての問題に回答した後は、スコアが表示されます。スマホで操作することを前提に作成したため、収まりがよくスタイリッシュなデザインとなっています。ただし、絵文字は使用しておりません。

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

了解です。プログラムで解答できるコーヒーインストラクター1級の練習問題を作成します。

以下のようなHTMLファイルを作成します。

```html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>コーヒーインストラクター1級の練習問題</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            text-align: center;
            margin-top: 100px;
        }
        button {
            padding: 10px 20px;
            font-size: 20px;
            margin: 10px;
        }
    </style>
</head>

<body>
    <h1>コーヒーインストラクター1級の練習問題</h1>
    <div id="question"></div>
    <button id="choice1" onclick="checkAnswer(0)"></button>
    <button id="choice2" onclick="checkAnswer(1)"></button>
    <button id="choice3" onclick="checkAnswer(2)"></button>
    <button id="next" onclick="nextQuestion()" style="display: none;">次の問題</button>
    <script>
        var questions = [
            {
                question: "コーヒーの豆の中で最も焙煎時間が長くなるのはどれ？",
                choices: ["ライトロースト", "シナモンロースト", "ダークロースト"],
                correctAnswerIndex: 2,
                explanation: "ダークローストは焙煎時間が最も長く、豆が深煎りされます。"
            },
            {
                question: "コーヒーの品種で最も広く栽培されているのはどれ？",
                choices: ["アラビカ種", "ロブスタ種", "リベリカ種"],
                correctAnswerIndex: 0,
                explanation: "アラビカ種は一般的なコーヒーの品種で、品質の高いコーヒーとして知られています。"
            },
            {
                question: "コーヒーの抽出において、抽出時間が長くなるとどうなる？",
                choices: ["酸味が強くなる", "苦みが強くなる", "香りが増す"],
                correctAnswerIndex: 0,
                explanation: "抽出時間が長くなると酸味が強くなります。"
            }
        ];

var currentQuestionIndex = 0;
        var score = 0;

function startGame() {
            showQuestion(currentQuestionIndex);
        }

function showQuestion(questionIndex) {
            var questionElement = document.getElementById("question");
            questionElement.textContent = questions[questionIndex].question;

var choices = questions[questionIndex].choices;
            for (var i = 0; i < choices.length; i++) {
                var choiceElement = document.getElementById("choice" + (i + 1));
                choiceElement.textContent = choices[i];
            }
        }

function checkAnswer(choiceIndex) {
            var selectedChoiceElement = document.getElementById("choice" + (choiceIndex + 1));
            var selectedChoice = selectedChoiceElement.textContent;

var correctAnswerIndex = questions[currentQuestionIndex].correctAnswerIndex;
            var correctChoiceElement = document.getElementById("choice" + (correctAnswerIndex + 1));
            var correctChoice = correctChoiceElement.textContent;

if (selectedChoice === correctChoice) {
                selectedChoiceElement.style.backgroundColor = "green";
                score++;
            } else {
                selectedChoiceElement.style.backgroundColor = "red";
            }

for (var i = 0; i < 3; i++) {
                var choiceElement = document.getElementById("choice" + (i + 1));
                choiceElement.disabled = true;
                if (i !== correctAnswerIndex) {
                    choiceElement.style.opacity = "0.5";
                }
            }

var nextButton = document.getElementById("next");
            nextButton.style.display = "block";
        }

function nextQuestion() {
            currentQuestionIndex++;

var questionElement = document.getElementById("question");
            questionElement.textContent = "";

var nextButton = document.getElementById("next");
            nextButton.style.display = "none";

for (var i = 0; i < 3; i++) {
                var choiceElement = document.getElementById("choice" + (i + 1));
                choiceElement.textContent = "";
                choiceElement.style.backgroundColor = "";
                choiceElement.disabled = false;
                choiceElement.style.opacity = "1";
            }

if (currentQuestionIndex === questions.length) {
                showScore();
            } else {
                showQuestion(currentQuestionIndex);
            }
        }

function showScore() {
            var questionElement = document.getElementById("question");
            questionElement.textContent = "スコア: " + score + " / " + questions.length;

for (var i = 0; i < 3; i++) {
                var choiceElement = document.getElementById("choice" + (i + 1));
                choiceElement.style.display = "none";
            }
        }

startGame();
    </script>
</body>

</html>
```

スマホで操作することを前提に作成したため、収まりがよくスタイリッシュなデザインとなっています。ただし、絵文字は使用しておりません。