• プログラミングで遊ぼう ~子供向け学習アプリをつくろう~

    感染症の影響で色々なイベントが中止になり、全国的に臨時休校・休園になり、
    大変な思いをしている方が沢山いらっしゃるかと思いますが、皆さまいかがお過ごしでしょうか??
    どうか、皆さまが体調など崩さず元気に過ごすことができますよう、お祈りしております!

    ちなみに私の息子は小学1年生なのですが、
    突然降ってわいた臨時休校という名の長い春休み、

    このまま放っておいたら、確実にゲーム三昧になってしまう..!

    なんとか、楽しく家庭学習ができるためのコンテンツを提供してあげたいところ..

    しかも、欲を言うなら、
    できれば親が問題を出すとかではなく、自主的にやってほしい。
    あと、できれば「勉強してる感」があんまりないほうがいい(遊びの要素があってほしい)..

    というわけで、ふと思い立って、このようなものをつくりました。
    ランダムに問題を出してくれる計算アプリです。

    もちろん、もっと高性能な学習アプリは世の中にいろいろありますが、
    こんなふうに、自分で手作りしてみることで、
    わが子が楽しめそうな仕様にカスタマイズできたり、
    もちろん自分自身の「プログラミングの勉強になる」というのが良いなあと思いました。

    「ちょっとこれ作ったんだけどやってみて」と、息子に打診したところ
    さっそく遊んでくれた上に、
    「えー?ちょっとかんたんすぎるよー」などと言いつつも何回もやってくれたので、

    うん、これはいいかもしれない..!

    と、手ごたえを感じております。

    ちなみに、問題に正解したときは

    こんな画面がでるようにしてみたのですが、
    思いのほか、こちらの「いらすとや」さんのイラストが息子のツボに入ったようで、
    割と楽しんでくれているようでなによりです。
    子供には、何がウケるかわからないものですね..!

    ちなみに、問題の答えが間違っていたときは、こんな画面が出るようにしました。

    不正解だからといって、あまりインパクトが強い画像がいちいち出てくると
    意外と繊細なわが子はプライドが傷ついてしまうかも..?という懸念により、
    少し控えめなイラストにしてみました。母の気遣いを感じてもらいたいです(多分感じてくれない)。

    わが子は小学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>
    
    The following two tabs change content below.
    山下 芽実

    山下 芽実

    2児の母。GeekGirlLaboのエンジニアコースで学習後、下の子が幼稚園に入園したタイミングで、2018年4月~在宅ワークをしています。いくつかの開発案件を経て、現在はGeekGirlLaboのJavascriptコースでチューターを担当させていただいたり、教材改善の業務を担当したりしています。好きなことはインターネット・プログラミング・音楽・読書・妄想・人の思考の流れをいろいろ想像すること。
Comments are closed.