【JavaScript】プログラミング授業案⑪【３択クイズ】

２年後には実際にプログラミングを授業の中で実施しなくてはなりません。
有難いことに、学校設定科目として３年生に情報演習の授業があります。
今年度から、実験的にプログラミング授業を行うことにしました。
前回までの配列の知識や関数、条件分岐の知識を総動員して今度は３択クイズを作っていきます。

【JavaScript】プログラミング授業案⑩【タイピングゲーム】

２年後には実際にプログラミングを授業の中で実施しなくてはなりません。授業案の10時間目。配列を使ってタイピングゲームアプリを作成します。

今回の学習成果

クイズ！

ここに問題

  <div>
     <h2>クイズ！</h2>
      <div id="question">ここに問題</div>
      <button id="ans1">回答１</button>
      <button id="ans2">回答２</button>
      <button id="ans3">回答３</button>
    </div>

buttonを用意して、そこに選択肢を表示させます。
ダミーテキストで、何がそこに飛んでくるのか、分かりやすくしておくといいですね。

CSSの記述

CSSの中身をシンプルです。
もちろんこだわって記述してもいいのですが、授業ということを考えると、あくまでJaveScriptに時間をかけたいところです。
早く完成した子たちのプラスαとして、CSSは残しておいてもいいかもしれません。

JavaScriptの記述

今回は配列の中身の順番が大切になってきます。
［問題，回答１，回答２，回答３，答え］の順で入れていきます。
ちょっと長くなるので、改行を入れていますが、コーディングに際してはインデントや改行は表に出てこないので、そのあたりの説明も繰り返し伝えていきます。
本格的にゲームを作るのであれば、もっと変数や定数を定義してリファクタリングしていくべきです。
ですが、生徒にとっては余計にわけわかんなくなってしまうので、ある程度長くなってしまっても、そのまま記述していきます。
resultの機能ですが、最初は条件分岐の３か所に同じように入れておいて、コードをスッキリさせるリファクタリングについて理解するために、取っておいてもいいかもしれません。

検討事項

ここまで進んでくると、課題研究的に自分たちでアプリ開発をさせるのも見えてきます。
が、実際の情報Ⅰの中で扱うとなると、そこまで行くのはちょっと違うかもしれません。
プログラムの動きを理解して、一つひとつの点と点をつなげる勉強ができれば、十分なのかもしれません。
果たして、新課程ではどこまで求められるのでしょうか。