PHP実践_クイズの試行。配列を使ったランダム表示

目次(クリックでジャンプ)

概要

小問ごとにランダムに問題を選んで解答と解説を表示する練習。再読み込みする度に問題表示がランダムに変わる

コード

ランダム3問構成のテスト
<?php
//問題データ。最初に問題文、二番目に正解肢、最後に解説(空でも可)
$qst=[
[
[“好きなネコは？”,”キジトラ白”,”キジトラ”,”サバトラ”,”チャトラ”,”可愛いがっていた猫ちゃんがキジトラ白だったから。キジトラ白をみると飼いたくなってしまいます。”],
[“好きなイヌは？”,”北海道犬”,”チャウチャウ”,”シェパード”,”トイプードル”,”飼っていたワンコが北海道犬のような雑種だったから、愛着があります。イヌは散歩が大変だから、もう飼えないですね。”],
],
[
[“タコの足の数は”,”8本”,”9本”,”10本”,”オクトパスのオクトは8という意味ですよ”],
[“イカの足の数は？”,”10本”,”8本”,”9本”,”なんだよ。”],
[“カブトムシの足の数は？”,”6本”,”8本”,”10本”,”昆虫は6本足です。”],
[“クモの足の数は”,”8本”,”10本”,”12本”,”クモは昆虫ではなく、頭足類です。”],
],
[
[“好きな飲物は？”,”フルーツ紅茶”,”ミルク抹茶”,”緑茶コーヒー”,”紅茶がサッパリしていてフルーツの味が加わると爽やか～です。”],
[“好きな季節は？”,”夏”,”春”,”秋”,”冬”,”夏は汗がかけるから良い！春は花粉症で辛い。冬は寒い。秋は葉っぱが落ちていってウツになる。”],
[“好きな場所は？”,”湖”,”海”,”川”,”特に、森に囲まれた湖は心が落ち着くから最高”],
] ];

//小問選択の乱数を決定して、小問を決定
for($i=0;$i<count($qst);$i++){
$rnd=mt_rand(0,count($qst[$i])-1);//乱数
$qstQ[$i]=$qst[$i][$rnd];//小問選択
$qstT[$i]=array_shift($qstQ[$i]);//問題文を取り出し
$qstE[$i]=array_pop($qstQ[$i]);//解説を取り出し
$qstA[$i]=$qstQ[$i][0];//正解を決定
shuffle($qstQ[$i]);//選択肢シャッフル
}
?>

<?php
for($i=0;$i<count($qst);$i++){
?>
<div style=”width:50%;margin:1em auto;border:2px solid #828;border-radius:10px 30px;padding:0.5em;text-align:center;”>
<div style=”background:pink;font-size:1.5em;”>
<?=’第’,$i+1,’問:’,$qstT[$i]?>
</div>
<div style=”background:skyblue;text-align:left;”>
<ol style=”margin:0px; “>
<?php
for($j=0;$j<count($qstQ[$i]);$j++){
?>
<li style=”display:inline-block;”><?=$qstQ[$i][$j]?></li>
<?php
}
?>
</ol>
</div>
<div style=”background:lightgreen;font-size:1.5em;”>
正解：
<?=$qstA[$i]?>
</div>
<div style=”background:lightgray;text-align:left;padding:0.5em 1em 1em;”>
<p style=”text-align:center;margin:0;”>解説：</p>
<?=$qstE[$i]?>
</div>
</div>
<?php
}
?>
<div class=”rldBtn”><a class=”xtd-link1″ href=”<?php echo $_SERVER[“SCRIPT_NAME”]; ?>”>リロード</a></div>

/* リンク色を独自に指定 */
a.xtd-link1:link,a.xtd-link1:visited{
color:#000b;
text-decoration:none;}
a.xtd-link1:hover{color:red;
transition:all 0.4s ease;}

/* 範囲をボックス全体に拡張 */
.xtd-link1:after{
position:absolute;
content:””;
top:0;
left:0;
width:100% ;
height:100%;
border-radius: 10px;
z-index:2;}
</style>

課題

・外部スタイルシートを読み込ませたい

・問題を外部ファイルにして読み込ませたい