QuestionBox.view
    [ QuestionBox.markdown "**WOW**, great component!"
    ]

Note that the character only appears when the theme is tip!

Arranges the buttons vertically on the QuestionBox. This is the default behavior.

Arranges the buttons horizontally on the QuestionBox.

A neutral box that should prompt the user with a question. This is the default theme.

This dialog DOES NOT show the character icon (they should be showed as part of the CharacterStage)

A box that signifies that an answer was correct.

This dialog DOES NOT show the character icon (they should be showed as part of the CharacterStage)

A box that signifies that an answer was incorrect.

This dialog DOES NOT show the character icon (they should be showed as part of the CharacterStage)

An informational box that shows the character icon.

Adds an arbitrary HTML on the left of the question box for the text to speech button

This helper is how we create an id for the guidance speech bubble element based on the QuestionBox.id value. Use this helper to manage focus.

When showing multiple questions in a sequence based on the user's answer, we want to move the user's focus to the guidance so that:

• Screenreader users are alerted to a new context -- the new question!
• Keyboard users's focus is somewhere convenient to answer the question (but not on an answer, since we don't want accidental submissions or for the user to hit enter straight and miss the guidance!)