JavaScriptで選択問題、音声付

● JavaScriptで選択問題、音声付を実現する

助け合いの掲示板で、「選択問題で答えを選ぶと、正解の場合にはランダムでメッセージを出して音声もつけたい、、、」という質問をもらいました。お金もかけずに、特別なソフトも使わずに実現させるならJavaScriptかなぁ、、、ということで、そのスクリプトを書いてみたので、ちょっと紹介してみたいと思います。

手っ取り早く、これを実現したサンプルがこちらとなります。

具体的には下記のような仕様です。

選択式の問題を作成する（三択など）
正解ならばランダムなコメントが出る
コメントに付随した音声が出る

三択で、どれが正解ですか？といった物であれば、わざわざJavaScriptを使わなくてもHTMLのリンクだけで実現可能です。が、「正解したらランダムにメッセージが変わる」というのはJavaScriptのようなプログラムっぽい手法を使わないとできません。

次に、音声が出るという部分をどう実現するかですが、これはHTMLで実現可能なので、JavaScriptでそのページに音声ファイルを再生するためのタグを埋め込めばOKという感じでよさそうです。

そこで、最初にJavaScriptで三択をつくり、正解すると複数の正解メッセージがでるようなスクリプトを考えてみたいと思います。

●正解したときだけメッセージを変えるには、、、

まず選択問題を作ってみます。下のようなフォームをHTMLで作成します。

日本の中部地方にある世界遺産はどれ？
永平寺
白川郷
名古屋城

*サンプルなので押しても反応しませんm(__)m。

このHTMLは下のような感じです。

<font size="2">日本の中部地方にある世界遺産はどれ？</font>
<form name="form1" action="#" onSubmit="JavaScript:check();">
<input type="radio" name="cbox1" value="0">永平寺<br>
<input type="radio" name="cbox1" value="1">白川郷<br>
<input type="radio" name="cbox1" value="0">名古屋城<br>
<input type="submit" value="解答">
</form>

上のソースの太字で示した「onSubmit="JavaScript:check();"」というのが、この解答ボタンが押されたときに反応するJavaScriptとなります。

これが押されたときの関数「 check ( ) 」で、する必要のあることを順に書いてみると、下記のようになります。

１．ラジオボタンの押された内容の取得

２．それが正解なら、、、
　　正解の場合のメッセージの選択（ランダム）
　　メッセージに応じた音声の選択

３．それが不正解なら、、、
　　不正解のメッセージ
　　不正解の音声の選択

４．メッセージの表示

手っ取り早く、これを実現したサンプルがこちらとなります。

（解説なんか読んでられるかぁ～という方は、このサンプルをコピーして使ってください。）

ということで、簡単に解説すると、、、まず、「function check ( ) { } 」の中身からです。

// チェックボックスの長さチェック
num=document.form1.cbox1.length;

// チェックボックスの中身を一つずつ調べて、チェックされている場所を入力
for (i=0;i<num;i++) {
　　flag=document.form1.cbox1[i].checked;
　　if (flag){
　　　　value=document.form1.cbox1[i].value;
　　}
}

最初にクリックされたラジオボタン（チェックボックスと書いてますが、、、）の中身をチェックです。ここで注意が必要なのが、ラジオボタンの処理です。ラジオボタンは「複数の選択肢から一つだけを選ぶ」というものなので、選択肢がいくつあるのかを調べる必要があるのです。

私はJavaScript書きではないので、ここでつまずいて、ちょっと時間をとってしまいました。最初に変数「num」に選択肢の数を代入します。そして、その数だけ「for { } 」で一つずつ中身のチェックをするわけです。ちょっと面倒ですね。

ラジオボタンのそれぞれの選択肢は「cbox1 [ ] 」というような配列に格納され、まずそれがチェックされているかどうかを「flag=document.form1.cbox1[i].checked;」で確認し、チェックされていれば、その中身を「value=document.form1.cbox1[i].value;」で取り出す、、、ということをします。

JavaScriptでラジオボタンを操作する場合には、このような方法しかないようで、勉強になりました(^^;

次に、このチェックされた内容に応じてメッセージを変化させる部分です。これは、あらかじめ、メッセージを配列として準備しておきます。下でいうなら、「//メッセージ」、「//音声」の部分です。

//メッセージ
db[0]="よくできました！";
db[1]="やったね！";
db[2]="やればできるじゃん！";

//音声
bgm[0]="01.wav";
bgm[1]="02.wav";
bgm[2]="03.wav";

（中略）

// 正解なら・・・
if(value==1){
　　type = Math.floor(Math.random()*3);
　　message = db[type];
　　voice = bgm[type];
}else{
　　message = "ぶぶ～！";
　　voice = "00.wav";
}

「if ( value = = 1 ) 」つまり、正解ならば正解用メッセージを選択するのですが、その前に「type = Math.floor(Math.random()*3);」と０～２のランダムな数を発生させています。このランダムな数によって、上で準備した正解時のメッセージを入れ替えるわけです。同じように、音声ファイルもこの数字によって変わります。

不正解なら、選択の余地なく不正解用メッセージを準備します。

最後に、その内容を表示するためのHTMLを書き出すJavaScriptを用意してOKということになります。簡単でしょ？下の太字「voice」「message」に先ほど選択された正解・不正解時の内容が入り、それぞれの表示がされることになります。

document.write("<html><head><title>答え</title></head>");
document.write("<bgsound src='");
document.write(voice);
document.write("' loop='1'");
document.write("<body><div align='center'>");
document.write("<a href='JavaScript:history.back()'>もどる</a><br><br>");
document.write("<div align='center'>");
document.write(message);
document.write("</div></body></html>");

●HTMLでの音の鳴らし方について

掲示板ではホームページにBGMをつける方法もよく聞かれます。これは色々な方法がありますが、一番簡単なのは上でも利用している「bgsound」というタグを使う方法です。「loop」という属性に数字を入れることで再生する回数を指定できますが、ブラウザによっては再生できないこともあるので、あまりポピュラーではないかもしれません。(bgsoundというタグはHTML4.0では標準でないタグでした。IEのみです。HTML4.0に準拠したページを作るには別の方法を使ってください。2004/7/16追記)

今回のサンプルでは、すこし重たいファイルを使ったので、すぐに音が出てこなかったかもしれません。もう少し改良の余地はありますので、あとはご利用になる方で工夫してみてください。

今回は効果音という意味で音をつけましたが、個人的にはホームページにはBGMは不要かな、、、と思ってます。

(2004/7/05 by あいまい)

(2004/7/16 追加)