アラートで簡単なクイズを作ろう
表示の例
 ボタンを押すと、質問のアラートが表示されます。
3回の質問に [OK] か [キャンセル] で選んでもらうと、8つの答えにたどり着きます。
下の「質問の表」のように表示されますから、それぞれの質問や答えを考えてみてください。
質問の表
     
答え6 スタート 答え2
答え5 質問5 質問3 質問1 質問2 質問4 答え1
答え7 質問7 質問6 答え3
答え8 答え4
     
OKを押した時は青い矢印へ、キャンセルを押した時は赤い矢印に進みます
プログラムAのソースをコピーして、HTMLソースのHEAD区間に貼り付けしましょう。
プログラムAのソース
<SCRIPT LANGUAGE="JavaScript">
<!--
function dialog1(){
flag=confirm("質問1です・・・OKなら質問2、キャンセルなら質問3を表示します");
if(flag) dialog2();
else dialog3();
}
function dialog2(){
flag=confirm("質問2です・・・OKなら質問4、キャンセルなら質問6を表示します");
if(flag) dialog4();
else dialog6();
}
function dialog3(){
flag=confirm("質問3です・・・OKなら質問5、キャンセルなら質問7を表示します");
if(flag) dialog5();
else dialog7();
}
function dialog4(){
flag=confirm("質問4です・・・OKなら答え1、キャンセルなら答え2を表示します");
if(flag) alert("答え1です");
else alert("答え2です");
}
function dialog5(){
flag=confirm("質問5です・・・OKなら答え5、キャンセルなら答え6を表示します");
if(flag) alert("答え5です");
else alert("答え6です");
}
function dialog6(){
flag=confirm("質問6です・・・OKなら答え3、キャンセルなら答え4を表示します");
if(flag) alert("答え3です");
else alert("答え4です");
}
function dialog7(){
flag=confirm("質問7です・・・OKなら答え7、キャンセルなら答え8を表示します");
if(flag) alert("答え7です");
else alert("答え8です");
}
//-->
</SCRIPT>
プログラムAのソースの 質問1です・・・OKなら質問2、キャンセルなら質問3を表示します や 答え1です などの部分のコメントを考えてみてくださいね。
プログラムBのソースをコピーして、このボタンを表示させたい場所のHTMLソースのBODY区間に貼り付けしましょう。
プログラムBのソース
<FORM>
<INPUT type="button" value="クイズ" onClick="dialog1()">
</FORM>
ボタンの文字は value="クイズ" の クイズ をかえてくださいね。
ソースの文字をかえる時に、" や ; を消してしまわないようにしてください。
5・6年生にもわかるやさしいJavaScriptのTOPへ