「はい」、「いいえ」を選択して進む性格診断サイトやクイズアプリのようなものを「Bootstrap」+「jQuery」でシンプル、簡単に作ってみました。
きっかけは仕事で、社内で使用する診断サイトを簡単に作れないかと相談されたことでした。
そこでhtmlで簡単に作る方法を検討した所、デザインはBootstrap、動作はjQueryを使えば簡単に実現できそうだなと思い、今回の方法で作成しました。
デザインは全く凝っていませんが、Bootstrapを使用することでそれなりに整えており、レスポンシブ対応もできています。
また、pdfに変換してもデザインが崩れないようにcssで調整しています。
作った物とコード
CodePenで公開しています。
See the Pen quiz with bootstrap by チャベス (@chabesub) on CodePen.
コードの解説
デザインとレスポンシブ対応
デザインとレスポンシブ対応はBootstrapを使って対応しています。
特にレスポンシブ対応はBootstrapを使うことで簡単に実装できるのでお勧めです。
jQueryでページ遷移
ページ遷移は、トップページ以外をdisplay: none;としておき、ボタンを押すとjQueryで遷移先のページをfadeIn();することで実現しています。
Bootstrap5では、jQuery無しでもjQueryと同等の機能を使えるように設計されていますが、jQueryに慣れているので今回はjQueryを使用しました。
JQuery の利用
Bootstrap 5 は jQuery を使わないよう設計されていますが、Bootstrap のコンポーネントを jQuery と共に使うことができます。Bootstrap が window オブジェクト内で jQuery を検出すると、全てのコンポーネントに jQuery プラグインを追加します。これにより、$(‘[data-bs-toggle=”tooltip”]’).tooltip() を実行してツールチップを有効にすることができます。他のコンポーネントも同様です。
Bootstrap5公式ドキュメント
トップページ以外を消しておくcssは以下です。
.container:nth-of-type(n + 2) { display: none;
}ページ遷移（ボタンクリック）する際のJavaScriptは以下です。
$(".btn-move").on("click", function() { $(this).closest(".container").hide(); id = $(this).attr("href"); $(id).fadeIn();
})印刷時のスタイルの調整
pdfに変換しても、htmlページと同じように使いたいというリクエストがあったので、cssでデザインを調整しています。
.container { display: block !important; page-break-after: always; /* 強制的に直後で改ページさせる */ }pdfに変換したファイル（横印刷と縦印刷）は以下です。
印刷ボタン（Print）をトップページに搭載していますが、以下の部分を削除、またはコメントアウトすればボタンは消えます。
<div class="row mt-5 mb-5"> <div class="col text-center"> <button id="btnPrint" class='no-print btn btn-secondary'>Print</button> </div>
</div>印刷時は、 印刷ボタン（Print）が無くなるようにcssで調整しています。
.no-print { display: none !important; }
