NSO Component Library

This page shows how to use NSO content components. Each component section includes:

  • SME Guidance – what to write and how to label it in the treatment document.
  • Example – how the component appears to students.
  • DRS Code Snippet – HTML for Digital Resource Specialists to paste into Moodle.

Table of Contents

Engagement & Orientation

Topic Summary

SME Guidance

Label: Topic Summary

What SMEs write:

  • 1–3 sentence overview introducing the topic.
  • Optional: why the topic matters to students.

In this topic, you will explore a new concept and learn how it applies in everyday situations.

DRS Code Snippet

<div class="topic-summary">
  <p>
    <i class="fa-solid fa-star"></i>
    In this topic, you will explore a new concept and learn how it applies in everyday situations.
  </p>
</div>

Learning Intentions

SME Guidance

Label: Learning Intentions Callout

What SMEs write:

  • You will learn ____ so that/because ____.

Learning Intentions

You will learn how to analyze key ideas so that you can apply them in real-world situations.

DRS Code Snippet

<div class="callout-learning-intentions">
  <h3>Learning Intentions</h3>
  <p>You will learn how to analyze key ideas so that you can apply them in real-world situations.</p>
</div>

Guiding Question

SME Guidance

Label: Guiding Question

What SMEs write:

  • One guiding question.
  • 2–5 sentence lead-in paragraph.

Guiding Question

How does this concept shape the way we interpret information?

Before beginning this topic, consider how assumptions influence how we understand ideas. Think about how your own experiences shape your thinking as you read and explore new concepts.

DRS Code Snippet

<h4 class="guiding-question">
  <i class="fa-solid fa-comment" aria-hidden="true"></i>
  Guiding Question
</h4>
<p><strong>How does this concept shape the way we interpret information?</strong></p>
<p>Before beginning this topic, consider how assumptions influence how we understand ideas.
Think about how your own experiences shape your thinking as you read and explore new concepts.</p>

Instructional Content

Main Body Section

SME Guidance

Label: Main Body Section

What SMEs write:

  • Section heading (for example, “Key Ideas” or “Background”).
  • Short paragraphs explaining the concept, process, or story.
  • Any examples students need to understand the topic.

Section Title

This section contains the main explanation for the topic. Use short paragraphs to break up ideas and help students read more easily.

You can include examples, simple scenarios, or brief stories that show how the concept appears in everyday life or in academic contexts.

DRS Code Snippet

<div class="nso-section">
  <h4 class="section-heading">Section Title</h4>
  <p>
    This section contains the main explanation for the topic. Use short paragraphs to break up ideas
    and help students read more easily.
  </p>
  <p>
    You can include examples, simple scenarios, or brief stories that show how the concept appears
    in everyday life or in academic contexts.
  </p>
</div>

Image Container

SME Guidance

Label: Image Container

What SMEs write:

  • Image title.
  • Link to the image or file name (or note for builder to source image).
  • Short caption with source credit or explanation.

Sample Diagram

Placeholder sample diagram.

Source: Placeholder image for demonstration purposes.

DRS Code Snippet

<div class="image-container">
  <h4 class="figure-title">Sample Diagram</h4>
  <img class="img-fluid rounded shadow-sm" src="https://placehold.co/600x400" alt="Placeholder sample diagram.">
  <p class="figure-caption">
    <em>Source: Placeholder image for demonstration purposes.</em>
  </p>
</div>

Video Container

SME Guidance

Label: Video Container

What SMEs write:

  • Video title (optionally include length, e.g., “(3:25 mins)”).
  • 1–3 sentence description of what students should notice.
  • Video link or embed code.
  • Source/creator name for credit.

Watch: Introduction to the Topic (3:25 mins)

In this video, you will get a brief overview of the main idea and see a few simple examples. As you watch, pay attention to how the presenter explains the concept using everyday situations.

{{embed code}}

Source: Example video creator name.

DRS Code Snippet

<div class="video-container">
  <h4>
    <i class="fa-solid fa-circle-play" aria-hidden="true"></i>
    Watch: Introduction to the Topic (3:25 mins)
  </h4>
  <p>
    In this video, you will get a brief overview of the main idea and see a few simple examples.
    As you watch, pay attention to how the presenter explains the concept using everyday situations.
  </p>
  <div class="video-embed">
    {{embed code}}
  </div>
  <p class="figure-caption">
    <em>Source: Example video creator name.</em>
  </p>
</div>

Styled Table

SME Guidance

Label: Styled Table

What SMEs write:

  • Table title.
  • Column headings.
  • Row content (each row’s cells listed clearly in the treatment doc).

Example Comparison Table

Concept Simple Description Example
Idea A A basic explanation of the first idea. How it might show up in a common scenario.
Idea B A basic explanation of the second idea. Another real-world or classroom example.

DRS Code Snippet

<h3 class="styled-table-heading">Example Comparison Table</h3>
<table class="styled-table">
  <thead>
    <tr>
      <th>Concept</th>
      <th>Simple Description</th>
      <th>Example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Idea A</td>
      <td>A basic explanation of the first idea.</td>
      <td>How it might show up in a common scenario.</td>
    </tr>
    <tr>
      <td>Idea B</td>
      <td>A basic explanation of the second idea.</td>
      <td>Another real-world or classroom example.</td>
    </tr>
  </tbody>
</table>

Supportive Instruction

Instructions – Orange

SME Guidance

Label: Instructions – Orange

What SMEs write:

  • A brief title or introduction (optional).
  • Bulleted or numbered instructions students must follow.
  • Use for required steps, task directions, or key actions.

Instructions

  • Read the short article provided on the next page.
  • Take notes using the provided note-taking template.
  • Upload your completed notes to the assignment dropbox.

DRS Code Snippet

<div class="callout callout-instructions-orange">
  <h3><i class="fa-solid fa-circle-info"></i> Instructions</h3>
  <ul>
    <li>Read the short article provided on the next page.</li>
    <li>Take notes using the provided note-taking template.</li>
    <li>Upload your completed notes to the assignment dropbox.</li>
  </ul>
</div>

Instructions – White

SME Guidance

Label: Instructions – White

What SMEs write:

  • Bulleted list of directions, reminders, or tips.
  • Use when tone is informational rather than urgent.

Instructions

  • Review the definitions before starting the activity.
  • Have your notes nearby for reference.

DRS Code Snippet

<div class="callout callout-instructions-white">
  <h3><i class="fa-solid fa-circle-info"></i> Instructions</h3>
  <ul>
    <li>Review the definitions before starting the activity.</li>
    <li>Have your notes nearby for reference.</li>
  </ul>
</div>

Instructions – Blue

SME Guidance

Label: Instructions – Blue

What SMEs write:

  • Warnings, common mistakes, or “watch out” statements.
  • Misconceptions students often have.
  • 1–3 short points total.

Instructions

  • Do not skip the example section—it's needed for the next activity.
  • Be careful not to confuse the main idea with the supporting details.

DRS Code Snippet

<div class="callout callout-instructions-blue">
  <h3><i class="fa-solid fa-circle-info"></i> Instructions</h3>
  <ul>
    <li>Do not skip the example section—it's needed for the next activity.</li>
    <li>Be careful not to confuse the main idea with the supporting details.</li>
  </ul>
</div>

Technical Instructions

SME Guidance

Label: Technical Instructions

What SMEs write:

  • What tool or platform students must use.
  • Short step-by-step directions.
  • Troubleshooting tips or helpful reminders.

Technical Instructions

  • Open the document in your browser.
  • Select “Make a Copy” to save to your files.
  • If the file does not load, refresh the page and try again.

DRS Code Snippet

<div class="technical-instructions">
  <h4><i class="fa-solid fa-gear"></i> Technical Instructions</h4>
  <ul>
    <li>Open the document in your browser.</li>
    <li>Select “Make a Copy” to save to your files.</li>
    <li>If the file does not load, refresh the page and try again.</li>
  </ul>
</div>

Success Criteria

SME Guidance

Label: Success Criteria Block

What SMEs write:

  • Emerging: 1–2 “I can…” statements
  • Developing: 1–2 statements
  • Proficient: 1–2 statements
  • Distinguished: 1–2 statements

Success Criteria

Emerging
  • I can identify the main idea in a simple example.
Developing
  • I can describe the main idea using my own words.
Proficient
  • I can apply the idea to a new scenario.
Distinguished
  • I can evaluate how well the idea explains different examples.

DRS Code Snippet

<div class="success-criteria">
  <h4 class="section-heading">Success Criteria</h4>

  <h5>Emerging</h5>
  <ul><li>I can identify the main idea in a simple example.</li></ul>

  <h5>Developing</h5>
  <ul><li>I can describe the main idea using my own words.</li></ul>

  <h5>Proficient</h5>
  <ul><li>I can apply the idea to a new scenario.</li></ul>

  <h5>Distinguished</h5>
  <ul><li>I can evaluate how well the idea explains different examples.</li></ul>

</div>

Questions or Prompts

SME Guidance

Label: Questions or Prompts

What SMEs write:

  • 1–5 reflection questions or prompts.
  • Optional: sentence stems or ideas for student responses.

Questions or Prompts

  1. What was the most important idea you learned in this topic?
  2. Which example helped you understand the concept most clearly?
  3. How could you apply this concept in your own life?

DRS Code Snippet

<div class="questions-prompts">
  <h4><i class="fa-solid fa-pen-to-square" aria-hidden="true"></i> Questions or Prompts</h4>
  <ol>
    <li>What was the most important idea you learned in this topic?</li>
    <li>Which example helped you understand the concept most clearly?</li>
    <li>How could you apply this concept in your own life?</li>
  </ol>
</div>

Assessment & Navigation

Submission Guidelines

SME Guidance

Label: Submission Guidelines

What SMEs write:

  • What students must submit.
  • File types, formats, or templates.
  • Naming conventions.
  • Where/how to upload in Moodle.

Submission Guidelines

  • Submit your completed worksheet as a PDF.
  • Name your file: Lastname-Worksheet.pdf.
  • Upload it to the assignment titled Worksheet Submission.

DRS Code Snippet

<div class="submission-guidelines">
  <h4><i class="fa-solid fa-check-circle"></i> Submission Guidelines</h4>
  <ul>
    <li>Submit your completed worksheet as a PDF.</li>
    <li>Name your file: <em>Lastname-Worksheet.pdf</em>.</li>
    <li>Upload it to the assignment titled <strong>Worksheet Submission</strong>.</li>
  </ul>
</div>

Student Example

SME Guidance

Label: Student Example

What SMEs write:

  • Description of the model/example.
  • Optional screenshot or image.
  • Key features students should notice.

Student Example

This example shows a clear summary written in complete sentences with supporting details.

Sample student work example
Student example placeholder image.

DRS Code Snippet

<div class="student-example">
  <h4><i class="fa-solid fa-user-graduate"></i> Student Example</h4>
  <p>This example shows a clear summary written in complete sentences with supporting details.</p>
  <div class="example-media">
    <img src="https://placehold.co/500x300" alt="Sample student work example">
    <div class="example-caption">Student example placeholder image.</div>
  </div>
</div>

Up Next – Grey

SME Guidance

Label: Up Next – Grey

What SMEs write:

  • 1–2 sentences previewing the next page.
  • Used where grey background fits visually.

Up Next

Next, you will read a short passage that introduces the main idea.

DRS Code Snippet

<div class="up-next-box">
  <h4>Up Next <i class="fa-solid fa-arrow-right"></i></h4>
  <p>Next, you will read a short passage that introduces the main idea.</p>
</div>

Up Next – White

SME Guidance

Label: Up Next – White

What SMEs write:

  • 1–2 sentences previewing the next page.
  • Used where white background fits better visually.

Up Next

On the next page, you will explore a detailed example that illustrates the concept.

DRS Code Snippet

<div class="up-next-box-2">
  <h4>Up Next <i class="fa-solid fa-arrow-right"></i></h4>
  <p>On the next page, you will explore a detailed example that illustrates the concept.</p>
</div>

Main Content Container (Wrapper)

SME Guidance

Label: Main Content Container

Important for SMEs:

  • SMEs do not add this wrapper in the treatment doc.
  • Builders use it for overall page layout structure.
  • Main content (after Learning Intentions and Instructions, before Up Next) sits inside this wrapper.
Put this around the content after Learning Intention/Instructions/etc and before Up Next.

DRS Code Snippet

<div class="coursepage-main-content">
  Put this around the content after Learning Intention/Instructions/etc 
  and before Up Next.
</div>