Imagens da pergunta
Precisa de uma sequência com um espaço, uma frase com lacuna ou um trecho de código com uma peça a menos? Estes modelos desenham essa imagem do mesmo jeito toda vez.
Peça uma imagem
Envie um modelo e alguns dados. A mesma entrada sempre desenha a mesma imagem.
POST /api/v1/quizzes/{quizId}/images/templates
Authorization: Bearer <quiz-scoped-key>
Content-Type: application/json
{
"templateId": "universal.tiles",
"data": {
"rows": [
[
"2",
"4",
"8",
"?"
]
]
}
}Guarde, ou só dê uma olhada
Salve a imagem com o quiz, ou peça uma prévia temporária enquanto ajusta o desenho.
output: "image"O resultado usual é um WebP guardado com o quiz, devolvido como ID de imagem.
output: "png" | "svg"PNG e SVG voltam como bytes de prévia e não são guardados.
Modelos com um espaço visível
Estes são os que realmente mostram um branco para preencher.
language.textCloud e code.syntaxBlock dão contexto, mas não desenham um espaço, então ficam na referência da API, não nesta galeria.
universal.tilesBlocos numéricos
Sequências, somas e equações dispostas em blocos claros.
{
"templateId": "universal.tiles",
"data": {
"rows": [
[
"2",
"4",
"8",
"?"
]
]
}
}
universal.sortingBinsCaixas de classificação
Solte itens em categorias com nome.
{
"templateId": "universal.sortingBins",
"data": {
"bins": [
"Round",
"Angular"
],
"binItems": [
[
{
"kind": "shape",
"name": "circle"
},
{
"kind": "shape",
"name": "triangle"
}
],
[
{
"kind": "shape",
"name": "circle"
},
"?"
]
]
}
}
universal.clockFaceMostrador do relógio
Um relógio analógico para perguntas sobre horas.
{
"templateId": "universal.clockFace",
"data": {
"hour": 3,
"minute": 30
}
}
universal.numberLineReta numérica
Contagem e sequências com um espaço em branco opcional.
{
"templateId": "universal.numberLine",
"data": {
"start": 0,
"end": 10,
"step": 2,
"missing": 6
}
}
math.fractionBarBarra de fração
Uma barra segmentada que mostra uma fração de um todo.
{
"templateId": "math.fractionBar",
"data": {
"shaded": 3,
"total": 4
}
}
language.sentenceTilesBlocos de frase
Uma frase feita de blocos de palavras, com um espaço para preencher.
{
"templateId": "language.sentenceTiles",
"data": {
"words": [
"The",
"cat",
"sat",
"on",
"the",
{
"kind": "gap",
"characters": 3
}
]
}
}
geometry.figureFigura geométrica
Ângulos, triângulos, quadriláteros, círculos e retas paralelas com os rótulos que a questão precisa e um espaço para a incógnita.
{
"templateId": "geometry.figure",
"data": {
"kind": "triangle",
"angles": [
90,
35,
55
],
"angleLabels": [
"90°",
"35°",
"?"
],
"sideLabels": [
"12 cm",
null,
"5 cm"
],
"vertices": [
"A",
"B",
"C"
]
}
}
data.barChartGráfico de barras
Ler valores nas linhas de grade, comparar categorias ou encontrar um total.
{
"templateId": "data.barChart",
"data": {
"title": "Costumes worn at the party",
"categories": [
"Witch",
"Ghost",
"Vampire",
"Zombie"
],
"values": [
12,
7,
9,
4
],
"unit": "pupils"
}
}
data.tableTabela de dados
Uma tabela pequena com uma célula oculta para perguntas do tipo "o que vai aqui?".
{
"templateId": "data.table",
"data": {
"headers": [
"Shop",
"Price (£)",
"Sold"
],
"rows": [
[
"Boo",
3.5,
12
],
[
"Fang",
4,
null
],
[
"Grim",
2.75,
20
]
]
}
}
math.coordinateGridPlano cartesiano
Pontos e segmentos marcados para coordenadas, pontos médios e inclinações.
{
"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.circuitDiagrama de circuito
Um circuito em série desenhado com símbolos padrão: pilha, lâmpada, resistor, chave, medidores.
{
"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.rayDiagramDiagrama de raios
Espelhos e lentes com os raios principais; pergunte onde a imagem se forma ou mostre-a.
{
"templateId": "science.rayDiagram",
"data": {
"device": "concaveMirror",
"focalLength": 2,
"objectDistance": 5,
"objectHeight": 2,
"showImage": false
}
}
code.fillBlankPreencha a lacuna
Código com a peça que falta bem marcada.
{
"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"
}
}Mais exemplos de código
code.fillBlank cabe até 2.000 caracteres em 30 linhas. Um ___ sozinho usa a largura padrão. ___{N} define o espaço com N caracteres, em que N vai de 1 a 24. JavaScript, Python, HTML e SQL funcionam.
JavaScript
{
"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
{
"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
{
"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
{
"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"
}
}O que você pode colocar num bloco
Monte uma imagem com texto, números e espaços. Emoji, emoji empilhados, bandeiras, formas, texto com estilo e LaTeX funcionam. {"kind":"gap","characters":N} define um espaço de texto ou bloco com N caracteres, em que N vai de 1 a 24. Marcadores antigos mantêm a largura padrão.
textnumber?{"kind":"gap","characters":3}emojiemojiStackflagshapelatex