スポンサーリンク

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

quiz-1223Code

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

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

今回の学習成果

    クイズ!

    ここに問題

  <div>
     <h2>クイズ!</h2>
      <div id="question">ここに問題</div>
      <button id="ans1">回答1</button>
      <button id="ans2">回答2</button>
      <button id="ans3">回答3</button>
    </div>

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

CSSの記述

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

JavaScriptの記述

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

検討事項

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

コメント

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