Theodore Roosevelt Presidential Library Labs

TRPL Labs  /  Embeddable Widget

Embeddable Widget

Quiz Platform

Drop a fifteen-question quiz into any page with two lines of HTML.

View on GitHub Open live demo Fork this repository
Screenshot of Quiz Platform

Try it right here

This loads the live project from its own domain, exactly as a visitor would see it.

What it does

A dependency-free quiz engine that embeds into existing CMS pages rather than living on a site of its own. Each question gives immediate feedback plus a paragraph of real history and a link out; finishing yields a score, an achievement tier, and a downloadable badge.

It also supports asynchronous challenge-a-friend links and live two-player races. The challenge link encodes the identical run — score, deck, name, checksum — entirely in the URL, so nothing is stored server-side and there is no account to create. The whole quiz mounts in a shadow root, so a CMS theme cannot reach in and the quiz cannot leak out.

What it can do

  • Two-line embed that mounts in a shadow root
  • New quizzes added by dropping one JSON file in quizzes/ — no code changes
  • Per-run shuffling of questions and options, so answer positions are worthless
  • Challenge-a-friend links that encode the entire run in the URL
  • Live head-to-head play over WebRTC with timers and graceful fallback to solo
  • Gallery widget with search, difficulty and topic facets, and a daily reshuffle
  • Keyword search index built from proper nouns and rare words inside the questions

Make it your own

Start by forking the repository into your own organization. Everything below assumes you are working in your fork, not this one.

# clone your fork git clone https://github.com/YOUR-ORG/Quizes.git cd Quizes
  1. Fork, then copy a sample quiz to quizzes/<your-id>.json and replace the content. Exactly 15 questions with 4 options each, a zero-based answer index, plus an explanation, image, credit, and link per question.
  2. Put imagery in assets/img/<your-id>/ and fill in credits.json. Credit the source collection, never your DAM.
  3. Add an entry to quizzes/index.json with difficulty and topics, then run the reindex script to rebuild the search keywords.
  4. Replace the brand art and repoint the @font-face URLs in assets/css/trpl.css, which currently load from trlibrary.com.
  5. Enable Pages from main at the root, edit CNAME, add the DNS record, and enforce HTTPS.
  6. Point the embed snippet's script src at your own host and paste it into a full-HTML block on your CMS page.

Stuck on a step? Open an issue on the repository. Questions from people adapting these for their own institution are the most useful feedback we get.