Ammica Quiz. Line up multiple whites and guess which white is which by using the choices.'s game

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
Ammica Quiz. Line up multiple whites and guess which white is which by using the choices.'s game | AI game creator

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

No:1993

1973

←

Prev Next

→

Ammica Quiz. Line up multiple whites and guess whi..ALL
Developer User3457｜Date and time 23/6/19 17:14:35
Build time 28.191 sec｜Game capacity 2.409KB｜

Script

以下が、アンミカクイズを含む1枚のhtmlファイルの実装例です。

どれが白？

🐼

🐰

🐻

🐨

このファイルでは、アンミカクイズを実装しています。質問部分の上には、「どれが白？」というテキストが表示されます。選択肢部分には、白い背景にそれぞれ違う動物の絵文字が表示されます。正解は2番目の選択肢なので、その選択肢をクリックすると「正解！👍」と表示され、それ以外の選択肢をクリックすると「不正解。。。😢」と表示されます。絵文字を多めに使い、スマホで操作しやすいように簡潔なレイアウトにしました。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

以下が、アンミカクイズを含む1枚のhtmlファイルの実装例です。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>アンミカクイズ</title>
        <style>
            body {
                background-color: #FFDAB9;
                font-size: 20px;
                text-align: center;
            }
            #question {
                margin-top: 50px;
                margin-bottom: 30px;
                font-size: 30px;
                font-weight: bold;
            }
            #choices {
                margin-bottom: 50px;
            }
            .choice {
                margin: 20px;
                padding: 10px;
                background-color: #FFF;
                border-radius: 20px;
                cursor: pointer;
                display: inline-block;
            }
            #result {
                font-size: 25px;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <div id="question">どれが白？</div>
        <div id="choices">
            <div class="choice" onclick="checkAnswer(1)">🐼</div>
            <div class="choice" onclick="checkAnswer(2)">🐰</div>
            <div class="choice" onclick="checkAnswer(3)">🐻</div>
            <div class="choice" onclick="checkAnswer(4)">🐨</div>
        </div>
        <div id="result"></div>
        <script>
            const correctAnswer = 2;
            function checkAnswer(choice) {
                if (choice === correctAnswer) {
                    document.getElementById("result").textContent = "正解！👍";
                } else {
                    document.getElementById("result").textContent = "不正解。。。😢";
                }
            }
        </script>
    </body>
</html>