アプリケーションには,手動で人型ピクトグラム(以下,ピクト選手)を整列する「手動整列機能」と,自動でピクト選手を整列する「自動整列機能」があります.

1.手動整列機能の操作手順

ピクソートの手動整列機能の操作手順を,次の(1)〜(4)に示す.

(1)      整列するピクト選手の人数の決定

利用者が画面左上の「人数選択用プルダウン」から人数を選択すると,その人数分のピクト選手とはかりをそれぞれ横一列に表示します.人数選択は2から9人の8通りから1通りを選択させる.「人数選択用プルダウン」で人数を変更すると,表示されていたピクト選手は画面外に一度退場し,選択された人数分のピクト選手が新たに入場します.

(2) シーソーによる重さの比較

ピクト選手とシーソーを用いて重さ比較をする.比較対象のピクト選手をドラッグ操作で移動し,シーソーのいずれかの着座部でドロップすることで着座させます.

(3) 並べ替え

ピクト選手をドラッグアンドドロップで並べ替えて,それぞれはかりに乗せることができます.

(4) 整列判定

判定は,画面左下にある判定するボタンと,正誤,最終比較回数を表示したものを格納するアコーディオンボックスを開いて“はかりを公開する”ボタンを押し,左からピクト選手の体重の値が昇順になるように並べられているかを判定します.判定すると,はかりの付箋がはがれて乗っているピクト選手の体重が公開されます.また,ピクト選手の体重の昇順に並べられているかに関する正誤の表示と,最終比較回数を表示します.

2. 自動整列機能

自動整列機能では,整列アルゴリズムに則ったアルゴリズムをアニメーションで確認することができます.本アプリケーションの自動整列機能で実装されている整列アルゴリズムはバブルソート,挿入ソート,クイックソートの3種類です.実行画面右下に表示されている自動整列用のアコーディオンボックスを開くと,各ソートのボタンを表示されます.各ソートのボタンを押すと自動整列のアニメーションが開始されます.

 

3.ソースコード表示機能(標準ではオフ)

自動整列機能に,選択したソートアルゴリズムのソースコードが表示され,リアルタイムでアルゴリズムアニメーションと対比して該当するソースコードの行をハイライトする機能(以下,ソースコード表示機能)です.

再生方法ボタンは,「連続再生ボタン」,「アニメーションステップボタン」,「プログラムステップボタン」の3つである.連続再生ボタンを押下すると,一連のアルゴリズムアニメーションとソースコードのハイライトが実行される.一方,アニメーションステップボタンを押下すると,一定の動作ごとに区切ったアニメーション再生が,プログラムステップボタンを押下すると,ソースコード1行ずつの再生が,それぞれ実行される.言語選択プルダウンでは,共通テスト用プログラム表記あるいはPython言語のいずれかを選択することができ,選択した言語でソースコードが表示される.選択言語の初期設定は,共通テスト用プログラム表記である.

この機能は標準ではオフになっており,URLのクエリパラメータに「?program」の文字列を追加することで利用できます.

 

 

(アプリケーションURL)

「2. ソースコード表示機能」も「3. ソースコード表示機能」も使わない場合:https://pictogramming.org/apps/humanpicsortgram/?hide

「2. ソースコード表示機能」を使い,「3. ソースコード表示機能」を使わない場合:           https://pictogramming.org/apps/humanpicsortgram/

「3. ソースコード表示機能」を使う場合:                  https://pictogramming.org/apps/humanpicsortgram/?program

(授業用ワークシート)

試行回数記載シート (Word形式) … 手動整列,自動整列の試行を書き留めるためのワークシートです.

 

(学会発表)

1. 渡辺大智,御家雄一,伊藤一成:人型ピクトグラムを用いたソートアルゴリズムを学ぶアプリケーション「人型ピクソートグラム」の実装,2022年度情報処理学会関西支部支部大会, (2022.09.18)

2. 渡辺大智, 御家雄一, 伊藤一成:‹人型ピクトグラムを用いたソートアルゴリズムを学ぶ アプリケーション「人型ピクソートグラム」の拡張と評価,第15回データ工学と情報マネジメントに関するフォーラム DEIM2023, (2023.03) (学生プレゼンテーション賞受賞)

3. Taichi Watanabe, Yuichi Oie, Kazunari Ito: An Application for Learning Sorting Algorithm using Human Pictograms, IMCOM(International Conference on Ubiquitous Information Management and Communication) 2023, (2023.01)

4. 渡辺大智,石井幹大,伊藤一成:アニメーションおよびソースコード表示を活用したソートアルゴリズム学習アプリケーションの開発,第16回データ工学と情報マネジメントに関するフォーラム DEIM2024(2024.03)