カスタムテーマ 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 – 778 回のダウンロード – 10 KB