(text by kondo)
参考サイト
http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
http://ascii.jp/elem/000/000/406/406547/
flashでは教科書の索引を選択肢にもつタイプの問題を用意していました。あまり、利用しないのですが、新しいコンテンツでも同じようなタイプの問題を作成できるように用意しました。これは、物理の問題で「誘導起電力」などの用語を答えるタイプの問題に相当します。特に選択肢がなく、解答欄に日本語を記入するタイプの問題がありますが、そのようなタイプの問題への対応です。下記の図は回答をしているところの図です。
jQueryのプラグインで treeview を利用しました。ファイルを参考サイトからダウンロードして、適当に配置します。ヘッダーに書き込んだのは、下記の3行です(jQuery は先に読み込んでおいてください)。
<script src=”jquery/jquery.cookie.js” type=”text/javascript”></script>
<link rel=”stylesheet” href=”jquery.treeview/jquery.treeview.css” type=”text/css”/>
<script type=”text/javascript” src=”jquery.treeview/jquery.treeview.js”></script>
cookie.js は必要なのかどうかよく分かりません。ツリーの本体は下記のように書きます(下記のソースを選択してコピーしたらダブルクオーテーションが化けてしまった？)。
<ul id=”a_treeview” class=”filetree” style=”font-size:small;”>
<span class=”folder”>あ行</span>
<ul >
<li><div class=’file’>明日</div></li>
<li><div class=’file’>雨</div></li>
</ul>
<span class=”folder”>か行</span>
<ul >
<li><div class=’file’>過去</div></li>
<li><div class=’file’>かもめ</div></li>
</ul>
</ul>
ツリーの中身を準備したら、下記の関数で処理します。
$(function(){
$(“#a_treeview”).treeview();
});
表示は下記のようになります。
とりあえず、 開いたままのツリーです。閉じたり開いたりという機能は上記のコードにはありません(sampleサイト)。
用語集を切り替える機能も必要なので、ツリーの中身を入れ替える必要がありました。これは一旦、ツリーの innerHTMLをクリヤして、もう一度書き直すことで、変更することができました。
最後に、問題を作成しているところの図をあげます。新規の用語集をアップロードして利用することもできます。
