<hint>

<hint> is a Sectional component that renders a hidden block of content that can be expanded when its banner is clicked or can be rendered visible only when triggered by specific user interactions.

Attributes and Properties

The <hint> does not have attributes.

Example: <hint> that is always visible

<p>What food item below was NOT invented in America?
  <answer>
    <choice>Hot Dogs</choice>
    <choice>Cotton Candy</choice>
    <choice credit="1">Pizza</choice>
  </answer>
</p>
<hint>According to popular belief, both Hot
  Dogs and Cotton Candy were invented at the
  1904 World's Fair in St. Louis.
</hint> 

The <hint> banner is not triggered by any specific conditions and is always accessible to the user. The content of the <hint> is made available by clicking on the hint banner.

Example: <hint> only visible for specified interactions

The conditions under which a <hint> is visible can be tailored to specific user interactions using the <hide> attribute.

Example: Hide a <hint> until user answers twice

Properties of the named <answer> component are referenced by the boolean condition listed in the hide attribute of the <hint>. In this case, if the user answers incorrectly 2 or more times, the hide attribute of the <hint> will become false, and the <hint> will appear.

Property Example: open

The open property renders the boolean value corresponding to whether the <hint> is currently open.

Property Example: title

The title property renders the title associated with the <hint>.