Webブラウザ上でのプログラミング問題の生成システムの開発

(1)

Web

ブラウザ上でのプログラミング問題の生成システムの

開発

大門巧

1

_大西建輔

2 概要：講義においてプログラミング言語やアルゴリズムの理解度を測定する手段として，教員が作成したテストやオンラインジャッジシステムを用いることが考えられる．教員がテストを作成する場合，筆記式のテストやコンピュータ上でおこなうテストを作成することになる．筆記式のテストは，公平性やコンピュータを使用せずにおこなうことができるいう利点をもっている．一方で，出題する問題を熟考することや採点に時間を割かれてしまうという問題がある．教員の働き方改革が推進されている現在，問題作成や採点の効率化を図ることが必要とされている．オンラインジャッジシステムを利用する場合，問題の出題形式が実装に限定されてしまう問題がある．学習者にとって，学習中のテーマに沿った様々な問題がランダムに出題されるような状態であることが望ましい．問題作成や採点の効率化を図るために， PythonとJavaScriptの双方に対応したプログラミング問題の自動生成と自動採点が可能なシステムである「Waquema」を開発した．本稿はWaquemaの実装とその機能についての詳細を述べる．キーワード：プログラミング教育，問題生成，自動採点

Development of a system for generating programming problems in a

web browser

Takumi Daimon

1

Kensuke Onishi

2

Abstract: Teacher-created tests and online judging systems can be used to measure the understanding of programming languages and algorithms in lectures. When teachers create a test, they are creating a written test or a computer-based test. Written tests have the advantages of fairness and non-computer based testing. On the other hand, they require more time to think over the questions and to grade them. As the reform of the working style of teachers is being promoted, it is necessary to improve the eﬃciency of question making and grading. There is a problem that the question format is limited to the implementation when using an online judge system. It is desirable for learners to be presented with a variety of random questions related to the theme under study. To solve these problems, we developed Waquema, a system that can automati-cally generate and grade programming problems in both Python and JavaScript. This paper describes the implementation of Waquema and its features in detail.

Keywords: Programming Education, problem generation, automatic grading

1. はじめに

学習指導要領の改訂に伴い，2022年度より高等学校では 1 _{東海大学大学院理学研究科数理科学専攻}

Tokai University Graduate School of Science Course of Math-ematical Sciences, Kanagawa, 259-1292, Japan

2 _東海大学

Tokai University, Kanagawa, 259-1292, Japan

科目として「情報I」と「情報II」が新設される．必修となる情報Iのコンピュータとプログラミングの単元では，プログラミングを学習することになる．新しい学習指導要領を円滑に実施することを目的として，文部科学省は，高校の情報教員向けに，「高等学校情報科『情報』教員研修用教材」[9]を公開している．研修用教材の「第3章コンピュー

(2)

タとプログラミング」の項目では，Python版の資料が公開されている．またJavaScript版と，VBA版，ドリトル版，Swift版の資料も公開されている．言語仕様や普及率の観点から，高等学校における教育用のプログラミング言語として，PythonとJavaScriptが主流になることが予想される．教科としてプログラミングを教える場合，評価をおこなう必要がある．そのため，プログラミング言語やアルゴリズムの理解度の測定や問題演習が必要となる．この際，教員が作成したテストやオンラインジャッジシステムを用いることが考えられる．教員がテスト問題を作成する場合，筆記式のテストや学習管理システムを利用し，コンピュータ上でおこなうテストを作成することになる．筆記式のテストは，コンピュータを使用せずにおこなうことができるという利点があるが，教員が出題する問題を熟考することや採点に時間を割かれてしまう．教員の働き方改革が推進されている現在，問題作成や採点の効率化を図ることは喫緊の課題となっている．オンラインジャッジシステムでは作成したプログラムを提出すると，簡単に問題の正誤判定をおこなうことができるという利点がある．一方で，オンラインジャッジシステムにおいて出題されている問題は，解答例と出力の一致するプログラムを実装する問題がほとんどである．理解度を高めようとする学習者にとって，学習中のテーマに沿った様々な問題がランダムに出題されるような状態であることが望ましい．プログラミング問題の生成・採点を自動でおこなうシステムは，Java言語を中心としたものが散見され，大学生や大学教員が自作したシステム[1]が大学を中心に利用されているが，学習中のテーマに沿ったランダムな問題が生成されるシステムは見られない．本研究では，高等学校の情報I，IIで教育用に用いられる教育用のプログラミング言語として，PythonとJavaScriptの両方に対応したプログラミング問題の自動生成及び自動採点システムである Waquema[12]を開発した．本稿ではWaquemaの実装とその機能についての詳細を述べる．

2.

3. プログラミング課題自動生成システム

図1 Waquemaのウェブページ

Waquema(Web-aided Question Master)は，入力されたソースコードからプログラミング言語の問題を自動生成し，図3に示すようなHTMLファイルとして出力することが可能なシステムである．入力となるプログラミング言語は，PythonとJavaScriptである．Waquemaの画面を図1，システムの構成を図2に示す．「エクスポート」を押すと，選択した問題をHTMLファイルとしてダウンロードすることができる．「キープした問題」を押すと，生成した問題を編集することができる．「問題をインポート」を押すと，過去にWaquemaで生成しローカル環境に保存した問題を読み込むことができる．「問題を保存」を押すと，生成した問題をJSON形式でダウンロードすることができる．ソースコードを画面中央のエディタに入力し，生成ボタンを押すと問題が自動生成される．実行ボタンを押すと入力ソースコードを実行することができる．そのため，ソースコードの動作を確認しながら問題を生成することができる．説明とテストケースは，関数実装問題を生成する際の必須項目であり，それぞれ専用のダイアログに入力する．説明には関数の処理内容と引数と戻り値を記述する．テストケースは関数を呼び出す形で１つずつ記述する．説明は生成される問題の問題文に反映され，テストケースは採点時の正誤判定に使用される． Waquemaにより出力されたHTMLファイルには，図4 に示すような自動採点機能とフィードバックをおこなう機能が実装されている．このHTMLは，インターネットに接続されており，jQuery[11]等のライブラリを参照できる状態のブラウザ上で動作させることができる．また，出力されたHTMLファイルは間違い探し問題を除き，問題の正解情報を保持しない構造になっているだけでなく，難読化されているため簡単に不正をおこなうことはできない．本システムでは，正誤判定の際に実行処理を必要とする問題がある．これらの問題はサンドボックス化された環境で実行処理がおこなわれる．Pythonの場合はJavaScriptで構築されたインタープリタ上で実行される．JavaScriptの場合は，FileReaderやXMLHttpRequestなどの組み込み関数を無効化した環境で実行される．これにより，ある程度悪意をもったコードを入力されても，本システムに影響を与えることはできない．実際に利用をする際には，ダウンロードしたHTMLファイルを学習支援システム等を使用して学習者に配布する方法や，出題者が用意したサーバーに配置するなどの利用形態を想定している．図2 システム図図3 Waquemaで生成したHTML形式の問題図4 自動採点された結果

(4)

4. 生成可能な問題

4.1 出力結果を答える4択問題出力結果を答える4択問題は，4つある選択肢の中からプログラムを実行したときの出力結果として適切なものを 1つ選択する問題である．本システムでは，図5のような問題を生成する．出力結果を答える4択問題は，入力ソースコードに出力命令を含む場合にのみ生成される．選択肢は，出力結果が数値として解釈できる場合は，その数値に近い値から選択肢を作成する．それ以外の場合は，出力結果の部分文字列から構成される選択肢を作成する．正誤判定はソースコードを実行して得られた正解の出力結果と，解答を比較することによりおこなわれる．図5 出力結果を答える4択問題 4.2 短冊式問題本システムでは，図6に示す正しい出力結果が得られるようにソースコードを並び替える問題と，図7に示すエラーが起こらないようにソースコードを並び替える問題の 2種類の短冊式問題を生成することができる．短冊式問題は，1行ずつ分割された短冊状のソースコードの断片をドラッグ操作により並び替えることで解答する．図6に示す問題は，入力ソースコードが出力命令を含む場合に生成される．図7に示す問題は，どのような入力ソースコードの場合も生成される．正誤判定は並べ替えたソースコードの実行処理によりおこなわれるため，正解が一意に定まらない場合も正誤判定をおこなうことが可能である．図6 正しい出力結果を得られるように並び替える短冊式問題図7 エラーを起こさないように並び替える短冊式問題 4.3 間違い探し問題間違い探し問題は，スペルミスを含むプログラムの行番号を選択する問題である．本システムでは，図8のような問題を生成する．スペルミスは入力ソースコードに含まれる予約語の中からランダムに選ばれた1つに付与される．間違い探し問題は入力ソースコードに予約語が含まれる場合にのみ生成される．正誤判定は事前に記録しておいた誤りを付与した行の行番号と解答を比較することによりおこなわれる．図8 間違い探し問題

(5)

4.4 関数実装問題関数実装問題は，問題文で指示された関数を作成する問題である．本システムでは，図9のような問題を生成する．関数実装問題は，入力ソースコードにテストケースとプログラムの説明が設定されている場合のみ生成される．正誤判定はテストケースを用いた実行処理によりおこなわれる．すべてのテストケースをクリアした場合は正解，1 つ以上の正解と誤りを含む場合は部分点，すべてのテストケースに対して不正解の場合は不正解と判定される．解答のソースコードが無限ループを含む場合や，一定時間以上応答が無い場合は不正解と判定される．図9 関数実装問題 4.5 変数の値を記述する問題変数の値を記述する問題は，プログラム終了時の変数の値を記述する問題である．本システムでは，図10，図11 のような問題を生成する．全記述式問題は，入力ソースコードが変数を含む場合にのみ生成される．解答エリアに出力結果を入力することで解答する．図11の場合は，12 行目の変数xが関数外で定義されていないためエラーが起きる．そのような場合は「エラーが起きる」を選択する．正誤判定は問題文のソースコードを実行して得られた出力結果と解答を比較することによりおこなわれる．図10 変数の値を記述する問題(エラーが起きない場合) 図11 変数の値を記述する問題(エラーが起きる場合) 4.6 予約語選択問題予約語選択問題は，空欄に記述して文法エラーとならない予約語を選択肢の中からすべて選択する問題である．本システムでは，図12のような問題を生成する．予約語選択問題は，入力ソースコードが予約語を含む場合にのみ生成される．正誤判定は，選択肢のそれぞれの予約語の場合について，空欄を予約語で置き換えたプログラムを実行し，文法エラーを起こさない選択肢を取得し，解答の選択肢と比較することによりおこなわれる．図12 予約語選択問題

5. 問題生成の手法

開発したシステムにおける問題生成の手法を図13に示す．システムは，PythonまたはJavaScriptのソースコードを入力とする．前処理段階では，字句解析によりソースコードからトークン列を生成し仮実行をおこなう．仮実行時にエラーが発生した場合はエラーレポートをおこない問題は生成しない．問題生成では，入力ソースコードと出力の状態に応じて生成する問題を決定する．短冊式問題(4.2 節の図7)はどのような入力ソースコードの場合も必ず生成される．出力がある場合は，出力結果についての短冊式問題(4.2節の図6)と，出力結果を答える4択問題(4.1節) を生成する．入力ソースコードに予約語が含まれる場合は，予約語選択問題(4.6節)と間違い探し問題(4.3節)を生成する．ソースコードに対して，説明とテストケースが設定されていた場合は関数実装問題を生成する．入力ソースコードが変数を含む場合は，変数の値問題(4.5節)を生

(6)

成する．問題生成のプログラムは，一部を除き，JavaScript とPythonのどちらの言語にも共通して使用できるように設計した．そのため，対応言語を増やす場合も柔軟に対応できる．図13 問題生成の手法

6. 議論

本システムでは5種類の問題の自動生成・自動採点をおこなうことができる．出力結果を答える4択問題，変数の値を記述する問題は，学習者がプログラムの動作を把握する能力，関数実装問題は，仕様を満たすプログラムを作成する能力，短冊式問題，間違い探し問題，予約語選択問題は，プログラミング言語の文法や記法を身につけることが期待できる．一方で，本システムにより生成された問題が，「プログラミング言語の学習上意味のある問題であるか」を示すデータはまだ得られていない．また，本システムは教師の負担を軽減することを目標として開発されたシステムであるが，本システムを使用することで，「どれだけ教師の負担を軽減することができるか」を，まだ実際に検証できていない．今後は，評価実験により検証する予定である．

7. おわりに

本研究では，入力されたソースコードから問題の自動生成，自動採点をおこなうHTMLファイルを生成するシステムを実装した．JavaScriptとPythonに対応している点や，問題の採点，フィードバックをすべてユーザーの端末でおこなうHTMLファイルを生成することができる点は Waquema独自の特徴である．今後は，生成されたHTML ファイルをウェブページとして簡単に公開する仕組みや，解答データや学習者の管理をおこなうことができる仕組みをシステムに組み込むことを計画している．また，生成される問題のバリエーションを増やすことや，問題の質を向上させることも現在の課題となっている．入力されるソースコードを多面的な角度から分析し，人間が手作業で作成した問題に近い形の問題が生成できるだけでなく，学生の能力を育成するような問題が作成できるように，Waquema を改良していきたい．参考文献 [1] 喜多村和誠，玉木久夫．タグ付き解答例プログラムからのプログラミング問題コンテンツの自動生成．情報処理学会コンピュータと教育研究会，CE(122)，pp.1-8，2013． [2] 山下美穂．Web上のJavaプログラミング学習支援システムMAX/JAVAの構築，明治大学大学院理工学研究科 2012年度修士論文，2013． [3] 内田保雄．初級プログラミング学習のための自動作問システム．情報処理学会研究報告，CE(92)，pp.109-113， 2007． [4] 有安浩平，池田絵里，岡本辰夫，國島丈生，横田一正．学習者に合わせたＣ言語演習穴埋め問題の自動生成．DEIM Forum 2009． [5] 竹内亮太郎，大久保弘崇，粕谷英人，山本晋一郎．空欄補充問題の自動生成によるHaskellプログラミング学習支援環境，情報処理学会研究報告，pp.1-8，2011． [6] Satoru Kogure，Riki Nakamura，Kanae Makino，Koichi

Yamashita，Tatsuhiro Konishi，Yukihiro Itoh． Monitor-ing system for the eﬀective instruction based on the semi-automatic evaluation of programs during programming classroom lectures．Research and Practice in Technol-ogy Enhanced Learning，pp.1-12，2005．

[7] Hiroki Kitaya，Ushio Inoue．An Online Automated Scor-ing System for Java ProgrammScor-ing Assignments Interna-tional Journal of Information and Education Technol-ogy，Vol.6-No.4，2016．

[8] Riku Saikkonen，Lauri Malmi，Korhonen．Fully au-tomatic assessment of programming exercises．ACM Sigcse Bulletin，ACM，33(3) pp.133-136，2001.

[9] 文部科学省：高等学校情報科「情報」教員研修用教材，入手先

⟨https://www.mext.go.jp/a

menu/shotou/zyouhou/det-ail/1416756.htm⟩ (accessed 2020-9-19).

[10] AIZU ONLINE JUDGE，AIZU Competive Programming Club (ICPCPC)，Database Systems Lab．(online)，入手先_{⟨http://judge.u-aizu.ac.jp/onlinejudge/⟩ (accessed} 2020-9-19)．

[11] jQuery，入手先_{⟨https://jquery.com/⟩(accessed} 2020-11-13)．

[12] Waquema，Takumi Daimon’s web page，入手先

Webブラウザ上でのプログラミング問題の生成システムの開発

Web

ブラウザ上でのプログラミング問題の生成システムの

開発

大門 巧

大西建輔

Development of a system for generating programming problems in a

web browser

Takumi Daimon

Kensuke Onishi

1.

はじめに

2.

関連研究

3.

プログラミング課題自動生成システム

4.

生成可能な問題

5.

問題生成の手法

6.

議論

7.

おわりに

大門巧

_大西建輔