如何使用HTML5创建测验

时间:2013-07-22 11:18:35

标签: html5

我知道这是一个稍微宽泛的问题,但我希望建立一个类似于http://net.tutsplus.com/articles/quizzes/nettuts-quiz-6-how-well-do-you-know-html5/的测验,但也有拖放功能但不确定从哪里开始查看。 有任何想法吗? 谢谢

1 个答案:

答案 0 :(得分:4)

您可以使用Google Chrome中的开发者工具或Firefox中的FireBug来调查tutsplus测验。

关于如何完成的一些想法:

将问题数量作为:10。

  • 测验包含不同的幻灯片。
  • 所以我们有
    • 欢迎幻灯片
    • 10张幻灯片(每个问题一张幻灯片)
    • 结果幻灯片
  • 每个问题幻灯片都有
    • 一个问题
    • 四个选项
    • 下一步按钮
  • 我们将随时只显示一张幻灯片。
  • 一开始 - 我们只会显示第一张欢迎幻灯片并隐藏所有其他幻灯片。
  • 每当我们点击开始(欢迎幻灯片)或下一个(问题幻灯片)或完成(上一张幻灯片)时,它只会隐藏当前幻灯片并显示下一张幻灯片。
  • 每当我们点击任何答案时,我们都会为其添加一个课程。
  • 在结果幻灯片中,我们会根据答案检查这些选定项目并计算结果。
  • 在此之前,我们需要所有问题,选项及其正确答案。

这是使用

实施tutsplus测验的方式
  • HTML
  • CSS
  • 的JavaScript / jQuery的

关于拖放,我们可以根据您的要求使用jQuery UI Draggable,jQuery UI Droppable和Sortable。

您可以使用许多其他方式来实现您的需求,还可以使用一些后端技术来解决更多问题和设置。