Assessment & decision

Question shell

A stable prompt, help, selector, and validation structure for assessment questions.

Canonical sourcepatterns/question.html

Behavior ownerApplication content

Runtime inside FormaNone

Example 1

Canonical

Canonical repository markup, namespaced only to keep examples independent.

How consistently is this practice followed?

Choose the response that best describes the current state.

View HTML

<section class="ef-question" aria-labelledby="ex1-question-question-example-title">
  <header class="ef-question__header">
    <span class="ef-question__number" aria-hidden="true">7</span>
    <div>
      <h2 class="ef-question__prompt" id="ex1-question-question-example-title">How consistently is this practice followed?</h2>
      <p class="ef-question__help" id="ex1-question-question-example-help">Choose the response that best describes the current state.</p>
    </div>
  </header>

  <div class="ef-question__body" aria-describedby="ex1-question-question-example-help">
    <!-- Insert a selector pattern here. -->
  </div>
</section>

Example 2

Secondary surface

The same contract demonstrated on a secondary Forma surface.

How consistently is this practice followed?

Choose the response that best describes the current state.

View HTML

<section class="ef-question" aria-labelledby="ex2-question-question-example-title">
  <header class="ef-question__header">
    <span class="ef-question__number" aria-hidden="true">7</span>
    <div>
      <h2 class="ef-question__prompt" id="ex2-question-question-example-title">How consistently is this practice followed?</h2>
      <p class="ef-question__help" id="ex2-question-question-example-help">Choose the response that best describes the current state.</p>
    </div>
  </header>

  <div class="ef-question__body" aria-describedby="ex2-question-question-example-help">
    <!-- Insert a selector pattern here. -->
  </div>
</section>

Example 3

Constrained layout

The canonical contract inside a narrow application region.

How consistently is this practice followed?

Choose the response that best describes the current state.

View HTML

<section class="ef-question" aria-labelledby="ex3-question-question-example-title">
  <header class="ef-question__header">
    <span class="ef-question__number" aria-hidden="true">7</span>
    <div>
      <h2 class="ef-question__prompt" id="ex3-question-question-example-title">How consistently is this practice followed?</h2>
      <p class="ef-question__help" id="ex3-question-question-example-help">Choose the response that best describes the current state.</p>
    </div>
  </header>

  <div class="ef-question__body" aria-describedby="ex3-question-question-example-help">
    <!-- Insert a selector pattern here. -->
  </div>
</section>