クイズ作成プラグイン ARI Stream Quiz の結果表示画面に [再挑戦] ボタンを付けてみた

カスタムテーマ rounded でクイズの文字を丸ゴシック体にしてイイ感じになった ARI Stream Quiz ですが、作ったクイズをテストで何度も解いていて感じたのは、結果表示画面に [再チャレンジ] ボタンがあるといいなということ。F5 キーなどでページをリロードすれば同じことですが、画面にボタンがある方がやりたくなります。

公式デモサイトで使われている Pro 版は、結果表示画面に [Play Again] ボタンがあります。$17 の Pro 版を入手してもいいのですが、リロードボタンを付けるだけなら独自にやってしまいましょう。(ちなみに Pro 版は、正解に解説文を付けられたり、ページを分割できたりします。$17なら安いと思います)

Play Again ボタンの実装

クイズ画面出力時のフックを探したものの見つからなかったので、javascript でゴニョゴニョするしかなさそうです。プラグインの js ファイルは jQuery スクリプトだったので、素直に jQuery を使うことにします。

クイズ画面の描画や切り替えのしくみを確かめてみると、最初のページのロード時に、質問も選択肢も結果表示領域もほぼすべて描いてしまって、CSS の display プロパティで表示・非表示を切り替えていました。結果表示エリア (.quiz-result) もあらかじめ描かれた上で非表示になっているので、最初にそこにボタンを追加してしまうことにします。そして、クリックされたらページをリロードするイベントハンドラをセットしておきます。

jQuery(function($) {
	$(window).load(function(){
		$('.quiz-result').append('<div class="quiz-actions"><button class="button button-salmon button-play-again full-width">再チャレンジ</button></div>');
		$('.button-play-again').on('click', function(){
			location.reload();
		});
	});
});

Pro 版の Play Again ボタン用のスタイル定義が Free 版の buzzfeed の theme.css にも入っていて、rounded もそれを引き継いでいるので、そのクラス名 (.button-play-again) を使ってスタイルを流用しています。具体的には、.button-play-again:before でボタンテキストの前にアイコンを付いています。ただ、Pro 版の Play Again ボタンは .button-green クラスが設定されてグリーンになっていますが、シェアボタン群に埋もれてしまう感じがするので、rounded では .button-salmon クラスにして、クイズ開始ボタンと同じサーモンピンクにしています。

Play Again ボタン スクリプトのロード

リロードボタンとイベントハンドラを追加するスクリプトを theme.js というファイルにして、テーマの /js フォルダに置き、それをテーマの class-loader.php の中で wp_enqueue_script() でキューに追加します。

これを追記した rounded 用 class-loader.php は次のようになります。

<?php
namespace Ari_Stream_Quiz_Themes\Rounded;
use Ari_Stream_Quiz_Themes\Loader as Loader_Base;

class Loader extends Loader_Base {
	protected $name = 'rounded';
	public function init() {
		wp_enqueue_style( 
			'ari-quiz-rounded-theme-font', 
			'https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c:400' 
		);
		$theme_css_file = ARISTREAMQUIZ_THEMES_URL . $this->name . '/css/theme.css';
		$theme_js_file  = ARISTREAMQUIZ_THEMES_URL . $this->name . '/js/theme.js';
		wp_enqueue_style( 'ari-quiz-theme-rounded', $theme_css_file, array(), '1.0' );
		wp_enqueue_script( 'ari-quiz-theme-rounded-js', $theme_js_file, array(), '1.0', true );
	}
}

ASQテーマ “rounded” のダウンロード

前回作成した rounded に Play Again ボタンを追加したものを zip して置いておきます。zip を展開してできたフォルダ /rounded を、wp-content/plugins/ari-stream-quiz/themes の中にアップロードしてください。

管理画面の ARI Stream Quiz > Quizzes のクイズ一覧から対象のクイズを開き、Settings の Theme ドロップダウンで rounded を選択して Save すれば、rounded テーマのスタイルやスクリプトがそのクイズに適用されます。

“ARI Stream Quiz カスタムテーマ rounded (v.1.2.20用)” をダウンロード rounded.zip – 8 回のダウンロード – 10 KB