back arrow forward arrow

APPLET GOES HERE
Title
Overview Title
Concept Question
Your Turn
How Do We Know
What Do We Know
Why Care

Glossary Popups
Here is a: sample entry, a tool tip should pop up when you hover here

Injected Popups
Here is a: a sample window, a window will pop up when you click on the entry. you can edit the contents.js file to have additional injected popups. It is also possible to create a new javascript file that would be specific to your page and which would contain the injected content. this javascript injection content is located in pageContent.js.

Question Box
Click here to show answer
Make sure to change the # sign to an incremental number for each additional show/hide box you add to a single page

Question/Response Grid
Column 1 Label Column 2 Label Column 3 Label
2 Row Question, can be modified to be only 1 row
click to reveal correct answer
revealed correct information
click to reveal information
more rows or columns can be added as needed, and the order of information can be modified
click to reveal incorrect answer
Revealed incorrect information
click to reveal more information
Remember that each table entry needs to have the "showHide#" and "questionAnswer#" updated as more toggleable boxes are added. There are four numbers to change per entry box. you can also format the revealed information with \span class='correct' or class='incorrect'."

Embedded Video

5 Image Wide Container w/ img stretch
This container will also work with fewer images and works well for four images if desired. Notice the images have the border class.
Be aware however, that any subtitles added directly to the images above may overlap text below. So, this subtitle uses the "subtitle" class and spans the full width of the page

5 Image Wide Container w/ img subtitles
Img Subtitle
Img Subtitle
Img Subtitle
Img Subtitle
Img Subtitle
This container allows subtitles under the individual images, however it no longer stretches the images to fill the container. So you will need to ensure your images are all the same size (pixel width and pixel height), if you want them to keep the same height. Notice these images do not have the border class.
Notice again this subtitle uses the "subtitle" class and spans the full width of the page

3 Image Wide Container w/ img stretch
Notice that the images here have been stretched to fill the div container. This can be a convenient for images that are of slightly different sizes.

3 Image Wide Container w/ img Subtitles
These images support subtitles, these subtitles only span the width of the image. And do not require the "subtitle" class.
Notice they are using the border class, you can use it if you like
This image container also works well for only two images if desired.
*Note that for the image containers that allow the use of image specific subtitles, the images used should have the same dimensions so that they line up properly. If you are okay with only having a general subtitle below the group, then the stretch container may be easier to use.

Centered Image
This Image defaults the width of the supplied image, but will not exceed a width of 100%. This image supports subtitles, these subtitles only span the width of the image. And do not require the "subtitle" class.

Centered Image Full
These images support subtitles, these subtitles only span the width of the image. And do not require the "subtitle" class.

Right aligned image w/ clearfix
These images support subtitles, these subtitles only span the width of the image. And do not require the "subtitle" class.

Random block of text can go here, and will wrap around the image.


Left aligned image w/ clearfix
These images support subtitles, these subtitles only span the width of the image. And do not require the "subtitle" class.

The div containing the clearfix class can be removed if desired, but be aware that this may lead to images overlapping other elements or running off the page. Text will wrap fine, but other divs, images or the title bars(worked examples, yourturn, etc.) will be pushed around in a way that can break their styling.