やや複雑な問題では，「問題 → 解答 → 採点」の流れ以外に，できないときに「ヒント」を出して再考をうながすのが効果的な場合があります．
画像でヒントを出す方法は簡単なので，ここでは文字でヒントを出すことを考えます．ヒントを出すきっかけとしては，「間違った解答をしたとき」「間違った解答を２回以上したとき」「ヒントボタンまたはヒントという文字を押したとき」などが考えられますが，ここではプログラムが簡単な「ヒントという文字を押したとき」でやってみます．
利用するのは，スタイル属性のうち，hidden -> visibleの切り替えです。
| <style>
.bun {font-size: 12px; color: #000077; position: relative; visibility: hidden; } </style> |
重要なのはhidden属性だけです．（はじめ隠れていて，合図により現れます．） |
| <script language="javascript">
bName = navigator.appName; bVersion = parseInt(navigator.appVersion); if(bName == "Netscape" && bVersion >= 4) browser = "N4"; else if(bName == "Microsoft Internet Explorer" && bVersion >= 4) browser = "IE4"; |
スタイル属性の変更は，使われているブラウザの種類に応じて行います。そこで，NNかIEかを調べておきます。 |
| function saiten(qnum, anum)
{if(qnum == 1) {if(anum == 3) document.kekka1.src = "yes.gif"; else document.kekka1.src = "no.gif"; } } function hint(num) {if(num == 1) {if(browser == "N4") document.bun1.visibility = 'visible'; else if(browser == "IE4") document.all.bun1.style.visibility = 'visible'; } } </script> </head> <body text="#666600" bgcolor="#FFF0F0" link="#999900" vlink="#999900" alink="#999900"> <br>江戸幕府を開いたのは、誰ですか．<br><a href="javascript:saiten(1,1)">織田信長</a> <a href="javascript:saiten(1,2)">豊臣秀吉</a> <a href="javascript:saiten(1,3)">徳川家康</a> <a href="javascript:saiten(1,4)">徳川家光</a> <div class="bun" ID="bun1" style = "visibility: hidden;">国家安康の文字の中に名前があります。</div> <a href="javascript:hint(1)">ヒント</a> <center><img SRC="neutral.gif" NAME="kekka1" BORDER=0 height=50 width=50></center> </body> |
NNでは，
なお，フォームの中でスタイルシートを利用するときの注意点は↓．
|
《問題》
江戸幕府を開いたのは、誰ですか．