JavaScript(プログラミング)初心者OK、子供向け学習アプリをつくってみよう！
「プログラミングはどのようなことをするのか分からない」
「プログラミングがどのくらい難しいのか分からない」
この記事はそんな方へ向けて書いています。
こんにちは！
感染症の影響で大変な2020年を過ごされている方もいらっしゃるのではないでしょうか？
私の息子は小学1年生なのですが、突然降ってわいた臨時休校という名の長い春休みに頭を抱えました。
このまま放っておいたら、確実にゲーム三昧になってしまう..！
なんとか、楽しく家庭学習ができるためのコンテンツを提供してあげたいと思いました。
欲を言うなら、できれば親が問題を出すとかではなく、自主的にやってほしい。
あと、できれば「勉強してる感」があんまりないほうがいい（遊びの要素があってほしい）..
というわけで、ふと思い立って、小学1年生向け計算アプリをつくりました。
プログラミング(JavaScript)で計算アプリをつくりました
ランダムに問題を出してくれる計算アプリです。
もちろん、もっと高性能な学習アプリは世の中にいろいろあります。
でもこんなふうに、自分で手作りしてみることで、わが子が楽しめそうな仕様にカスタマイズできたり、もちろん自分自身の「プログラミングの勉強になる」というのが良いなあと思いました。
「ちょっとこれ作ったんだけどやってみて」と、息子に打診したところ、さっそく遊んでくれた上に、「えー？ちょっとかんたんすぎるよー」などと言いつつも何回もやってくれました。
うん、これはいいかもしれない..！
と、手ごたえを感じております。
ちなみに、問題に正解したときは
こんな画面がでるようにしてみたのですが、思いのほか、こちらの「いらすとや」さんのイラストが息子のツボに入ったようで、割と楽しんでくれているようでなによりです。
子供には、何がウケるかわからないものですね..！
ちなみに、問題の答えが間違っていたときは、こんな画面が出るようにしました。
不正解だからといって、あまりインパクトが強い画像がいちいち出てくると、意外と繊細なわが子はプライドが傷ついてしまうかも..？という懸念により、少し控えめなイラストにしてみました。
母の気遣いを感じてもらいたいです（多分感じてくれない）。
わが子は小学1年生なので、ここでは、簡単な「1桁の数字をたし算する問題」しか出ないように作ってしまいましたが、（2~9の範囲でランダムな数字を二つ生成して、それらをたし算するようにしています）
例えばですが、
- たし算だけじゃなく引き算や掛け算、割り算などもできるようにする
- 問題の難易度を選べるようにする
- 点数が記録されるようにする
などの機能を追加してみても勉強になりそうですし、
問題の内容を、お子様のレベルに合わせてカスタマイズする、というのも楽しそうです。
GeekGirlLaboのJavascriptコースを受講された方は、復習にもなりそうですね！
私が書いたプログラムのソースです
私の作ったものは改良の余地が満載ですので、ぜひTwitterなどで「こんなのつくりました」などの皆様の投稿も、お待ちしております！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link href="css/style.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>
<script>
var min_num = 2;
var max_num = 9;
var number1;
var number2;
$(function() {
// 「2 〜 9」の範囲でランダムな数を2つ作る
number1 = Math.floor(Math.random() * (max_num - min_num) + min_num);
number2 = Math.floor(Math.random() * (max_num - min_num) + min_num);
$("#question").html(number1 + "+" + number2 + "=");
});
$(function() {
$('#check').click(function() {
var resultmsg, img;
if ((number1 + number2) == Number($('#answer').val())) {
resultmsg = "せいかい！";
img = "success";
} else {
resultmsg = "ざんねん！";
img = "failure";
}
$("#msg").html(resultmsg + "<br>" + number1 + "+" + number2 + "のこたえは「" + (number1 + number2) + "」だね");
$("#icon").html('<img src="images/' + img + '.png">');
$('#question_area').hide();
$('#result_area').show();
});
$('#goback').click(function() {
window.location.reload();
});
});
</script>
<title>たしざんのれんしゅう</title>
</head>
<body>
<div id="question_area">
<span id="question"></span> <input autofocus="" id="answer" pattern="\d*" type="number">
<p>
こたえはわかったかな？
</p>
<p>
こたえをにゅうりょくしたら、<br>
したのボタンをおしてね
</p>
<div>
<a class="btn" href="#" id="check">こたえあわせ</a>
</div>
</div>
<div id="result_area">
<p id="msg"></p>
<p id="icon"></p><a class="btn" href="#" id="goback">つぎのもんだいにチャレンジ</a>
</div>
</body>
</html>
【プログラミングで遊ぼうシリーズ】
プログラミングで遊ぼう～秋の紅葉編～
～jQueryRotateを使って回転寿司を作ってみよう～
山下 芽実
最新記事 by 山下 芽実 (全て見る)
- JavaScript(プログラミング)初心者OK、子供向け学習アプリをつくってみよう！ - 2020年3月6日
- プログラミングで遊ぼう～jQueryRotateを使って回転寿司を作ってみよう～ - 2020年1月28日
- プログラミングで遊ぼう～秋の紅葉編～ - 2019年12月27日
