Contents
つくりたい理由
ドットコムさんの過去問道場に「ITストラテジスト」のサイトは存在しないため、
自分で作成しようと考えたからです。
まぁITストラテジストは受験者が極端に少ないため、PV数はあまり稼げないですからね。
管理人さんいつか作ってくれたらうれしいです。
今回の対象
学生さんでも作れるレベルの簡素で分かりやすいものを考えています。
あまり難しいものをガチで作っても休日を無駄にしてしまいそうなので、
毎日1時間くらいでできるレベルで行こうかなと思います。
まずは大枠である出題ページ
とりあえず、繰り返し使えるようにプレースホルダーを埋め込んでいきます。
必要なデータはとりあえず括りだして、サンプルデータをphpトップに直接入れておきます。
このデータをもとにデータベース設計を行う予定です。
まぁしっかり設計して作っていくと仕事みたいで嫌なのでアジャイルっぽくいきましょ～や！
index.php
<?php
// 問題のトップページ
// サンプルデータ
$qs_id = "201901";
$qs_txt = "問題です！";
$qs_img = "img/72.gif";
$qs_select1 = "アの選択肢";
$qs_select2 = "イの選択肢";
$qs_select3 = "ウの選択肢";
$qs_select4 = "エの選択肢";
$ans = "イ";
$ans_txt = "解説";
$qs_year=substr($qs_id, 0, 4);
$qs_no=substr($qs_id, -2);
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<?php require('header.php') ?>
</head>
<body>
<script src="js/scripts.js"></script>
<header>
<h1>ITストラテジスト試験問題アプリ</h1>
</header>
<h2> <?php echo $qs_year; ?>年度 問<?php echo $qs_no; ?> </h2>
<span class="qs">
<h3>問題</h3>
<p>
<?php echo $qs_txt; ?>
</p>
<img src=" <?php echo $qs_img; ?> " alt="問題の画像">
</span>
<span class="select">
<h3>選択肢</h3>
<ul>
<li class="select1" id="select1"><a href="#dispAns"> <?php echo $qs_select1; ?> </a></li>
<li class="select2" id="select2"> <?php echo $qs_select2; ?> </li>
<li class="select3" id="select3"> <?php echo $qs_select3; ?> </li>
<li class="select4" id="select4"> <?php echo $qs_select4; ?> </li>
</ul>
</span>
<button id="dispAns" onclick="disp(0)">正解表示</button>
<span class="ans" id="ans" style="display: none;">
<h3>問題と解説</h3>
<p>答え： <?php echo $ans;?> </p>
<h4>解説</h4>
<p class="ans_txt"> <?php echo $ans_txt; ?> </p>
</span>
</body>
</html>
共通ヘッダーのphp
とりあえず何回も書くのだるいので、
ヘッダーだけ括りだしておきます。
別にphpでもなにも実行しません。
ただ括りだしただけです。
header.php
<?php
// @author mumvall
?>
<meta charset="utf-8">
<meta name="description" content="ITストラテジスト試験問題">
<meta name="author" content="mumvall">
<title>ITストラテジスト試験問題</title>
<link rel="stylesheet" href="css/styles.css">
解答と解説を表示・非表示を切り替えるJavascript
とりあえずIF文でスイッチングするだけです。
表示されていたらボタンの値を「正解非表示」と表示、displayプロパティをnoneに！
逆も同様に！ってかんじですね。
scripts.js
/**
* @author mumvall
**/
function disp() {
if (document.getElementById("ans").style.display == "none") {
document.getElementById("ans").style.display="block";
document.getElementById("dispAns").innerHTML ="正解非表示";
} else {
document.getElementById("ans").style.display="none";
document.getElementById("dispAns").innerHTML ="正解表示";
}
}
今回つかっとらんが、PDOだけそれっぽく用意しとく
pdo.php
<?php
// @author mumvall
// TODO 関数化すっか
try {
$dsn = "mysql:dbname=st;host=localhost;charset=utf8mb4";
$username = "mumvall";
$password = "hogehoge";
$driver_options = "";
$pdo = new PDO($dsn, $username, $password, $driver_options);
} catch (PDOException $e) {
// TODO エラー処理
}
?>
とりあえず途中でもサーバに入れておく
サーバにアップロードするときはバージョン管理ツールのデータを入れないように注意しましょう。
Gitを使ってたら「.git」ディレクトリのデータですね。
とりあえず置いたサーバはここです。
問題出題アプリ(ITストラテジスト)
次回
採点計算機能かログイン機能を作成しようかなと思います。
DB接続もおいおいやります。普通にPDO使うだけで変わったことはしませんが。。。
