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

最新推荐文章于 2024-09-19 21:55:29 发布

thegeek

最新推荐文章于 2024-09-19 21:55:29 发布

阅读量1k

点赞数

分类专栏： gbin1 jquery 文章标签： jquery javascript jquery插件 scripting 测试 library

本文链接：https://blog.youkuaiyun.com/jjfat/article/details/7022633

版权

jquery 同时被 2 个专栏收录

233 篇文章

订阅专栏

gbin1

92 篇文章

订阅专栏

本文介绍了一个名为jQuizzy的jQuery插件，该插件可以帮助用户快速创建美观的在线测试应用。只需导入类库及其问题，通过简单的JavaScript定义测试问题即可实现界面整洁、互动性强的功能。此外，它还支持定制皮肤和商业使用，但需要支付15美元。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

日期：2011/11/28 来源：GBin1.com

分享一个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!'
      }

 };

搞定！非常简单，你自己可以设计自己的风格！

来源：分享一个jQuery的小测验(Quiz)插件：jQuizzy