JavaScriptで選択問題、音声付

トップ > 気まぐれ実験 > 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 ( ) 」で、する必要のあることを順に書いてみると、下記のようになります。

1.ラジオボタンの押された内容の取得

2.それが正解なら、、、
  正解の場合のメッセージの選択(ランダム)
  メッセージに応じた音声の選択

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

4.メッセージの表示

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

ソースの解説

ということで、簡単に解説すると、、、まず、「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);」と0~2のランダムな数を発生させています。このランダムな数によって、上で準備した正解時のメッセージを入れ替えるわけです。同じように、音声ファイルもこの数字によって変わります。

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

最後に、その内容を表示するための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 追加)

トップ > 気まぐれ実験 > JavaScriptで選択問題

日時: 2008年01月21日 10:25
newsingに投稿BuzzurlにブックマークBuzzurlにブックマークlivedoorクリップに投稿 Choixにブックマーク イザ!ブックマーク このエントリーを含むはてなブックマーク
トップに戻る
このエントリーの所属カテゴリ: 気まぐれ実験の小部屋
このエントリーのタイトル:JavaScriptで選択問題、音声付



copyright © 2000-2008 all rights reserved
あいまいモード・コム - rss2.0 atom
newsingに投稿BuzzurlにブックマークBuzzurlにブックマークlivedoorクリップに投稿 Choixにブックマーク イザ!ブックマーク このエントリーを含むはてなブックマーク