# Order

> Put items in the right order.

```json
{
  "id": "p4",
  "prompt": "Order these buttons from most to least visual weight.",
  "explanation": "A solid fill draws the eye most, an outline less, and plain text least.",
  "type": "order",
  "items": [
    {
      "id": "a",
      "visual": {
        "kind": "html",
        "html": "<button class='btn'>Filled</button>"
      }
    },
    {
      "id": "b",
      "visual": {
        "kind": "html",
        "html": "<button class='btn' data-variant='outline'>Outlined</button>"
      }
    },
    {
      "id": "c",
      "visual": {
        "kind": "html",
        "html": "<button class='btn' data-variant='ghost'>Text only</button>"
      }
    }
  ]
}
```

An order brick shuffles a list and asks you to put it back in order, by dragging or with the keyboard.

## When to use it

* Steps in a process, sections of a document, ranking by size or weight.
* Only when the order really matters. If two orders are both right, list the other in `alsoAccept`.

## Fields

| Field        | Required | Description                             |
| ------------ | -------- | --------------------------------------- |
| `items`      | yes      | The items, in the correct order         |
| `alsoAccept` | no       | Other orders that also count as correct |

## More examples

```json
{
  "id": "p5",
  "prompt": "Put these PRD sections in a typical order.",
  "explanation": "Why (the problem), then what success looks like (goals), then what to build (requirements), then what's still unknown.",
  "type": "order",
  "items": [
    {
      "id": "a",
      "text": "Problem"
    },
    {
      "id": "b",
      "text": "Goals and non-goals"
    },
    {
      "id": "c",
      "text": "Requirements"
    },
    {
      "id": "d",
      "text": "Open questions"
    }
  ]
}
```