An opinionated tool to create beautiful, lightweight, static HTML/CSS practice quizzes

  • By null
  • Last update: Mar 28, 2022
  • Comments: 1

Taoquiz

An opinionated tool to create beautiful, lightweight, static HTML/CSS practice quizzes

"Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away." - Antoine de Saint-Exupéry

Taoquiz is a tool that compiles quizzes expressed as .quiz files (see the sample-quizzes/ directory) into beautiful, lightweight, interactive, fully static, and standalone .html files (with absolutely no client JavaScript!). Full support for MathJax is included; wrap TeX math expressions in $ or $$ as appropriate.

Features

  • Multiple choice and short answer question types.
  • Full support for TeX math expressions in both questions and answers, using MathJax.
  • Students can see what they got right and wrong after submitting the quiz (even with short answer questions).
  • Overall score is computed and shown after submitting.
  • Clean design, created to be easy to read.
  • Fully responsive: looks just as good on mobile as desktop.
  • Not suitable for quizzes for credit: like anything else without a backend, the correct answers are stored client-side.

Advantages

  • Easy to deploy: quizzes compile down to a single .html file, with a dependency on Google Fonts and nothing else. You can stick it on any static site host of your choice and let them handle any scaling, while still giving students a great experience.
  • Loads super fast: Chrome DevTools is telling me 130 ms for an "empty cache and hard reload" of w19-final-using-short-answer (which is an extremely complex and math-heavy exemplar). Content is presented instantly, with no discernible delay.
  • Compatible, to the extreme: You can take the .html quiz file, stick it on a USB, and load it up in Internet Explorer 11 on an airgapped computer not updated since late 2014.......with JavaScript completely disabled....and it'll work just as well as on modern Chrome! Literally every feature will work exactly the same, though Open Sans won't be able to load so you'll be stuck with Arial.
  • Embeddable: Since this doesn't rely on any client JavaScript, it's possible to embed quizzes in any environment where HTML is allowed (without losing interactivity). Could be nice for a LMS or something.
  • Easy to author/adapt quizzes: Open one of the sample-quizzes/ in a text editor of your choice; the format is quite nice.

Usage

npm install --global the newest tarball from the releases section, then:

> taoquiz
Usage: taoquiz <file.quiz> [result.html]

See sample-quizzes/ for examples of the input format.

License

BSD 3-Clause License

Motivation

These days, it sometimes seems like a lot of the web dev community is playing a kind of Buzzword bingo (Docker, anyone? React?). I wanted to show that, by taking a content-first approach, limiting your scope, and going back to basics, you can get pretty far with just a little bit of simple & approachable code (doing it without client JS was just icing on the cake1). Did I succeed? You decide:

> cloc taoquiz*
-------------------------------------------------------------------------------
Language                     files          blank        comment           code
-------------------------------------------------------------------------------
CSS                              1             36             45            151
JavaScript                       1             24              9             76
Pug                              1              3              0             51
-------------------------------------------------------------------------------
SUM:                             3             63             54            278
-------------------------------------------------------------------------------

1: weird expression. Icing is the best part of an average cake.

Github

https://github.com/startrekdude/taoquiz

Comments(1)

  • 1

    improve accessibility

    Notes

    If there are further commits some of the data may be out of date but new commits should be relatively minor in size.

    This pull request has only been tested with Edge 98.0.1108.43 and Firefox 96.0.3.

    Further testing is recommended.

    Accessibility

    This pull request aims to improve accessibility by

    • adding simple aria roles and actions
    • allowing the user to see what multiple-choice answer is focused/tabbed
    • replacing many unsemantic divs with semantically appropriate elements
    • improving tab navigation by including the submit button and making the tab order more logical

    Size and Metrics

    The lines of code have increased by 15.

    > cloc taoquiz*
    -------------------------------------------------------------------------------
    Language                     files          blank        comment           code
    -------------------------------------------------------------------------------
    CSS                              1             42             44            160
    JavaScript                       1             41             27            158
    Pug                              1              3              2             63
    -------------------------------------------------------------------------------
    SUM:                             3             86             73            381
    -------------------------------------------------------------------------------
    

    Size

    Tested with https://github.com/thecoshman/http as the server.

    w19-final.quiz

    from: 292.02 KB size, 30.50 KB trasnsferred (gzip) to: 288.62KB size, 30.56 KB trasnsferred (gzip)

    test1.quiz

    from: 6.15 KB size, 2.04 KB trasnsferred (gzip) to: 6.06 KB size, 2.23 KB trasnsferred (gzip)

    Although MathJax symbols tend to take up most of the size so the difference shouldn't matter too much.