NoRedInk / noredink-ui / Nri.Ui.QuestionBox.V6

Patch Changes

Changes from V5:

view : List (Attribute msg) -> Html.Styled.Html msg

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


type Attribute msg

id : String -> Attribute msg

markdown : String -> Attribute msg

Content inside the question box, just before the buttons, is rendered from markdown syntax

html : Html.Styled.Html Basics.Never -> Attribute msg

Content inside the question box, just before the buttons, is rendered as HTML. We purposely don't allow the html to be interactive.

character : { name : String, icon : Nri.Ui.Svg.V1.Svg } -> Attribute msg

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

characterPosition : CharacterPosition -> Attribute msg

actions : List (Action msg) -> Attribute msg

actionsVertical : Attribute msg

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

actionsHorizontal : Attribute msg

Arranges the buttons horizontally on the QuestionBox.

neutral : Attribute msg

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)

correct : Attribute msg

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)

incorrect : Attribute msg

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)

tip : Attribute msg

An informational box that shows the character icon.

containerCss : List Css.Style -> Attribute msg

leftActions : Html.Styled.Html msg -> Attribute msg

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

guidanceId : String -> String

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: