【オリンピック開催地クイズ】JavaScript初心者がクイズアプリを作ってみた

クイズ

オリンピック、盛り上がってますね!
私は最近、つい試合観戦に夢中でプログラミング学習がちょっとお休み気味です。

そんなすきま時間を使って、オリンピックの開催地を答えるクイズを作ってみました。
新しい技術は使わず、これまでに学んだHTML・CSS・JavaScriptの基本だけで作ったアプリです。

オリンピックが好きな方も、プログラミングに興味がある方も、ぜひクイズに挑戦してみてください!

勉強にはUdemy(ユーデミー)という動画学習サービスを利用しました。
講座のリンクはこちら👇

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

【世界で90万人が受講】Web Developer Bootcamp(日本語版)をUdemyで見る icon

セール情報
Udemyではセールが頻繁に開催されていて、90%OFFになることもあります。
受講するならセールのタイミングが断然おすすめです!

オリンピック開催地クイズに挑戦

ここから実際にオリンピック開催地クイズに挑戦できます👇

何問正解できるかな?

クイズのルールと特徴

出題形式

  • 最初の問題は「2024年の開催地」。
  • 4つの選択肢から1つを選び、正誤判定が表示されます。
  • 「次へ」をクリックすると、1つ前の開催地の問題に進みます。

選択肢は毎回ランダム

  • 正解は必ず含まれ、他の3つはランダムで選ばれます。
  • 選択肢の表示位置もランダムです。

判定画面の見方

  • 正解:「○」と正解の都市名が表示されます。
  • 不正解:「×」と正しい答えが表示されます。

最終問題と結果発表

終了後に正解数が表示され、再挑戦も可能です。

問題は1960年まで、全17問です。

なぜ1960年まで?

1956年メルボルン五輪では馬術だけストックホルムで開催されるという特殊な事情がありました。

そのため、このクイズではイレギュラーな開催を避け、1960年までを対象としています。
第1回(1896年)からすべて知りたい方はWikipediaなどで調べてみてください。

初心者でも安心!Udemyで基礎から学べます

私は、Udemy(ユーデミー)という動画学習サービスで、HTML・CSS・JavaScript の基礎を学びました。

今回作ったオリンピック開催地クイズでは、

  • 問題のランダム表示
  • 正誤判定
  • 合計正解数の表示

といった機能をJavaScriptで実装しています。

初心者向け講座でじっくり勉強したら、このようなクイズアプリを作れるようになります。
少しでもプログラミングに興味を持たれた方は、Udemyの講座を受講してみてはいかがでしょうか?

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

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

【世界で90万人が受講】Web Developer Bootcamp(日本語版)をUdemyで見る icon

セール情報
Udemyではほぼ毎月セールが開催されていて、90%オフになることもあります。
購入するならセール期間が断然おトクです!

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