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

This is the default type of question box. It doesn't have a programmatic or direct visual relationship to any piece of content.

This type of QuestionBox has an arrow pointing to the block whose id you pass in, if that block is on the final line of its paragraph. The QuestionBox should be vertically aligned beneath the block, viewport permitting. When there is a container the container will be used to calculate the offset from the viewport.

Pass in the id for the block the QuestionBox should point to.

You will need to pass 4 measurements, taken using Dom.Browser, in order for the question box to be positioned correctly. The question box will be hidden the first time when you pass Nothing for the measurements to reduce the jitter of the question box moving to its correct position.

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!)