前回の記事では、作った経緯などを書きましたが、いよいよ実際にコードを書いていきます。
今回進めること – 性格診断テスト作成
診断結果ごとにURLを変更する方法がまだ分からないので、ひとまず以下のような形で進めていきます↓
性格診断テストvol.01
<shidan_i-e.php>
質問フォームの作成
↓
<shidan-result_i-e.php>
回答を集計し、診断結果を動的に表示
(今回は、同一のURLで表示させることに留めます)
性格診断テストvol.01の作成
まず、質問フォームをhtmlだけで静的に書いていきます。
「はい or いいえ」で答えられる質問文を作り、その回答により性格タイプを診断していきます。今回作成する性格診断テストは、内向型(I)か外向型(E)を診断します。
(具体的な質問文については、省略します)
(shidan_i-e.php)01
<form method="post" action="">
<!-- 質問文01 -->
<p style="font-weight:bold;">1.質問文01</p>
<!-- 選択肢 -->
<div><label><input required="" type="radio" name="shindan1" value="i"> はい</label></div>
<div><label><input required="" type="radio" name="shindan1" value="e"> いいえ</label></div>
<!-- 質問文02 -->
<p style="font-weight:bold;">2.質問文02</p>
<!-- 選択肢 -->
<div><label><input required="" type="radio" name="shindan2" value="i"> はい</label></div>
<div><label><input required="" type="radio" name="shindan2" value="e"> いいえ</label></div>
<!-- 質問文03と続いていく -->
</form>
「value=”i”」=「内向型(I)」、「value=”e”」=「外向型(e)」となり、それぞれの合計数により、性格タイプが「内向型(i)」か「外向型(e)」を診断していきます。
せっかくですので、質問文と回答を配列にして、foreach文で回せるようにしました↓
(shidan_i-e.php)02
<?php
$aryShindan = [];
$cnt = 1;
$aryShindan[$cnt]['question'] = '妻・夫、または彼女・彼氏がいる?';
$aryShindan[$cnt]['answer'][] = ['point' => 'i', 'text' => 'はい'];
$aryShindan[$cnt]['answer'][] = ['point' => 'e', 'text' => 'いいえ'];
$cnt = 2;
$aryShindan[$cnt]['question'] = 'あなたのLINEの友達の人数は?';
$aryShindan[$cnt]['answer'][] = ['point' => 'e', 'text' => 'はい'];
$aryShindan[$cnt]['answer'][] = ['point' => 'i', 'text' => 'いいえ'];
$cnt = 3;
$aryShindan[$cnt]['question'] = '週ごとに友達とは何日会う?';
$aryShindan[$cnt]['answer'][] = ['point' => 'e', 'text' => 'はい'];
$aryShindan[$cnt]['answer'][] = ['point' => 'i', 'text' => 'いいえ'];
$cnt = 4;
$aryShindan[$cnt]['question'] = '年賀状は何枚届いた?';
$aryShindan[$cnt]['answer'][] = ['point' => 'i', 'text' => 'はい'];
$aryShindan[$cnt]['answer'][] = ['point' => 'e', 'text' => 'いいえ'];
$cnt = 5;
$aryShindan[$cnt]['question'] = 'あけおめLINEが届いた人数は?';
$aryShindan[$cnt]['answer'][] = ['point' => 'i', 'text' => 'はい'];
$aryShindan[$cnt]['answer'][] = ['point' => 'e', 'text' => 'いいえ'];
?>
<form method="post" action="shidan-result_i-e.php">
<?php foreach($aryShindan as $key1 => $val1){ ?>
<!-- 質問文 -->
<p style="font-weight:bold;"><?php echo $key1.'.'.$val1['question'] ?></p>
<?php foreach($val1['answer'] as $key2 => $val2){ ?>
<!-- 選択肢 -->
<div><label><input required type="radio" name="shindan<?php echo $key1 ?>" value="<?php echo $val2['point'] ?>"> <?php echo $val2['text'] ?></label></div>
<?php } ?>
<?php } ?>
<input class="bold" type="submit" value="回答する">
</form>
そして、受け取り先のページで、回答結果を集計し、性格診断の結果を表示させます。
(shidan-result_i-e.php)01
<?php
// 診断結果を受け取る変数
$result_i = 0;
$result_e = 0;
// 診断結果を集計
foreach($_POST as $key => $value){
if($value === 'i'){
$result_i++;
} elseif ($value === 'e') {
$result_e++;
}
}
// 診断結果を集計結果により、診断結果の文章を変更!
if($result_i > $result_e){
$result = '診断結果:内向型(I)';
}else{
$result = '診断結果:外向型(E)';
}
?>
<!-- 診断結果を表示 -->
<p><?php echo $result ?></p>
これで、簡易的ですが診断テストが完成しました!
コードはgithubにあげています↓
seikakushindan/01 at master · yuki-iwase/seikakushindan
Contribute to yuki-iwase/seikakushindan development by creating an account on GitHub.
次回は、診断結果によりURLを変えていきたいと思います。
コメント