Skip links and keyboard navigation

SWE components

Correct/incorrect

Overview

Highlight correct/incorrect page content with this component.

Short form

Use the short form when your correct/incorrect examples express a simple idea or use a minimum amount of content (e.g. a single word or sentence fragment).

You can use this service to change your home address. You cannot use this service to change your business address.

Code

<span class="qg-correct">You can use this service to change your home address.</span>
<span class="qg-incorrect">You cannot use this service to change your business address.</span>

Long form

Use the long form when your correct/incorrect examples express a more complex idea or use a larger amount of content (e.g. multiple sentences).

Eligible drink containers between 150mL and 3L:

  • aluminium
  • glass
  • plastic
  • steel
  • liquid paperboard.

Non-eligible drink containers:

  • plain milk containers
  • glass containers which have contained wine or pure spirits
  • large containers (1L or more) which have contained flavoured milk, pure juice, cask wine or cask water
  • cordial or vegetable juice containers
  • sachets above 250ml which have contained wine
  • registered health tonics.

Code

<div class="qg-correct" alt="Correct example">
    <p>Bike paths make it safer and easier to cycle around. Using bike paths:</p>
  <ul>
      <li>gives you access to facilities like bike shelters</li>
      <li>allows you to choose routes for different purposes (such as exercise or sightseeing)</li>
      <li>reduces greenhouse gases and traffic congestion.</li>
  </ul>

</div>
<div class="qg-incorrect" alt="Incorrect example">
    <p>Bike paths make it safer and easier to cycle around. Using bike paths: </p>
  <ul>
      <li>Gives you access to facilities like bike shelters.</li>
      <li>Allows you to choose routes for different purposes (such as exercise or sightseeing).</li>
      <li>Reduces greenhouse gases and traffic congestion.</li>
  </ul>
</div>

In a table

You can apply correct/incorrect classes to individual table cells. Use this when you want to custom specify correct/incorrect cells.

Applied to rows
Acronyms Accessibility
A.T.O Eg.
ATO Example
Applied to columns
Not this This
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi culpa dignissimos.
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet

Code

<!-- Applied to rows -->
<table title="acronym examples" class="table">
    <thead>
        <tr>
            <th>
              Acronyms
            </th>
            <th>
              Accessibility
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="qg-incorrect">
          A.T.O
            </td>
            <td class="qg-incorrect">
          Eg.
            </td>
        </tr>
        <tr>
            <td class="qg-correct">
              ATO
            </td>
            <td class="qg-correct">
              Example
            </td>
        </tr>
    </tbody>
</table>

<!-- Applied to columns -->
<table title="acronym examples" class="table qg-correct-incorrect">
    <thead>
        <tr>
            <th>
              Not this
            </th>
            <th>
              This
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
              Lorem ipsum dolor sit amet
            </td>
            <td>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi culpa dignissimos.
            </td>
        </tr>
        <tr>
            <td>
              Lorem ipsum dolor sit amet
            </td>
            <td>
              Lorem ipsum dolor sit amet
            </td>
        </tr>
    </tbody>
</table>
Last updated:
6 April 2022