html - how to create a quiz using HTML5

Question

I know this is slightly broad question but I'm looking to build a quiz similar to http://net.tutsplus.com/articles/quizzes/nettuts-quiz-6-how-well-do-you-know-html5/ but also with with drag and drop capabilities but unsure of where to start looking. Any ideas? Thanks

Answer 1

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

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

取题数为：10。

• 测验包含不同的幻灯片。
• 所以我们有
  • 欢迎幻灯片
  • 10 张幻灯片（每个问题一张幻灯片）
  • 结果幻灯片
• 每个问题幻灯片都会有
  • 一个问题
  • 四个选项
  • 下一步按钮
• 我们将在任何时候只展示一张幻灯片。
• 开始时 - 我们将仅显示第一张欢迎幻灯片并隐藏所有其他幻灯片。
• 每当我们单击开始（欢迎幻灯片）或下一步（问题幻灯片）或完成（最后一张幻灯片）时，它只会隐藏当前幻灯片并显示下一张幻灯片。
• 每当我们点击任何答案时，我们都会为其添加一个类。
• 在结果幻灯片中，我们根据答案检查这些选定的项目并计算结果。
• 事先我们需要所有的问题、选项及其正确答案。

这是如何tutsplus使用 quiz 实现的

• HTML
• CSS
• JavaScript/jQuery

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

您可以使用许多其他方式来实现您需要的内容，也可以使用一些后端技术来解决更多问题和集合。