/ / ako vytvoriť kvíz pomocou HTML5 [zavreté] - html5

ako vytvoriť kvíz pomocou HTML5 [zavreté] - html5

Viem, že je to trochu široká otázka, ale snažím sa vytvoriť kvíz podobný http://net.tutsplus.com/articles/quizzes/nettuts-quiz-6-how-well-do-you-know-html5/ ale aj s funkciou "drag and drop", ale neviete, kde sa chcete pozrieť. Nejaké nápady? Vďaka

odpovede:

4 pre odpoveď č. 1

Môžete vyšetriť tutsplus kvíz pomocou nástrojov vývojára v prehliadači Google Chrome alebo FireBug v prehliadači Firefox.

Niečo o tom, ako sa to deje:

Počet otázok ako: 10.

  • Kvíz obsahuje rôzne snímky.
  • Takže máme
    • Vitajte slide
    • 10 snímok (jedna snímka pre každú otázku)
    • Výsledky slide
  • Každá otázka snímka bude mať
    • otázka
    • štyri možnosti
    • Ďalšie tlačidlo
  • Ukážeme len jeden snímok kedykoľvek.
  • Na začiatku - ukážeme iba prvú uvítaciu snímku a skryjeme všetky ostatné snímky.
  • Kedykoľvek klikneme na tlačidlo Štart (uvítací snímok) alebo Ďalší (posúvanie otázok) alebo Dokončiť (posledný snímok), skryje aktuálnu snímku a zobrazí ďalší obrázok.
  • Kedykoľvek klikneme na akúkoľvek odpoveď, pridáme k nej triedu.
  • Vo výslednej snímke skontrolujeme tieto vybrané položky proti odpovediam a vypočítame výsledok.
  • Predtým potrebujeme všetky otázky, možnosti a ich správne odpovede.

To je ako tutsplus kvíz je implementovaný pomocou

  • HTML
  • CSS
  • JavaScript / jQuery

Pokiaľ ide o drag and drop, môžeme použiť jQuery UI Draggable, jQuery UI Droppable a Sortable podľa vašej požiadavky.

Môžete použiť mnoho ďalších spôsobov, ako implementovať to, čo potrebujete, a tiež niektoré technológie typu back-end pre ďalšie otázky a nastavenia.