index.njk

---
layout: base.njk
title: Build an H5P activity · Missing Elements
description: Turn the source an AI chat wrote with the h5p-author skill into a .h5p file, in your browser. Nothing is uploaded.
# The page's only policy: GitHub Pages sends no headers. base.njk writes it first in <head>, and the
# site's inline color-scheme script is added to script-src by its hash at build (eleventy.config.js).
# Packages it built play in the player's frame, under the policy the player's Service Worker gives
# each response there. A file a source names by web address is fetched by the build, so any host may
# be connected to.
csp: "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data: blob:; font-src 'self'; connect-src * data: blob:; worker-src 'self' blob:; frame-src 'self' blob:; object-src 'none'; base-uri 'self'"
---
{#- The markup build-page.ts wires up, built into /h5p/build/build-page.js by Vite (vite.config.ts). -#}
<main class="content build" id="main">
  <header class="docs-header">
    <a class="brand build-brand" href="/"><img src="/assets/logo.svg" alt="" width="24" height="24">{{ site.name }}</a>
    <div class="docs-header-row">
      <h1>Build an H5P activity</h1>
      {% include "theme-switch.njk" %}
    </div>
    <p class="lead">
      For an AI chat that wrote a source with the
      <a href="https://github.com/missing-elements/h5p-offline-player/tree/main/skills/h5p-author">h5p-author skill</a>
      but could not build it, as in ChatGPT, where the build tool does not install.
    </p>
    <p>
      Paste the source here, play the activity, and download a <code>.h5p</code> file that any H5P
      site takes. Nothing is uploaded: the package is built in your browser, from the libraries this
      site serves.
    </p>
    {#- The skill's page at its whole address, which a person gives the chat as it is. -#}
    <p>
      No source yet? Give the chat <a href="{{ site.url }}/h5p/skill/">{{ site.url }}/h5p/skill/</a>
      and ask it for an activity: the h5p-author skill there tells it how to write one.
    </p>
  </header>

  {#- The steps are drawn as a timeline by site.css: a marker for each, on a rail that runs on to
      the next. It reads how a step stands from what the step says of itself, so the markers need no
      script: #source-state, the files in #file-list and #status, each by its data attribute. -#}
  <section class="step" aria-labelledby="source-heading">
    <h2 id="source-heading"><span class="step-marker"><span class="step-number">1</span></span> Source</h2>
    <div class="field">
      <label for="source" id="source-label">The source, as JSON</label>
      <textarea id="source" rows="12" spellcheck="false" autocomplete="off" placeholder='{ "type": "H5P.Blanks", "title": "Rivers", "language": "en", "license": "CC BY", "authors": [{ "name": "Ann Author", "role": "Author" }], "params": { "questions": ["The *Danube* flows into the Black Sea."] } }'></textarea>
    </div>
    <p class="hint" id="source-state" role="status" aria-live="polite"></p>
    <p class="hint">
      You can change the source here before you build it. A source you paste whole or open is laid
      out for you. A mistake in the JSON is marked as you type, and each problem the build finds is
      marked where it is: choose its name in the list to go there. If this page was opened from a
      link that carried the source, its address follows your changes, so you can copy it to send
      the source on.
    </p>
    <p>
      <label for="source-file" class="inline-label">Or open a file</label>
      <input type="file" id="source-file" accept=".json,application/json,text/plain">
    </p>
  </section>

  <section class="step" id="files-step" aria-labelledby="files-heading" hidden>
    <h2 id="files-heading"><span class="step-marker"><span class="step-number">2</span></span> Files</h2>
    <p>The source names these files. Choose them from your computer; each is matched by its name.</p>
    {#- The lists are drawn without bullets, and Safari then reads one as a list only if it is told. -#}
    <ul class="file-list" id="file-list" role="list"></ul>
    <p>
      <label for="files" class="inline-label">Choose files</label>
      <input type="file" id="files" multiple>
    </p>
  </section>

  <section class="step" aria-labelledby="build-heading">
    <h2 id="build-heading"><span class="step-marker"><span class="step-number" id="build-number">2</span></span> Build</h2>
    <p><button type="button" id="build" class="button button-solid button-large">Build</button></p>
    <p class="status" id="status" role="status" aria-live="polite"></p>
    <div id="problems-box" hidden>
      <ul class="messages problems" id="problems" role="list"></ul>
      <p>
        <button type="button" id="copy-problems" class="button button-large">Copy the problems for the chat</button>
        <span class="hint" id="copy-result" role="status"></span>
      </p>
      <p class="hint">Paste them into the chat that wrote the source: it fixes them all and writes the source again.</p>
      <p class="hint" id="copy-types" hidden></p>
    </div>
    <div id="notes-box" hidden>
      <h3>Notes</h3>
      <ul class="messages" id="notes" role="list"></ul>
    </div>
  </section>

  <section class="step" id="play-step" aria-labelledby="play-heading" hidden>
    <h2 id="play-heading"><span class="step-marker"><span class="step-number" id="play-number">3</span></span> Play and download</h2>
    <p>
      Work through all of it, wrong answers included, and check the answers and feedback against
      your material. The build checks the structure, not whether the content is right.
    </p>
    <p><a class="button button-solid button-large" id="download" download>Download the .h5p</a></p>
    <div class="player-box">
      <h5p-player id="player"></h5p-player>
    </div>
    <p class="hint">
      The package carries H5P's libraries, each under its own licence, most MIT, listed in
      <a href="/h5p/assets/libraries-LICENSES.txt">the pack's licence list</a>: check those terms
      before you share it.
    </p>
  </section>

  <footer class="docs-footer">
    <p>
      Built with <a href="https://github.com/missing-elements/h5p-offline-player">h5p-offline-player</a>
      and <code>@missing-elements/h5p-author</code>, MIT. The H5P runtime the player loads is
      <a href="/h5p/assets/runtime-LICENSE.txt">GPL-3.0</a>. Not affiliated with H5P Group; H5P is a
      registered trademark of H5P Group AS.
    </p>
    <p>Found a mistake? <a href="https://github.com/missing-elements/missing-elements.github.io/blob/main/{{ page.inputPath | replace('./', '') }}">Edit this page</a> or <a href="https://github.com/missing-elements/h5p-offline-player/issues">open an issue</a>.</p>
  </footer>
</main>
<script type="module" src="/h5p/build/build-page.js"></script>