jQuery入門講座診断系コンテンツ-結果の表示

結果の表示

概要

合計得点を基に表示内容を設定

すべての質問に回答したら、合計得点に応じて表示内容を設定します。結果のタイトルや説明文はAJAX通信を利用するため、次回で説明します。

解説

htmlとcssの設定

jQueryの前に、結果表示部分のhtmlとcssの設定を確認します。サンプル（result/01.html）のソースを開き、htmlに以下の部分が追加されていることを確認して下さい。確認しやすいように表示領域（id属性qArea）の要素は削除しています。

<div class="qBox">
<div id="resultBox">
	<div id="resultTitle">実業家級サラリーマン</div>
	<div id="resultPoint">15</div>
	<div id="resultLeft">
		<div id="resultText">実業家級サラリーマンの説明文</div>
		<div id="againButton"></div>
	</div>
	<div id="resultImage"></div> 
</div>
/div>

htmlには特筆すべきテクニックはありません。また上記htmlに対するcss設定も診断系コンテンツならではの設定などはないので、説明は省略します。

これで診断系に関連するcss設定は完成したので、邪魔にならないように外部cssに移します。
サンプル（result/01b.html）のソースを開き、cssがcheck.cssに移されたことを確認して下さい。htmlではid属性qAreaの要素を復活させて余分な部分を隠しています。

<link rel="stylesheet" href="check.css" type="text/css" />

この結果画面の得点部分やテキストをjQueryで変更していきます。

得点帯ごとにレベルを決める

診断系コンテンツでは得点帯ごとにレベルを決めます。例えば「100〜80点はAランク」といった具合です。サンプル（result/02.html）のソースを開き、resultFuncに以下の処理が追加されていることを確認して下さい。

switch (true){
	case totalScore >= 80:
		var lv = 4;
		break;
	case totalScore >= 60:
		var lv = 3;
		break;
	case totalScore >= 40:
		var lv = 2;
		break;
	case totalScore >= 20:
		var lv = 1;
		break;
	default:
		var lv = 0;
}
alert("lv = " + lv);

このサンプルでは20点おきに得点帯を分けているので数式でレベルを求めることもできますが、今回は得点帯を変更しやすいswitch caseを利用しました（switch caseはjavaScriptの命令です）。

設定したレベル（変数lv）は最後にアラートで表示するようにしているので、すべての質問に回答するとアラートでレベルが表示されます。

得点と画像の表示

得点の表示は簡単です。サンプル（result/03.html）のソースを開き、resultFuncの最後に以下の処理が追加されていることを確認して下さい。textメソッドを利用して算出した得点（totalScore）を表示しています。

$("#resultPoint").text(totalScore);//---得点の表示

結果として、すべての質問に回答すると結果画面（右上）に得点が表示されます。

続いてレベル毎に結果画面の写真を変更します。表示する写真はレベルと同じ名前を付けています（lv0.png, lv1.png, lv2.png, lv3.png, lv4.png）。サンプル（result/04.html）のソースを開き、resultFuncの最後に以下の処理が追加されていることを確認して下さい。cssメソッドを利用してid属性がresultImageの要素の背景画像（background-image）を変更しています。

//---レベルにあった画像を表示
$("#resultImage").css("background-image", "url('images/lv"+lv+".png')");

結果として、結果画面の写真が合計得点に応じて変化します。しかしレベル毎の写真はプリロードしていないため、ネットの環境によってはすぐに表示されません。ですのでプリロードするようにしましょう。プリロードの仕組みは使い方「画像のプリロード」の「メモ」で説明したpreloadFuncをそのまま利用します。

サンプル（result/05.html）のソースを開き、javaScriptの最初の部分にpreloadFuncが追加されているのを確認して下さい。実際に利用しているのはreadyイベント内です。

//-----画像のプリロード
function preloadFunc() {
	for(var i = 0; i< arguments.length; i++){
		$("<img>").attr("src", arguments[i]);
	}
}

//画像のプリロード
preloadFunc("images/lv0.png","images/lv1.png","images/lv2.png",
"images/lv3.png","images/lv4.png", "images/againOn.png");

これで得点の表示と、レベルごとの画像表示は完成です。次回はajax通信を利用して外部テキストを読み込み、その内容を合計得点に応じて表示するようにします。

次のページ：外部テキストの読込