JavaScriptで選択問題JavaScriptで選択問題、音声付を実現する助け合いの掲示板で、「選択問題で答えを選ぶと、正解の場合にはランダムでメッセージを出して音声もつけたい、、、」という質問をもらいました。お金もかけずに、特別なソフトも使わずに実現させるならJavaScriptかなぁ、、、ということで、そのスクリプトを書いてみたので、ちょっと紹介してみたいと思います。手っ取り早く、これを実現したサンプルがこちらとなります。具体的には下記のような仕様です。・選択式の問題を作成する(三択など)・正解ならばランダムなコメントが出る・コメントに付随した音声が出る三択で、どれが正解ですか?といった物であれば、わざわざJavaScriptを使わなくてもHTMLのリンクだけで実現可能です。「正解したらランダムにメッセージが変わる」というのはJavaScriptのようなプログラムっぽい手法を使わないとできません。次に、音声が出るという部分をどう実現するかですが、これはHTMLで実現可能なので、JavaScriptでそのページに音声ファイルを再生するためのタグを埋め込めばOKという感じでよさそうです。そこで、最初にJavaScriptで三択をつくり、正解すると複数の正解メッセージがでるようなスクリプトを考えてみたいと思います。正解したときだけメッセージを変えるにはまず選択問題を作ってみます。下のようなフォームをHTMLで作成します。*サンプルなので押しても反応しませんm(__)m。このHTMLは下のような感じです。value="解答"></form>上のソースの太字で示した「onSubmit="JavaScript:check();"」というのが、この解答ボタンが押されたときに反応するJavaScriptとなります。」で、する必要のあることを順に書いてみると、下記のようになります。手っ取り早く、これを実現したサンプルがこちらとなります。(解説なんか読んでられるかぁ~という方は、このサンプルをコピーして使ってください。(flag){value=document.form1.cbox1[i].value;}}最初にクリックされたラジオボタン(チェックボックスと書いてますが、、、)の中身をチェックです。ここで注意が必要なのが、ラジオボタンの処理です。ラジオボタンは「複数の選択肢から一つだけを選ぶ」というものなので、選択肢がいくつあるのかを調べる必要があるのです。私はJavaScript書きではないので、ここでつまずいて、ちょっと時間をとってしまいました。最初に変数「num」に選択肢の数を代入します。」で一つずつ中身のチェックをするわけです。」というような配列に格納され、まずそれがチェックされているかどうかを「flag=document.form1.cbox1[i].checked;」で確認し、チェックされていれば、その中身を「value=document.form1.cbox1[i].value;」で取り出す、、、ということをします。JavaScriptでラジオボタンを操作する場合には、このような方法しかないようで、勉強になりました(^^;次に、このチェックされた内容に応じてメッセージを変化させる部分です。これは、あらかじめ、メッセージを配列として準備しておきます。下でいうなら、「//メッセージ」、「//音声」の部分です。Math.floor(Math.random()*3);」と0~2のランダムな数を発生させています。このランダムな数によって、上で準備した正解時のメッセージを入れ替えるわけです。同じように、音声ファイルもこの数字によって変わります。不正解なら、選択の余地なく不正解用メッセージを準備します。最後に、その内容を表示するためのHTMLを書き出すJavaScriptを用意してOKということになります。簡単でしょ?下の太字「voice」「message」に先ほど選択された正解・不正解時の内容が入り、それぞれの表示がされることになります。align='center'>");document.write(message);document.write("</div></body></html>");HTMLでの音の鳴らし方について掲示板ではホームページにBGMをつける方法もよく聞かれます。これは色々な方法がありますが、一番簡単なのは上でも利用している「bgsound」というタグを使う方法です。「loop」という属性に数字を入れることで再生する回数を指定できますが、ブラウザによっては再生できないこともあるので、あまりポピュラーではないかもしれません。(bgsoundというタグはHTML4.0では標準でないタグでした。HTML4.0に準拠したページを作るには別の方法を使ってください。2004/7/16追記)今回のサンプルでは、すこし重たいファイルを使ったので、すぐに音が出てこなかったかもしれません。改良の余地はありますので、あとはご利用になる方で工夫してみてください。今回は効果音という意味で音をつけましたが、個人的にはホームページにはBGMは不要かな、、、と思ってます。