IPSJ SIG Technical Report Vol.2014-CE-124 No /3/14 1,a) 2,b) 1 System Design and Analysis for Action Streams in MASUME: Runtime Enviroment for E

Size: px

Start display at page:

Download "IPSJ SIG Technical Report Vol.2014-CE-124 No /3/14 1,a) 2,b) 1 System Design and Analysis for Action Streams in MASUME: Runtime Enviroment for E"

せせらおえづか
4 years ago
Views:

1 1,a) 2,b) 1 System Design and Analysis for Action Streams in MASUME: Runtime Enviroment for Educational Programming Tetsuo OGINO 1,a) Takeshi FUJIOKA 2,b) Abstract: In this study, we developed a broswer-based programming environment called MASUME in order to bury the large gap between visual-based and text-based programing enviroments. To reconstruct student s learning processes, this new environment captures and records all their actions such as mouse clicks and key strokes. In this paper, we describe system design for supporting teachers by analies student s actions. 1. IT [1] IT IT [2] Squeak Scratch[3] 1 Information Science and Technology Center, Kobe University 2 Kyoto Municipal Saikyo Senior High School a) togino@port.kobe-u.ac.jp b) t-fujioka@edu.city.kyoto.jp 1.1 [4] 1 1

2 1 [5] C Java = A1 + B1 A1 B1 [6] OS OS Windows Mac OS X Linux Windows Windows 7 Windows XP HTML/CSS/JavaScript 2

3 Flash Silverlight GUI Java Flash DOM HTML5 CSS JavaScript Action Streams 1 5W1H Why 1 Action Streams time func path this args Action Streams path GUI 2 Action Streams 2.2 Action Streams Squeak Microsoft Excel VBA A.1 3

4 2 click selectview set select click canvas set select click vm run click vm run reset keyup keyup value changed cell code click trace reset click object 3. Action Streams 3 Action Streams Action Action 45.5 n=35, SD=24.09, Max=117.2, Min=4.1 d <.005 Action Streams Action Streams S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S S Action 4

5 Density Count time 1e+06 2e+06 3e+06 4e+06 Milli Sec Action Action Action Streams Action Action S1 Action Streams 1 Action 3 1 Action Action Action 1 Action Streams 60 Action Action Action Streams Action Count e+06 2e+06 3e+06 4e+06 Milli Sec 4 60 Action Action 3.2 Action Streams 5

Action 10 Count 0 2000 6000 10000 14000 0 10 20 30 40 50 60 Band Sec 5 1 4. Action Streams Action Streams http://pomelo.istc. kobe-u.ac.jp/masume.

6 Action 10 Count Band Sec Action Streams Action Streams kobe-u.ac.jp/masume.html 6 Action Streams 6 Action Streams Action [1] (2013). skkkaigi/dai11/siryou1-1.pdf. [2] IT IT (2013). kettei/pdf/ /siryou1.pdf. [3] Maloney, J., Resnick, M., Rusk, N., Silverman, B. and Eastmond, E.: The Scratch Programming Language and Environment, Trans. Comput. Educ., Vol. 10, No. 4, pp. 16:1 16:15 (online), DOI: / (2010). [4]. Vol. 2012, No. 15, pp (2012). [5] Squeak Vol. 28, pp ( ). [6]. Vol. 42, No. 11, pp ( ). 6

7 A.1 ますめの基本操作 1. はじめよう (1) ますめを起動するブラウザでにアクセス画面は 4 つのエリアで構成される ( 下図 ) l メニューエリア : 画面上の読込や保存などのメニューや連続再生ボタンなどがあるエリア l キャンバスエリア : 画面左の上半分で, 点などの図形が表示されるエリア l シートエリア : 画面左の下半分で, セルが表形式で並んでいるエリア l インスペクタエリア : 画面右の, セルの値やプログラムを入力したり図形の属性値 ( 座標や色など ) を入力するエリア (2) セルに値を入力する 1 シートエリアの A1 セルをクリックし, インスペクタエリアに 2 と入力入力後, 他のセルをクリックすると A1 セルに 2 が表示されるインスペクタエリアへの入力は必ず半角で! 入力を終了する場合は他のセル等をクリックセルに値が反映 2 シートエリアの B1 セルをクリックし, インスペクタエリアに =A1*A1 と入力第 3 章ますめ編 B1 セルに 4 と表示されるセルの指定は大文字で ( 小文字は不可 ) A1 セルの値を変えると,B1 セルの値も自動的に変わる ( 確認してください ) インスペクタエリアが = ( イコール ) から始まると, 数式やプログラムと解釈され, その計算結果がセルに表示されます

(3) 図形を表示する 1 メニューエリアの図形をクリックし, 点を選択して作成するボタンをクリック 2. ボールの運動シミュレーション基本 : 等速直線運動点の座標が一定の割合で増加 ( 減少 ) するようにすることで等速直線運動をシミュレーションできます.

(3)) キャンバスエリアに点が表示される 3A1 セルを =A1+50,B1 セルを =B1+5 に変更それぞれセルの値が 50 と 5 に変わる (0+50 と 0+5) 4 ステップ実行ボタンを 1 回押すと, それぞれセルの値が 100 と 10 に変わる (50+50 と 5+5) 5A1 セルと B1 セルの初期値に 0 を入力して, リセットボタンを押す

これらの値を変更するとキャンバスエリアの点が変更されることを確認して下さい. - 4 - - 7-3X 座標に =A1 と入力セルの値を, 図形の属性値に対応させることができる ( 点の X 座標が A1 セルの値になる ) セルの値が変わると, それに伴って点の座標を変化させることができます. これによって運動シミュレーションを実現できます.

8 (3) 図形を表示する 1 メニューエリアの図形をクリックし, 点を選択して作成するボタンをクリック 2. ボールの運動シミュレーション基本 : 等速直線運動点の座標が一定の割合で増加 ( 減少 ) するようにすることで等速直線運動をシミュレーションできます. 1A1 セルと B1 セルの値をともに 0 にする 2 作成した点の X 座標と Y 座標をそれぞれ A1 セルと B1 セルの値に対応付ける (1.(3)) キャンバスエリアに点が表示される 3A1 セルを =A1+50,B1 セルを =B1+5 に変更それぞれセルの値が 50 と 5 に変わる (0+50 と 0+5) 4 ステップ実行ボタンを 1 回押すと, それぞれセルの値が 100 と 10 に変わる (50+50 と 5+5) 5A1 セルと B1 セルの初期値に 0 を入力して, リセットボタンを押すそれぞれのセルの値を初期値に戻すことができる 2 この点をクリックすると, インスペクタエリアに点の座標や色などの値が表示される ( これらを点の属性値という ) 6 連続実行ボタンを押すと, 繰り返し実行できる連続実行中は, 連続実行ボタンは停止ボタンに変わり, これを押すと連続実行を停止できる点の属性値には,X 座標,Y 座標, 半径, 色があります. これらの値を変更するとキャンバスエリアの点が変更されることを確認して下さい X 座標に =A1 と入力セルの値を, 図形の属性値に対応させることができる ( 点の X 座標が A1 セルの値になる ) セルの値が変わると, それに伴って点の座標を変化させることができます. これによって運動シミュレーションを実現できます. 課題バウンディングボール ( ボールが画面の端で跳ね返るように ) 1C1 セルの値をいったん 50 にし,A1 セルを =A1+C1 に変更 2C1 セルの初期値を 50 に設定し, 下のプログラムを書くボールの X 座標がキャンバス (4) 保存メニューエリアの保存メニューをクリックダイアログが表示されるので, 保存ボタンの横のをクリックして名前を付けて保存エリアの横幅の値を超えたら逆向きに進むというプログラムです. うまく動くでしょうか? ( 注 ) Width はキャンバスの横幅サイズを示す値です. 3 反対側 ( 左側 ) でも向きを変えるように, 下のようにプログラムを修正 (5) 読込 ( 保存したファイルを読み込む ) 注 : 保存したファイルをダブルクリックしても開くことはできません 1メニューエリアの読込メニューをクリック読込ダイアログが表示される 2 読込ダイアログの上部にあるこのコンピュータから読み込むをクリック 3 参照ボタンをクリック 4 読み込むファイルを選択 5 読込ダイアログの下部にある読み込むボタンをクリック応用課題 D1 セルを用いて,Y 座標についても同様の動きをするようにプログラムせよ. ( 注 ) キャンバスエリアの縦幅サイズの値は Height です. 発展課題斜方投射の運動シミュレーションができるようにプログラムせよ

2006 [3] Scratch Squeak PEN [4] PenFlowchart 2 3 PenFlowchart 4 PenFlowchart PEN xdncl PEN [5] PEN xdncl DNCL 1 1 [6] 1 PEN Fig. 1 The PEN

2006 [3] Scratch Squeak PEN [4] PenFlowchart 2 3 PenFlowchart 4 PenFlowchart PEN xdncl PEN [5] PEN xdncl DNCL 1 1 [6] 1 PEN Fig. 1 The PEN PenFlowchart 1,a) 2,b) 3,c) 2015 3 4 2015 5 12, 2015 9 5 PEN & PenFlowchart PEN Evaluation of the Effectiveness of Programming Education with Flowcharts Using PenFlowchart Wataru Nakanishi 1,a) Takeo Tatsumi