UNIRRY

WEBデザインとホロスコープと宇宙のブログ

phpでクイズ系診断ツールをロジック部分だけつくる

phplogicimg

夏休み前の浮かれポンチついでに、一度やってみたかったクイズ系診断ツールをロジック部分だけこそこそ先にやってみたので記事におこします。
「はい」「いいえ」で選択して、最後にあなたは〇〇〇ですね、という結果画面がでるパターンのやつです。女子向けコスメサイトのプチ診断とかクイズに何問正解できるかな?系のコンテンツなど、小さいコンテンツでよくあるパターンかと思います。
今回はとりあえず一番簡単な「はい」「いいえ」だけで正解数しか条件にしない版をやってみました。phpファイル(index.php)は一個でやってみています。

出力部分

<p>Qestion<?php echo $q; ?></p>
<p><?php echo $qastion[$q] ?></p>
<ul>
<li><a href="index.php?q=<?php echo $q + 1; ?>&a=<?php echo $a + 1; ?>&b=<?php echo $b; ?>">はい</a></li>
<li><a href="index.php?q=<?php echo $q + 1; ?>&b=<?php echo $b + 1; ?>&a=<?php echo $a; ?>">いいえ</a></li>
</ul>

index.php自体に、GETでパラメータを渡してindex.phpを更新しながらパラメータの値が変更していき、表示するものを変えるようにします。

php部分

<?php
// qaの初期値
$q = 0;
$a = 0;
$b = 0;

// GETでqクエスションナンバーとaYESの数とbNOの数を取得する
if (isset($_GET["q"])) { $q = $_GET["q"]; }
if (isset($_GET["a"])) { $a = $_GET["a"]; }
if (isset($_GET["b"])) { $b = $_GET["b"]; }

// qastionの配列
$qastion = array("1" => "問題1","2" => "問題2","3" => "問題3","4" => "問題4","5" => "問題5");

// resultの配列
$result = array("1" => "解答1","2" => "解答2","3" => "解答3","4" => "解答4","5" => "解答5");
?>

DOCTYPEよりも前によみこむphpロジックです。問題と結果文言を配列にして用意し最後のチェックに使います。

最後に、クエスション数($qの値)によって結果画面やスタート画面の表示切替をしたいので、出力するhtml部分を下記のように変更します。

出力部分(表示切替の条件文を追加)

<?php  if ( !$q ): ?>
<!--- ここからスタート --->
<a href="index.php?q=1&a=0&b=0">スタート</a>
<!--- ここまでスタート --->
<?php  elseif ( $q < 6 ): ?>
<!--- ここからクエスション --->
<p>Qestion<?php echo $q; ?></p>
<p><?php echo $qastion[$q] ?></p>
<ul>
<li><a href="index.php?q=<?php echo $q + 1; ?>&a=<?php echo $a + 1; ?>&b=<?php echo $b; ?>">はい</a></li>
<li><a href="index.php?q=<?php echo $q + 1; ?>&b=<?php echo $b + 1; ?>&a=<?php echo $a; ?>">いいえ</a></li>
</ul>
<!--- ここまでクエスション --->
<?php  else: ?>
<!--- ここから結果画面 --->
<p>あなたの世界のウワサ知見度は、Level<?php echo $a; ?>でした。</p>
<p><?php echo $result[$a]; ?></p>
<!--- ここまで結果画面 --->
<?php    endif ?>

これで一応の流れができたので、あとは表示するものを追加して、ロジックを足すなら足すでなんかつくってみようかなーと思います。


horoscope

“sozatu” animation!! >>    animation1   |   animation2   |   animation3