The following is the code used for opacity functionality.¹ It is also described in chapter four (4.3.3).

This is the code for the buttons:

 <div class="toggle-buttons">

    <button id="opaqueBtn" class="toggle-button">Opaque</button>

    <button id="transparentBtn" class="toggle-button">Transparent</button>

    <button id="partiallyOpaqueBtn" class="toggle-button">Partially Opaque</button></div>

This is the code for images, each level is defined and uses a uniquely generated image:

    <img id=“[filename]” class="opaque" src="/documentation/assets/items/[filename]_opaque.jpg" style="max-width:60%;height:auto;">

    <img id="[filename]" class="transparent" src="/documentation/assets/items/[filename].jpg" style="max-width:60%;height:auto;">

    <img id="[filename]" class="partially-opaque" src="/documentation/assets/items/[filename]_partial.jpg" style="max-width:60%;height:auto;">

The following code is used for the text opacity functions. For partial lines:

<span class="partial-lines”>[content]</span>

For fully opaque text:

<span class="opaque-lines”>[content]</span>

The fully opaque lines will always be crossed out with partial lines, so using the fully opaque function will usually have the partial lines span class nested inside:

<span class="partial-lines"><span class="opaque-lines”>[content]</span></span>

1. This code was developed by Kalani Craig. ↩