Test store. Prices are the planned list prices stored as test data, license terms are drafts, and payments go to a Stripe test-mode account. No real money moves.

Quiz and Trivia Game in HTML5: Code and Template

This quiz game is one HTML file of about 245 lines: 15 editable questions, a 20-second timer, a 50:50 lifeline, speed bonus points and a review of missed answers. It uses real HTML buttons, so mouse, touch, keyboard and screen readers all work. Play it above, copy the code and save it as quiz-game.html. It's MIT-licensed, so you can change it and ship it.

Runs in your browser in a sandbox · 247 lines · no downloads

A quiz game asks a question, offers a few answers and rewards the right one. The HTML5 quiz game code on this page adds what makes trivia fun to play: a countdown, points for answering fast, a one-time 50:50 lifeline and a review of the answers you missed. It's built from ordinary HTML buttons instead of a canvas, which makes it the simplest kind of game to keep accessible. Below, we walk through the file and show how to turn it into your own trivia game or a quiz for a lesson.

How to run it

  1. Press Copy code above (or Download .html).
  2. Paste it into a new file called quiz-game.html in any text editor.
  3. Double-click the file to open it in your browser.

No server, framework or build step is needed. To try a change quickly, paste the code into the HTML game code runner, edit a question and press Run.

How the code works

The file has three layers: a little CSS for the layout and colours, three empty containers in the HTML (the score bar, the timer bar and a panel), and a script that fills the panel with the current screen. The script reads like a list of screens: start, question, end. Here is each part in order.

1. The questions are data

Everything a quiz writer touches is in one array at the top. Each entry has the question, four answers and an optional explanation. The convention that makes editing painless: the first answer is always the right one. The game shuffles the answers before showing them, so you never have to track which letter is correct.

quiz-game.html
// ----- Questions: edit this list. The FIRST answer is the right one; the game shuffles them. -----
const QUESTIONS = [
  { q: "Which planet is closest to the Sun?", a: ["Mercury", "Venus", "Mars", "Earth"], why: "Mercury orbits the Sun at an average distance of about 58 million km." },
  { q: "How many sides does a hexagon have?", a: ["6", "5", "7", "8"], why: "Hexa comes from the Greek word for six." },
  { q: "What is the chemical symbol for gold?", a: ["Au", "Ag", "Gd", "Go"], why: "Au comes from aurum, the Latin word for gold. Ag is silver." },
  { q: "Which is the largest ocean on Earth?", a: ["Pacific", "Atlantic", "Indian", "Arctic"], why: "The Pacific covers about a third of the planet's surface." },

The file ships with 15 general-knowledge questions. Each game picks 10 of them at random, so two rounds in a row don't feel the same.

2. Settings

Four numbers control the feel of the game. TIME = 0 turns the countdown off completely, which matters for lessons (more on that below).

js
// ----- Settings -----
const ROUND = 10;                    // questions per game, picked at random from the list
const TIME = 20;                     // seconds per question (0 = no time limit)
const POINTS = 100;                  // points for a right answer
const SPEED_BONUS = 5;               // extra points for each second left on the clock

A right answer with 14 seconds left is worth 100 + 5 × 14 = 170 points, so the best possible game of 10 questions scores 2,000.

3. Buttons, not canvas

Most games on this site draw on a <canvas>. A quiz is mostly text and choices, which is exactly what HTML already does well. Using real button elements gives you, for free, focus with the Tab key, activation with Enter and Space, text that wraps on small screens, and labels a screen reader can read. A small helper builds elements without any innerHTML, so a question containing < or & can't break the page.

js
// Small helper: el("p", { className: "hint" }, "text", childNode) builds an element.
function el(tag, props = {}, ...children) {
  const node = Object.assign(document.createElement(tag), props);
  node.append(...children);
  return node;
}

For the trade-offs between the two approaches in bigger games, see our comparison of canvas, SVG and DOM for games.

4. Game state and screens

The variable state is always start, question, answered or end. Each screen is a function that replaces the panel's contents with replaceChildren. showQuestion() shuffles the answers, remembering which one is right, and builds one button per answer with a letter badge:

js
// Shuffle the answers and remember which one is right.
options = shuffle(item.a.map((text, i) => ({ text, right: i === 0, gone: false })));
const title = el("h2", { tabIndex: -1, textContent: item.q });
const answers = el("div", { className: "answers" }, ...options.map((o, i) => {
  o.button = el("button", { onclick: () => answer(i) }, el("span", { className: "key", textContent: "ABCD"[i] }), o.text);
  return o.button;
}));

The question heading gets tabIndex: -1 so the script can move focus to it. A screen reader then reads the new question as soon as it appears, instead of staying silent on a button that no longer exists.

5. Checking an answer

answer(i) handles a click, a key press and the timer running out (i = -1). It locks all the buttons, marks the right answer green and, if the player picked wrong, marks their choice red. Then it adds the points or records the miss for the review screen.

js
function answer(i) {
  const chosen = i >= 0 ? options[i] : null;
  if (state !== "question" || (i >= 0 && (!chosen || chosen.gone))) return;
  state = "answered";
  const item = round[index];
  const correct = options.find((o) => o.right);
  options.forEach((o) => { o.button.disabled = true; });
  correct.button.classList.add("correct");
  let text;
  if (chosen && chosen.right) {
    const gained = POINTS + SPEED_BONUS * Math.ceil(timeLeft);
    score += gained;
    right++;
    text = `Correct! +${gained} points.`;
  } else {
    if (chosen) chosen.button.classList.add("wrong");
    missed.push(item);
    text = `${chosen ? "Not quite." : "Time's up."} The answer is ${correct.text}.`;
  }

The result goes into a paragraph marked aria-live="polite", so screen readers announce "Correct!" or the right answer without the player hunting for it. Focus then moves to the Next button, so a keyboard player can answer with a number key and press Enter to continue.

6. The countdown loop

A quiz doesn't need to redraw every frame, but the timer bar should move smoothly, so the game still uses requestAnimationFrame. Each frame subtracts the real elapsed time from timeLeft, and when it hits zero the loop calls answer(-1).

js
function loop(now) {
  const dt = Math.min(0.25, (now - last) / 1000);
  last = now;
  if (state === "question" && TIME > 0) {
    timeLeft = Math.max(0, timeLeft - dt);
    if (timeLeft === 0) answer(-1);
    updateHud();
  }
  requestAnimationFrame(loop);
}

Browsers pause requestAnimationFrame in background tabs, so switching tabs pauses the clock too. For a casual quiz that's the fair behaviour.

7. The 50:50 lifeline

The lifeline picks two wrong answers at random and hides them with visibility: hidden, which keeps the other buttons in place instead of letting the grid jump. Hidden buttons are also disabled, so neither a click nor a key press can choose them. Focus moves to the first remaining answer, because the 50:50 button the player just pressed is now disabled.

js
shuffle(options.filter((o) => !o.right)).slice(0, 2).forEach((o) => {
  o.gone = true;
  o.button.disabled = true;
  o.button.classList.add("gone");
});
options.find((o) => !o.gone).button.focus();

8. Keyboard shortcuts

Buttons already work with the keyboard, but quiz players like shortcuts: 1 to 4 or A to D answer, F uses the 50:50, and Enter or Space moves on. The first line ignores key presses with Ctrl, Alt or Cmd held, so Ctrl+F still opens the browser's search instead of spending your lifeline.

js
if (e.ctrlKey || e.metaKey || e.altKey) return;   // leave browser shortcuts like Ctrl+F alone
document.body.classList.add("keys");          // show key hints to keyboard players
const key = e.key.toLowerCase();
const pick = "1234".indexOf(key) >= 0 ? "1234".indexOf(key) : "abcd".indexOf(key);
if (state === "question" && key.length === 1 && pick >= 0) { e.preventDefault(); answer(pick); return; }
if (state === "question" && key === "f") { e.preventDefault(); useFifty(); return; }

A pointerdown listener removes the key hint line when someone taps or clicks, so phone players don't see instructions for a keyboard they don't have.

Make it work on phones

Because the layout is HTML, the browser does most of the work. The answers sit in a CSS grid that shows one column on narrow screens and two columns from 560 pixels up. Buttons are at least 54 pixels tall, comfortably above the minimum in the WCAG target size guidance, and long answers wrap instead of overflowing. The body can scroll, so the review list at the end stays reachable on a short screen. Test with your longest question at 390 pixels wide; if it runs past three lines, shorten it. Our guide to HTML5 mobile game development covers the rest.

Create a quiz or trivia game with your own questions

To create a quiz game in HTML5 from this file, you only edit the QUESTIONS array:

  • Keep the right answer first. Wrong answers work best when they're plausible: 1,400 minutes in a day catches more people than 9.
  • Write the why line for every question. It turns a wrong guess into something the player learns.
  • For true/false questions, give two answers: a: ["True", "False"]. The game shows two buttons. On those, the 50:50 would leave only the right answer, so make useFifty() return early when options.length < 3.
  • To create a trivia game with categories, add a cat field and filter the array before the shuffle in startGame().

That makes this file a simple HTML5 trivia game template: the code stays the same while the content changes. The same question-and-answer structure also drives flashcard and matching formats, like the memory game, and the word search game shows another way to drill vocabulary.

Use it as a quiz template for e-learning

Teachers and course designers often need a quiz game template in HTML5 that drops into a lesson page. Three settings make this file work for that:

  1. Set TIME = 0. Timed questions can shut out students who read slowly or use assistive technology, and the WCAG guidance on adjustable timing asks for a way to turn time limits off.
  2. Set ROUND to the length of your list so every student sees every question.
  3. Use the why explanations as the teaching part. The end screen lists every missed question with its answer, which works as a revision sheet.

Our guide to HTML5 educational games covers other e-learning formats, such as drag-and-drop sorting.

Ideas to extend it

  • A prize ladder: 15 questions of rising difficulty, shown as a column of point values, with the game ending on the first wrong answer.
  • More lifelines, such as "skip this question" or "add 10 seconds".
  • A difficulty field on each question and a round that starts easy and gets harder.
  • Images in questions: add an img field and an <img> element with alt text in showQuestion().
  • A short sound for right and wrong answers with the Web Audio API.
  • Load the questions from a JSON file on your own server once you host the game, so editors never touch the code.

From prototype to a game you can sell

This HTML5 quiz game source code is enough for a class, a party or a website widget. A trivia game sold to players or licensed to portals needs more:

This quiz fileA production quiz game
Content15 questionsThousands of checked questions in categories, refreshed often
Art and soundCSS colours, no audioOriginal art, animation, music and effects
SavesBest score lost on reloadProgress, streaks and settings saved per player
PlatformsDesktop and phone browsersPortal SDK hooks, ads, several languages
QualityTested by handAutomated tests and cross-browser QA
LicenceMIT, do anythingA commercial licence that covers your use

We don't sell a quiz or trivia game yet. If you'd like one in our catalog, suggest it on the public roadmap and vote for it on the roadmap; if your idea ships, you get a free game credit. If you need a quiz built only for you, the exclusive game request is the route: sending a brief is free, we review it within 5 business days, and you pay only if we accept it.

If your players like brain teasers, these two logic puzzles from our catalog are the closest fit today. Both have a daily puzzle, hints and undo:

You can also browse all our puzzle games with source code.

The complete code

One file, no libraries. Save it as quiz-game.html and open it in any browser. Free to use under the MIT license: copy it, change it, ship it.

quiz-game.html
<!doctype html>
<!-- SPDX-License-Identifier: MIT -->
<!-- Quick Quiz: a complete HTML5 quiz game in one file. Free to use, change and ship (MIT license). -->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Quick Quiz (HTML5)</title>
<style>
  :root { --bg: #0f1420; --panel: #1a2133; --line: #33405f; --text: #eef2ff; --dim: #aab4d0; --accent: #ffd166; --good: #2fbf71; --bad: #ef5b60; }
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  html { height: 100%; }
  body { margin: 0; min-height: 100%; display: flex; padding: 14px; background: var(--bg); color: var(--text); font: 17px/1.4 system-ui, sans-serif; }
  main { width: 100%; max-width: 660px; margin: auto; }
  h1 { font-size: 1.9rem; margin: 0 0 10px; }
  h2 { font-size: 1.25rem; margin: 0 0 16px; outline: none; }
  .hud { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 8px; }
  .timer { height: 8px; background: #2a3350; border-radius: 4px; overflow: hidden; margin-bottom: 18px; }
  .timer div { height: 100%; width: 100%; background: var(--accent); }
  .timer .low { background: var(--bad); }
  .answers { display: grid; gap: 10px; }
  @media (min-width: 560px) { .answers { grid-template-columns: 1fr 1fr; } }
  button { font: inherit; color: var(--text); background: var(--panel); border: 2px solid var(--line); border-radius: 12px; padding: 12px 16px; min-height: 54px; text-align: left; cursor: pointer; }
  button:hover:not(:disabled) { border-color: #6677a8; }
  button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
  button:disabled { cursor: default; }
  button.correct { background: #15482f; border-color: var(--good); }
  button.wrong { background: #571d22; border-color: var(--bad); }
  button.gone { visibility: hidden; }
  button.primary { background: var(--accent); border-color: var(--accent); color: #1b1b1b; font-weight: 700; text-align: center; }
  .key { display: inline-block; min-width: 1.7em; font-weight: 700; color: var(--accent); }
  .row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
  .feedback { min-height: 2.8em; margin: 14px 0 0; }
  .hint { color: var(--dim); font-size: 0.92rem; }
  .keyhint { display: none; }
  .keys .keyhint { display: block; }
  .row + h2 { margin-top: 28px; }
  li { margin-bottom: 6px; }
</style>
</head>
<body>
<main>
  <div class="hud" id="hud" hidden><span id="progress"></span><span id="clock"></span><span id="score"></span></div>
  <div class="timer" id="timer" aria-hidden="true" hidden><div id="timebar"></div></div>
  <section id="panel"></section>
</main>
<script>
// ----- Questions: edit this list. The FIRST answer is the right one; the game shuffles them. -----
const QUESTIONS = [
  { q: "Which planet is closest to the Sun?", a: ["Mercury", "Venus", "Mars", "Earth"], why: "Mercury orbits the Sun at an average distance of about 58 million km." },
  { q: "How many sides does a hexagon have?", a: ["6", "5", "7", "8"], why: "Hexa comes from the Greek word for six." },
  { q: "What is the chemical symbol for gold?", a: ["Au", "Ag", "Gd", "Go"], why: "Au comes from aurum, the Latin word for gold. Ag is silver." },
  { q: "Which is the largest ocean on Earth?", a: ["Pacific", "Atlantic", "Indian", "Arctic"], why: "The Pacific covers about a third of the planet's surface." },
  { q: "Which gas do plants take in from the air to make their food?", a: ["Carbon dioxide", "Oxygen", "Nitrogen", "Helium"], why: "Photosynthesis turns carbon dioxide and water into sugar using light, and releases oxygen." },
  { q: "Which is the largest continent by area?", a: ["Asia", "Africa", "North America", "Antarctica"], why: "Asia covers about 30% of Earth's land area." },
  { q: "Who painted the Mona Lisa?", a: ["Leonardo da Vinci", "Michelangelo", "Raphael", "Rembrandt"], why: "Leonardo began it in the early 1500s. It hangs in the Louvre in Paris." },
  { q: "At sea level, water boils at what temperature?", a: ["100 °C", "90 °C", "110 °C", "120 °C"], why: "Higher up, the air pressure is lower, so water boils at a lower temperature." },
  { q: "What is the smallest prime number?", a: ["2", "1", "3", "0"], why: "2 is the only even prime. 1 is not a prime number." },
  { q: "What is the capital of Australia?", a: ["Canberra", "Sydney", "Melbourne", "Perth"], why: "Canberra was chosen as a compromise between Sydney and Melbourne." },
  { q: "How many bones are in a typical adult human body?", a: ["206", "186", "226", "256"], why: "Babies have more bones; some of them fuse together as the body grows." },
  { q: "Which element has the atomic number 1?", a: ["Hydrogen", "Helium", "Oxygen", "Carbon"], why: "Hydrogen is the lightest element and the most common one in the universe." },
  { q: "Which is the longest river in Africa?", a: ["Nile", "Congo", "Niger", "Zambezi"], why: "The Nile flows north and empties into the Mediterranean Sea." },
  { q: "What does HTML stand for?", a: ["HyperText Markup Language", "HighText Machine Language", "Hyperlink Transfer Markup Language", "Home Tool Markup Language"], why: "HTML describes a page's structure. CSS styles it and JavaScript adds behaviour." },
  { q: "How many minutes are there in a day?", a: ["1,440", "1,240", "1,400", "1,600"], why: "24 hours × 60 minutes = 1,440 minutes." },
];

// ----- Settings -----
const ROUND = 10;                    // questions per game, picked at random from the list
const TIME = 20;                     // seconds per question (0 = no time limit)
const POINTS = 100;                  // points for a right answer
const SPEED_BONUS = 5;               // extra points for each second left on the clock

const $ = (id) => document.getElementById(id);
const panel = $("panel");

// Small helper: el("p", { className: "hint" }, "text", childNode) builds an element.
function el(tag, props = {}, ...children) {
  const node = Object.assign(document.createElement(tag), props);
  node.append(...children);
  return node;
}

// Fisher-Yates shuffle (in place): every order is equally likely.
function shuffle(a) {
  for (let i = a.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [a[i], a[j]] = [a[j], a[i]];
  }
  return a;
}

// ----- Game state -----
let state = "start";                 // start → question → answered → … → end
let round = [], index = 0, score = 0, right = 0, best = 0, missed = [];
let options = [], timeLeft = TIME, fiftyUsed = false, last = 0;
let fifty, next, feedback;           // buttons and text of the current question

function updateHud() {
  const playing = state === "question" || state === "answered";
  $("hud").hidden = !playing;
  $("timer").hidden = !playing || TIME === 0;
  $("progress").textContent = `Question ${index + 1} of ${round.length}`;
  $("score").textContent = `Score ${score}`;
  $("clock").textContent = TIME ? `${Math.ceil(timeLeft)} s` : "";
  $("timebar").style.width = TIME ? `${(timeLeft / TIME) * 100}%` : "0";
  $("timebar").className = TIME && timeLeft <= 5 ? "low" : "";
}

// ----- Screens -----
function showStart() {
  state = "start";
  panel.replaceChildren(
    el("h1", { textContent: "Quick Quiz" }),
    el("p", { textContent: `${ROUND} questions${TIME ? `, ${TIME} seconds each. Faster answers score more` : ""}.` }),
    el("p", { className: "hint", textContent: "One 50:50 per game removes two wrong answers. Keys: 1-4 or A-D to answer, F for 50:50, Enter to go on." }),
    el("div", { className: "row" }, el("button", { className: "primary", textContent: "Start quiz", onclick: startGame })));
  updateHud();
}

function startGame() {
  round = shuffle(QUESTIONS.slice()).slice(0, Math.min(ROUND, QUESTIONS.length));
  index = 0; score = 0; right = 0; missed = []; fiftyUsed = false;
  showQuestion();
}

function showQuestion() {
  const item = round[index];
  state = "question";
  timeLeft = TIME;
  // Shuffle the answers and remember which one is right.
  options = shuffle(item.a.map((text, i) => ({ text, right: i === 0, gone: false })));
  const title = el("h2", { tabIndex: -1, textContent: item.q });
  const answers = el("div", { className: "answers" }, ...options.map((o, i) => {
    o.button = el("button", { onclick: () => answer(i) }, el("span", { className: "key", textContent: "ABCD"[i] }), o.text);
    return o.button;
  }));
  fifty = el("button", { textContent: "50:50", disabled: fiftyUsed, onclick: useFifty });
  next = el("button", { className: "primary", hidden: true, onclick: nextQuestion,
    textContent: index + 1 < round.length ? "Next question" : "See results" });
  feedback = el("p", { className: "feedback" });
  feedback.setAttribute("aria-live", "polite");   // screen readers announce the result
  panel.replaceChildren(title, answers, el("div", { className: "row" }, fifty, next), feedback,
    el("p", { className: "hint keyhint", textContent: "Keys: 1-4 or A-D to answer, F for 50:50, Enter for next" }));
  title.focus();
  updateHud();
}

// ----- Rules: check an answer (i = -1 when the time runs out) -----
function answer(i) {
  const chosen = i >= 0 ? options[i] : null;
  if (state !== "question" || (i >= 0 && (!chosen || chosen.gone))) return;
  state = "answered";
  const item = round[index];
  const correct = options.find((o) => o.right);
  options.forEach((o) => { o.button.disabled = true; });
  correct.button.classList.add("correct");
  let text;
  if (chosen && chosen.right) {
    const gained = POINTS + SPEED_BONUS * Math.ceil(timeLeft);
    score += gained;
    right++;
    text = `Correct! +${gained} points.`;
  } else {
    if (chosen) chosen.button.classList.add("wrong");
    missed.push(item);
    text = `${chosen ? "Not quite." : "Time's up."} The answer is ${correct.text}.`;
  }
  feedback.textContent = `${text} ${item.why || ""}`;
  fifty.disabled = true;
  next.hidden = false;
  next.focus();
  updateHud();
}

// 50:50 lifeline: hide two wrong answers, once per game.
function useFifty() {
  if (state !== "question" || fiftyUsed) return;
  fiftyUsed = true;
  fifty.disabled = true;
  shuffle(options.filter((o) => !o.right)).slice(0, 2).forEach((o) => {
    o.gone = true;
    o.button.disabled = true;
    o.button.classList.add("gone");
  });
  options.find((o) => !o.gone).button.focus();
}

function nextQuestion() {
  if (state !== "answered") return;
  index++;
  if (index < round.length) showQuestion(); else showEnd();
}

function showEnd() {
  state = "end";
  best = Math.max(best, score);
  const share = right / round.length;
  const verdict = share === 1 ? "Perfect score!" : share >= 0.7 ? "Great work!" : share >= 0.4 ? "Not bad!" : "Keep practising!";
  const review = missed.length ? [el("h2", { textContent: "Answers to review" }),
    el("ul", {}, ...missed.map((m) => el("li", {}, `${m.q} `, el("strong", { textContent: m.a[0] }))))] : [];
  const again = el("button", { className: "primary", textContent: "Play again", onclick: startGame });
  panel.replaceChildren(
    el("h1", { textContent: verdict }),
    el("p", { textContent: `You got ${right} of ${round.length} right and scored ${score} points.` }),
    el("p", { className: "hint", textContent: `Best this session: ${best} points` }),
    el("div", { className: "row" }, again), ...review);
  again.focus();
  updateHud();
}

// ----- Loop: the countdown, time-based -----
function loop(now) {
  const dt = Math.min(0.25, (now - last) / 1000);
  last = now;
  if (state === "question" && TIME > 0) {
    timeLeft = Math.max(0, timeLeft - dt);
    if (timeLeft === 0) answer(-1);
    updateHud();
  }
  requestAnimationFrame(loop);
}

// ----- Input: buttons work with mouse, touch and keyboard; keys are shortcuts -----
window.addEventListener("keydown", (e) => {
  if (e.ctrlKey || e.metaKey || e.altKey) return;   // leave browser shortcuts like Ctrl+F alone
  document.body.classList.add("keys");          // show key hints to keyboard players
  const key = e.key.toLowerCase();
  const pick = "1234".indexOf(key) >= 0 ? "1234".indexOf(key) : "abcd".indexOf(key);
  if (state === "question" && key.length === 1 && pick >= 0) { e.preventDefault(); answer(pick); return; }
  if (state === "question" && key === "f") { e.preventDefault(); useFifty(); return; }
  // Enter or Space with nothing focused moves on (a focused button handles them itself).
  if ((key === "enter" || key === " ") && document.activeElement?.tagName !== "BUTTON") {
    e.preventDefault();
    if (state === "start" || state === "end") startGame();
    else if (state === "answered") nextQuestion();
  }
});
// Touch and mouse players don't need the key hints.
window.addEventListener("pointerdown", () => document.body.classList.remove("keys"));

showStart();
requestAnimationFrame((t) => { last = t; loop(t); });
</script>
</body>
</html>

Frequently asked questions

Is this an open source HTML5 quiz game?

Yes. The code is released under the MIT license, one of the most permissive open source licences. You can read, copy, change and share it, as long as you keep the licence line at the top of the file.

Can I use this quiz template in a commercial project or a paid course?

Yes. MIT allows commercial use. Replace the questions, change the colours in the :root block and ship it. Make sure the questions themselves are yours or that you have the right to use them.

Can I make a Who Wants to Be a Millionaire style game in HTML5?

Yes, the format is easy to build from this file: sort the questions by difficulty instead of shuffling them, end the game on the first wrong answer, and show a prize ladder of 15 steps with two safe points. Keep the 50:50 and add more lifelines. Don't use the show's name, logo or music in a game you publish, because they belong to the show's owners. Call it something of your own.

How do I put the quiz on my website or in a course page?

Upload quiz-game.html to your web host and link to it, or show it inside a page with an <iframe>. Our guide to embedding an HTML5 game in a website covers WordPress, Wix and Google Sites. A learning management system that expects SCORM or xAPI packages needs a wrapper around the file that reports the score.

How do I keep the high score after a reload?

Save best with localStorage.setItem in showEnd() and read it once when the page loads. Wrap both calls in try/catch, because some browsers and sandboxed frames, like the player on this page, block storage.

We make and sell HTML5 game source code; links to our games are marked as ours.