This project is no longer actively maintained.

Please see jewlofthelotus/SlickQuiz for updates.

A jQuery plugin for creating pretty, dynamic quizzes.

Demo And Usage

See index.html for demo and suggested HTML structure (the element class names are the important part).

See js/slickQuiz-config.js to set up your quiz copy and questions.

To initialize your quiz:

$(function () {
    $('#slickQuiz').slickQuiz();
});

Available Options

json (JSON Object) - your quiz JSON, pass this instead of setting quizJSON outside of the plugin (see js/slickQuiz-config.js)

checkAnswerText (String) - the text to use on the check answer button

nextQuestionText (String) - the text to use on the next question button

backButtonText (String) - the text to use on the back button, if left null / blank (default) - no back button will be displayed

tryAgainText (String) - the text to use on the try again button, if left null / blank (default) - no try again button will be displayed

skipStartButton (Boolean) - whether or not to skip the quiz "start" button, defaults to false

numberOfQuestions (Integer) - the number of questions to load from the question set in the JSON object, defaults to null (all questions); Note: If you set this to an integer, you'll probably also want to set randomSortQuestions or randomSort to true to ensure that you get a mixed set of questions each page load.

randomSortQuestions (Boolean) - whether or not to randomly sort questions ONLY, defaults to false

randomSortAnswers (Boolean) - whether or not to randomly sort answers ONLY, defaults to false

randomSort (Boolean) - whether or not to randomly sort questions AND their answers (overrides randomSortQuestions and randomSortAnswers), defaults to false. NOTE: this will be deprecated in a future release.

preventUnanswered (Boolean) - prevents submitting a question with zero answers, defaults to false

completionResponseMessaging (Boolean) - Hides all correct / incorrect response messages until the quiz is completed (nextQuestion button replaces checkAnswer button), defaults to false

disableResponseMessaging (Boolean) - Hides all correct / incorrect response messages (nextQuestion button replaces checkAnswer button), defaults to false

Deprecated Options

disableNext (Boolean) - prevents submitting a question with zero answers, defaults to false. You should now use preventUnanswered instead.

Advanced Usage

Want to manage your quizzes in a content management system?

Simply translate your CMS quiz data into a JSON object formatted like "quizJSON" in js/slickQuiz-config.js. Then assign it as the quizJSON variable instead of loading js/slickQuiz-config.js.

Alternatively, you can pass the JSON right into the plugin using the "json" option (useful if you are placing multiple quizzes on a page):

$(function () {
    $('#slickQuiz').slickQuiz({json: {YOUR_JSON_HERE}});
});

Base HTML Structure

The slickQuiz ID and class names are what are important here:

<body id="slickQuiz">
    <h1 class="quizName"></h1>
    <div class="quizArea">
        <div class="quizHeader">
            <a class="startQuiz" href="">Get Started!</a>
        </div>
    </div>
    <div class="quizResults">
        <h3 class="quizScore">You Scored: <span></span></h3>
        <h3 class="quizLevel"><strong>Ranking:</strong> <span></span></h3>
        <div class="quizResultsCopy"></div>
    </div>
</body>

Base Config Options

See js/slickQuiz-config.js

var quizJSON = {
    "info": {
        "name":    "The Quiz Header",
        "main":    "The Quiz Description Text",
        "results": "The Quiz Results Copy",
        "level1":  "The highest ranking",
        "level2":  "The almost highest ranking",
        "level3":  "The middle ranking",
        "level4":  "The almost lowest ranking",
        "level5":  "The lowest ranking"
    },
    "questions": [
        {
            "q": "The Question?",
            "a": [
                {"option": "an incorrect answer",       "correct": false},
                {"option": "a correct answer",          "correct": true},
                {"option": "another correct answer",    "correct": true}
            ],
            "select_any": false, // optional, see below
            "correct": "The Correct Response Message",
            "incorrect": "The Incorrect Response Message"
        }
    ]
}

Note: select_any is used if there is more than one true answer and when submitting any single true answer is considered correct. (Select ANY that apply vs. Select ALL that apply)

Created by Julie Cameron - Software Engineer at Quicken Loans, Detroit, MI



This project is no longer actively maintained.

Please see jewlofthelotus/SlickQuiz for updates.

一个jQuery插件,用于创建漂亮,动态的测验。

演示和使用

请参阅index.html for demo和建议的HTML结构(元素类名称是重要的部分)。

请参阅js / slickQuiz-config.js设置您的测验副本和问题。

要初始化您的测验:

$(function () {
    $('#slickQuiz').slickQuiz();
});

可用选项

(JSON对象) - 你的测验JSON,传递这个而不是在插件之外设置quizJSON(请参阅js / slickQuiz-config.js)

checkAnswerText (String) - 检查应答按钮上使用的文本

nextQuestionText (String) - 下一个问题按钮使用的文字

(String) - 返回按钮上要使用的文本,如果为空/空(默认) - 不显示后退按钮

(String) - 要再次尝试使用的文本按钮,如果留空/空(默认) - 不再试一次按钮将显示 p>

skipStartButton (布尔值) - 是否跳过测验开始按钮,默认为false

numberOfQuestions (整数) - 从JSON对象中的问题集中加载的问题数量,默认为null(所有问题);注意:如果将其设置为整数,您可能还需要将 randomSortQuestions randomSort 设置为 true ,以确保您获得混合一组问题每页加载。

randomSortQuestions (布尔值) - 是否随机排序问题,默认为false

无论是否随机排序答案,默认为false

- 无论是否随机排序问题和答案(覆盖 randomSortQuestions randomSortAnswers ),默认为false。注意:这将在以后的版本中被弃用。

preventUnanswered (布尔值) - 阻止以零答案提交问题,默认为false

(布尔值) - 隐藏所有正确/不正确的响应消息,直到测验完成(nextQuestion按钮替换checkAnswer按钮),默认为false

隐藏所有正确/不正确的响应消息(nextQuestion按钮替换checkAnswer按钮),默认为false

Deprecated Options

disableNext (布尔值) - 防止以零答案提交问题,默认为false。您现在应该使用 preventUnanswered

高级用法

想在内容管理系统中管理您的测验?

只需将您的CMS测验数据转换为js / slickQuiz-config.js中格式如quizJSON的JSON对象。 然后将其分配为quizJSON变量,而不是加载js / slickQuiz-config.js。

或者,您可以使用json选项将JSON直接传递到插件中(如果要在页面上放置多个测验,则很有用):

$(function () {
    $('#slickQuiz').slickQuiz({json: {YOUR_JSON_HERE}});
});

基本HTML结构

slickQuiz ID和类名称在这里很重要:

<body id="slickQuiz">
    <h1 class="quizName"></h1>
    <div class="quizArea">
        <div class="quizHeader">
            <a class="startQuiz" href="">Get Started!</a>
        </div>
    </div>
    <div class="quizResults">
        <h3 class="quizScore">You Scored: <span></span></h3>
        <h3 class="quizLevel"><strong>Ranking:</strong> <span></span></h3>
        <div class="quizResultsCopy"></div>
    </div>
</body>

基本配置选项

请参阅js / slickQuiz-config.js

var quizJSON = {
    "info": {
        "name":    "The Quiz Header",
        "main":    "The Quiz Description Text",
        "results": "The Quiz Results Copy",
        "level1":  "The highest ranking",
        "level2":  "The almost highest ranking",
        "level3":  "The middle ranking",
        "level4":  "The almost lowest ranking",
        "level5":  "The lowest ranking"
    },
    "questions": [
        {
            "q": "The Question?",
            "a": [
                {"option": "an incorrect answer",       "correct": false},
                {"option": "a correct answer",          "correct": true},
                {"option": "another correct answer",    "correct": true}
            ],
            "select_any": false, // optional, see below
            "correct": "The Correct Response Message",
            "incorrect": "The Incorrect Response Message"
        }
    ]
}
注意:如果有多个真实答案,并且提交任何一个真实答案被认为是正确的,则使用 select_any 。 (选择任何应用,而不选择所有适用)

Julie Cameron创建 - 快速贷款的软件工程师,底特律,MI




相关问题推荐