| ○ 使用したい場面 総括テストなどにおいて単元や項目の知識理解をテストするときには，身に付いた内容を正確に測定するのがねらいなのでHELPを用意することは考えにくい． しかし，自学自習用教材では「解けなくて正答に到達できないとき」「事前に十分説明し切れなかった補足説明があるとき」などにおいては，HELPがある方がよい．ただし，自立心を養うためにもHELPを使うかどうかは各自の判断にまかせたい． HELPを付けるとき，初めからHELPを選べるようにすると読者の助けにはなるがテストとして正答率・誤答率などのを集計の精度が落ちる．すなわち，HELPを見てから正答になったのか見なくても正答であったのか区別できない． そこで，
(1) 初期画面にはHELPは表示しない．
という画面構成にすることを考える．(2) 読者の解答が誤答であったときにはHELPボタンを表示する． a) HELPボタンを選択して解説を読むことができる． b) HELPボタンを選択せずに自力で再試行することもできる． |
例1 ボタンによる方法
（中学校1年生向き１次方程式の解き方）
例2 リンクによる方法
（中学校1年生向き１次方程式の解き方）
|
| ○ javascript ソースコード（主なポイントのみ） *1 ボタンの表示・非表示属性を画面上で変更するために，
(1) IDを付けて名前で呼び出せるようにする． (2) style属性でvisibilityをhiddenにしておく． *2 解説文のstyle属性もvisibilityをhiddenにしておく． *3 採点関数で誤答だったらHELPボタンを表示し，解説文は非表示のままにする． *4 HELPボタンが押されたら解説文を表示する． ■例1のソースコード ■HTMLのBODY <form name="ex1"> <span class="itl16">3x+2=8</span><br> <span class="itl16">x=</span><input type="text" name="tx1" value="" size="1" style="ime-mode:disabled;"><img src="neutral.gif" width="24" height="24" border="0" name="kr_ex1"> <center><input type="button" value="採点する" onclick="saiten1()"><input type="button" value="やり直す" onclick="renew1()"><input type="button" ID="HELP1" value="HELP" onclick="view_help1()" style="visibility:hidden;"></center>// *1 <span id="help_doc1" style="visibility:hidden;color:#000066;">// *2 左辺の <span class="itl16">2</span> を右辺に移項する<br> <span class="itl16">3x=8 - 2</span><br> <span class="itl16">3x=6</span><br> 両辺を <span class="itl16">3</span> で割る<br> <span class="itl16">x=2</span> …（答） </span> </form> ■Jvascriptのユーザ定義関数 function saiten1() {if(document.ex1.tx1.value == 2) document.kr_ex1.src = "o1004.gif";//正答時表示用画像 else {document.kr_ex1.src = "x1003.gif";//誤答時表示用画像 document.getElementById('HELP1').style.visibility = 'visible'; }// *3 } function view_help1(vw_flag1) {document.getElementById('help_doc1').style.visibility = 'visible'; //*4 } function renew1() {document.ex1.tx1.value = ''; document.kr_ex1.src = "neutral.gif";//初期表示用画像 } |
例2のソースコード ■HTMLのBODY <form name="ex2"> <span class="itl16">3x+2=8</span><br> <span class="itl16">x=</span><input type="text" name="tx2" value="" size="1" style="ime-mode:disabled;"> <img src="neutral.gif" width="24" height="24" border="0" name="kr_ex2"> <center> <a href="javascript:saiten2()" style="color:#ffffff;background-color:#8080ff;text-decoration:none;">採点する</a> <a href="javascript:renew2()" style="color:#ffffff;background-color:#8080ff;text-decoration:none;">やり直す</a> <a href="javascript:view_help2()" ID="HELP2" style="color:#ffffff;background-color:#8080ff;text-decoration:none;visibility:hidden;">HELP</a> </center>// *1 <span id="help_doc2" style="visibility:hidden;color:#000066;">// *2 左辺の <span class="itl16">2</span> を右辺に移項する<br> <span class="itl16">3x=8 - 2</span><br> <span class="itl16">3x=6</span><br> 両辺を <span class="itl16">3</span> で割る<br> <span class="itl16">x=2</span> …（答） </span> </form> ■Jvascriptのユーザ定義関数 function saiten2() {if(document.ex2.tx2.value == 2) document.kr_ex2.src = "o1004.gif"; else {document.kr_ex2.src = "x1003.gif"; document.getElementById('HELP2').style.visibility = 'visible'; //*3 } } function view_help2(vw_flag1) {document.getElementById('help_doc2').style.visibility = 'visible'; //*4 } function renew2() {document.ex2.tx2.value = ''; document.kr_ex2.src = "neutral.gif"; } ※「やり直す」ときに解説文が見えたままでは学習の妨げになると判断されるときは，次の方法が考えられる． ○読者の意志で解説文を消す（「閉じる」というボタンを追加する） ○「やり直し」に連動させて解説文を消す ※前書きなどに書き切れなかった補足説明で正解者にも読んでもらう方が有益と考えられる解説文であるときなど， ○正解であっても表示されるように次のように変更する． function saiten2() {document.getElementById('HELP2').style.visibility = 'visible'; //*3 if(document.ex2.tx2.value == 2) document.kr_ex2.src = "o1004.gif"; else document.kr_ex2.src = "x1003.gif"; } |
○ 作動チェックMicrosoft Internet Explorer 7.0 (OS：Windows xp) ･･･チェック日2009.07.29･･･ＯＫ |
|
○ 実際に使用しているページ
../math/zukei02.htm |
|
| ○ 期待される効果 問題のの難易度と比べて第1回正答率が高すぎるように思われるとき，想定される正答率に落ち着けばよい． HELPがないときと比べて，第2回以降の正答率が高く，脱落率が低く，回答回収率がよくなればよい． |
|