{
  "version": 1,
  "title": "Trivia Night",
  "css": ".score { font-weight: 700; } .hint { opacity: 0.75; }",
  "root": {
    "type": "panel",
    "id": "main",
    "children": [
      {
        "type": "text",
        "id": "q",
        "text": "Capital of France?"
      },
      {
        "type": "text",
        "id": "hint",
        "className": "hint",
        "text": "Pick one answer below."
      },
      {
        "type": "spacer",
        "id": "sp1",
        "size": 16
      },
      {
        "type": "row",
        "id": "answers",
        "children": [
          {
            "type": "button",
            "id": "a",
            "label": "Paris",
            "action": "answer",
            "value": "paris",
            "variant": "Primary"
          },
          {
            "type": "button",
            "id": "b",
            "label": "Lyon",
            "action": "answer",
            "value": "lyon",
            "variant": "Secondary"
          },
          {
            "type": "button",
            "id": "c",
            "label": "Marseille",
            "action": "answer",
            "value": "marseille",
            "variant": "Secondary"
          }
        ]
      },
      {
        "type": "spacer",
        "id": "sp2",
        "size": 24
      },
      {
        "type": "text",
        "id": "score_label",
        "className": "score",
        "text": "Score: 0"
      },
      {
        "type": "input",
        "id": "nick",
        "name": "nickname",
        "label": "Display name on the board",
        "placeholder": "Optional nickname"
      },
      {
        "type": "row",
        "id": "submit_row",
        "children": [
          {
            "type": "button",
            "id": "join",
            "label": "Join board",
            "action": "join",
            "variant": "Success"
          }
        ]
      }
    ]
  }
}