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

Overview

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.

Try it live!

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, and consult auto-sticky.md for some things to be aware of if you're a heavy user of math mode.

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
-------------------------------------------------------------------------------
JavaScript                       1             41             27            158
CSS                              1             38             45            157
Pug                              1              3              0             51
-------------------------------------------------------------------------------
SUM:                             3             82             72            366
-------------------------------------------------------------------------------

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

You might also like...

A to-do list app is a productivity tool designed to help users to create and maintain lists of tasks that they need to complete and it allows user to edit their tasks even after the task is saved. Built with CSS, HTML, and JAVASCRIPT.

Tumaini Maganiko 📗 Table of Contents 📗 Table of Contents 📖 To Do List PROJECT 🛠 Built With Tech Stack Key Features 🚀 Live Demo 💻 Getting Started

May 9, 2023

⚡ A blazing fast, lightweight, and open source comment system for your static website, blogs powered by Supabase

⚡ A blazing fast, lightweight, and open source comment system for your static website, blogs powered by Supabase

SupaComments ⚡ A blazing fast, lightweight, and open source comment system for your static website, blogs 🚀 Demo You can visit the Below demo blog po

Dec 27, 2022

React Gatsby static web tool for generative artists working on token based NFT artwork (ex: Artblocks)

React Gatsby static web tool for generative artists working on token based NFT artwork (ex: Artblocks)

token-art-tools React Gatsby static web tool for generative artists working on token/hash based NFT artwork (ex: Artblocks) https://ctrlshiftmake.gith

Dec 15, 2022

ec0lint - a static code analysis tool

ec0lint is a static code analysis tool that provides the users with useful hints on how to reduce the digital footprint of their webpages during the development process. Applying code changes suggested by ec0lint will make result with webpages that emit less carbon per visit, load quicker and are more space- efficient. The tool is open-source and community-driven.

Dec 5, 2022

🏗 Build static blog with lines of HTML and Markdown.

🏗 Build static blog with lines of HTML and Markdown.

Nimblog Nimblog requires only a few lines of HTML to deploy and is suitable for lightweight bloggers. The official guide is built with Nimblog, check

Dec 19, 2022

✏️ A small jQuery extension to turn a static HTML table into an editable one. For quickly populating a small table with JSON data, letting the user modify it with validation, and then getting JSON data back out.

jquery-editable-table A small jQuery extension to turn an HTML table editable for fast data entry and validation Demo 👉 https://jsfiddle.net/torrobin

Jul 31, 2022

JavaScript framework for creating beautiful, fast and lightweight websites based on flutter way of coding ☜(゚ヮ゚☜)

Welcome to Flutjs project 😀 Flutjs is a javascript framework for creating beautiful, fast and lightweight websites. As the name suggests, Flutejs is

Nov 9, 2022
Comments
  • improve accessibility

    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.

    opened by brecert 0
Releases(v1.1.3)
Owner
null
Gofiber with NextJS Static HTML is a small Go program to showcase for bundling a static HTML export of a Next.js app

Gofiber and NextJS Static HTML Gofiber with NextJS Static HTML is a small Go program to showcase for bundling a static HTML export of a Next.js app. R

Mai 1 Jan 22, 2022
A VS Code extension to practice and improve your typing speed right inside your code editor. Practice with simple words or code snippets.

Warm Up ?? ??‍?? A VS Code extension to practice and improve your typing speed right inside your code editor. Practice with simple words or code snipp

Arhun Saday 34 Dec 12, 2022
A sequence of smart contracts to practice gas optimization. These are used as practice assignments for RareSkills.io and the Udemy Gas Optimization Course

RareSkills Gas Puzzles Puzzles that are ready for you Distribute (hard) Array Sum (easy) Escrow EscrowV2 Mint Presale Require (easy) Staking Contribut

RareSkills 240 Dec 31, 2022
Practice Task of HTML - Mache Free Template (PSD to HTML) - Home Task (CTG)

Practice Task of HTML - Mache Free Template (PSD to HTML) - Home Task (CTG) This Assignment is mainly on PSD TO HTML along with HTML,CSS As a Basic HT

Yasir Monon 1 Jan 29, 2022
A tool help you generate documentation lightweight, seamless, fast and beautiful

一个 轻量、飞快、美观 的 React 组件文档生成套件 English | 简体中文 Features Vite 内核,高效极速的开发体验 使用 Markdown 写法,让你快速为项目编写说明文档的同时,自动生成预览,在调试的同时生成文档 自动分析 TypeScript 类型定义并生成 API 文

Vitdoc 73 Dec 15, 2022
Minimalistic, opinionated, and predictable release automation tool.

Release Minimalistic, opinionated, and predictable release automation tool. General idea Think Prettier but for automated releases: minimalistic, opin

Open Source: JavaScript 173 Dec 18, 2022
Create beautiful and simple HTML pages from your Readme.md files

?? Oranda Create beautiful and simple HTML pages from your Readme.md files ?? No config ??‍?? Code Highlighting ?? Emoji Support ✨ Creates Static file

axo 16 Oct 13, 2022
Swagger UI is a collection of HTML, JavaScript, and CSS assets that dynamically generate beautiful documentation from a Swagger-compliant API.

Introduction Swagger UI allows anyone — be it your development team or your end consumers — to visualize and interact with the API’s resources without

Swagger 23.2k Dec 28, 2022
Responsive Portfolio Website Using Html, Css and JavaScript, With a beautiful user interface

Responsive Portfolio Website Alexa Watch it on youtube Responsive Portfolio Website Alexa Responsive Portfolio Website Using Html, Css and JavaScript,

Alex Axel Mucyo 1 Mar 11, 2022