Question pictures

Need a number sequence with a blank, a sentence with a gap, or a snippet of code with one piece gone? These templates draw that picture the same way every time.

Ask for a picture

Send a template and some data. The same input always draws the same picture.

HTTP

POST /api/v1/quizzes/{quizId}/images/templates
Authorization: Bearer <quiz-scoped-key>
Content-Type: application/json

{
  "templateId": "universal.tiles",
  "data": {
    "rows": [
      [
        "2",
        "4",
        "8",
        "?"
      ]
    ]
  }
}

Keep it, or just preview it

Save the picture with the quiz, or ask for a temporary preview while you tweak the design.

output: "image"

The usual result is a WebP stored with the quiz, returned as an image ID.

output: "png" | "svg"

PNG and SVG come back as preview bytes and are not stored.

Templates with a visible gap

These are the ones that actually show a blank to fill in.

language.textCloud and code.syntaxBlock add context but don’t draw a blank, so they live in the API reference rather than this gallery.

universal.tiles

Number tiles

Sequences, sums, and equations laid out as clear tiles.

JSON

{
  "templateId": "universal.tiles",
  "data": {
    "rows": [
      [
        "2",
        "4",
        "8",
        "?"
      ]
    ]
  }
}

universal.sortingBins

Sorting bins

Drop items into labelled categories.

JSON

{
  "templateId": "universal.sortingBins",
  "data": {
    "bins": [
      "Round",
      "Angular"
    ],
    "binItems": [
      [
        {
          "kind": "shape",
          "name": "circle"
        },
        {
          "kind": "shape",
          "name": "triangle"
        }
      ],
      [
        {
          "kind": "shape",
          "name": "circle"
        },
        "?"
      ]
    ]
  }
}

universal.clockFace

Clock face

An analog clock for time-telling questions.

JSON

{
  "templateId": "universal.clockFace",
  "data": {
    "hour": 3,
    "minute": 30
  }
}

universal.numberLine

Number line

Counting and sequences with an optional blank tick.

JSON

{
  "templateId": "universal.numberLine",
  "data": {
    "start": 0,
    "end": 10,
    "step": 2,
    "missing": 6
  }
}

$Fraction bar. A segmented bar showing a fraction of a whole.$

math.fractionBar

Fraction bar

A segmented bar showing a fraction of a whole.

JSON

{
  "templateId": "math.fractionBar",
  "data": {
    "shaded": 3,
    "total": 4
  }
}

language.sentenceTiles

Sentence tiles

A sentence made of word tiles, with a gap to fill.

JSON

{
  "templateId": "language.sentenceTiles",
  "data": {
    "words": [
      "The",
      "cat",
      "sat",
      "on",
      "the",
      {
        "kind": "gap",
        "characters": 3
      }
    ]
  }
}

geometry.figure

Geometry figure

Angles, triangles, quadrilaterals, circles and parallel lines with the labels a question needs and a blank for the unknown.

JSON

{
  "templateId": "geometry.figure",
  "data": {
    "kind": "triangle",
    "angles": [
      90,
      35,
      55
    ],
    "angleLabels": [
      "90°",
      "35°",
      "?"
    ],
    "sideLabels": [
      "12 cm",
      null,
      "5 cm"
    ],
    "vertices": [
      "A",
      "B",
      "C"
    ]
  }
}

data.barChart

Bar chart

Read values from gridlines, compare categories, or find a total.

JSON

{
  "templateId": "data.barChart",
  "data": {
    "title": "Costumes worn at the party",
    "categories": [
      "Witch",
      "Ghost",
      "Vampire",
      "Zombie"
    ],
    "values": [
      12,
      7,
      9,
      4
    ],
    "unit": "pupils"
  }
}

data.table

Data table

A small table with one cell hidden for "what goes here" questions.

JSON

{
  "templateId": "data.table",
  "data": {
    "headers": [
      "Shop",
      "Price (£)",
      "Sold"
    ],
    "rows": [
      [
        "Boo",
        3.5,
        12
      ],
      [
        "Fang",
        4,
        null
      ],
      [
        "Grim",
        2.75,
        20
      ]
    ]
  }
}

math.coordinateGrid

Coordinate grid

Plotted points and segments for coordinates, midpoints and gradients.

JSON

{
  "templateId": "math.coordinateGrid",
  "data": {
    "xMin": -5,
    "xMax": 5,
    "yMin": -5,
    "yMax": 5,
    "points": [
      {
        "x": 2,
        "y": 3,
        "label": "A"
      },
      {
        "x": -4,
        "y": 1,
        "label": "B"
      }
    ],
    "segments": [
      [
        0,
        1
      ]
    ]
  }
}

science.circuit

Circuit diagram

A series loop drawn with standard symbols: battery, bulb, resistor, switch, meters.

JSON

{
  "templateId": "science.circuit",
  "data": {
    "components": [
      {
        "kind": "battery",
        "label": "6 V"
      },
      {
        "kind": "switch",
        "open": true
      },
      {
        "kind": "bulb",
        "label": "L1"
      },
      {
        "kind": "resistor",
        "label": "10 Ω"
      },
      {
        "kind": "ammeter"
      }
    ]
  }
}

science.rayDiagram

Ray diagram

Mirrors and lenses with the principal rays; ask where the image forms or show it.

JSON

{
  "templateId": "science.rayDiagram",
  "data": {
    "device": "concaveMirror",
    "focalLength": 2,
    "objectDistance": 5,
    "objectHeight": 2,
    "showImage": false
  }
}

code.fillBlank

Fill in the blank

Code with the missing piece clearly marked.

JSON

{
  "templateId": "code.fillBlank",
  "data": {
    "code": "function average(scores) {\n  const total = scores.reduce(\n    (sum, score) => sum + score,\n    0\n  )\n  return total ___{1} scores.length\n}",
    "language": "javascript"
  }
}

More code examples

code.fillBlank can hold up to 2,000 characters across 30 lines. A bare ___ uses the default gap width. ___{N} sets the gap to N characters wide, where N is 1 to 24. JavaScript, Python, HTML, and SQL all work.

JavaScript

JSON

{
  "templateId": "code.fillBlank",
  "data": {
    "code": "async function loadQuiz(id) {\n  const response = await fetch(`/api/quizzes/${id}`)\n  if (!response.ok) {\n    throw new Error(\"Could not load quiz\")\n  }\n  return ___{15}\n}",
    "language": "javascript"
  }
}

Python

JSON

{
  "templateId": "code.fillBlank",
  "data": {
    "code": "def average(scores):\n    if not scores:\n        return 0\n\n    total = sum(scores)\n    return total ___{1} len(scores)",
    "language": "python"
  }
}

HTML

JSON

{
  "templateId": "code.fillBlank",
  "data": {
    "code": "<figure class=\"quiz-image\">\n  <img\n    src=\"aurora.webp\"\n    ___{3}=\"Northern lights over Tromsø\"\n  />\n  <figcaption>Norway at night</figcaption>\n</figure>",
    "language": "html"
  }
}

SQL

SQL. Code with the missing piece clearly marked.

JSON

{
  "templateId": "code.fillBlank",
  "data": {
    "code": "SELECT subject, COUNT(*) AS question_count\nFROM questions\nWHERE status = 'published'\nGROUP BY ___{7}\nORDER BY question_count DESC;",
    "language": "sql"
  }
}

What you can put in a tile

Build a picture from text, numbers, and gaps. Emoji, stacked emoji, flags, shapes, styled text, and LaTeX all work. {"kind":"gap","characters":N} sets a text or tile gap to N characters wide, where N is 1 to 24. Older markers keep the default width.

textnumber?{"kind":"gap","characters":3}emojiemojiStackflagshapelatex