Instructor guide

How it works

• A course holds your decks. Students open the course with its 6-character course code or the student link. They do not need an account.
• A deck you have added but not taught is hidden. Students see its title, marked “Not taught yet”, and cannot open it.
• When you start a class on a deck, every student in the course sees the page you are on. They can explore that page but cannot change pages.
• When you end the class, the deck opens to students. From then on they can come back at any time and go through it at their own pace.
• A class has no time limit. It stays live until you end it.

Supported formats

A deck is one HTML file. If it uses images, video or other media, those sit in files next to it. You can add a deck in three ways:

PowerPoint, Keynote, Google Slides and PDF files are not accepted. The content has to be rebuilt as an HTML deck.

Media file types

Writing a deck

Each page is a <section class="slide">. Pages are shown in the order they appear in the file. The first heading on a page becomes its name in your page list, and the file's <title> becomes the suggested deck title.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Photosynthesis</title>
  <style>
    /* Optional. Styles here apply to every page. */
  </style>
</head>
<body>

  <section class="slide">
    <h1>Photosynthesis</h1>
    <p>How plants turn sunlight into food.</p>
  </section>

  <section class="slide">
    <h2>What photosynthesis needs</h2>
    <div class="kps">
      <div class="kp">
        <h3>Light</h3>
        <p>The energy source</p>
        <div class="detail">
          <h2>Light</h2>
          <p>Shown only after a student selects the card.</p>
        </div>
      </div>
    </div>
  </section>

</body>
</html>

Knowledge points

• A .kp is a card students can select. Put a short title and a one-line summary in it.
• The .detail inside it stays hidden until the card is selected, then opens in a dialog. It can hold any content: text, images, video, a worked example.
• Wrap several cards in a .kps to lay them out in a grid.
• Each student opens and closes cards on their own screen. Opening a card on your screen does not open it for students.

Quiz questions

A .quiz is a question students answer by selecting one option. Mark the right option with data-correct, and put an optional explanation in an .explain.

<section class="slide">
  <h2>Quick check</h2>
  <div class="quiz">
    <p>Where does the oxygen released in photosynthesis come from?</p>
    <button class="option">Carbon dioxide</button>
    <button class="option" data-correct>Water</button>
    <button class="option">Glucose</button>
    <div class="explain">
      <p>The light reactions split water.</p>
    </div>
  </div>
</section>

• In class, each student selects an option and can change it. Your screen shows how many students have answered, not what they chose, so it is safe to project. Select Show answers to end the question: every screen then marks the correct option, shows how many students chose each one, and shows the explanation.
• After class, a student browsing the deck selects an option and sees at once whether it is right, with the explanation.
• Answers are anonymous. Unpaged counts them and does not record who chose what. The counts are for the current class and start again the next time you teach the deck.
• The correct option and the explanation are not sent to students until you show the answers, so they cannot be found by inspecting the page.
• A page can hold more than one quiz. Show answers reveals all of them on the page.
• Up to 12 options per quiz and 20 quizzes per page. If more than one option is marked data-correct, each of them counts as correct; students still select one.

Your own styles and interactions

Pages follow the Social Shields look by default, so a deck works with no styles at all. Anything you put in a <style> or <script> in the <head> is included on every page, so you can restyle the deck or add your own interactions such as drag-and-drop or simulations.

Each page loads fresh when it is opened. A page cannot read what a student did on an earlier page.

Download the sample deck to use as a starting point.

Images, video and animation

Put media files in the same folder as the deck (subfolders are fine) and refer to them by relative path:

my-lesson/
  index.html
  media/
    cell.png
    demo.mp4
    intro.json

<img src="media/cell.png" alt="A plant cell">
<video src="media/demo.mp4" controls></video>

• CSS and JavaScript animation needs no extra files. Write it in the deck.
• Lottie and similar players: include the player script as a file in the folder or from a public CDN, and load the animation data by relative path, for example media/intro.json.
• Video plays separately on each student's device. Pressing play on your screen does not start it for students.
• Embedded players from other sites, such as YouTube, may not work inside a page. Use a video file instead.
• Do not paste images into the HTML as base64 text. It makes pages too large to send.
• If the folder has more than one HTML file, name the deck index.html. Other HTML files in the folder are ignored.

Before class

1. Sign in on the instructor page with the instructor passcode. Your browser remembers it on that device.
2. Create the course, or open it if it exists. Give students the course code or the student link once; it stays the same for the whole course.
3. Add the deck. Check the summary under the file pickers: it should show the number of pages and media files you expect.
4. Do a dry run in a separate practice course, so your real students do not see it. Start a class, open the student link in a second window or on your phone, and go through every page. Check that images load, video plays, each card opens and each quiz takes an answer.

To change a deck, delete it and add the new version. Do this before you teach it; a deleted deck is no longer available to students.

During class

1. Open the course and select Start class on the deck. Students who have the course open switch to your first page at once.
2. Turn pages with Previous and Next, the left and right arrow keys, or by picking a page from the list.
3. On a page with a quiz, watch the count of students who have answered, then select Show answers.
4. Select End class when you finish. Students keep the page they were on and can now move through the whole deck themselves.

What students can and cannot do

• During a class they see the page you are on and can interact with everything on it. They cannot change pages, and they only receive the page you are on, so they cannot read ahead.
• A student who joins late, or reconnects after losing their connection, lands on your current page.
• After the class they can open the deck from the course page at any time and browse it freely.

If something goes wrong

• You closed or refreshed the tab: the class is still live. Open the course again, on any device where you are signed in, and select Resume class. You return to the page you were on.
• You need to step away: “← Course” leaves the teaching screen without ending the class. Students stay on the current page.
• You forgot to end a class: it stays live, and students stay locked to its current page, until you end it.
• You want to teach a deck again: select Teach again. Students are locked to your page for that class, and the deck opens again when you end it.

Limits

For a video over 25 MB, compress it or cut it into shorter clips, one per page.