barutanGNE's blog

kindleで読んだ本の感想や、プログラミングに関する記事など。

「世界はひとつの教室 」

kindle 教育 テクノロジーと未来 読書

世界はひとつの教室 「学び×テクノロジー」が起こすイノベーション

世界はひとつの教室 「学び×テクノロジー」が起こすイノベーション

著者のTEDでのスピーチ
サルマン・カーン「ビデオによる教育の再発明」 - YouTube

反転授業とは

反転授業とは、一言で言えば、今まで教室でやっていた講義の代わりに、生徒に家で授業の動画をみてくるのを宿題とし、逆に今まで生徒に宿題としてだしていた演習問題を、教室でやるようにする、というものだ。
現状の学校の授業は、おおよそ、先生が30人から40人の生徒を相手に壇上で話をする、という生徒にとって受動的な形式で行われている。先生の話は、それが知っていることでも「それは分かってるから先に行ってください」ということはできない。逆に自分がわからないことがあっても、「分かりません」といって授業の進行を止めるのもなかなか難しいことだ。だから授業は、分かっている生徒にとっては退屈で、わからない生徒も退屈なものになってしまいがちである。
このような形式がいままで主流だったのは、生徒ひとりひとりの理解度に合わせた学習をサポートする、というのは、コストがかかりすぎるからだ。先生の数は限られているし、授業の時間にも限りがあるので、理解の早い生徒に進んだカリキュラムを用意したり、わからない生徒に追加のサポートをしたりするのにはどうしても限界があった。
しかし、現代にはYoutubeがある。テレビやラジオと違って、Youtubeに動画をアップロードするのは誰にでも自由にできる。ひとりの先生がYoutubeに講義をアップロードすれば、生徒の数が何千人だろうが何万人だろうが、自分のペースに合わせてその講義を受けることができる。分かっているところを飛ばすことも、分からないところを何度も繰り返すこともできる。
だったら、教室で生徒を集めて講義をするよりも、生徒に自宅でYoutubeで講義を受けさせたほうがいいじゃないか、となる。その分、教室ではいままで宿題として出していた演習問題をやらせて、先生はつまづいている生徒のサポートなどをする。また、生徒間での議論など、能動的な学習を促す。
僕は、初め著者のTED動画を見た時は、とてもいい考えだと思ったが、同時に、従来とは正反対のスタイルの学習なので、これから日本でも反転授業のスタイルが普及していくのかについては疑問を感じた。しかし、国内でも反転授業のいくつか実験的な取組みや計画がなされているようだ。

その他

完全学習」についてとか、カーン・アカデミーのプログラミングコースや数学のドリルが結構面白いとか、本書について書きたいことはもうちょっとあるので、そのうち書く、と思う。

jQueryで掛け算ゲーム

jQuery

ソースコード

<p><input type="button" value="Start" id="start"></p>

<form name="form1">
  <input type="text" id="a" size="10" value=""> × <input type="text" id="b" size="10" value=""> = <input type="text" name="c" id="c" size="10">
</form>

<p>スコア: <span id="score">0</span>点
経過時間: <span id="time">0.0</span>秒</p>

<script>
$(function() {

var startTime;
var timecounter;
var score = 0;

$("#start").click( function() {
    init();
})

function init(){
  score = 0;
  $("#score").text(score);
  startTime = (new Date()).getTime();
  timer();
  document.form1.c.focus();
  genProblem();
}

function timer(){
  displayTime = (new Date()).getTime() - startTime;
  $("#time").text( (displayTime / 1000).toFixed(1) );
  timecounter = setTimeout(timer, 100);
  if (displayTime >= 1000 * 20){
    gameover();
  }
}

function genProblem(){
  $("#a").val( Math.floor(Math.random() * 9) + 1) ;
  $("#b").val( Math.floor(Math.random() * 9) + 1) ;
  $("#c").val("");
}

$("#c").keypress(function(ev){
  if(ev.keyCode == 13){
    // a, b, cの値を取得する
    a = Number( $("#a").val());
    b = Number( $("#b").val());
    c = Number( $("#c").val());    

    // 正解ならば、scoreに10点を加算し、次の問題を生成する
    if(a*b == c){  
      score += 10;
      $("#score").text(score);
      genProblem();
    }
    // 不正解ならば、回答欄をクリアする
    else{ $("#c").val("");}
  }
})

function gameover(){
  $("#a").val("");
  $("#b").val("");
  clearTimeout(timecounter);
  alert("あなたのスコアは"+score+"点です!");
}

})
</script>

書き換え例

JavaScript: document.getElementById("score").innerHTML = score;
jQuery:     $("#score").text(score);

JavaScript:  a = Number(document.getElementById("a").value);
jQuery:      a = Number( $("#a").val());

やっぱり、簡潔になるなぁ。
jQueryでもう少し見た目も改善したい。

実行


× =

スコア: 0点
経過時間: 0.0秒

jQueryでBMI計算

jQuery

ソースコード

  <p>身長(cm): <input type="number" id="height"></p>
  <p>体重(kg): <input type="number" id="weight"></p>
  <p><input type="button" value="BMIを計算" id="calc"></p>

<script type="text/javascript">
    $(function() {
      $("#calc").click( function(){
        var h = Number($("#height").val());
        var w = Number($("#weight").val());
        alert( w / ( (h / 100) * (h / 100) ) );
      })
    })
   </script>

実行

身長(cm):

体重(kg):

比較

JavaScript版

     var h = Number(document.getElementById("height").value);
     var w = Number(document.getElementById("weight").value);

jQuery版

     var h = Number($("#height").val());
     var w = Number($("#weight").val());

で比べると、簡潔になっているのが分かる。
document.getElementById~~ は多用するが鬱陶しかっただけに、jQueryはすごく便利。
掛け算ゲームの方も書きなおすか。

はてなブログでjQueryテスト

JavaScript jQuery

ソースコード

  <div id="box" style="width:100px; height:100px; background: red;"> </div>

  <script>
    $(function() {
      $("#box").mouseover( function(){
        $(this).css("background","green");
      })
      .mouseout( function(){
        $(this).css("background","red");
      });
    })
  </script>

テスト


動いてるな。

JavaScriptで掛け算ゲーム

HTML/CSS JavaScript

説明

20秒の間にできるだけ沢山九九のクイズに正解する、というだけのゲーム。
とりあえず遊べる、くらいにはなったが、もうすこしデザインやゲームオーバー処理を作りこむ必要がある。

ゲーム



× =

スコア: 0点
経過時間: 0.0秒


ソースコード

<p><input type="button" value="Start" onclick="start();"></p>

<form name="form1">
  <input type="text" id="a" size="10" value=""> ×
  <input type="text" id="b" size="10" value=""> = 
  <input type="text" name="c" id="c" size="10" onKeyPress="jedge();">
</form>

<p>スコア: <span id="score">0</span>点
経過時間: <span id="time">0.0</span>秒</p>

<script>
var startTime;
var timecounter;
var score = 0;

function start(){
  score = 0;
  document.getElementById("score").innerHTML = score;
  startTime = (new Date()).getTime();
  timer();
  document.form1.c.focus();
  genProblem();
}

function timer(){
  displayTime = (new Date()).getTime() - startTime;
  document.getElementById("time").innerHTML = (displayTime / 1000).toFixed(1); 
  timecounter = setTimeout(timer, 100);
  if (displayTime >= 1000 * 20){
    gameover();
  }
}

function genProblem(){
  document.getElementById("a").value = Math.floor(Math.random() * 9) + 1;
  document.getElementById("b").value = Math.floor(Math.random() * 9) + 1;
  document.getElementById("c").value = "";
}

function jedge(){
  if(window.event.keyCode == 13){
    // a, b, cの値を取得する
    a = Number(document.getElementById("a").value);
    b = Number(document.getElementById("b").value);
    c = Number(document.getElementById("c").value);

    // 正解ならば、scoreに10点を加算し、次の問題を生成する
    if(a*b == c){  
      score += 10;
      document.getElementById("score").innerHTML = score; 
      genProblem();
    }
    // 不正解ならば、回答欄をクリアする
    else{document.getElementById("c").value = "";}
  }
}

function gameover(){
  document.getElementById("a").value = "";
  document.getElementById("b").value = "";
  clearTimeout(timecounter);
  alert("あなたのスコアは"+score+"点です!");
}
</script>

HTML5のoutputを使ってBMI計算

HTML/CSS JavaScript

ソースコード

<form oninput="op1.value = (Number(w.value) / ((Number(h.value)/100) * (Number(h.value)/100))).toFixed(2) ;">
<p>身長:<input type="number" name="h" value="0" size="10"> </p>
<p>体重: <input type="number" name="w" value="0" size="10"> </p>
<p>BMI:&nbsp; <output name="op1">0</output></p>
</form>

テスト


身長:

体重:

BMI:  0

昨日のコードを、HTMLのoutputタグを使って少し改善。

JavaScriptでBMI計算

JavaScript HTML/CSS

ソースコード

  <p>身長(cm): <input type="number" id="height"></p>
  <p>体重(kg): <input type="number" id="weight"></p>
  <p><input type="button" value="BMIを計算" onclick="calc();"></p>
  
  <script type="text/javascript">
    function calc(){
      var h = Number(document.getElementById("height").value);
      var w = Number(document.getElementById("weight").value);
      alert( w / ( (h / 100) * (h / 100) ) );
    }
   </script>

テスト

身長(cm):

体重(kg):