Embedded Files
The interactivity note is the instruction to the integrator on type of page layout and interactivities. The interactivity notes are written only for page-level interactivity and not GUI-level. In interactivity note, the layout specs, interactivity type, targets, and pop-up locations are identified.
The “Click” interactivity notes are written for four types of interactivity, which are:
Hyperlinks
Button
Tab
Hotspot
Hyperlink Notes
Hyperlink Notes
When the hyperlinks are provided as the OST bullet list and laid out vertically, a vertical layout is chosen. The pop-ups are opened on text area below OST because the image has a content-specific graphic, not a generic one, which should not be obscured.
Example
Example
The following example demonstrates how to correctly write “hyperlink” interactivity notes.
Input
Input
A solar system is defined as a central sun with its associated planets, asteroids, meteors, satellites (i.e., moons), and comets that are "captured" in its orbit.
Following are some planets of our solar system:
Mars
Jupiter
Saturn
Click on each link to learn more.
Mars
Fourth planet from the sun
Mass = 6.4219e23 kg
Diameter = 6,794 km
Jupiter
Fifth planet from the sun
Mass = 1.900e27 kg
Diameter = 142,984 km
Saturn
Sixth planet from the sun
Mass = 5.68e26 kg
Diameter = 120,536 km
Output
Output
Integration Notes
Vertical layout; Click-interactivity on OST bullet-list hyperlinks; Pop-ups open on the text area below the OST.
In this example, the layout specs, interactivity type and targets, and pop-up locations are identified. Also, a vertical layout is chosen if the OST demands. Notes for pop-ups are provided.
Mock-up
Mock-up
This is how the above storyboard output would be integrated as an e-learning courseware screen.
Non-Example
Non-Example
The following non-example demonstrates how not to write “hyperlink” interactivity notes.
Input
Input
A solar system is defined as a central sun with its associated planets, asteroids, meteors, satellites (i.e., moons), and comets that are "captured" in its orbit.
Following are some planets of our solar system:
Mars
Jupiter
Saturn
Click on each link to learn more.
Mars
Fourth planet from the sun
Mass = 6.4219e23 kg
Diameter = 6,794 km
Jupiter
Fifth planet from the sun
Mass = 1.900e27 kg
Diameter = 142,984 km
Saturn
Sixth planet from the sun
Mass = 5.68e26 kg
Diameter = 120,536 km
Output
Output
Integration Notes
Vertical layout; Click-interactivity on OST bullet-list hyperlinks
In this non-example, layout specs and interactivity type and targets are provided. But the pop-up locations are not specified.
Button Notes
Button Notes
The buttons are provided in addition to the OST bullet list. When buttons are laid out vertically, a vertical layout is chosen. The pop-ups open in image area when the image has a generic graphic, which can be hidden behind a layer temporarily.
Example
Example
The following example demonstrates how to correctly write “button” interactivity notes.
Input
Input
A flower is the reproductive organ of those plants classified as angiosperms. The function of a flower is to produce seeds through sexual reproduction.
A typical flower consists of the following parts:
Carpel, which is the female part of the flower
Stamen, which is the male part of the flower
Petals, which are used to attract insects into the flower
Sepals, which protect the flower while it is developing from a bud
Flower stalk, gives support to the flower and elevated the flower for the insects
Petals, sepals and flower stalk do not have inner parts.
Click each button to learn about the different parts of a typical flower.
Carpel
The carpel of a typical flower comprises:
Stigma which is covered in a sticky substance to adhere the pollen grains
Style, which raises the stigma away from the ovary to decrease the likelihood of pollen contamination and it varies in length
Ovary that protects the ovule and once fertilization has taken place it will become the fruit
Ovule, which is like the egg in animals and once fertilization has taken place will become the seed
Stamen
The stamen of a typical flower comprises:
Filament, that is the stalk of the anther
Anthers, which contain pollen sacs that release pollen on to the outside of the anthers that brush against insects on entering the flowers
Output
Output
Integration Notes
Vertical layout; Click-interactivity on buttons, labeled “Carpel” and “Stamen”; Buttons are laid out below OST; Pop-ups open in text area below the image.
In this example, layout specs, interactivity type and targets, and pop-up locations are identified. Vertical layout is chosen as the OST design demands for it. Pop-ups open in image area as the OST spans the text area and buttons cannot be covered with pop-ups.
Mock-up
Mock-up
This is how the above storyboard output would be integrated as an e-learning courseware screen.
Non-Example
Non-Example
The following non-example demonstrates how not to write “button” interactivity notes.
Input
Input
A flower is the reproductive organ of those plants classified as angiosperms. The function of a flower is to produce seeds through sexual reproduction.
A typical flower consists of the following parts:
Carpel, which is the female part of the flower
Stamen, which is the male part of the flower
Petals, which are used to attract insects into the flower
Sepals, which protect the flower while it is developing from a bud
Flower stalk, gives support to the flower and elevated the flower for the insects
Petals, sepals and flower stalk do not have inner parts.
Click each button to learn about the different parts of a typical flower.
Carpel
The carpel of a typical flower comprises:
Stigma which is covered in a sticky substance to adhere the pollen grains
Style, which raises the stigma away from the ovary to decrease the likelihood of pollen contamination and it varies in length
Ovary that protects the ovule and once fertilization has taken place it will become the fruit
Ovule, which is like the egg in animals and once fertilization has taken place will become the seed
Stamen
The stamen of a typical flower comprises:
Filament, that is the stalk of the anther
Anthers, which contain pollen sacs that release pollen on to the outside of the anthers that brush against insects on entering the flowers
Output
Output
Integration Notes
Vertical layout; Click-interactivity on buttons, labeled “Carpel” and “Stamen”; Buttons are laid out below OST; Pop-ups open on image area.
In this non-example, layout specs, interactivity type and target are specified. However, the pop-ups are opened on the image area, which has a content-specific graphic and should not be covered.
Tab Notes
Tab Notes
The tabs are provided when special conditions, such as interactivity and presentation sequences are specified.
Example
Example
The following example demonstrates how to correctly write “tab” interactivity notes.
Input
Input
The main focus of the engine is to transform air and petrol into rotary motion so it can drive the wheels of the car. Most automotive engines today are 4-stroke (or 4-cycle). They have four distinct events that make up the cycle.
Click each tab in sequence to learn more.
First Stroke
The camshaft opens the intake valve and the piston moves down the cylinder. This creates vacuum and sucks in air and petrol into the combustion chamber above the piston.
Second Stroke
As the piston starts moving back up the cylinder the intake valve closes and seals off the combustion chamber. This causes the air and fuel to compress.
Third Stroke
As the petrol is compressed and the piston nears the top of the cylinder the spark plug fires and ignites the petrol and air. This explosion pushes the piston back down the cylinder and drives the crankshaft.
Fourth Stroke
After the piston reaches the bottom of the cylinder, the exhaust valve opens and the gasses left over from the fuel and air are sent out to the exhaust system.
Output
Output
Integration Notes
Horizontal layout; Click interactivity on tabs, labeled “First Stroke”, “Second Stroke”, “Third Stroke”, and “Fourth Stroke”; on page load, only first tab enabled; other tabs enabled in sequence after previous tab id clicked; On page load, tab area default content is collage of four images of four tabbed content (pop up) passages; tabbed content hidden until first tab is clicked.
In this example, layout specs, interactivity type and targets, and pop-up locations are identified. The sequences for the presentation and interactivity are specified.
Mock-up
Mock-up
This is how the above storyboard output would be integrated as an e-learning courseware screen.
Non-Example: The non-example demonstrates how not to write “tab” interactivity notes.
Input
The main focus of the engine is to transform air and petrol into rotary motion so it can drive the wheels of the car. Most automotive engines today are 4-stroke (or 4-cycle). They have four distinct events that make up the cycle.
Click each tab in sequence to learn more.
First Stroke
The camshaft opens the intake valve and the piston moves down the cylinder. This creates vacuum and sucks in air and petrol into the combustion chamber above the piston.
Second Stroke
As the piston starts moving back up the cylinder the intake valve closes and seals off the combustion chamber. This causes the air and fuel to compress.
Third Stroke
As the petrol is compressed and the piston nears the top of the cylinder the spark plug fires and ignites the petrol and air. This explosion pushes the piston back down the cylinder and drives the crankshaft.
Fourth Stroke
After the piston reaches the bottom of the cylinder, the exhaust valve opens and the gasses left over from the fuel and air are sent out to the exhaust system.
Output
Output
Integration Notes
Horizontal layout; Click interactivity on tabs, labeled “First Stroke”, “Second Stroke”, “Third Stroke”, and “Fourth Stroke”; on page load, only first tab enabled; other tabs enabled in sequence after previous tab id clicked; On page load, tab area default content is collage of four images of four tabbed content (pop-up) passages.
In this non-example, layout specs, interactivity type and targets, and pop-up locations are clearly mentioned. However, the tabbed content should be hidden until the first tab is clicked.
Hotspot Notes
Hotspot Notes
Image pop-ups are used when the content can be depicted visually through illustration and the layer information can be discrete components on the illustration. Care should be taken to ensure that the pop-ups do not cover any hotspot when opened.
Example
Example
The following example demonstrates how to correctly write “hotspot” interactivity notes.
Input
Input
An atom is the smallest particle of an element that retains all the chemical and physical properties of the element. Atoms have three basic parts which are electrons, neutrons and protons.
Click each highlighted icon on the image to learn more.
Electrons
Electrons are the negatively charged particles of atoms. Electrons are extremely small compared to all of the other parts of the atom.
Protons
Protons have a positive electrical charge, equal and opposite to that of the electron. The mass of proton is just slightly less than the mass of a neutron.
Neutrons
Neutrons have a neutral charge. So if an atom has equal numbers of electrons and protons, the charges cancel each other out and the atom has a neutral charge.
Output
Output
Integration Notes
Vertical layout; Click-interactivity on hotspots on highlighted icons of the image; Pop-ups open in OST area below the instruction text.
In this example, layout specs, interactivity type and targets, and pop-up locations are identified. Vertical layout is chosen as the image is portrait. Pop-ups open below the OST as the image has interactive elements on it and cannot be covered with pop-ups.
Mock-up
Mock-up
This is how the above storyboard output would be integrated as an e-learning courseware screen.
Non-Example
Non-Example
The following non-example demonstrates how not to write OST with image pop-ups.
Input
An atom is the smallest particle of an element that retains all the chemical and physical properties of the element. Atoms have three basic parts which are electrons, neutrons and protons.
Click each highlighted icon on the image to learn more.
Electrons
Electrons are the negatively charged particles of atoms. Electrons are extremely small compared to all of the other parts of the atom.
Protons
Protons have a positive electrical charge, equal and opposite to that of the electron. The mass of proton is just slightly less than the mass of a neutron.
Neutrons
Neutrons have a neutral charge. So if an atom has equal numbers of electrons and protons, the charges cancel each other out and the atom has a neutral charge.
Output
Output
Integration Notes
Vertical layout; Click-interactivity on hotspots on highlighted icons of the image; Pop-ups appears below image.
In this non-example, an appropriate layout is chosen, click-interactivity on hotspots on highlighted icons of the image are specified. However, each pop-up appears below the image, perhaps covering other hotspots.
Page updated
Google Sites
Report abuse