Authoring Tool の利用(数式編)

初めに

数式で解答し自動採点する e-Learning コンテンツ用の作成ツール(オーサリングツール)の解説です。
オーサリングツール は,四つのタブと仕上がりイメージを表示するパネルで構成されています。以下,下記の順で説明を書いてみます。

 

 

簡単に,各タブの機能の解説を記します。

(1) メイン タブ

メインタブには,タイトルの決定,採点サーバーの指定,キーワードの指定(現在利用していません),合格ラインの指定(現在利用していません),以前作成したSCORMファイルの読み込み,SCORMファイルの作成の機能があります。

メインタブ

 

採点サーバーは,現在 kanaike.susi.oita-u.ac.jp のみですので,特に変更の必要はありません。LMSサーバーが(WebClassやブラックボード,Moodleのあるサーバーが),httpsであれば https://kanaike.susi.oita-u.ac.jp を,httpであれば http://kanaike.susi.oita-u.ac.jp を指定してください。keyword と 「合格ライン」は現在機能を持たせていません。

「SCORMファイルの読み込み」はローカルから以前に作成したSCORMファイルをアップロードして,再編集する時に使用します。作成するSCORMファイル自体がコンテンツの保存ファイルとなっています。

「SCORM作成」ボタンを押すと,SCORMファイル(zipファイル)が作成され,ボタンの右側にリンクが表示されます。リンクをクリックして,ファイルをダウンロードしてください。

「Help PDF」は現在あまり改定していません。

 

 

(2) 問題文 タブ

問題文タブでは,問題文章の作成をします。HTMLによる文の記述,問題文の縦サイズの変更,利用する各種メディアファイルのアップロードなどの機能があります。

問題文タブ

 

左側のテキスト記入のエリアに,問題文を,HTMLで記入します。下方にある「更新」ボタンをクリックすると右側の問題文イメージの表示エリアが更新されます。問題文の横サイズは 640px です。縦は,ラジオボタンで変更できます。

問題文中で数式を記入する場合には,Mathjax の機能を使用します。$\frac{1}{2}$ と記入すれば \(\frac{1}{2}\) と表示されます。独立した数式を記入する時は \[ c^2 = a^2 + b^2 \] などと記入すると下記のように表示されます。

\[ c^2 = a^2 + b^2 \]

文中で使用する画像は,下方にある「登録」の機能を利用して,サーバーにアップロードし,使用します。問題文がある(index.html がある)フォルダーと同じ場所にコピーされますので,特にパスを指定することなく,使用できます。音声(mp3),動画(mp4)が利用できます。

一般的にブラウザの音声制御用のコントローラーはサイズが大きいです。そのためデフォルトのコントローラーは表示せず,小さなサイズの画像に制御の機能を持たせたほうが場所をとりません。それで,制御用のボタン画像をデフォルトで用意しています。オーサリングツールを最初に開いたときのHTML記述を参考にして,ご利用ください。images というフォルダー内に置いてあります。動画用のコントローラーはブラウザのものを使用しても場所をとらず,そのままデフォルトのコントローラーを表示させて使用しても良いと思います。

アップロードしたファイルは下方の枠内にリスト表示されます。これをチェックして「Delete」ボタンを押すと消去されます。

上方にある青い「定型句表示」をクリックすると数式などの記入例が現れます。

 

 

(3) 解答欄 タブ

解答欄タブでは,解答欄を追加して正解をセットします。

解答欄タブ

 

最初に「解答欄を追加」ボタンをクリックして,解答欄を問題上に配置します。最初は真ん中に配置されるので,ドラッグするか,座標欄に数値を記入して位置の調整をします。次に「選択」というラベルのドロップダウンリストで採点方法を選びます。通常の物理の問題で,数式で答えるタイプならば「代数等価」を選びます。正解を記入する場合,TEX の書式ではなく,通常の数式を用います。「更新」ボタンを押すと,記入した正解が問題イメージ上にある解答欄に表示されます。「AT Option」は,因数分解の問題で主変数を指定する場合(必須),数値で答える問題で正解とする許容範囲(記入しなければ 5 %)を指定する場合などに利用します。

「詳細入力」ボタンで,入力形式を切り替えた場合の記入方法は後述します。

解答欄に付けられる順番は変更が可能です。「順位を上へ」ボタンで,順位を上位に変更可能です。

 

 

(4) プレビユー タブ

プレビュータブでは,正解や採点サーバーなど,問題の構成要素の確認と仕上がりを見ます。実際に解答して,採点の機能を試すこともできます。

プレビュータブ

 

左のテキストを表示しているエリアには,問題の構成情報が表示されています。採点サーバー,採点スクリプト,解答の設定内容などが表示されています。これは SCORM コンテンツに含まれる configfile.xml の内容を表示しています。ただし,実際の configfile.xml では,正解が暗号化されています。

プレビューボタンを押すと,仕上がりのコンテンツが(ブラウザの設定によりますが)別なタブか窓で表示されます。そこで,設定した採点方法が上手く機能するか試すことができます。

 

 

以下では,順を追ってコンテンツを作成してみます。

まず,メインタブでタイトル等を記入します。”server” とはコンテンツがある(LMS がある) server ではなくて,採点スクリプトを実行する server です(今のところ,kanaike.susi.oita-u.ac.jp のみ)。keyword は,将来検索用にと考えて用意した項目ですが,現在はまだ特に利用していません。「合格ライン」も現在まだ利用していません。「SCORMファイルの読み込み」と「SCORM作成」ボタンは,このチュートリアルの最後で解説します。

下記画面では,タイトル,keyword,合格ラインを記入しています。

タイトル等の記入

 

 

メインタブの各項目の変更は,すぐにコンテンツに反映されます。プレビュータブに切り替えると,更新されていることが確認できます。

変更の反映

 

左側のテキスト表示エリアで,タイトルや keyword が確認できます(このエリアはreadonly)。Preview ボタンをクリックすると,コンテンツの現在の設定が確認できます(別窓(タブ)で表示されますので,初回は,ブラウザからこのサイトでポップアップを許可するかどうか 確認があると思います)。先ほど記入したタイトルがコンテンツ上部のバーに表示されているのが確認できます。

タイトルの確認

 

いったんプレビューを閉じて,次は問題文タブに切り替えます。

まず問題の本文を作成しますが,ここではあらかじめ作成したテキストファイルを用います。下図は,コピー&ペーストで,新しい本文を左側の HTML 記入エリアに張り込んだところです。

問題文を編集

「更新」ボタンをクリックすると,右側の完成イメージが更新されます(HTML ソースには画像を挿入するように書かれているのですが,まだその画像をアップロードしていませんので,完成イメージには表示されません)。数式を表示するために MathJax を利用しています。更新すると MathJax 関連のメッセージが問題文の下部に表示されます。その中で下記のメッセージ


このメッセージはエラーではありません。Internet Explorer のキャッシュ対策として存在しないファイルを読み込ませているために表示されているものです。利用において問題となることはありません。

本文中で $m_1$ と記入すると \(m_1\) と表示されます。独立した数式は $$ で囲みます。四角い箱は $\fbox{ (1) }$ と記入して,\(\fbox{ (1) }\) と表示されます。

MathJax の利用

 

初期画面のサンプル表示用に,いくつか画像などのファイルが最初からコンテンツに含まれています(左下方の「Media List」に表示)。不必要なので,チェックを入れて「Delete」ボタンを押し,消去します。

不用ファイルの消去

 

「参照」ボタンを押して,画像ファイルをローカルのパソコンからアップロードします。アップロードが終了すると,「Media List」にファイル名が表示されます。

画像ファイルのアップロード

 

「更新」ボタンをクリックすると,アップロードした画像が完成イメージに表示されます。アップロードしたファイルは本文のHTMLソースと同じフォルダー内にコピーされるので,特別なパスを記述する必要はありません。

アップロードファイルの利用

 

コンテンツの縦の寸法を伸ばします。「文の高さ」ラジオボタンで適当な縦の長さ(ピクセル)を選んで,「更新」ボタンをクリックします。これで問題文の完成です。

縦の長さの変更

 

次に,「解答欄」タブに移ります。まず,「解答欄を追加」ボタンをクリックして,完成イメージ上に解答欄を追加します。解答欄をクリックすすると,タブの左側に現在の解答欄の設定が表示されます(ここでは,デフォルト値)。解答欄はドラッグして位置を自由に変更できます。変更した座標値は,すぐさま入力欄「座標(x,y)」の値に反映されます。

解答欄の追加

 

評価方法を選びます。「選択」ボタンにマウスを重ねると,ドロップダウンリストが現れます。典型的な物理の評価方法では,正解と解答が恒等式であれば正解としますが,そのような場合には「代数等価」を選びます。数学の計算問題のように,最後まで式変形がなされているかどうかが問題となるときには,「交換結合」を選びます。「因数分解」は文字通りですが,主変数を指定しなければなりません。その場合には「AT Option」に x などと主変数を記入します。よく利用するものとしては,数値を評価する場合に利用する「相対精度」と「絶対精度」があります。それぞれ,「AT Option」に許容範囲を指定します。評価方法の多くは「satck」というプロジェクトから借用しています。詳細は stack のサイトを参照してください。

評価方法の選択

 

ここでは,「評価方法」としては”代数等価”を選択し,「正解」欄に r[1]*m[1]/m[2] と記入します。「更新」ボタンをクリックすると,完成イメージ上の解答欄に反映されます。正解は \(\TeX\) の形式では記入しません。評価で利用されている Maxima という数式処理ソフトの形式に従います。そうは言っても,ほとんど通常の数式の取り扱い方と同じです。四則演算は + - * / を用います。積が入る場合には必ず * を挿入します。\(\cos \theta \) は,cos(theta) と記入します。下付きは特殊で r[1] と記入すると, \(r_1\) と表示されます。記入方法はコンテンツに解答する場合と同じですので,コンテンツの利用方法のチュートリアルを参照してください。

正解の設定

 

もうひとつの正解も設定します。Preview タブに切り替えて,「Preview」ボタンをクリックし,コンテンツを表示させます。解答方法は省略します。

プレビュー

 

プレビューを閉じて,メインタブに切り替えます。
最後に SCORM コンテンツを作成し,保存します。「SCORM作成」ボタンをクリックすると,ボタンの右側に SCORM コンテンツへのリンクが現れます。

SCORMファイルの作成

 

リンクをクリックして,ダウンロードします。SCORM ファイルは zip ファイルです。

SCORMファイルのダウンロード

 

次回,この SCORM ファイルを再び修正する時には,このメインタブで 「参照」ボタンを押して,SCORM ファイル(zipファイル)を読み込むと,以前のコンテンツが再現されます。

SCORMファイルのアップロード

 

 

評価方法には,数式や数値の評価以外に選択肢や(物理)用語の評価も利用できます。

下図は,選択肢の例です。まず,評価方法として「選択肢」を選びます。次に,選択肢に付けるラベルを決めます。これは,先頭に付ける 1,2,3 … や,a,b,c … 等の記号のことです。後は,表示するラベルと正解をクリックして設定します。

選択肢による解答

 

下図は,解答する時の様子です。

選択肢の問題に答える

 

この他,用語を用いて答えるタイプとして,「用語集」があります。これは例えば”陰極線”等の日本語で解答する問題です。下図は,正解を設定している様子です。

用語で答える問題タイプ

 

こちらは,解答しているところです。入力のインターフェイスは,正解を設定するときと同じものです。

用語集から選んで答える

 

今のところ,用語集は物理のみ用意しています。新たに作成して利用することも可能です。

 

 

以下は,新たに付け加えた機能で,まだ仕様が安定していません。将来的には修正が加わると思います。

解答の正誤に応じて自前のメッセージを返す機能や,複数の評価方法を組み合わせる機能,数式としての評価が難しい場合への対応等を目的として,「詳細入力」を用意しました。解答欄タブで「詳細入力」ボタンをクリックすると,入力パネル表示されます。

「詳細入力」ボタン

 

この詳細入力の機能は,もっぱら代数等価の評価方法のためにデザインしました。詳細入力では「評価方法」はいくつか利用できなくなるものがあります。「選択肢」や「用語集」は利用できません。選択した「評価方法」によって,入力項目は異なりますが,以下では「代数等価」の場合を説明します。

詳細入力のパネル

 

「論理積」「論理和」のラジオボタンは,いくつかの評価条件をすべて満たすときに正解とするとき「論理積」を選び,どれかひとつを満たせば正解とするとき「論理和」を選びます。

「TAns」とは teacher answer の略で正解のことです。「message」は正誤に応じて解答者に返すメッセージを入力します。空欄のままでも結構です。

「Operation for sans」「Operation for tans」は解答と正解(TAns)に対する処理を Maxima のコードで書く欄です。デフォルトで記入されている "sans:''sans;""tans:''tans;" は,解答と正解をとくに処理することなくそのまま比較するコードです。暗黙のうちに仮定されていることとして,変数 sans, tans に,それぞれ解答者の解答と正解が代入されています。いくらか簡単な演算処理はなされるのですが,関数の評価は未評価の状態で代入されています(Maxima のコードで書けば tans は, tans:'(正解); となっています)。デフォルトでは,この未評価の式をあらためて評価するコードとなっています。比較に使用される値はそれぞれの Maxima コードの最終行の出力です。

 

下図は,解答の式の中にある変数 x に 1 を代入して計算するコードです。正誤に応じたメッセージも記入してあります。正解には 2 を記入して,こちらはとくに何も処理をしません。

Maxima による処理

 

プレビューを表示して,解答してみます。採点するとメッセージが返って来ます。

STACK からのメッセージ

 

Maxima での処理は下記のようなものです。最後の行で出力される 2 が比較に使用されます。%i は入力を示し,%o は出力を示しています。

(%i3) sans:'(x+1)
(%o3) x+1
(%i4) sans:''x+1
(%o4) x+1
(%i5) subst(x = 1,sans)
(%o5) 2

 

次に,もうひとつ”2次式である”という判定条件を加えます。「Next」ボタンをクリックして,もうひとつ詳細入力を表示させます。

評価条件を追加する

 

解答を操作するコードにある "degree(sans,x);" は,式の次数を調べる関数で STACK 独自のものです。正解 TAns には 2 をセットして,正解に関してはとくに処理をしていません。

次数を得る

 

プレビューを開き,解答すると二つのメッセージが返ってきます。

二つのメッセージ

 

 

次に詳細入力の例として,変数の値の範囲に仮定をする例をとりあげます。下図では,ルートの中に変数が二つ含まれた式を正解として設定していますが,この場合 STACK の判定が上手く機能しません。

ルート記号の評価

 

プレビューを表示して,判定をするとテストに失敗したと言うメッセージが返って来ます。

評価失敗のメッセージ

 

この場合,変数の領域に仮定を加えると判定可能となります。下記は,両変数が正の値であると仮定しています。

領域の仮定

 

採点してみると,評価が問題なく終了し,正解となります。

ある文脈での評価

 

次に詳細入力の使用例として,変数に数値を代入しての比較を取りあげます。下図は三平方の定理を問題としたものです。変数に正という仮定をしています。

根号を含む複雑な式

 

プレビューを開いて解答します。変数 a を外に無理やり括りだしたものを解答とします。採点をしてみると,正解と判定されません。

誤った判定

 

上記のように,ルートが式にある場合,判定が難しくなります。一般にルートがあると式の最終的な形が定まりません。有理化をするかしないか等,任意の要素が多々あります。そのため,以下では変数に数値を代入して比較するという手段をとります。評価方法は「代数等価」ではなくて,「相対精度」を用います。

変数への数値代入

 

採点してみると,正しく評価できていることが分かります。煩雑な手段でミスも多くなりそうなのですが,今のところこの方法しかありません。

最終手段による評価

 

 

 

下記のコラムに書いたのですが,時々コンテンツをipodで開いたときに,途中でフォントのサイズが変化して,大きくなることがありました。

http://zairyo.susi.oita-u.ac.jp/wordpress/?p=2453

現在,kanaikeのオーサリングツール(ver. 2_2_3 と ver. 2_2_4)では対応しています。

 

修正点ではないのですが,Firefoxのセキュリティー関係に修正が入りました。

http://zairyo.susi.oita-u.ac.jp/wordpress/?p=2447

FireFox の ver23 以降で,採点などのボタンを押すと,エラーが生じます。https と http 間の通信に問題が生じています。LMSサーバーが https で,採点サーバーが http です。当面はFireFox のブロックを解除するしかありません。採点サーバーを https に変更する方向で考えます。

 

Internet Explorer ver.11 (ie11) で通信に不具合が生じました。2013年11月08日から,Windows 7 でも,ie11 に切り換えられて行くようなので,コンテンツの修正が必要となります。

関連サイト :

これまで Internet Explorer かどうかの検出に利用していたコードが上手く動作しなくなりました。そのため通信用の Flash が読み込まれません。対策として,ユーザー エージェント文字列の検出を判定条件に加えました。これまでは,「条件付きコンパイル」のみ利用していました。コードは下記のようなものです。


var ua = window.navigator.userAgent.toLowerCase();

if ((/*@cc_on!@*/false) || (ua.indexOf('trident') >= 0)) {

alert('Find IE');

}

これに応じて,すでにオーサリングツールは修正してあります。

 

次の版(2_2_5)の機能に関してですが,化学式用の TeX のマクロ (mhchem) を組み込みました。

関連サイト :

問題文にのみ利用できます。自動採点が機能しないので,解答には利用できません。下記に画面のスナップショットをあげます。

mhchem.js というファイルをコンテンツに読み込みます。今回はこのスクリプトをコンテンツ自身に含ませました。読み込む部分のコードは下記のようなものです。



 

 

 



 

採点サーバーを https に変更しました。http での利用も可能で,両方で運用します。オーサリングツールの次の版(2_2_5)では,http,https どちらのコンテンツも作成可能です。以下の内容は次の版(2_2_5)のコンテンツに当てはまる内容です。

大学の LMS サーバーが,https です。今回の変更で,Windows の Internet Explorer でもクロスドメイン通信が可能となりました。 FireFox の最新バージョンでも,ブロックされることなく,採点が可能となります。ただし,コンテンツの修正は必要です。コンテンツに書き込まれている採点サーバーの URL を https のものに変更しなければなりません。
jQuery を利用したクロスドメイン通信を利用するようにコンテンツを修正しました。そのため,これまで通信に利用していた Flash が必要なくなります。Window で Intenet Explorer(IE) を利用する場合に, IE に Flash を組み込む必要はありません。これまでコンテンツに含まれていた Flash ファイルも不必要になりましたので,コンテンツのサイズが 300kB 程度小さくなります。

 

(現在20140401,自サイトのMathJaxは,IEにおいて上手く機能しません。数式の描画に再読み込みが必要となっています)

採点サーバーを https に変更したことと関連しますが,LMS サーバーと採点サーバーが両方とも https となったので,採点サーバーに置いたスクリプトが利用可能となりました。これまで MathJax は本家サイトを利用していたのですが,採点サーバーに設置されたスクリプトを利用するように書き換えました。オーサリングツール ver.2_2_6 からの変更です。

これによって,本家の URL が変更されても,コンテンツの書き換えをしなくてすむようになります。

 

大学のLMS(WebClass)でのことなのですが,コンテンツを二つ同時に(タブなどで)開いた際に,解答や得点が交じり合ってしまうという現象が確認されました。これに対応するために,コンテンツを複数開いた場合には,採点や点数記録が可能となるものを,そのうちのひとつに制限する機能を入れました(ver. 2_2_5b)。

これにともなって,これまで採点するごとに LMS に記録を残すような動きをしていたのですが,最後に「送信」ボタンを押したときに初めて点数等を記録するように改めました。