zoukankan      html  css  js  c++  java
  • 分享一个jQuery的小测验(Quiz)插件:jQuizzy

    分享一个jQuery的小测验(Quiz)插件:jQuizzy

    在线演示

    偶然发现一个非常不错的生成在线测试的jQuery插件 - jQuizzy,这个插件能够帮助你快速的生成一个非常漂亮的在线测试应用。

    主要特性:

    • 界面非常整洁漂亮 
    • 界面互动
    • 同一个页面多个测试题
    • 无需HTML。通过简单的javascript定义测试问题
    • 完全支持定制,皮肤并且可以扩展
    • 商业使用需要付费15美金

    Javascript

    倒入类库及其问题js:

    <script src="js/init.js"></script>
    <script src="js/jquery.js"></script>
    <script src="js/jquery.jquizzy-min.js"></script>


    HTML中调用如下JS:

    <script>
    $('#quiz-container').jquizzy({
    questions: init.questions,
    resultComments: init.resultComments,
    twitterStatus: 'Woo! I got {score} on the quiz. Try it! http://bit.ly/linky'
    });
    </script>


    init.js内容如下:

    var init = { 
    'questions': [
    {
    'question': 'jQuery is a...',
    'answers': ['JavaScript library','Ruby Gem','PHP Framework','None of the above'],
    'correctAnswer': 1
    },
    {
    'question': 'jQuery uses CSS selectors and XPath expressions to select elements?',
    'answers': ['false','true'],
    'correctAnswer': 2
    },
    {
    'question': 'What scripting language is jQuery written in?',
    'answers': ['C','C#','javascript','java'],
    'correctAnswer': 3
    }
    ],
    'resultComments' :
    {
    perfect: 'Albus, is that you?',
    excellent: 'Outstanding, noble sir!',
    good: 'Exceeds expectations!',
    average: 'Acceptable. For a muggle.',
    bad: 'Well, that was poor.',
    poor: 'Dreadful!',
    worst: 'For shame, troll!'
    }

    };

    搞定!非常简单,你自己可以设计自己的风格!via gbin1.com

  • 相关阅读:
    java基础(上)
    java前奏
    Spring框架介绍
    bootstrap简单学习
    存储过程和函数
    触发器
    视图
    索引
    mysql增、删、改数据
    子查询
  • 原文地址:https://www.cnblogs.com/gbin1/p/2267247.html
Copyright © 2011-2022 走看看