Widgets

Accordion

Use the Accordion to display content in collapsible compartments.

Use <div class="accordion"></div> to wrap your content.

Read

Discuss

<div class="accordion">
   <div class="accordion-item">
      <h3 class="accordion-title arrow-down toggle-btn">Read</h3>
      <div class="accordion-content toggle-btn-content">
         <p>Making News, March/April 2018. By Deb Venasse...</p>
      </div>
   </div>
   <div class="accordion-item">
      <h3 class="accordion-title arrow-down toggle-btn">Discuss</h3>
      <div class="accordion-content toggle-btn-content">
         <p>Adweek is a well-known organization that...</p>
      </div>
   </div>
</div>

Assignments Widget

Use Assignments Widget to display each assignment in a unit or module as a card.

Use <ul class="assignments-widget"></ul> to wrap your content.

<ul class="assignments-widget">
  <li class="assignment">
    <h3>Module 1 Readings</h3>
    <p>The readings in the list have interactive exercises that will help you...</p>
    <a class="btn" href="#">Go to Readings</a>
  </li>
  <li class="assignment">
    <h3>Reading Review Activity</h3>
    <p>Rhetorical Analysis Review Activity...</p>
    <a class="btn" href="#">Go to Activity</a>
  </li>
  <li class="assignment">
    <h3>Mindful Reading Discussion 1A</h3>
    <p>Reading Fables...</p>
    <a class="btn" href="#">Join Discussion</a>
  </li>
</ul>

Blockquote

Use Blockquote to separate any block of text along with supportive quotes. The space around the blockquote helps separate the block of text from the content that surrounds it.

Use <blockquote></blockquote> to wrap your content.

Some text used to help display a blockquote...

<blockquote class="text-center">Some text used to help display a blockquote...</blockquote>

Border

Use Border to bring attention to any piece of learning content. The content is contained within a subtly-colored background, making it ideal for learning objectives or any other content that needs to stand out.

Use .border to wrap your content. You may use a single element or multiple.

Essay Structure

Effective essays are organized into a clear introduction, body paragraphs, and conclusion. Each section has a purpose: the introduction introduces the topic and thesis, body paragraphs support the thesis with evidence, and the conclusion summarizes key points while reinforcing the argument.

<div class="border">
   <h3>Essay Structure</h3>
   <p>Effective essays are organized into a clear introduction, body paragraphs, and...</p>
</div>

Call Out

Use Call Out to bring attention to any supplementary learning content. The content is contained within a colored background with an "Explore More" heading attached.

Use .call-out to wrap your paragraph element.

In academic writing, a strong thesis statement is essential to guide the reader through your argument. It should be clear, concise, and take a definitive stance on the topic.

<div class="call-out">
  <p>In academic writing, a strong thesis statement is...</p>
</div>

Card Horizontal

Use Card Horizontal to display an image with supportive text. Both the image and text display horizontally with the text side displaying wider than the image.

Use .card-horizontal as the parent element of both .card-body, which contains the text, and
.card-img, which contains the image.

Writing an effective essay requires clear organization and purpose. The introduction presents the topic, while body paragraphs develop key points with supporting evidence. Finally, the conclusion ties everything together, reaffirming the thesis. Proper transitions between sections ensure a logical flow of ideas, guiding the reader through the argument.

<div class="card-horizontal">
  <div class="card-body">
    <p>Writing an effective essay requires clear organization and purpose. The introduction presents the topic, while...</p>
  </div>
  <div class="card-img">
    <img src="https://via.placeholder.com/300" alt="" />
  </div>
</div>

Flip Card

Use Flip Card as a flashcard with a front and back of the card, you can allow students to view terms and definitions separately.

Use .flip-card-group to wrap your flip cards.

Within the .flip-card-group add flip cards each with their own term and definition.

Apply the .long class to the .flip-card-group container to make the height of the flip cards larger.

Alliteration

Your front text here

Alliteration is the repetition of the same consonant sound at the beginning of closely connected words. It is often used to create rhythm, emphasize particular phrases, or enhance the musical quality of language. An example is "She sells seashells by the seashore," where the "s" sound is repeated at the start of several words.

Your back text here

Metaphor

Your front text here

A metaphor is a figure of speech that directly compares one thing to another, suggesting they are alike in some way. Unlike similes, metaphors do not use "like" or "as" for the comparison. For example, in the phrase "time is a thief," time is compared to a thief, implying it steals moments from our lives.

Your back text here

<div class="flip-card-group">
  <div class="flip-card">
    <div class="inner-card">
      <div class="front">Alliteration<div class="overlay">Your front text here</div></div>
      <div class="back">Alliteration is the repetition of the same consonant sound at the beginning of closely connected words. It is often used to create...<div class="overlay">Your back text here</div></div>
    </div>
  </div>
  <div class="flip-card">
    <div class="inner-card">
      <div class="front">Metaphor.<div class="overlay">Your front text here</div></div>
      <div class="back"> A metaphor is a figure of speech that directly compares one thing to another, suggesting they are...<div class="overlay">Your back text here</div></div>
    </div>
  </div>
</div>

Horizontal Display

Use Horizontal Display to display any content in an inline manner. This content will appear inline on desktops but will stack on smaller screens.

Use .horizontal-display to wrap.

<div class="horizontal-display">
  <div>
    <img src="https://via.placeholder.com/200" alt="" />
  </div>
  <div>
    <img src="https://via.placeholder.com/200" alt="" />
  </div>
  <div>
    <img src="https://via.placeholder.com/200" alt="" />
  </div>
  <div>
    <img src="https://via.placeholder.com/200" alt="" />
  </div>
</div>

Image Gallery

Use Image Gallery to display images in a grid and allow users to expand the images.

Use <div class="image-gallery"></div> to wrap your content.

<div class="image-gallery">
  <div class="gallery-wrapper">
    <div class="image-box">
      <img src="https://picsum.photos/id/1018/400/200" alt="" />
    </div>
    <div class="image-box">
      <img src="https://picsum.photos/id/1047/300/400" alt="" />
    </div>
    <div class="image-box">
      <img src="https://picsum.photos/id/1059/500/300" alt="" />
    </div>
    <div class="image-box">
      <img src="https://picsum.photos/id/119/500/300" alt="" />
    </div>
    <div class="image-box">
      <img src="https://picsum.photos/id/143/800/200" alt="" />
    </div>
  </div>
</div>

Locked Content

Use the Locked Content Widget to lock and unlock content.

Use .locked-content to wrap the content you want hidden. Use .instructions to inform students about why content is hidden. Use .unlocked-btn to label the condition for unlocking the content.

Visible Content Section

This section displays the initial part of the content that is only partially revealed. As you scroll or interact with the widget, more of the content gradually becomes visible. This mechanism encourages engagement by requiring the user to reveal additional information, enhancing their learning experience.

Please follow the steps below.

Confirm Completion of Steps A, B, and C

<div class="content-body">
   <div class="locked-content">
      <h2>Visible Content Section</h2>
      <p>This section displays the initial part of the content that is only...</p>
   </div>
   <div class="instructions">
      <p>Please follow the steps below.</p>
      <a class="unlock-btn">Confirm Completion of Steps A, B, and C</a>
   </div>
</div>

Media Container

Use Media Container to display any iframe with accompanying text or without.

With caption

Use .media-container as the parent element of both.media-object which will house your iframe and.media-info which will house your video's caption.

Some text used to describe the media object.

<div class="media-container">
  <div class="media-object">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/rFve845ScJ4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
  <div class="media-info">
    <p>Some text used to describe...</p>
  </div>
</div>

Without caption

Use .media-container as the parent element of.media-object which will house your iframe.

<div class="media-container">
  <div class="media-object">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/rFve845ScJ4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
</div>

Side-by-side

Use Side-by-side to display two horizontal containers that can contain any content.

Use .side-by-side as the parent element of two.side-by-side-item.

In academic writing, clarity and coherence are crucial for effectively communicating ideas. Start each paragraph with a clear topic sentence that introduces the main idea, followed by supporting sentences that elaborate on this idea. It is important to use transitional phrases to guide the reader through your argument and maintain a logical flow. Always revise your drafts to eliminate any grammatical errors and ensure that your writing meets the assignment’s requirements.

<div class="side-by-side">
  <div class="side-by-side-item">
    <img src="https://via.placeholder.com/300" alt="" />
  </div>
  <div class="side-by-side-item">
    <p>In academic writing, clarity and coherence are crucial for effectively communicating ideas. Start each paragraph with a clear topic sentence that introduces the...</p>
  </div>
</div>

Tables

Use Tables to organize information in rows and columns.

Add .display-lg to <table> to create a responsive table.

Assignments	Points	Due Dates
Read Start Here Module	--	May 1st
Course Contract Quiz	5	May 7th

<table class="display-lg">
  <thead>
    <tr>
      <th>Assignments</th>
      <th>Points</th>
      <th>Due Dates</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Read Start Here Module</td>
      <td>--</td>
      <td>May 1st</td>
    </tr>
    <tr>
      <td>Course Contract Quiz</td>
      <td>5</td>
      <td>May 7th</td>
    </tr>
  </tbody>
</table>

Tabs

Use the Tabs Widget to organize and separate related information into their own individual tabs. Best used when there are multiple tabs.

Use .tabs to wrap your entire tab widget. Use <label class="tab-header">Tab Title</label> to edit the title.
Use <div class="tab-panel"> [content inside] </div> to edit what appears inside the tabs.

Introduction

Introduction to Writing

Effective writing begins with a strong introduction that grabs the reader’s attention. This section should provide a brief overview of the topic and outline the main points to be discussed. Aim to engage your audience with a compelling opening sentence or question. Providing context and a clear thesis statement will help set the stage for the rest of your paper.

Body

Developing the Body Paragraphs

The body of your paper is where you develop your arguments and provide evidence to support your thesis. Each paragraph should focus on a single idea and include topic sentences, supporting details, and examples. Use transitions to connect paragraphs and ensure a logical flow of information. Revising and editing are crucial to refining your arguments and enhancing clarity.

Conclusion

Concluding Your Paper

The conclusion summarizes the main points and reinforces the thesis statement. It should provide closure and reflect on the significance of the topic. Avoid introducing new information in the conclusion. A strong conclusion will leave a lasting impression and clearly demonstrate the importance of the discussion.

Hide

<div class="tabs">
  <input/>
  <label>
    <span>Introduction</span>
  </label>
  <div>
    <h4>Introduction to Writing</h4>
    <p>Effective writing begins with a strong introduction that grabs the reader’s attention. This section should provide a brief overview of the topic and outline the main points to be discussed. Aim to engage your audience with a compelling opening sentence or question. Providing context and a clear thesis statement will help set the stage for the rest of your paper.</p>
  </div>
  <input/>
  <label>
    <span>Body</span>
  </label>
  <div>
    <h4>Developing the Body Paragraphs</h4>
    <p>The body of your paper is where you develop your arguments and provide evidence to support your thesis. Each paragraph should focus on a single idea and include topic sentences, supporting details, and examples. Use transitions to connect paragraphs and ensure a logical flow of information. Revising and editing are crucial to refining your arguments and enhancing clarity.</p>
  </div>
  <input/>
  <label>
    <span>Conclusion</span>
  </label>
  <div>
    <h4>Concluding Your Paper</h4>
    <p>The conclusion summarizes the main points and reinforces the thesis statement. It should provide closure and reflect on the significance of the topic. Avoid introducing new information in the conclusion. A strong conclusion will leave a lasting impression and clearly demonstrate the importance of the discussion.</p>
  </div>
  <input/>
  <label>
    <span>Hide</span>
  </label>
  <div></div>
</div>

Use Video Widget to create a grid-like video gallery. In addition to the video, each video card can contain general information such as the title and duration of the video.

Use <div className="video-widget"></div> to wrap your content.

<div class="video-widget">
  <div class="video-card">
    <h2>Review Video 01</h2>
    <div class="card-content">
      <h3>Learn French</h3>
      <p>(Video length: 3:50 minutes)</p>
      <div class="media-container">
        <div class="media-object">
          <iframe src="https://www.youtube.com/embed/rKV0Yl1Ir2g" title="YouTube video player?wmode=opaque" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen="" width="560" height="315" frameBorder="0"></iframe>
        </div>
      </div>
      <a class="btn ext" href="https://www.youtube.com/embed/rKV0Yl1Ir2g" target="_blank" rel="nonopener noopener">Watch on Youtube</a>
    </div>
  </div>
  <div class="video-card">
    <h2>Review Video 02</h2>
    <div class="card-content">
      <h3>Comparisons</h3>
      <p>(Video length: 2:34 minutes)</p>
      <div class="media-container">
        <div class="media-object">
          <iframe src="https://www.youtube.com/embed/dkCWThe7RuI" title="YouTube video player?wmode=opaque" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen="" width="560" height="315" frameBorder="0"></iframe>
        </div>
      </div>
      <a class="btn ext" href="https://www.youtube.com/embed/dkCWThe7RuI" target="_blank" rel="nonopener noopener">Watch on Youtube</a>
    </div>
  </div>
  <div class="video-card">
    <h2>Review Video 03</h2>
    <div class="card-content">
      <h3>Pronominal Verbs</h3>
      <p>(Video length: 5:14 minutes)</p>
      <div class="media-container">
        <div class="media-object">
          <iframe src="https://www.youtube.com/embed/7wUXSXZgNlU" title="YouTube video player?wmode=opaque" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen="" width="560" height="315" frameBorder="0"></iframe>
        </div>
      </div>
      <a class="btn ext" href="https://www.youtube.com/embed/7wUXSXZgNlU" target="_blank" rel="nonopener noopener">Watch on Youtube</a>
    </div>
  </div>
</div>

Vocab Cards

Use the Vocab Cards Widget to create a set of flashcards with terms and definitions.

Use .vocab-cards to wrap the vocabulary list. Use <dt> tags for terms and <dd> for definitions.

Thesis Statement
A thesis statement is a concise summary of the main point or claim of an essay or research paper. It presents the central argument or purpose of the paper and is usually located at the end of the introduction.
Topic Sentence
A topic sentence is the first sentence in a paragraph that introduces the main idea or theme of the paragraph. It sets the tone for the content that follows and helps to organize the paragraph’s structure.
Transition
Transitions are words or phrases used to connect ideas and ensure a smooth flow between sentences and paragraphs. They help guide the reader through the text by indicating relationships between concepts and maintaining coherence.
Evidence
Evidence refers to the facts, examples, or data used to support claims and arguments within a paper. It can include statistics, quotations, and research findings that substantiate the writer's position and strengthen their argument.
Counterargument
A counterargument is an opposing viewpoint or objection to the main argument presented in an essay. Addressing counterarguments helps to demonstrate a thorough understanding of the topic and strengthens the credibility of the writer’s position.
Conclusion
The conclusion is the final section of an essay or paper that summarizes the main points, restates the thesis, and provides closure. It often reflects on the significance of the argument and may suggest implications or future areas of research.
Coherence
The quality of being logical and consistent in writing, where ideas are clearly connected and flow smoothly from one to the next.

<ul class="vocab-cards">
  <li class="vocab">
    <dt>Thesis Statement</dt>
    <dd>A thesis statement is a concise summary of the main point or claim of an essay or...</dd>
  </li>
  <li class="vocab">
    <dt>Topic Sentence</dt>
    <dd>A topic sentence is the first sentence in a paragraph that...</dd>
  </li>
  <li class="vocab">
    <dt>Transition</dt>
    <dd>Transitions are words or phrases used to connect ideas and...</dd>
  </li>
  <li class="vocab">
    <dt>Evidence</dt>
    <dd>Evidence refers to the facts, examples, or data used to...</dd>
  </li>
  <li class="vocab">
    <dt>Counterargument</dt>
    <dd>A counterargument is an opposing viewpoint or objection to...</dd>
  </li>
  <li class="vocab">
    <dt>Conclusion</dt>
    <dd>The conclusion is the final section of an essay or paper that...</dd>
  </li>
  <li class="vocab">
    <dt>Coherence</dt>
    <dd>The quality of being logical and consistent in writing, where...</dd>
  </li>
</ul>

Vocab List

Use the Vocab List Widget to create a list of collapsible vocabulary items with terms and definitions.

Use .vocab-list to wrap the vocabulary list. Use <dt> tags for terms and <dd> for definitions.

Thesis Statement: A sentence that states the main argument or point of an essay.
Topic Sentence: The first sentence in a paragraph that introduces its main idea.
Transition: Words or phrases that connect ideas and ensure smooth flow between sentences and paragraphs.

<dl class="vocab-list">
  <dt tabIndex="0">Thesis Statement</dt>
  <dd>A sentence that states the main argument or point of an essay...</dd>
  <dt tabIndex="0">Topic Sentence</dt>
  <dd>The first sentence in a paragraph that introduces its main idea...</dd>
  <dt tabIndex="0">Transition</dt>
  <dd>Words or phrases that connect ideas and ensure smooth flow between sentences and paragraphs...</dd>
</dl>