Creating Reveal Slides for Interactive Learning

Reveal slides are a great way to create interactive practice tests, vocabulary exercises, and walkthroughs for key points in your lessons. They allow you to present information in a step-by-step manner, revealing content as you progress through the slides. Here's how you can create reveal slides:

1. Slides in Text: Outstanda has the code library integrated. You only need to provide the slides with the slide code, which is simple to follow. Examples are below.
2. Create a new section for each slide: Each section in your HTML represents a new slide. Use the <section> tag to start a slide and </section> to end a new slide.
3. Add content to each slide: Within each section, you can include various HTML elements such as headings, paragraphs, images, or lists. Use the appropriate HTML tags to structure your content.
4. Apply the reveal effect to elements: To reveal content gradually, you can add the `fragment` class to specific elements. For example, <h2 class="fragment">NUMBER1</h2> This would make the “NUMBER1” appear after a click. If you have three different fragments, it would reveal the headings as you progress through the slide.
5. Use different elements for different content types: For short phrases or words, you can use the H2 is for short words and P tag is for longer text or to create paragraph fragments.
6. This might seem intimidating, but we will link to an example. This makes it very fast to build a vocabulary practice slideshow or a practice self-test.

Example Reveal Slide Code

Here's an example of code for creating a reveal slide with three fragments:

<SECTION>
<h2>Item #1</h2>
<h2 class="fragment">Item #2</h2>
<h2 class="fragment">Item #3</h2>
</SECTION>

<SECTION>
<h2>Item #1</h2>
<p class="fragment">Longer sentence to see if student knew what the Item #1 is.</p>
</SECTION>

You can copy and paste this code for each slide, adjusting the content within the tags to suit your needs. 

To submit, add it to the Google Drive folder for the lesson with the appropriate name. You can include the title and 2-3 sentence description of the slide show in the same file before your first slide.

Get Help with AI

Using ChatGPT or another AI, you can provide a list of things and an example of one slide, and ask AI to build the slide file for you. Here is an example:

Please create a Reveal slideshow for me that only includes the code for the slides, starting with <SECTION> and ending with </SECTION>. There should be a vocabulary word when the slide loads as an h2 tag, and then a fragment with a P tag that reveals the definition on click. Write the results in a code window for easy copy. The vocabulary and definitions are as follow: 
Penny: Smallest denominator coin. 1/100th of a dollar.
Nickle: 5/100ths of a dollar. 5 cents.

Etc.

You might have to use quotes to better separate your data depending on what you are doing, but this will quickly generate the slide code for you and you do not need to generate it.

Sample for ChatGPT

ChatGPT Prompt:

Create a slideshow for a reveal slideshow about how to (give details of what you want and and some good examples of slide topics). Produce at least 10 slides and output into the code window in this format "<section>
 <h2>HEADER</h2>
 <h2>TEXT</h2>
</section>"

That format will change depending on the kind of slide code you want. See below.

*** Very Short Q&A, Vocabulary (reveals the answer on click)

<section id="fragments">
 <h2>1 + 2</h2>
 <h2 class="fragment">1 + 2 = 3</h2>
</section>

<section id="fragments">
 <h2>QUESTION</h2>
 <h2 class="fragment">ANSWER</h2>
</section>

*** Word Problems or Longer Q&A  (reveals the answer on click)

<section id="fragments">
 <p>If you take one apple and add two more, how many will you have?</p>
 <p class="fragment">You will have three apples.</p>
</section>

<section id="fragments">
 <p>QUESTION</p>
 <p class="fragment">ANSWER</p>
</section>

*** Simple Header and Text Slides (No Reveal - shows full slide)
<section>
 <h2>HEADER</h2>
 <h2>TEXT</h2>
</section>