作って遊ぼう&学校の応援

 最近JavaScriptを取得、学校支援の〈動く教材〉を作っています。

《再掲》ひな飾りゲーム 初めて作ったゲームです。

2025-02-16 11:52:02 | ゲーム
 プログラミングができるようになって初めて作ったものです。初歩的なものですが、図や音の活用など新しく勉強したのを覚えています。今であればそれらをプラウザに取り込んで瞬時に活用する方法もあるかな~とも考えますが、それほどの必要性があるのか、〔動く教材〕を中断してするのかなど考えると、これで十分という結論に至りました。

 ということで、そのまま再掲することにしました。

ひな飾りゲーム 

スマホ用
パソコン用

 これが初期画面です。
 〔完成〕〔名前付〕〔はじめ〕のボタンが押せる状況にあります。〔はじめ〕でゲームがスタートします。

上の〔名前付〕ボタンを押すと、名前付きでひな人形が正しい位置に並びます。

〔はじめ〕を押してゲームをはじめます。
 ゲーム途中の画面です。



 人形を選択すると赤い枠が表示されます。
 次にその位置を押すと、間違っていれば×が表示されます。すぐ次の場所を押すことができます。


 正しい位置であれば人形が表示されます。


 ゲームが終了しました。
〔またする〕〔おわり〕が選択できます。
 最下部には成績(時間、お手つき回数)が表示されます。何回も繰り返して、短時間でお手つきなしの好記録を達成してください。

 パソコン用の表示です。紹介しておきます。
 〔完成〕を押した画面
ゲーム開始画面

 楽しく遊んでください。
 次のQRコードを他の写真でとると、スマホ用のひな飾りゲームが開きます。 お友だちに紹介してください。



〔動く教材〕直角三角形の斜辺の長さ(三平方の定理)

2025-02-11 20:35:35 | 教材の開発
 「三平方の定理」は、中学校3年数学で学習する内容です。一般的には「ピタゴラスの定理」ともいいます。実際に斜辺の長さを求めるときには √ (ルート)を使いますから、3年生の最後の最後に学ぶ教材です。

 直角三角形の底辺の長さをa、縦辺の長さをb、斜辺の長さをcとすると、

 という式になるのが「三平方の定理」です。

 どのような動く教材かというと、直角三角形の直角を作る2つの辺、底辺と縦辺の長さを変えることができます。
 それにしたがって直角三角形が変化します。もちろん斜辺の長さが変化しますから、その長さを測定するような仕組みになっています。
 それぞれの辺の2乗が出てきますが、この値はそれぞれの辺を一辺とする正方形の面積にあたります。正方形を描いたり面積を求めることもできます。
 三平方の定理には100以上もの証明方法があるといわれていますが、ここでも証明例を一つ紹介します。

 ピタゴラスが三平方の定理を発見する過程をたどる学習です。

 実際の画面です。
 初期画面です。
 底辺が20.0 縦の辺が15.0の直角三角形が描かれています。
 下のボタンで辺の長さを変えることができます。

 いくらかボタンを押して長さを変えたところです。
 斜辺の長さを求めたいですね。

 そこで、右側のボタン〈定規〉を押すと、
 このように、斜辺にそって定規が表示されます。それを読むことで長さがわかります。
 写真では、初期画面での定規表示になっていますが私のミスです。実際はその斜辺にそっての定規になります。スミマセン!

 正しい測定値は〈定規〉の下の〈数字〉ボタンを押すと表示されます。

 〈数字〉の下には〈正方形〉ボタンがあります。それを押すと、
 それぞれの辺を一辺とした正方形が3つ表示されます。

 その下の〈面積〉ボタンを押すと、
 黄色い数字で面積が表示されます。この場合は20、15、25という2乗しやすい数字ですが、小数点が付いたりする数字でも、瞬時に計算して表示してくれます。
 この3つの正方形の面積の値から「三平方の定理」が成り立つこと「底辺の正方形の面積+縦辺の正方形の面積=斜辺の正方形の面積」を、実験的に”確認”することができます。底辺と縦辺の長さがどんなときも成り立つことがわかります。

 三平方の定理が図形的にも証明できるということを、次の〈証明例〉ボタンを押して、証明のヒントを表示します。

 これです。同じ直角三角形を3つ描き加えることで、〔底辺の長さ+縦辺の長さ〕の辺を一辺とする正方形が描けます。この面積は計算できます。その正方形の中にある4つの直角三角形の面積も計算できます。このことから、前者から後者を引くと、斜辺を一辺とした正方形の面積となります。先ほどのabcでいうと、abからcが求まるということですから、
 が証明されることになります。
 
 〈証明例〉だけを押したときの画面です。
 すっきりした表示になりました。この状態でも下のボタンを押して辺の長さを変えると図形が変化します。面白いです。

 実際に使ってください。次のURLかバナー(図)を押すと、プログラムのある私のホームページに飛んで使うことができます。



この動く教材は ”使ってもらうこと” が一番の希望です。中学生や中学校や高校の数学の先生がおられましたら知らせてください。

スマホで使ってみたら、下のボタンが小さすぎますね。もうしばらくしたら修正してスマホ用を提供します。

追加 R07年02月12日 10時
 スマホ用を作りました。 ボタンを大きくして、場所も下部にまとめました。





〔動く教材〕月の満ち欠けシミュレーション

2025-02-03 22:16:20 | 教材の開発
〔動く教材〕〔シミュレーション〕太陽と地球と月の動きVer.2 中学校理科 高校地学 - 作って遊ぼう&学校の応援

〔動く教材〕〔シミュレーション〕太陽と地球と月の動きVer.2 中学校理科 高校地学 - 作って遊ぼう&学校の応援

追記令和7年1月13日正午月の満ち欠けの月齢が、1日分大きく表示されているところを修正しました。今日13日正午の月齢は13.2ですが、本プログラムでは13.9と表示され...

goo blog

 先に太陽系を示して、そこでの月の動きと日本の各地から見える月の動きと満ち欠けをシミュレーションとして提供しましたが、まだまだ一足飛びな理解を求めている教材ではないかと考えるに至りました。
 そこで、その前の段階としての教材を作成しました。太陽と地球を固定して、そこで月が地球の周りを公転するときに、地球から見える月の満ち欠けを示しました。

 月の満ち欠けは、同じ日時であれば、地球のどこから見ても同じですからこういう表現ができます。

満月↑

 こんな感じです。シミュレーションですから、初期設定で、月はわずかに反時計回りに動いています。下の緑の表示がありますが、これが速さを示しています。これより左側を押すと〈遅く〉なり、右側を押すと〈速く〉なります。

 満月からの月の動きを順に観察していくと、


下弦の月↑


ほぼ新月↑

ほぼ新月↑


上弦の月↑


 このように、月の位置によって、満ち欠けを連続的に観察することができます。

 このシミュレーションからわかったことは、まず地球から見て月が太陽の反対の位置にあるときに“満月”になります。この図で月が上にあるとき、左側が明るい半月になります。その間は、満月から右側から影が広がっていく様子が観察できます。
 更に時間が進むと、右側からの影の広がりが進んで、月が太陽側にきたとき“新月”となって、影が月を覆ってしまって見えなくなります。
 その後は、右側から明るい部分が広がっていって、反対側に来るときは“満月”に戻ります。これを繰り返します。

 太陰暦では,新月から新月までがひと月です。日数にして約29.5日です。一年は12月ですから、これでは季節がズレてします。これを修正するために、3年毎に12月の後に閏月(うるうつき)が追加されます。したがって閏月のある年は13ヶ月となります。

 ニュースで中国の旧正月が紹介されますが、そのとき(太陰暦の一月一日)の満ち欠けは“新月”です。

ネットから
仕組み
  • 太陰暦の1年は約354日で、太陽暦の1年(約365.24日)と比べて11日ほど短いです。
    <svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>
  • この差を補正するために、約3年に1度うるう月を挿入します。
    <svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>
  • うるう月の日数は29日か30日で一定ではありません。
 

 スマホ用に、2つの図を縦に並べて細長くしたものを作成しました。


 実際に使ってみませんか。次のURLかバナー(図)をタップすると使用することができます。

 パソコン用です。



スマホ用です。





 最後まで読んでいただきありがとうございました。
 自分ながら使い勝手の良い”理解しやすい教材”ができました。
 お近くに理科の先生がおられましたら紹介していただくと嬉しいです。

 「動く教材」を検索してもらうと、これまで紹介したものがたくさん表示されるようになりました。皆さんに使ってもらうと、検索の上位に表示されるようになりますのでよろしくお願いします。

 日本中の小中高の学校で使ってもらえたらいいな~。

〔動く教材〕個別の sin cos tan の学習

2025-01-16 09:23:05 | 教材の開発

〔動く教材〕三角関数 sin cos tan 高校数学 - 作って遊ぼう&学校の応援

sincostan覚えていますか?「うん、習ったけど、どんな内容か忘れたな〜」というかたが多いと思われます。思い出すのにいい教材を作りました。まずは読んでください。実際に...

goo blog


 以前の投稿で、sin cos tan の一括した学習ソフトを紹介しましたが、まずは個別の学習から始まるので、それに対応したソフトに加工しました。”加工した”といっても不必要な図を見えないほど小さくしただけです。その他のプログラムは変えていません。

まずは sin です。
sin の図を縦横2倍に拡大して表示しています。初期設定が30度ですから、図の中に赤い点が1つプロットされています。横軸30度のところにsin30=0.500 がその点です。

 次に下のボタン+1を押し続けます。すると、
どんどん点が重なって線になります。今、角度が 217.0 ですから sin217=-0.602 が最後の点です。

 さらに押し続けると
sin 関数のグラフが完成します。
他にも角度を変えるボタンが8こありますから、押して、求めたい sin 値を探してください。

 ぜひ使ってみませんか。次のURLかバナー(図)をクリックすると使えます。


 cos tan についても同様に作成しました。

cos



cos も使ってみませんか。


tan



tan も使ってみませんか。



いかがでしたか。昔を思い出したかたも多かったと思います。

 お願いになりますが、「こんなのを作って欲しい」というのはありませんか。もしあったらコメントに書いてください。できないことも多いですが、勉強を重ねて取り組むつもりです。宜しくお願いします。

〔動く教材〕〔シミュレーション〕太陽と地球と月の動きVer.2 中学校理科 高校地学

2025-01-05 13:53:00 | 教材の開発
 初期画面は今の空の太陽と月の位置や満ち欠けとほぼ一緒のものができました。
     難しかったです。

 Ver.1の投稿は、初期画面が2024年の秋分の日から始まりましたが、今の日付時間にならないかと考えていました。このプログラムは動きのほうから日付時間を計算して表示するようになっているので、先に日付時間を決めて動きを表現することには困難があるのです。
 そこで、このVer.2は初期設定の 2024/ 09/ 23/ 00/ 00/ 00.0の時間を0.1秒を単位として時間をすべて秒だけの数で表していて、それを年月日時分秒.0に変換しているんですが、この秒数を今の日付時間になるように順に増やしていって求める方法を考えました。実際、作ってみると”瞬時”に計算できるものができました。プログラムを立ち上げると、すぐ今の日付時間の太陽・地球・月の動きが表示されます。

 先に紹介したVer.1は、スマホでは画面に収まってもすべてが小さすぎて使いずらかったですが、Ver.2ではスマホ用を作ってボタンや図の位置を変えて使いやすくしました。起動すると画面は今日の日付時間となって2つの図は今の太陽・地球・月の動きを現しています。特に下図は今の空の太陽の位置が表示されます。曇りであっても「太陽はあそこにある。」と指させます。

 使い方です。図にしましたのでご覧ください。

〇 パソコン用です。
〇 スマホ用です。


 実際に使ってみませんか。
 私のホームページに飛びますが、次の図をタップすると使うことができます。楽しい?・勉強になります? かわかりませんが、ちょっと使ってみてください。



 どのボタンを押しても壊れることはありませんから、まずは時間を早める【千倍】や【万倍】などのボタンを押してみて下さい。一日が数分数十秒で経過します。

 東経を取得する関数を見つけましたが、画面下のボタンを設置しました。しかし、プログラムをアップすると「取得できませんでした」としか表示されません。チャットGPTにその理由を尋ねると、スマホの設定で許可がOFFになっているかもしれないということでした。どうすることもできず残念です。
解決…プロトコルhttpをhttpsに訂正して解決しました。httpsの方が「暗号化」された通信で、より機密性が高いという通信方法だそうです。
 ホームページの提供元のFC2の設定にhttpにするかhttpsにするか選択するところがありました。

 一昨日の13日夕刻に白い月が東の空に見えていました。このプログラムでは太陽が沈んだ後だんだん月の色が空の色→白→黄色に変わるようにしていましたが、改めて、太陽が低い時から白い月が見えるようにしました。実際の晴れの空に近づけることができました。

 最後まで読んでいただきありがとうございました。今回はプログラムの作り方をちょっと紹介しましたが、こんなことが楽しいと思う自分です。これが誰かの役に立ってくれれば最高なんですが、どうですかね?