jqueryを使った100の質問

2012年1月28日


先日、100の質問をjqueryを使って制作しましたので、コードを公開しておきます。
仕様言語は、jqueryとphpです。もっといいやり方があるかもしれないのですが、私がつくるとこうなりました。

 

まち会社診断ツールとして作成

制作したのは、一般社団法人AIAの「まち会社診断ツール」です。
よくある100の質問形式で、Yes,Noで回答を進めてもらうことでバックグラウンドでポイントをカウントしていき、最後の質問に答えたら、そのポイントに応じた結果を表示します。


 

jquery部分

表示部分は、最初に共通のclass(.tab_content)を全てhideしていて、#tab(番号)の要素をクリックするごとに、順番に表示していくようになっています。

			$(document).ready(function() {
				//Default Action
				$(".tab_content").hide(); //Hide all content
				$("div.tab_content:first").show(); //Show first tab content

			<?php
			  for($i = 1; $i < 103; $i++) {
				  $s = $i+1;
				  echo "
						$("#tab".$i. " a").click(function() {
						$("div.tab_content").hide();
						var activeTab = $("#information".$s."");
						$(activeTab).fadeIn();
						return false;
						});
				  ";
			  }
			?>
			});

ちなみにループ部分は、ひたすら101回ループを続けます。
何かもうちょっとスマートなやり方ある気もするのですが、がっつりローテクでやりました^^;
 
結果の表示のための部分は以下になります。
変数countの値をurlの引数にして、.quetion_resultをクリックすると遷移するようにしています。

				$(".quetion_result").click(function() {
					window.open("『結果のファイルアドレス』?point="+count,"_self");
				});

 
 

html部分

冒頭のjavascriptで、変数countを定義しています。
phpでは、まず100の質問文のテキストファイル(1問ごとに改行しているだけ)を読み込んで、その質問数だけループするようにしています。

<script type="text/javascript">
<!--
var count=0;
document.open();
document.close();
// -->
</script>

<?php
$file_name = "quetion.txt";
$i = 1;
if(isset($file_name)){ 
$text = fopen($file_name,'r'); 
for($line = 1; !feof($text); $line++){ 
  $lines = fgets($text);
  if($lines){
    echo "<div id="information".$i."" class="tab_content">";
    print "<div class="quetion_box">".$lines."<div style="position:relative;left:440px;">".$i."/100</div>"."</div>";
    echo "<div id="tab".$i."" class="quetion_li"><ul><li><a href="javascript:void(0);" onclick="count += 1">はい</a></li>
<li style="float:right;"><a href="javascript:void(0);">いいえ</a></li></ul><div class="clear"></div></div></div>";
    $i++;
  }
}
fclose($text);

}else{
  print 'ファイルがありません';
} 
?>

<div id="information101" class="tab_content">
<div style="border:1px solid #c0c0c0;padding:30px;margin:20px 0 0 0;">
お疲れ様でした。「結果をみる」をクリックして下さい。
</div>
<div id="tab101">
<p class="quetion_result" style="width:200px; padding:20px; text-align:center;border:1px solid #c0c0c0;margin:20px auto;cursor:pointer;background-color:#f0f0f0;">結果をみる</p>
<div class="clear"></div>
</div>
</div>

で、結果を表示するページは、引数をGETで受け取って、コメントをその数字に応じてifで分岐して表示しています。
 
いろいろ書いてみたのですが、説明すればするほどややこしくなりますので、一般社団法人AIAの「まち会社診断ツール」のコードを見てもらうのが一番早い気がします(笑)
これぐらいのコード分量になったら、サンプルスクリプトを配布する方がいいのかな。
 
それでは、また。

slackチームに参加下さい

ng-onsenui2.slack.com

OnsenUI2(Angular2)について知見を共有する場です。Angular2に限ってOnsenUI2を議論できる場がなかったのでつくりました。これから使い始めるという方はぜひご参加ください。
https://ng-onsenui2.herokuapp.com/

Ionic2.slack.com

日本語情報が少ないのでこちらで知見を共有できればと思います。お陰様で参加者100名を超えました。ありがとうございます。
https://ionic2-ja.herokuapp.com