Reading Annotations

Module readings can include annotations that highlight key terms and NGSS standards. These annotations are hidden by default and can be activated by clicking on the reading toggle switch. Once activated, the annotations are highlighted and can be clicked on to view their definitions and standards.

Reading Toggle Component

The reading toggle component is used to activate and deactivate the highlighting of glossary terms and NGSS standards within the module reading. The reading toggle component is placed within the .tabs__panel for glossary terms and NGSS standards.

Activate glossary term highlighting to easily identify key terms within the module. Once highlighted, you can click on these terms to view their definitions. 

            
                

<div class="reading-toggle">

    <div class="reading-toggle__switch">
        
        <div class="form-entry__option__switch">

            <label>
                <input type="checkbox" name="termsToggleSwitch" id="terms-toggle-switch">
                <span class="switch__slider"></span>
                <span class="option__label text-decoration-none font-size-md">
                    Highlight Glossary Terms
                </span>
            </label>

        </div>
    
    </div>

    <div class="reading-toggle__help">								
        <p>
            <em>
                Activate glossary term highlighting to easily identify key terms within the module. Once highlighted, you can click on these terms to view their definitions.
            </em>
        </p>
    </div>

</div>

Reading Toggle Requirements

The reading toggle component is comprised of the following elements:

  • The .reading-toggle parent element is required.

  • The .reading-toggle__switch selector is required. This is the parent element of the toggle switch.

  • The .reading-toggle__help selector is required. This holds the help text, which is hidden with JavaScript when the toggle switch is activated.

Reading Annotations

The reading annotations are hidden by default and can be activated by clicking on the reading toggle switch. Once activated, the annotations are highlighted and can be clicked on to view their definitions and standards.

Glossary Term Annotation

The following example shows a reading annotation for a glossary term.

heat

[noun] A measure of the total internal energy of a substance that can be increased or decreased when objects with different temperatures are placed into contact. Heat is a process, not a property of a material.

View in Glossary

Glossary term annotations are triggered by clicking on a glossary term within the reading. The following example shows a glossary term annotation for the term “heat”.

            
                

<mark
    class="term"
    data-term-def="[definition]"
>
    heat
</mark>

The term class is used for styling the glossary term within the reading. Styling occurs only when the reading toggle switch is activated.

The data-term-def attribute is used to identify the term definition that will be displayed in the annotation. The title of the annotation is the term itself, contained within the <mark> tag.

NGSS Term Annotation

This example shows a reading annotation for an NGSS term.

Science and Engineering Practices

Analyzing and interpreting data; constructing explanations: Newton's mathematical prediction did not match reality, which required him to develop a new explanation based on the data.

LS.2.C: Ecosystem Dynamics, Functioning, and Resilience

NGSS term annotations are triggered by clicking on an NGSS term within the reading. The following example shows an NGSS term annotation for the term “Science and Engineering Practices”.

            
                

<mark
    class="ngss"
    data-ngss-cat-abbr="Practice"
    data-ngss-cat-full="Science and Engineering Practices"
    data-ngss-desc="[description...]"
    data-ngss-standard="[standard...]"
>
        Based on his studies of the force of gravity...
</mark>

The ngss class is used for styling the NGSS term within the reading.

The data-ngss-cat-abbr attribute is used to identify the NGSS category abbreviation that will be displayed in the annotation.

The data-ngss-cat-full attribute is used to identify the NGSS category full name that will be displayed in the annotation.

The data-ngss-desc attribute is used to identify the NGSS description that will be displayed in the annotation.

The data-ngss-standard attribute identifies the NGSS standard that will be displayed in the annotation (e.g. LS.2.C: Ecosystem Dynamics, Functioning, and Resilience).

Highlighting Math Figures

The reading toggle component can also be used to highlight math figures within the module reading. The following example shows a reading toggle component that highlights math figures.

$$Na_{(s)} \rightarrow Na^{+}_{(s)} + e^{-}$$ 
            
                

<div class="figure">

	<figure>
        <mark
        class="ngss highlighted"
        data-ngss-cat-abbr="Practice"
        data-ngss-cat-full="Science and Engineering Practices"
        data-ngss-desc="[description...]"
        data-ngss-standard="[standard...]"
    >
            $$Na_{(s)} \rightarrow Na^{+}_{(s)} + e^{-}$$
        </mark>
	</figure>

</div>

Highlighted Math Figure requirements

The math figure must be contained within a <figure> tag. The math figure is highlighted when the reading toggle switch is activated.