jQuery入門講座診断系コンテンツ-点数計算

点数計算

概要

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

診断系コンテンツの得点は選択肢（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">２度寝する</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を利用するのがポイントです。

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

次のページ：結果の表示