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

No:23124

←

Prev Next

→

絵文字クイズ
Developer バファリンヌ｜Date and time 23/10/28 0:58:31
Build time 56.293 sec｜Game capacity 2.518KB｜

Script

了解しました。以下は絵文字クイズの例です。

絵文字クイズ

問題が表示されます

上記のコードは絵文字クイズのゲームを実装したものです。3つの問題があり、絵文字が表示され、ユーザーが入力欄に答えを入力して「答える」ボタンをクリックすると、正解か不正解かがアラートで表示されます。次の問題に進むときは、自動的に次の問題が表示されます。スマホでも遊べるようにレスポンシブデザインにも対応しています。以上が、1枚のHTMLファイルで実装された絵文字クイズのプログラムです。

←

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>
</head>
<body>
    <h1>絵文字クイズ</h1>
    <p id="question">問題が表示されます</p>
    <input type="text" id="answer" placeholder="答えをひらがなで入力してください">
    <button onclick="checkAnswer()">答える</button>

let currentQuestionIndex = 0;
        let currentQuestion;

function displayQuestion() {
            currentQuestion = questions[currentQuestionIndex];

document.getElementById("question").innerHTML = `次の絵文字は何でしょう？ ヒント：${currentQuestion.hint}`;
        }

function checkAnswer() {
            const userAnswer = document.getElementById("answer").value.toLowerCase();

if (userAnswer === currentQuestion.answer) {
                alert("正解！");
            } else {
                alert("不正解！");
            }

// 次の問題へ進む
            currentQuestionIndex++;

// 最後の問題の場合は最初に戻る
            if (currentQuestionIndex >= questions.length) {
                currentQuestionIndex = 0;
            }

// 問題を表示
            displayQuestion();
        }

// 初期問題を表示
        displayQuestion();
    </script>
</body>
</html>
```