３. 四者択一クイズ DynamicHTML版

[Index] [Next] [Prev]

前回のフォーム版をDynamicHTML版にしただけです。そのかわり画像が扱えるようになりましたが･･･実用性は低そうです。

[実行結果]

別ウインドウが開きます →

使い方

Startを押すと問題が出題されます。
答えが1〜4のフォーム内にあるのでとなりのボタンを選びNextボタンを押します。
下に正解か不正解(の場合答えがでる)、正答率、のこり問題数などが出ます。

今回は説明を分かりやすくするために問題をシャッフルしていません。

問題の作り方

QuestionNumber=3;
ここで問題数を設定します。

Q0="問題がココに表示されています<br />"  //問題文を入力していきます　改行には<br />タグを使ってください
Q0+="選択肢から選んで Next を押すと次の問題に進めます<br />";   //2行目以降は変数に += をつけてください
A1_0="不正解";  //4択の答えをいれます
A2_0="正解";
A3_0="不正解";
A4_0="不正解";
QA0=2;        //4択の答えの場所を入力
Question[000]=new Array(
  'Q0,3,300',                     //問題本文,改行数,問題幅　改行*12=ピクセル
  'QA0,A1_0,A2_0,A3_0,A4_0',      //答え番号,問題1〜4
  'Not',                          //問題図(ない場合は Not),図幅,図高さ,場所x軸,場所y軸
  '000.html,500,300'              //解説(ない場合は Not),別ウインドウ幅,別ウインドウ高さ
);
↑パターン1

Q1="下のように問題に図を載せることもできる。<br />";  //問題文を入力していきます　改行には<br />タグを使ってください
Q1+="前の問題で正解を選べば、問題解説がでる<br />";   //2行目以降は変数に += をつけてください
Q1+="不正解を選べば、問題の答えと解説がでる。<br />";
Q1+="ついでに正答率と残りの問題数が一番下にでます。";
A1_1="正解";  //4択の答えをいれます
A2_1="不正解";
A3_1="不正解";
A4_1="不正解";
QA1=1;        //4択の答えの場所を入力
Question[001]=new Array(
  'Q1,4,300',                     //問題本文,改行数,問題幅　改行*12=ピクセル
  'QA1,A1_1,A2_1,A3_1,A4_1',      //答え番号,問題1〜4
  '100_200.png,200,100,120,110',  //問題図(ない場合は Not),図幅,図高さ,場所x軸,場所y軸
  'Not'                           //解説(ない場合は Not),別ウインドウ幅,別ウインドウ高さ
);
↑パターン2

Q2="答えに図を載せることもできる。<br />";  //問題文を入力していきます　改行には<br />タグを使ってください
Q2+="図を載せた場合は解答群が横に並ぶ<br />";   //2行目以降は変数に += をつけてください
A1_2="不正解<br /><img src='50.png' />,65,20";  //答え図,図幅,図高さ
A2_2="不正解<br /><img src='50.png' />,65,20";
A3_2="正解<br /><img src='50.png' />,65,20";
A4_2="不正解<br /><img src='50.png' />,65,20";
QA2=3;        //4択の答えの場所を入力
Question[002]=new Array(
  'Q2,2,300',                     //問題本文,改行数,問題幅　改行*12=ピクセル
  'QA2,A1_2,A2_2,A3_2,A4_2',      //答え番号,問題1〜4
  '100_200.png,200,100,120,110',  //問題図(ない場合は Not),図幅,図高さ,場所x軸,場所y軸
  'Not'                           //解説(ない場合は Not),別ウインドウ幅,別ウインドウ高さ
);
↑パターン3

注意点

問題の設定

問題設定をする時には変数名に気をつけてください。 変数名が違っているとぜんぜん違う解答群がでたり問題文がでたりします。

外部問題ファイル読み込み

//document.write("<script type='text/javascript' charset='Shift_JIS' src='QA.js'></script>");
の部分の // を取り除き、 QA.js というファイルをつくってください。

このファイルには問題だけを入れるだけでOKです。 本体プログラムからは問題を消してください。 詳しくは下のファイル例をみてください。

下のファイル例をそのまま使う場合は拡張子を .js に変更してください。

問題シャッフル機能を有効

/* for(i=0;<100;i++){･･････ */の部分の /* と */ を消してください。

[プログラム]


<script type="text/javascript" charset="Shift_JIS">

//<!--
//document.write("<script type='text/javascript' charset='Shift_JIS' src='QA.js'></script>");　外部から問題読み込み

QuestionNumber=3;

Question=new Array(QuestionNumber);

Q0="問題がココに表示されています<br />"
Q0+="選択肢から選んで Next を押すと次の問題に進めます<br />"
A1_0="不正解";
A2_0="正解";
A3_0="不正解";
A4_0="不正解";
QA0=2;
Question[000]=new Array(
   'Q0,3,300',
   'QA0,A1_0,A2_0,A3_0,A4_0',
   'Not',
   '000.html,500,300'
);

Q1="下のように問題に図を載せることもできる。<br />";
Q1+="前の問題で正解を選べば、問題解説がでる<br />";
Q1+="不正解を選べば、問題の答えと解説がでる。<br />";
Q1+="ついでに正答率と残りの問題数が一番下にでます。";
A1_1="正解";
A2_1="不正解";
A3_1="不正解";
A4_1="不正解";
QA1=1;
Question[001]=new Array(
   'Q1,4,300',			//問題本文,改行数,問題幅　改行*12=ピクセル
   'QA1,A1_1,A2_1,A3_1,A4_1',	//答え番号,問題1〜4
   '100_200.png,200,100,120,110',	//問題図,図幅,図高さ,場所x軸,場所y軸
   'Not'				//解説,別ウインドウ幅,別ウインドウ高さ
);

Q2="答えに図を載せることもできる。<br />";
Q2+="図を載せた場合は解答群が横に並ぶ<br />";
A1_2="不正解<br /><img src='50.png' />,65,20";	//答え図,図幅,図高さ
A2_2="不正解<br /><img src='50.png' />,65,20";
A3_2="正解<br /><img src='50.png' />,65,20";
A4_2="不正解<br /><img src='50.png' />,65,20";
QA2=3;
Question[002]=new Array(
   'Q2,2,300',
   'QA2,A1_2,A2_2,A3_2,A4_2',
   'Not',
   'Not'
);

for(A in Question)
{
   Question[A][0]=Question[A][0].split(",");
   Question[A][1]=Question[A][1].split(",");
   Question[A][2]=Question[A][2].split(",");
   Question[A][3]=Question[A][3].split(",");

   for(i=1;i<=4;i++)   Question[A][1][i]=eval(Question[A][1][i]).split(",");
}

flag1=0;
Reset();

function InputChecker()
{
   InputCheck=0;

   for(i=0;i<4;i++) if(!(document.form1.radio1[i].checked)) InputCheck++;

   if(InputCheck == 3 || flag1==0){	
      Q_A4_out();
   }else if(InputCheck == 4){
      alert("チェックしてください");
   }
}

function SubWin(Add,Wid,Hei)
{
   window.open(""+Add+"",'Test',"width="+Wid+",height="+Hei);
}

function Q_A4_out()
{
   Visibility("visible");

   if(flag1){
      if(document.form1.radio1[eval(Question[Qcount][1][0])-1].checked){
         text12.innerHTML="正解";
         Point++;
      }else if(Question[Qcount][1][1][0].indexOf("img") != -1){
         text12.innerHTML="不正解　正解は "+eval(Question[Qcount][1][0]);
      }else{
         text12.innerHTML="不正解　正解は "+eval(Question[Qcount][1][eval(Question[Qcount][1][0])]);
      }

      if(Question[Qcount][3] != "Not"){
         T=Question[Qcount][3][0];
         G=Question[Qcount][3][1];
         B=Question[Qcount][3][2];

         text12.innerHTML+=" <a href='javascript:SubWin(\""+T+"\","+G+","+B+")'>解説をみる</a>";
      }

      for(i=0;i<document.form1.radio1.length;i++)   document.form1.radio1[i].checked=false;

      Qcount++;
      text10.innerHTML="現在の正答率"+Math.round((Point/Qcount)*100)+"%　残り"+(QuestionNumber-Qcount)+"問";

      if(Qcount == QuestionNumber){
         text10.innerHTML="トータル正答率"+Math.round((Point/Qcount)*100)+"%";
         Reset();
         alert("end");
      }
   }else{
      flag1=1;
      document.form1.button1.value = "Next";

      text10.innerHTML="";
      text12.innerHTML="";
   }

   if(flag1) Q_A4_in();
}

function TextReset()
{
   document.all.radi1.style.top=0;
   document.all.text1.style.top=0;
   document.all.At1.style.top=0;
   document.all.At1.style.left=0;
   document.all.radi1.style.left=10;
   document.all.text1.style.left=35;

   document.all.radi2.style.top=18;
   document.all.text2.style.top=18;
   document.all.At2.style.top=18;
   document.all.At2.style.left=0;
   document.all.radi2.style.left=10;
   document.all.text2.style.left=35;

   document.all.radi3.style.top=37;
   document.all.text3.style.top=37;
   document.all.At3.style.top=37;
   document.all.At3.style.left=0;
   document.all.radi3.style.left=10;
   document.all.text3.style.left=35;

   document.all.radi4.style.top=56;
   document.all.text4.style.top=56;
   document.all.At4.style.top=56;
   document.all.At4.style.left=0;
   document.all.radi4.style.left=10;
   document.all.text4.style.left=35;

   document.all.CheckForm.style.top=115;
   document.all.text12.style.top=135;
   document.all.text10.style.top=155;
}


function Q_A4_in()
{
   TextOut.innerHTML=eval(Question[Qcount][0][0]);
   TextReset()
   ImgTop=0;
   ImgChe=0;

   for(i=1;i<=4;i++){
      if(Question[Qcount][1][i][0].indexOf("img") != -1){
         eval("document.all.At"+i+".style.left=ImgTop");
         eval("document.all.radi"+i+".style.left=ImgTop+5");
         eval("document.all.text"+i+".style.left=ImgTop");
         eval("text"+i+".innerHTML=Question[Qcount][1]["+i+"][0]");

         eval("document.all.text"+i+".style.top=eval(Question[Qcount][1]["+i+"][2])");
         eval("document.all.radi"+i+".style.top=0");
         eval("document.all.At"+i+".style.top=0");
         ImgTop+=Number(Question[Qcount][1][i][1]);
         ImgChe=1;
      }else{
         eval("text"+i+".innerHTML=eval(Question[Qcount][1]["+i+"])");
      }
   }

   if(ImgChe){
      document.all.text12.style.top=eval(Question[Qcount][1][1][1])+55;
      document.all.text10.style.top=eval(Question[Qcount][1][1][1])+75;
      document.all.IC.style.top=eval(Question[Qcount][1][1][1])+30;
      document.all.AR.style.top=eval(Question[Qcount][1][1][1])+30;
   }else{
      document.all.IC.style.top=80;
      document.all.AR.style.top=80;
   }

   CheckForm.style.top=(eval(Question[Qcount][0][1])*22)+40;
   TextOut.style.width=Question[Qcount][0][2];

   if(Question[Qcount][2] != "Not"){
      ImgScreen();
   }else{
      Visibility("hidden");
   }
}

function Reset()
{
   if(flag1){
      TextOut.innerHTML="問題";
      text1.innerHTML="選択肢1";
      text2.innerHTML="選択肢2";
      text3.innerHTML="選択肢3";
      text4.innerHTML="選択肢4";

      TextReset();
      document.form1.button1.value="Start";
      Visibility("hidden");
      CheckForm.style.top=90;
   }

   Qcount=0;
   flag1=0;
   Point=0;

//↓問題シャッフル機能を有効にするには /* と*/ をはずす
/*
   for(i=0;i<100;i++){
      S1=Math.floor(Math.random() * (QuestionNumber-1));
      S2=Math.floor(Math.random() * (QuestionNumber-1));
      BackUp=Question[S1];
      Question[S1]=Question[S2];
      Question[S2]=BackUp;
   }
*/
}

function Visibility(Display)
{
   if(document.all){
      Figure.style.visibility=Display;
   }else if(document.layers){
      Figure.visibility=Display;
   }else if(document.getElementById){
      NN6=document.getElementById("Figure");
      NN6.style.visibility=Display;
   }
}

function ImgScreen()
{
   img=Question[Qcount][2][0];
   wP=Question[Qcount][2][1];
   hP=Question[Qcount][2][2];
   xP=Question[Qcount][2][3];
   yP=Question[Qcount][2][4];

   Figure.style.width=parseInt(wP);
   Figure.style.height=parseInt(hP);
   Figure.style.left=parseInt(xP);
   Figure.style.top=parseInt(yP);
   Figure.style.background="url('"+img+"')";
}

//-->
</script>

<div id='TextOut' style='position:absolute;line-height:22px;'>問題</div><br />

<form name="form1" id="CheckForm" style='position:absolute;width:100%;top:90;'>

   <span id='At1' style='position:absolute;left:0em;top:0:'>1. </span>
      <input type="radio" name="radio1" id="radi1" style='position:absolute;left:8;'>
         <span id='text1' style='position:absolute;left:2em;top:0'>選択肢1</span><br />

   <span id='At2' style='position:absolute;left:0em;top:18:'>2. </span>
      <input type="radio" name="radio1" id="radi2" style='position:absolute;left:8;'>>
         <span id='text2' style='position:absolute;left:2em;top:18;'>選択肢2</span><br />

   <span id='At3' style='position:absolute;left:0em;top:37:'>3. </span>
      <input type="radio" name="radio1" id="radi3" style='position:absolute;left:8;'>
         <span id='text3' style='position:absolute;left:2em;top:37;'>選択肢3</span><br />

   <span id='At4' style='position:absolute;left:0em;top:56;'>4. </span>
      <input type="radio" name="radio1" id="radi4" style='position:absolute;left:8;'>
         <span id='text4' style='position:absolute;left:2em;top:56;'>選択肢4</span><br /><br />

   <input type="button" name="button1" value="Start" id="IC" style='position:absolute;' onClick="InputChecker()">
   <input type="reset" name="button2" value="Reset" id="AR" style='position:absolute;left:4em;' onClick="Reset()"><br /><br />

   <span id='text12' style='position:absolute;'> </span><br />
   <span id='text10' style='position:absolute;'> </span><br /><br />
</form>

<div id='Figure' style='position:absolute'></div>

[裏話]

無駄に長ったらしいプログラムで、ややこしいです。 もはや作った本人でも理解に苦しむほど。

始めはNNも一緒に動くようにつくっていたんですけど、DynamicHTMLってIEとNNでは大分動作がちがうのでNNをあきらめました。 だからプログラムの所々にNN仕様の設定がのこってます＾＾； プログラム的には動くのですけど、表示部分(DynamicHTML)が狂ってます、文字どうしがくっついたりとかめちゃくちゃ。

苦労してつくったわりには応用性に欠けていて、問題の設定がややこしくてめんどくさいです。

© 2000-2003 Tsukimi / HobbySpace