デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
1章:短編集
2章:診断系コンテンツ
3章:製品抽出系コンテンツ
番外:Simulation Game

点数計算

概要

選択肢から得点を取得し、最後に合計を算出

診断系コンテンツの得点は選択肢(li要素)のタグに組み込みます(ソースを見ると得点が分かってしまうため、クイズなどには不向きでしょう)。選択肢がクリックされた際に、その得点を配列に格納し(ラジオボタンで配列にidを格納したのと同じテクニックを利用します)全ての質問に回答した時点で合計得点を算出します。

解説

htmlに得点を組み込む

得点は選択肢(li要素)のタグに組み込みます。サンプル(score/01.html)のソースを開きhtmlを確認して下さい。以下の様に各選択肢(li要素)にsc属性が追加され、得点が設定されています(sc属性は勝手に作成した独自の属性です、scoreから名前を付けました)。

<ul>
	<li id="0_0" sc="20">軽くジョギングをする</li>
	<li id="0_1" sc="15">ストレッチで目を覚ます</li>
	<li id="0_2" sc="10">テレビで情報収集</li>
	<li id="0_3" sc="5">遅刻しそうなので、すぐに出発</li>
	<li id="0_4" sc="0">2度寝する</li>
</ul>

続いてjQueryでquesFunc内の最後に以下の2行が追加されてるのを確認して下さい。attrメソッドを利用して、クリックされた要素(this)からcs属性の値を取得しています。これは数値として計算するためにNunberを利用して数値に変換しています。そして数値が確認できるようにアラートで表示するようにしました。

var myScore = Number($(this).attr("sc"));
alert(myScore);

結果として、選択肢をクリックすると得点がアラートで表示されます。分かりやすいように各質問とも上から順に20,15,10,5,0点としています。

各質問の得点を配列に格納

次は各質問の得点を配列に格納していきます。サンプル(score/02.html)のソースを開き、htmlに変更がないことを確認して下さい。jQueryでは、まず以下の様に得点を格納する配列「scoreArray」が作成されています。最初は点数を獲得していないので、各質問の得点には0が設定されています。

scoreArray = [0,0,0,0,0];

続いてquesFunc内の最後の部分を確認して下さい。サンプルscore/01.htmlと似ていますが左辺が異なり、質問のID「qID」の位置に得点を格納しています。

scoreArray[qID] =  Number($(this).attr("sc"));
alert(scoreArray)

このテクニックはラジオボタンで選択肢のidを格納した以下のテクニックと同じです。

selectArray[qID] = ansID;

配列scoreArrayは最後にアラートで表示するようにしているので、選択肢をクリックすると配列が表示されます。各質問ごとに得点が格納されることを確認して下さい。

すべての質問に回答した?

合計得点の算出は、すべての質問に回答してから行います。ですので「全ての質問に回答したか?」をチェックしなければなりません。サンプル(score/03.html)のソースを開き、jQueryに以下の処理が追加されていることを確認して下さい。質問の数は配列「selectArray」の要素数と同じなので、lengthプロパティを利用して配列の要素数を取得し、それを「質問の数」として変数「qNum」に代入しておきます。

qNum = selectArray.length;//---質問数の取得

続いてquesFuncの最後に以下の1行が追加されているのを確認して下さい。ここで次の質問(qID+1)が質問の数(qNum)以上であるかをチェックしています。qIDは0から始まり最後は4ですから、最後の質問に回答した場合は「4+1」で「5」となります。そしてqNum(質問数)は「5」ですから、これで最後の質問に回答したかどうかが判断できるのです。qID+1は実質5を越えませんが、一応「>=」を利用しました。

if (qID+1 >= qNum) resultFunc();//---最後の質問かをチェック

上記処理では最後の質問に回答した場合にresultFuncを実行するようにしていますが、このサンプルではresultFuncは以下の様に記述されアラートを表示するだけとなっています。

//---結果の処理
function resultFunc(){
	alert("合計得点の算出を開始!")
}

結果として、最後の質問に回答するとアラートで「合計得点の算出を開始!」と表示されます。

配列内の得点を合計する

ではresultFuncで配列に格納した、各質問の得点を合計しましょう。サンプル(score/04.html)のソースを開き、jQueryのresultFuncを確認して下さい。以下の処理で配列内の数値を全て合計することができます。

var totalScore = 0;
for(var i in scoreArray){
	totalScore += scoreArray[i];
}
alert("totalScore = " + totalScore);

1行目で合計得点を保存する変数totalScoreを作成し、0を代入しておきます。2行目は「for in」の構文で配列の要素の数だけ繰り返し処理を実行します。そして3行目でscoreArrayから得点を取り出し、totalScoreへ加えていきます。配列の要素番号に「for in」で利用している変数iを利用するのがポイントです。

そして最後にアラートで合計得点を算出します。結果として、すべての質問に回答すると合計得点がアラートで表示されます。次回は、この合計得点を利用して結果画面を作成していきます。