QG Correct / incorrect

Custom

Publishers may use the following styles to highlight correct/incorrect examples in web content.

Short form correct/incorrect examples

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

Note: This example quickly shows customers what they can, and cannot, use an online service for.

HTML

  <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 correct/incorrect examples

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

Note: This example is from the Queensland Government style guide and shows correct/incorrect use of apostrophes.

HTML

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

Tables

You can apply correct/incorrect classes to individual table cells.

Use this when you want to custom specify correct/incorrect cells

HTML

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

    

Or you can add correct/incorrect class to the whole table when you want odd columns to be incorrect values and even columns to be correct values.

HTML

  <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</td>
      </tr>
      <tr>
        <td>Lorem ipsum dolor sit amet</td>
        <td>Lorem ipsum dolor sit amet</td>
      </tr>
    </tbody>
  </table>

    

You can also add these classes to tables that aren't styled.

HTML

  <table title="acronym examples">
    <thead>
      <tr>
        <th>Correct</th>
        <th>Incorrect</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="qg-correct">ATO</td>
        <td class="qg-incorrect">A.T.O</td>
      </tr>
      <tr>
        <td class="qg-correct">MOU</td>
        <td class="qg-incorrect">mou</td>
      </tr>
    </tbody>
  </table>

    

  <table title="acronym examples" class="qg-correct-incorrect">
    <thead>
      <tr>
        <th>Incorrect</th>
        <th>Correct</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>A.T.O</td>
        <td>ATO</td>
      </tr>
      <tr>
        <td>mou</td>
        <td>MOU</td>
      </tr>
    </tbody>
  </table>