プログラミングに挑戦しよう!

独学でWebアプリが作れる!
初心者におすすめの動画学習サービス

詳細はこちら

【JavaScript初心者の作品例】ダービー優勝馬で「年上はどっち?」2択クイズを作ってみた!

クイズ

競馬ファン必見!
ダービー馬2頭のうち、どちらが先にダービーを制したかを当てるクイズを作りました。
3歳限定のレースなので、「早い年に勝った馬」が“先輩”となります!

このクイズは、動画学習サービス「Udemy」でプログラミング(HTML/CSS/JavaScript)を勉強して、初心者の私が実際に作ったアプリです。
遊びながら、ちょっとした知識の確認とプログラミング学習の成果を体験してもらえると嬉しいです!

競馬ファンにも、プログラミング学習中の方にも楽しんでもらえる内容になっているので、ぜひ挑戦してみてください!

日本ダービー優勝馬クイズに挑戦する

ここから実際にクイズに挑戦できます👇
2頭のダービー馬から「年上の馬」を選んでください!

日本ダービー優勝馬クイズの遊び方

クイズを始める前に、出題する年代を選べます

  • 1980〜2025年:広い範囲でバランス良く出題
  • 2000〜2025年:近年の馬に絞って出題
  • 1980〜1999年:懐かしい名馬中心で出題

※1970年代以前の馬は難易度が高いため、今回は除外しています。

クイズのルール

  • 出題はランダムで全10問
  • 表示された2頭のダービー優勝馬から「年上の馬(=優勝年が早い方)」を選ぶ
  • 回答後に正解・不正解が表示される
  • 「次の問題へ」ボタンで次の問題に進む
  • 全10問終了後、正解数が表示される

どっちが先輩かな❓

正解!優勝年がわかるのもいいね👍

全問正解!やったね🎉

JavaScriptでこんなことができる!

このクイズアプリは、JavaScriptの基本機能だけで作れます!

  • ラジオボタンで年代を選ぶ
  • データをシャッフルしてランダムに出題
  • 年上かどうかをクリックで判定
  • 正誤の表示
  • 最終的に正解数を集計

コードを書きながら動きを試せるのが楽しいポイントでした!

UdemyでWeb開発を学んでこのアプリを作りました

このクイズアプリは、私が「Udemy(ユーデミー)」でHTML・CSS・JavaScriptを学んで作りました。

  • わかりやすい動画解説
  • 一緒に手を動かして学べる構成
  • セール時なら1,000円台で買える!

私が実際に受講した講座はこちら 👇

📘【世界で90万人が受講】Web Developer Bootcamp(日本語版)

※このリンクは広告です(アフィリエイトリンク)

Udemyで講座を見る

💸 セール情報
Udemyは月に数回セールをやっていて、90%オフになることも!
気になる講座はセール時にチェックしておくのがおすすめです。

関連リンク

📚 Udemyってどんなサービス?という人向けの記事👇

👉 独学でWebアプリが作れる!初心者におすすめのUdemy講座と学習のコツ

🐎 他にも競馬アプリを作っています

👉 適当競馬予想アプリをJavaScriptで作ってみた

タイトルとURLをコピーしました