♰はじめに♰　🦔

初投稿である。
JS初心者がクイズゲームを作ってみた。(製作時間20分)

最初はバニラJSだけで書こうと思ったが、古よりの技術「jQuery」を取り入れようと思う。
まずはHTML。

index.html

<html>
    <head>
        <title>asobi</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
        <style>
            h1{
                text-align: center;
            }
            #content{
                margin-left: 40%;
            }
        </style>
    </head>
    <body>
            <h1>四択クイズ</h1>
        <button id="start">スタート</button>
        <div id="content" hidden>
            <div id="q_num"></div>
        <div id="text"></div>
        <div id="buttons">
            <button id="button1"></button>
            <button id="button2"></button>
            <button id="button3"></button>
            <button id="button4"></button>
        </div>
        </div>
        <script src="main.js"></script>
    </body>
</html>

bodyタグ上から、タイトル、スタートボタン、問題番号、問題文、回答ボタン４つ。
後はお情け程度のcss。
そしてJS。

main.js

(function ($) {
    const q_array = [
        {
            question: "愛媛県の県庁所在地は？",
            ans1: "松江市",
            ans2: "高松市",
            ans3: "松山市",
            ans4: "浜松市",
            correct: 3
        },
        {
            question: "さらば青春の光「森田哲矢」の相方は？",
            ans1: "北ぶくろ",
            ans2: "西ぶくろ",
            ans3: "南ぶくろ",
            ans4: "東ぶくろ",
            correct: 4
        },
        {
            question: "海豚の読みは？",
            ans1: "なまず",
            ans2: "いるか",
            ans3: "しゃち",
            ans4: "くらげ",
            correct: 2
        },
        {
            question: "豚に？",
            ans1: "真珠",
            ans2: "念仏",
            ans3: "小判",
            ans4: "金棒",
            correct: 1
        }
    ];
    //現在の要素番号
    let i = 0;
    //playerが選択したボタン番号
    let p_num = 0;
    //初期ロード時
    $(function () {
        createText();
    });
    //問題生成
    function createText() {
        $("#q_num").html("第"+(i+1)+"問");
        $("#text").html(q_array[i].question);
        $("#button1").html(q_array[i].ans1);
        $("#button2").html(q_array[i].ans2);
        $("#button3").html(q_array[i].ans3);
        $("#button4").html(q_array[i].ans4);
    }
    //正解時
    function seikai(){
        if (i===q_array.length-1) {
            $("#content").hide();
            $("h1").html("クリア");
        }
        i++;
        createText();
    }
    //不正解時
    function huseikai() {
        alert("不正解");
    }
    ;
    //ボタンクリック時
    for (let j = 1; j < 5; j++) {
        $("#button" + j).click(function () {
            p_num = j;
            if (q_array[i].correct === p_num) {
                seikai();
            } else {
                huseikai();
            }
        });
    }
    //スタートクリック時
    $("#start").click(function () {
        $("#start").hide();
        $("#content").show();
    });
})(jQuery);

これが初学者のコードです。こんな程度です。
次はもう少し時間かけて何か作ります。