/interactive-input

Interactive Block Schema (v1)

Root Structure

{
  "id": "unique-block-id",
  "card": {
    "body": [ /* CardElement[] */ ],
    "actions": [ /* CardAction[] */ ]
  }
}

• id (string, required): Unique identifier for this block, used to correlate user responses
• card.body (array, required): List of UI elements to render
• card.actions (array, optional): Action buttons at the bottom of the card

Card Elements

TextBlock

Static text label. Use as question titles or descriptions.

{ "type": "TextBlock", "text": "Your question here", "weight": "bold", "size": "md" }

Input.ChoiceSet

Single or multiple selection from a list of options.

{
  "type": "Input.ChoiceSet",
  "id": "answer",
  "label": "Select your answer",
  "style": "expanded",
  "isMultiSelect": false,
  "choices": [
    { "title": "Option A", "value": "a" },
    { "title": "Option B", "value": "b" }
  ]
}

Input.Text

Free-form text input.

{
  "type": "Input.Text",
  "id": "explanation",
  "label": "Show your work",
  "placeholder": "Type your answer...",
  "isMultiline": true
}

Input.Number

Numeric input.

{
  "type": "Input.Number",
  "id": "result",
  "label": "Final answer",
  "min": 0,
  "max": 100,
  "placeholder": "Enter a number"
}

Input.Toggle

Boolean toggle (checkbox).

{
  "type": "Input.Toggle",
  "id": "confident",
  "label": "I am confident in my answer"
}

Separator

Visual divider between elements.

{ "type": "Separator" }

Card Actions

Action.Submit

Submit button that collects all input values and sends them as a response.

{ "type": "Action.Submit", "title": "Submit Answer" }

Complete Examples

Single Choice Quiz

```interactive
{
  "id": "math-q1",
  "card": {
    "body": [
      { "type": "TextBlock", "text": "What is 2 + 3 × 4?", "weight": "bold" },
      { "type": "Input.ChoiceSet", "id": "answer", "style": "expanded",
        "choices": [
          { "title": "A. 20", "value": "20" },
          { "title": "B. 14", "value": "14" },
          { "title": "C. 24", "value": "24" },
          { "title": "D. 11", "value": "11" }
        ]
      }
    ],
    "actions": [{ "type": "Action.Submit", "title": "Submit" }]
  }
}
```

Multiple Choice

```interactive
{
  "id": "even-numbers",
  "card": {
    "body": [
      { "type": "TextBlock", "text": "Select all even numbers:", "weight": "bold" },
      { "type": "Input.ChoiceSet", "id": "answer", "style": "expanded", "isMultiSelect": true,
        "choices": [
          { "title": "12", "value": "12" },
          { "title": "15", "value": "15" },
          { "title": "28", "value": "28" },
          { "title": "33", "value": "33" }
        ]
      }
    ],
    "actions": [{ "type": "Action.Submit", "title": "Submit" }]
  }
}
```

Mixed Form (Show-your-work)

```interactive
{
  "id": "geometry-q1",
  "card": {
    "body": [
      { "type": "TextBlock", "text": "A rectangle is 8cm long and 5cm wide. Find the perimeter.", "weight": "bold" },
      { "type": "Input.Text", "id": "steps", "label": "Show your work", "isMultiline": true, "placeholder": "Write your steps..." },
      { "type": "Separator" },
      { "type": "Input.Number", "id": "answer", "label": "Final answer (cm)" }
    ],
    "actions": [{ "type": "Action.Submit", "title": "Submit Answer" }]
  }
}
```

Survey / Feedback

```interactive
{
  "id": "feedback",
  "card": {
    "body": [
      { "type": "TextBlock", "text": "How was this lesson?", "weight": "bold" },
      { "type": "Input.ChoiceSet", "id": "rating", "style": "expanded",
        "choices": [
          { "title": "Excellent", "value": "5" },
          { "title": "Good", "value": "4" },
          { "title": "Average", "value": "3" },
          { "title": "Needs improvement", "value": "2" }
        ]
      },
      { "type": "Input.Text", "id": "comment", "label": "Any comments?", "placeholder": "Optional feedback...", "isMultiline": true },
      { "type": "Input.Toggle", "id": "more", "label": "I want more practice on this topic" }
    ],
    "actions": [{ "type": "Action.Submit", "title": "Send Feedback" }]
  }
}
```