Web教材について
以下の3つの言語を使って、Web教材を作ります。
HTML (HyperText Markup Language)
Webページの構造を記述する言語です。要素をタグで囲み、見出しや段落、画像などのコンテンツを配置します。
CSS (Cascading Style Sheets)
Webページの見た目やスタイルを指定する言語です。HTMLで作成した要素の色やフォント、レイアウトなどを設定します。
JavaScript (JS)
Webページに動的な機能を追加する言語です。ボタンのクリックによる処理や、アニメーション、データの取得などを実現します。
準備するもの
Web教材を置くところ
学校、または、自身のホームページ。ローカル（自分のPC）だけでも動かすことはできますが、Webで動くと皆さんがすぐに使えます。
プログラミング初心者でも、簡単なWeb教材なら作成できます。必要な知識は、生成AIや参考資料で補いながら学習できます。
メモ帳または、Visual Studio Code
コードを相談する仲間
GeminiやCopilotなどの生成AIだけでなく、プログラミング経験のある友人やオンラインコミュニティも活用しましょう。
プログラムをホームページにアップする
FFFTPなどのFTPクライアントソフトや、クラウドストレージサービスを利用してアップロードします。
問題データを作成する（フラッシュ型教材の場合）
Excelまたは、スプレッドシート。CSV（UTF-8）で保存
作成手順
どういうものを作りたいか生成AIに説明する。
プロンプトを打ち込む（最後に例を示しています。）
出てきたものを、メモ帳または、Visual Studio Codeに貼り付け、保存する。
保存したものをFFFTPを使って、Web上にアップする。
アップした、htmlにアクセスする。
動きを確認し、修正点などを見つける。
完成するまで1から5を繰り返す。
簡単な例
プロンプトで、以下を書き込みます。
「かけ算九九の練習用として、問題と答えが交互に出てくるWebアプリを作りたいです。」
Geminiからの回答ここから
かけ算九九の練習用Webアプリですね。問題と答えが交互に出てくる形式で、楽しく学習できるようなアプリを作成しましょう。
アプリの構成
このアプリは、HTML、CSS、JavaScriptを使用して作成します。
HTML: アプリの構造を定義します。
CSS: アプリの見た目を装飾します。
JavaScript: 問題の生成、答えの判定、画面の制御などの処理を行います。
アプリの機能
九九の問題をランダムに出題
問題と答えを交互に表示
正誤判定機能
正解数、不正解数を表示
リセット機能
コーディング
以下に、サンプルコードの一部を示します。安心してください，実際は全て表示してくれます。
<!DOCTYPE html>
<html>
<head>
<title>かけ算九九練習</title>
<style>
body
<h1>かけ算九九練習</h1>
<div id="question"></div>
<input type="text" id="answer">
<button id="check">答え合わせ</button>
<p id="result"></p>
<p>正解数: <span id="correct">0</span></p>
<p>不正解数: <span id="incorrect">0</span></p>
<button id="reset">リセット</button>
<script>
// JavaScriptコード
<（ 途 中 省 略 ）>
</script>
</body>
</html>
アプリの改善
上記のコードは基本的な機能のみを備えています。必要に応じて、以下の機能を追加することで、より使いやすいアプリにすることができます。
制限時間の設定
問題の難易度調整
デザインの変更
効果音やBGM
九九の段を選択できる機能
これらの情報を活用して、ぜひかけ算九九練習Webアプリを作成してみてください。
Geminiからの回答ここまで