Overview
In our lessons, interactives and games are used to help students engage in their lesson content and learn and practice key points and ideas. When selecting interactives, or games, we want to make sure the lesson pages are clean, easy to follow, cohesive and visually stimulating whenever possible.
Using the same interactive, or game, multiple times on a page (or page after page) becomes predictable and monotonous for the students. They start anticipating what’s coming and lose interest.
Providing interactive learning elements in a verity of styles and layouts helps to appeal to many types of students on many levels. It keeps them engaged in their lesson and lets them use what they have learned in multiple applications.
In the end, it’s all about the students. These lessons are for them, and we want to make sure we are doing our best to make sure they can do theirs.
When to use an alternate interactive.
Sometimes, the content for a requested interactive just won’t work the way it was requested. And sometimes, developers don’t know something won’t work until they try.
Instructional Designers- You can suggest alternate interactives for a developer to use when:
- There is more than one type of interactive repeatedly requested, either on a single page or multiple pages in a row.
- You feel another type of interactive is more appropriate.
-
You know that there will be conflict with the initial
requested interactive or game.
-
For Example:
- More than one instance of Flashcards is requested on a single page.
- More than one instance of the Matching Interactive is requested on a single page.
Developers- You can swap out a requested interactive for an alternate when:
- You notice the same interactive is being requested back-to-back.
- You’ve tried the requested interactive and it doesn’t look right or function appropriately.
- You know an alternative will fit the content in a more intuitive way.
Most interactives should have an introduction or instructions for students inside the lesson content. This lets them know how to proceed and what the objective is for the activity they are about to use.
REMEMBER: When changing the author-requested interactive or adding/adjusting an existing request, always make sure the student instruction (if applicable) changes too!
A brief, generalized, set of instructions will be provided with each interactive example listed in this document. Use this as a template for adjusting the instructions that may be in the lesson prior to an interactive or game request.
Substitutes for commonly requested interactives.
Having more than two Answer Reveals requested, in a row, takes up a lot of vertical space and can make the lesson page longer than it needs to be. Some alternatives would be:
-
Interactive Table:
Answer each question below, on your own. Once
you’ve got it, click on the question to check your
answer.
- Best with small to medium amounts of content
-
Flip boxes:
Answer each question below, on your own. Once
you’ve got it, click on the question to check your
answer.
- Best for small to medium amounts of content. Question and answer should be present on the back of the flip box, so students can still see them in relation to one another.
-
Vertical Tab Set with an Answer Reveal
Button:
Click through the tabs below and answer each
question. When you’re ready, click the button to
see your answer.
- Best for 3+ questions with medium to large amounts of content. The question and answer should be stacked, question on top, answer below. Each tab will be titled 'Question 1,' 'Question 2,' 'Question 3' and so on.
The interactive table is set up so when the left column is clicked it will reveal the remaining columns in that row. The column widths are adjustable, to fit requested content. These tables can contain a lot of information that may be better suited for a different layout if there are more than 10 rows with medium to large amounts of content, or images and audio are requested (particularly in column 1). Some alternatives would be:
-
Vertical Tab Set with an Answer Reveal
Button:
Click through the tabs below and [insert
objective]. When you’re ready, click the button to
see your answer.
- Best for 3+ questions with medium to large amounts of content. The question and answer should be stacked, question on top, answer below. Each tab will be titled '[Example Specific Title] 1,' '[Example Specific Title] 2,' '[Example Specific Title] 3' and so on.
-
Slide Show with a Reveal Button:
Work your way through each [objective specific]
below and then move on to the next by clicking the
arrow.
- Best for small to medium amounts of content. Horizontal space is limited in this interactive, especially in smaller viewports, so content should be stack and not side by side.
-
Flip boxes:
“[insert objective]. Once you’ve got it, click on
the [insert object on front of card] to see the
answer.
- Best for small to medium amounts of content, especially images requested in column 1. Use the grid to maximize layout and manually adjust height if needed. No clickable elements on the front of the flip box. If audio accompanies it, it can be placed above or below the flip box.
-
Flashcards:
Work your way through each flashcard and remove
it from the deck when you think you’ve got it.
- Best with small to medium amounts of content. An audio path version is available if a clip is needed. This interactive shuffles each time the page is loaded and will not be viewed in the order it appears in the lesson document.
-
Accordion Tabset:
Look at each tab, below, and click on the
[content specific text-based item] to learn
more/see the answer.
- Best for small to medium amounts of content. Tab titles can be short sentences, questions, or general titles like ‘Step 1.’ Revealed content can contain images, text or tables.
Lightboxes are very versatile but can be boring if routinely requested. Some alternatives would be:
-
Slide Show with a Reveal Button:
Work your way through each [objective specific]
below and then move on to the next by clicking the
arrow.
- Best for small to medium amounts of content. Horizontal space is limited in this interactive, especially in smaller viewports, so content should be stacked and not side by side.
-
Vertical Tab Set with an Answer Reveal
Button:
Click through the tabs below and [insert
objective]. When you’re ready, click the button to
see your answer.
- Best for 3+ questions with medium to large amounts of content. The question and answer should be stacked, question on top, answer below. Each tab will be titled '[Example Specific Title] 1,' '[Example Specific Title] 2,' '[Example Specific Title] 3' and so on.
-
Flashcards:
Work your way through each flashcard and remove
it from the deck when you think you’ve got it.
- Best with small to medium amounts of content. An audio path version is available if a clip is needed. This interactive shuffles each time the page is loaded and will not be viewed in the order it appears in the lesson document.
Students shouldn’t have to scroll up and down to view the content on each slide. If this happens, there may be more content than is appropriate for this interactive. Some alternatives would be:
-
Horizontal Tabset:
Take a look at the [insert specific content] on
each tab below.
- Best for medium to large amounts of content with graphs, tables, interactive elements and/images that accompany text. Utilize the grid system to maximize layout.
-
Vertical Tabset:
Take a look at the [insert specific content] on
each tab below.
- Best for medium amounts of content with graphs, tables, interactive elements and/images that accompany text. Utilize the grid system to maximize layout in larger viewports. Content should be stacked in smaller viewports since there is less horizontal space available.
-
Accordion Tabset:
Look at each tab, below, and click on the
[content specific text-based item] to learn
more/see the answer.
- Best for small to medium amounts of content. Tab titles can be short sentences, questions or general titles like ‘Step 1.’ Revealed content can contain images, text or tables.
The general formatting for both interactives is relatively identical. (They both require the same information). So, when should you use one vs. the other?
Mismatch: Best for questions that have short text options or images. Since the answer selections are center aligned, it’s easier to read when answers are either visual in nature or a short word or phrase.
The question portion can contain a word problem, image, table or audio file, when needed.
Multiple Choice: Best for questions with longer answer selections of audio answer selections. The answer choices are displayed in a list format. This makes it ideal for longer text-based answer choices or the use of audio files in the answer selection because it offers more horizontal space than the mismatch interactive.
The question portion can contain a text, image, audio, or tables. Because the multiple choice interactive is a list style layout, elements in this interactive should remain left aligned and not centered. (Centering throws off the formatting.)
Though we CAN have more than one Mismatch or Multiple Choice interactive on a page, it’s best to try an at least alternate between the two so we don’t overuse any one in particular. Additional alternatives for either of these interactive would be:
-
Interactive Table:
Look at the following questions and when you have
your answer, click on the question to see the
correct answer.
- Best used when there are two text-based answer selections like, yes or no, true or false. The text-based question will go in column one, and the correct answer, followed by the feedback, will go in column two. Do not use this alternative for questions containing audio clips, tables or images.
-
Vertical Tabset with Flip Boxes:
Work your way through the questions on each tab
and then click on you answer choice to see if
you’re correct.
- Can be used with small to large amounts of content. Each tab title will be 'Question 1,' 'Question 2,' and so on. Question and answer content should utilize the grid system to maximize layout. Keep in mind, smaller view ports will have lesson horizontal space.
- Text-based or image answers should appear on the front of the flip box, with a check mark or x (to visually indicate correct vs. incorrect answers) icon, and feedback on the back.
There can only be ONE matching interactive per lesson
page.
This interactive should be used with small to medium
amounts of content. Students should not have to scroll
up and down the interactive to utilize it. This not
only makes the interactive frustrating to use, it also
ends up taking up too much vertical space.
The column widths can be reduced or increased, depending on the content but the following guidelines should be kept in mind.
- With small text-based option, no more than 8-10 sections should be offered. (Small = one word, phrase, sentence, or audio clip.)
- With medium amounts of content, no more than 6 selections should be offered. (Medium = short phrases, 3 sentence paragraphs or horizontally oriented images with a 200px width.)
Anymore content than this and the following alternatives should be considered:
-
Flip Box or Interactive table with a Word or
Image Bank:
Take a look at the word/image bank below and see
if you can match it to its [insert interactive
objective]. When you think you’ve got it, click on
the [insert lesson object] to check your answer.
- Best if used with text-based content or images only.
-
Flashcards with a Word Bank:
Take a look at the word/image bank below and see
if you can match it to its [insert interactive
objective]. When you think you’ve got it, click on
card to check your answer.
- Best if for small to large amounts of content containing images or text. An audio path version of the flashcards is available if audio is required.
-
Multiple Choice Interactive:
*instructions shouldn’t really change from the
matching interactive to this one.
-
Best for all types of content. One side of the
match should be the question and 2-3 options for
the answer selection, one of them being the
correct answer.
NOTE: Feedback will be needed for this change. In this instance, it is appropriate to write "correct" or "incorrect" followed by the correct answer and its matching counterpart so students can see the matching pair together.
-
Best for all types of content. One side of the
match should be the question and 2-3 options for
the answer selection, one of them being the
correct answer.
There can only be one set of flashcards used per lesson page. Additionally, images will be small to medium sized, and text should be no more than one paragraph. If detailed images are requested, too much text and/or more than one request on a page, the following are suitable alternatives to the flashcard interactive.
-
Interactive Table:
Review the [Insert text description from front of
card] in column 1 and then click on each to reveal
the [Insert text description from back of
card].
- Best alternative for text-based content only.
-
Accordion Tabset:
Review the [Insert text description from front of
card] on each tab and then click it to reveal the
[Insert text description from back of card].
- Works for small-medium amounts of content.
- Revealed content can contain images and/or tables.
-
Slideshow with Answer Reveal Button:
Review the [Insert text description from front of
card] on each slide and then click the button to
reveal the [Insert text description from back of
card].
- Works for small-medium amounts of content.
- Text, images and tables can be used in either the slide or reveal button.
- Larger, more detailed, images can utilize the light-box interactive on the slide, but not inside the reveal button.
-
Flip Box:
Review the [Insert text description from front of
card] on each card and then click on the card to
reveal the [Insert text description from back of
card].
- Works for small-medium amounts of content.
- Text, images and tables can be used on either side of the card.
There aren’t many instances when this interactive would need to be replaced, other than overuse. If that happens, here are some appropriate alternatives.
-
Interactive Table:
Review/Translate the questions below and then
click on the question to compare your answer.
- Best with items that have a direct answer, not opinions, that are text-based.
-
Accordion Tabset:
Review/Translate the questions below and then
click on the question to compare your answer.
- Best with items that have a direct answer (not opinions) that are text-based.
-
Slideshow with Text Entry field and an Answer
Reveal Button:
Answer/Translate the questions below, in the
provided text area, and then click the ‘Answer’
button to compare your answer.
- Best for any length of text-based answer content. The question portion can contain text, images, audio clips or charts.