1

簡単なゲームを作りたくて、このライブラリをダウンロードして使ってみています。

https://github.com/jewlofthelotus/SlickQuiz/tree/master

このクイズゲームですが、最後の問題を終えると、結果を報告してくれます。

しかし、そこで終わりです。

たとえば、また、スタートに戻って、もう一度ゲームを始めれるようにするといったボタンが見当たりません。

しかし、それは「Animation Callback Options」の設定を変えれば可能になるかと思います。

その変え方がわかりません・・・・・

(function($){
    $.slickQuiz = function(element, options) {
        var plugin   = this,
            $element = $(element),
            _element = '#' + $element.attr('id'),

            defaults = {
                checkAnswerText:  'ANSOWER',
                nextQuestionText: 'NEXT »',
                backButtonText: '',
                completeQuizText: '',
                tryAgainText: '',
                questionCountText: 'Question %current of %total',
                preventUnansweredText: 'You must select at least one answer.',
                questionTemplateText:  '%count. %text',
                scoreTemplateText: '%score / %total',
                nameTemplateText:  '<span>Quiz: </span>%name',
                skipStartButton: false,
                numberOfQuestions: 1,
                randomSortQuestions: true,
                randomSortAnswers: true,
                preventUnanswered: true,
                disableScore: false,
                disableRanking: false,
                scoreAsPercentage: true,
                perQuestionResponseMessaging: true,
                perQuestionResponseAnswers: false,
                completionResponseMessaging: false,
                displayQuestionCount: true,   // Deprecate?
                displayQuestionNumber: true,  // Deprecate?
                animationCallbacks: { // only for the methods that have jQuery animations offering callback
                    setupQuiz: function () {},
                    startQuiz: function () {},
                    resetQuiz: function () {},
                    checkAnswer: function () {},
                    nextQuestion: function () {},
                    backToQuestion: function () {},
                    completeQuiz: function () {}
                },
                events: {
                    onStartQuiz: function (options) {},
                    onCompleteQuiz: function (options) {}  // reserved: options.questionCount, options.score
                }
            },

この部分であろうとはわかりますが、このstartQuiz:function(){}の部分に何を入力するのか、それが良くわかりません。

また、どこまでをココに掲載したら良いのかも良くわからず、この辺かなぁっと言うところで抜粋しております(全部だと膨大なので)

この質問で問題がありましたら、教えてください。
追加で入力していきます。

ともかく質問は
このstartQuiz:function(){}に何を入力すれば、スタートに戻るのでしょうか?

1 件の回答 1

1

「再挑戦ボタンを表示する」という目標は

  • クイズが終わり、結果が表示される際に再挑戦ボタンを表示し
  • そのボタンがクリックされたらもう一度クイズを開始する

という形に分解できるかと思います。

animationCallbacks.startQuiz はクイズ開始のアニメーションが終わったとき、つまり最初の設問が表示された時に実行されますから、もし再挑戦ボタンに使うなら animationCallbacks.completeQuiz ではないでしょうか。

・・・というのはさておき、再挑戦ボタンを表示する設定もあるようです。凝った動きはできませんが、これを使うのが簡単でしょう。

tryAgainText (String) Default: ''; - the text to use on the try again button; if left null / blank - no try again button will be displayed

$('#slickQuiz').slickQuiz({
    tryAgainText: "もう一度挑戦する"
});
1
  • すばらしい!一発解答ですね!!
    – webman
    Commented 2015年5月1日 12:22

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。