hotgraphic usage

##Usage

Hot Graphic is great for revealing information which is related to:

• a process, procedure or diagram
• locations shown on a map
• a range of products
• the views of a group of individuals
• a timeline

Layouts

Spanned (full width)

###Mobile fall-back
The Hot Graphic is replaced by a Narrative component.

##Tips

Here are some techniques for getting the most from Hot Graphic.

NOTE: Address use of graphics as pins.
NOTE: Address movement of strapline.

• There is no limit to the number of items that can be added to the Hot Graphic but obviously the greater the number the more icons need to be displayed, obscuring main image upon which they’re placed. We recommend a maximum of six if placing over a more complex hot graphic image to avoid obscuring it. You can look to add more on a more basic Hot Graphic image, for example a simple timeline.

• Avoid adding too much copy to each display item– Aim for one or two short paragraphs. If you need to say more, think about your component choice.

• The pop-up showing the display text automatically increases its size to accommodate the character account. So if you intend to err on the side of more copy increase the depth of the hot graphic image to ensure the larger display pop-up still sits over the base image. NB: keep in mind that an image which is too large won’t all be able to fit on the screen.

• You need to provide two instruction texts: one for mobile, and one for desktop. Remember to fill out the title field for each stage – this won’t make much difference to the desktop display but it’s crucial for mobile when the component falls back to narrative.

• Remember that Hot Graphic's main image will not be shown when the component falls back to Narrative on a mobile. One workaround is to include the main hot graphic image as an inline in the body of the narrative fall-back. This ensures that the learner can see any wider contextual information that will allow them to understand each of the display items. You do need to be mindful of the amount of scrolling to fully interact with the component when viewed on mobile.
  Example:

[Describe how to do this.]

• Think about how you can use the image for each display item to enhance the learner experience.
  Example:
  You are using a Hot Graphic to present key political events in U.S. history between the years 1960 to 1969. The Hot Graphic image is a line broken up into 10 equal divisions (each representing a year in the decade, and labelled accordingly). There is an icon for each year in the decade. The icon for 1962 on the timeline is titled the Cuban missile crisis.

Display Text

Display Image

Title: October 1962 The Cuban Missile Crisis Body: Soviet long range nuclear missiles are discovered in Cuba, just 90 miles off the coast of North America, and the Cold War very nearly becomes a lot hotter! Thankfully, after 13 days of tension nuclear war is averted when the missiles are removed after secret negotiations between Khrushchev and Kennedy. Did you know? As part of these negotiations the U.S. agreed to remove their own nuclear missiles from bases in Italy and Turkey.

(Source image BBC. For illustration purposes only).

• It’s possible to change the icons from the default dropper to any contained within the Vanilla theme. The Sprite sheet shows all available icons. If you’re creating a new theme then it’s possible to create new sets of icons.

It’s also possible to vary the icons used in different instances of Hot Graphic components within a course, or even between different hot spots within a single Hot Graphic component. [Describe how this can be done.]