ワードプレスで使えるクイズ作成プラグインを探している方向けに私が運営するサイトで仕様している日本語クイズ作成プラグイン「すみれ」を紹介したいと思います。
クイズプラグインの定番といえば
WordPressで有名なクイズプラグインといえば「Quiz Maker」や「Quiz Cat」などがありますが、どちらも私が求めるものよりも大掛かりなものでした。
この2つのプラグインで作ったクイズは、クイズスタート画面が用意されていて、複数の問題を解いた後に得点が表示される構成になっています。
理想としては問題が全て並んでいて、解きたい問題だけタップ（クリック）して回答する仕組みを求めていました。
自分で仕組みを作るしか無いかと諦めていたところ、理想にほぼぴったりなプラグインを見つけました。
クイズ作成プラグイン「すみれ」
クイズ作成プラグイン「すみれ」は元々は吉田喜彦さんが作成されたプラグインです。
私が使用しているのは、あやおり子さんがカスタマイズしたバージョンをベースに、独自に手を加えたものになります。
このプラグインの良いところ
このプラグインの良さは、解く人にとっても作る人にとってもわかりやすいということです。
クイズを解く人は、選択肢をクリック（タップ）するだけなのでとてもシンプル。操作方法の説明をしなくても迷うことはないと思います。
クイズ作成はショートコードで行うので、エクセルなどで1度フォーマットを作ってしまえば、次からは短時間でクイズの形式を整えることができます。
dashiconというワードプレス独自のアイコンフォントを使用するので、自分で◯✕などの画像を用意する必要がありません。
ワードプレスでdashiconを使う方法
dashiconを有効化するにはPHPのコードを追加する必要があります。function.phpへの追加でも良いですが、私の運営するサイトは子テーマを使用していないので、「Code Snippets」というプラグインを利用しています。
ご利用になっているテーマによっては、既にdashiconが有効化されている場合があります。
私が追加したコード
add_action( 'wp_print_styles', 'load_dashicons');
function load_dashicons() {
wp_enqueue_style('dashicons');
}※PHPの追加・変更は必ずバックアップを取ってから行ってください。不具合が発生した場合でも、当サイトでは補償できません。
当サイト独自のカスタマイズ
当サイトでは次のような変更を加えて使用しています。
問題に戻るボタンクリックで問題文の先頭に戻るように変更
このプラグインはクイズに再挑戦できる「問題に戻る」ボタン（当サイトでは「もう一度解く」に文言を変更しています）が用意されています。クリックすると選択状態がリセットされるという仕様ですが、画面の位置はそのままなので、解説が長文になると問題文が画面から消えてしまい迷子になるかなと感じました。（Version: 1.1）
当サイトのクイズは解説が長いものも多いので、ボタンを押したら問題文の先頭まで画面を移動するようにJavascriptを追加しました。
正解アイコンの変更
元々のデザインでは、正解の選択肢に「チェックマーク」が付くようになっています。日本ではチェックマークは不正解という意味に取られる場合が多いと思うので、丸マークに変更しました。
dashiconの丸マークとバツマークはサイズ感が違うのでその点は気になりますが、揃えたい人はcssで調整すれば良いかと思います。
横並びデザインの追加
クイズの種類によっては選択肢を横並びにしたいときがあるので、cssのgridを使って横並びを選べるようにしました。
最後に
非常に使いやすいプラグインを作ってくださった吉田喜彦さん、あやおり子さんにはとても感謝しています。ありがとうございます。
ワードプレスでクイズサイトを作ってみたいという人はぜひ使ってみてくださいね！