ここでは簡易ウェブ投票システム "VOTE on the WEB" 使用時のコツやヒントをご紹介します。 といっても，あくまでも，「VoW上でこんなことやってみたい」という希望に対する回答へのヒントです。 ピア・イストラクション法の実施のコツといった本質的なことではありませんのであしからず。
目次
"VOTE on the WEB" で使用する問題ファイルはテキストファイルです。
ワープロソフトなどのように，文書中に図を埋め込んだり，文字飾りを付けたりすることはできません。
ですが，"VOTE on the WEB" では，問題文の表示には手を抜いていて，
改行を<br />に置き換える削除する以外は，
問題ファイルの中身をいじらずにそのままブラウザに送っています。
逆に言えば，問題文中にHTMLタグを埋め込んでおくと，それがそのままブラウザ上で有効に動作します。
このページで紹介している内容は全てHTMLタグ（+ CSSでのスタイル定義）を埋め込むことで実現します。 おそらく HTML タグや CSS に通じている人なら，ここまで読むだけで内容が分かってしまうと思います。 この先を読む必要は無いでしょう。
なお HTML ヘッダ部分は自動的に送信されますので，問題文中に含めて送信することはできません。 従って，独自の HTML 拡張や凝った CSS を埋め込むのは無理だとお考えください。 あくまでも標準の HTML の範囲内のことしかできませんのであしからずご了解ください。 凝ったことをやりたい人はスクリプトそのものをいじってください。
上付き文字をブラウザ上で表示させるには，上付きにしたい文字を <sup> と </sup> で挟めばOKです。 同様に，下付き文字であれば， <sub> と </sub> で挟むことになります。 斜体や太字するには，それぞれ， <i> と </i> で <b> と </b> で挟んでやれば，その間の文字に適用できます。 斜体でかつ太字にしたければ， <i><b> と </b></i> という風に二重に挟んでやれば大丈夫です。
たとえば，
「一定温度の下，圧力<i>p</i><sub>1</sub>，体積<i>V</i><sub>1</sub>の気体を，圧力<i>p</i><sub>2</sub>まで変化させると体積はいくらか？」
と書くと
「一定温度の下，圧力p1，体積V1の気体を，圧力p2まで変化させると体積はいくらか？」
と表示されます。
表示する文字の色やフォントを変更したいときには，スタイルシートを埋め込むことで実現できます。 具体的には，<span> タグの style 属性を使用します。
たとえば，
「<span style="color:red; font-family:sans-serif">ここはゴシック体（sans-serif）で赤色，</span><span style="color:darkgreen; font-family:serif">ここは濃い緑で明朝体（serif）。</span><br />
<span style="color:blue; font-family:times,sans-serif">I am writing with Times, </span><span style="color:blue; font-family:arial, serif">and Arial fonts. </span>」
と書くと
「ここはゴシック体（sans-serif）で赤色，ここは濃い緑で明朝体（serif）。
I am writing with Times, and Arial fonts. 」
と表示されます。
font-familyのフォント指定では，OS固有のフォント名を使うことができます（Windowsの場合“ＭＳ-明朝”や“Times New Roman”など）。 問題制御に使われるパソコンの環境に合わせて指定してください。 ただし，異なるパソコン環境で同じ問題ファイルを使用すると，フォント指定が崩れて想定通りの動作をしないことがあります。 フォントはコンマで区切って複数のフォント名が指定できますので，指定の最後に“serif”や“sans-serif”など，どの環境でも通用するフォント名を指定することが推奨されています。
なお，色やフォントの変更は <font> タグでも可能ですが，現在非推奨とされているのでここでは紹介しません。 個人的にはテキストエディタで HTML を読み書きするには <font> タグの方が簡潔で読みやすいと感じます。 <font> タグの使い方については，たとえばこちらなどを参考にしてください。
あまり必要となることは多くないと思いますが，ハイパーリンクも通常のホームページと同様，<a>タグを使って実現できます。 たとえば，
「<a href="http://hoge.geho.ac.jp/funya/nucha.html" target="goodlooking">ここ</a>に問題の見栄えをよくしたページがあります。」
などとすれば，問題文の中からリンクがはれます。 前述のように，凝ったホームページで問題を表示したいとき，"VOTE on the WEB" の機能だけでは限界を感じる人がいるかもしれません。 別のウェッブページに気合いの入ったページをつくっておき，問題文中からリンクをたどるようにするのは一つの方法です。
私は，次の項目の画像埋め込み時に，画像を並べ替えて見やすくしたページへのリンクを利用することがあります。 上記の例のように“target”属性などを併用し，別のウィンドウやタブに表示することで，"VOTE on the WEB" のコントローラにすぐに戻ってくることができます。
画像を埋め込む場合，<img src="pict_1.jpg">と書けば，CGIと同じディレクトリにある“pict_1.jpg”というファイルを表示することができます。 たとえばCGIの置かれたディレクトリの配下に“photo”というディレクトリがあり，その中にある“pict_2.jpg”というファイルを表示するには<img src="photo/pict_1.jpg">としてください。 ブラウザの右端に表示して問題文をよけて表示するときは，<img src="pict_1.jpg" align="right">とやればできます。 また，新しいウィンドウ（またはタグ）を開いて表示するには，<img src="pict_1.jpg" target="picture_1">などとすることになります。
画像ファイルの置かれているディレクトリの，絶対パスもしくはCGIの置かれているディレクトリからの相対パスがわかれば，どこにおいてあるファイルでも指定できます。 多分URIを指定すれば，インターネット上に公開された画像を拝借することもできます（著作権などに絡んで問題があっても私は責任とれません）。 ところで現状，VOTE on the WEBにはファイルをアップロードする方法は用意していませんので，図のファイルを以下にしてサーバーに送信するかが問題です。 基本的にそれぞれの環境でファイルをアップロードする方法（FTPやSFTP，NFSやSambaなどでの共有ファイルシステムなど）に従い，希望のディレクトリに，あらかじめファイルを送信しておいてください。 うまく素材をアップロードすれば，思い通りの問題文をつくることができます。 ただし，あまりたくさんの画像の表示はおすすめしません。 授業利用を想定する以上，スクロールなしで全ての選択肢が表示されることが理想でしょうが，たくさんの画像を入れるとそれは難しくなります。
なお，回答の選択肢は<li>～</li>で囲まれますので，必ず1行に1選択肢になります。 したがって，画像などで示された選択肢を，１つの行に複数横に並べて表示することはできません。 一つ一つの図の大きさにもよりますが，このときは全ての選択肢を縦スクロール無しで表示するのは難しくなるでしょう。 そのようなとき，私は別ページにテーブル要素を使って画像を表示し，横に並べたり，２×２に並べるなどして表示する方法をとっています。 問題文中にそのページへのリンクを張っておくと，ワンクリックで見やすいページを表示できます。 あまりスマートではないですが，次善の策ということで。