# Hotspot

> Tap the right spot in a visual or a line of code.

```json
{
  "id": "p2",
  "prompt": "This form has two primary buttons. Tap the one that should be demoted.",
  "visual": {
    "kind": "html",
    "html": "<div class='flex gap-2 flex-wrap'><button data-hotspot='create' class='btn'>Create account</button><button data-hotspot='learn' class='btn'>Learn more</button></div>"
  },
  "explanation": "**Learn more** is optional, so it should be secondary or tertiary. **Create account** is the main goal.",
  "type": "hotspot",
  "correct": [
    "learn"
  ],
  "multiple": false
}
```

A hotspot brick shows a visual and asks you to tap the part that matters. Tappable areas are marked in the HTML with `data-hotspot`, or listed as lines of code.

## When to use it

* Finding the problem in an interface, a document, or a snippet of code.
* Set `multiple: true` when there's more than one spot to find.

## Fields

| Field      | Required | Description                                                                 |
| ---------- | -------- | --------------------------------------------------------------------------- |
| `visual`   | yes      | HTML with `data-hotspot="id"` on tappable elements, or code with `hotspots` |
| `correct`  | yes      | Ids of the right spots                                                      |
| `multiple` | yes      | `true` when there are several spots, `false` for one                        |

## More examples

Tap a line of code:

```json
{
  "id": "p4",
  "prompt": "`totals` should be an array, but it's `undefined`. Tap the line that causes it.",
  "visual": {
    "kind": "code",
    "code": "const orders = getOrders();\nconst totals = orders.forEach(o => o.price * o.qty);\nshowTotals(totals);",
    "language": "javascript",
    "hotspots": [
      {
        "id": "l1",
        "line": 1
      },
      {
        "id": "l2",
        "line": 2
      },
      {
        "id": "l3",
        "line": 3
      }
    ]
  },
  "hint": "Which line uses a method that always returns undefined?",
  "explanation": "Line 2 uses **forEach**, which returns `undefined`. Switching it to **map** makes `totals` an array of order totals.",
  "type": "hotspot",
  "correct": [
    "l2"
  ],
  "multiple": false
}
```