[rdgm style=”float: left; margin-top: -45px; margin-bottom: 0; margin-right: 15px; border-width: 0 !important; width: 110px !important; min-height: 100px !important;” hide_progress=”true” hide_r_diagrams_icon=”true” mobile_enabled=”false”]

[q hotspot_user_interaction=”info_only” show_hotspots=”hover_show” hotspot_labels_stick=”hover_show” find_the_dot_controls=”false” find_the_dot_width=”100″ find_the_dot_height=”100″ find_the_dot_dot_color=”#ffffff” find_the_dot_background_color=”#000000″]

Yes, you found the one!

 

 

Yes, you found the one!

 

 

[/rdgm]

New, March 2022.  What’s “One in a million”?  Let’s start easier: this little square — 100 x 100 pixels — actually has 10,000 dots.  If you hover on “the one” — chosen at random — it will let you know.  Don’t see the dot?  Click “New dot” will draw a dot at another location; you’ll probably see it appear.  Not too hard!  But can you find one in a million?

 

Swinging Hotspot lets you add interactivity to any image. You can create “hotspots” with draw functions, including “paint fill,” as well as rectangles and circles/ellipses, and freehand. There are options to pop-up links, images, etc. on hover.  Swinging Hotspot is available as a WordPress plugin, or you can use the online wizard to create an interactive image that you can use on your own site with an “embed code.”

Swinging Hotspot examples.  Our first example we call “info only” – it shows additional info when you hover on a hotspot area.  Give it a try!

[rdgm style=”border-width: 0px !important;”]

[q hotspot_user_interaction=”info_only” hotspot_labels_stick=”hover_show”]


 

 

 

 

 

 

 

 

 

 

 

 

 

 

Ahwahnee Hotel

 

 

[/rdgm]

“Click-on challenge”

Our second example is a “find the right item” quiz.  You’ll see a prompt at the bottom for the item you should click.  In addition, a timer makes this activity a competitive challenge that students may enjoy!

[rdgm quiz_timer=”true”]

[q hotspot_user_interaction=”label_prompt” show_hotspots=”hide” hotspot_labels_stick=”hide”] In this diagram, click on the NUMBERS.

Maintains membrane fluidity

Excellent! Cholesterol maintains fluidity

No. You’re looking for cholesterol. it’s a steroid, made of fused carbon rings.
Membrane Channel

Nice job. Number 6 represents a membrane channel.

No. Look for something that spans the width of the membrane, and looks like a tunnel.
Involved in cell recognition

Nice. “8” is a membrane carbohydrate, involved in cell recognition. 

No. Look for the number of what looks like a polysaccharide jutting out of the membrane.
A phospholipid head

Nice! “9” represents the head of a phospholipid.

No. A phospholipid is represented by a red sphere and two tails. Figure out which part must be the “head.”
transmembrane protein

Excellent. Both of the proteins at “1” are trans-membrane proteins

No. Look for proteins that span the entire phospholipid bilayer.
phospholipid bilayer

Nice! “2” represents the phospholipid bilayer.

No. Look for a double layer of phospholipids, arranged “heads out, tails in”
peripheral protein

Awesome. “3” is a peripheral protein.

No. You’re looking for a protein that’s attached to the phospholipid heads.

[/rdgm]

Highlighted hotspots

Our next example shows another user interaction – image objects are highlighted and labeled on hover.  Notice that we’ve very precisely defined particular parts of this diagram – and it’s easy to do!  We have a “paint fill” feature for defining irregular hotspot areas, as well as options for ellipse, rectangle, and hand-drawn areas.

[rdgm style=”width: 650px !important; min-height: 400px !important; border-width: 0 !important;” swinginghotspot=”true”]

[q hotspot_user_interaction=”info_only” show_hotspots=”hover_show” hotspot_labels_stick=”hover_show keep”] Hover to identify parts of this plant cell

cell membrane

 

No. The membrane is the boundary of the cytoplasm, but inside the cell wall.
cell wall

 

No. The cell wall is the outmost part of a plant cell.
cytoplasm

 

No. The cytoplasm is the fluid that fills the inside of the cell, holding all the organelles.
chloroplast

 

No. The chloroplasts are filled with the green pigment chlorophyll, and they’re responsible for photosynthesis.
Central vacuole

 

No. Look for a large, membrane-bound organelle filling most of the cell’s volume.
mitochondria

 

No. The mitochondria are cell-like structures in the cytoplasm. Their inner membrane is highly folded.
Golgi complex

 

No. Look for a stack of flattened sacs.
Smooth E.R.

 

The smooth ER consists of membranous channels, but without ribosomes. 
Rough E.R.

 

No. the rough ER consists of membranous channels outside the nucleus, studded with ribosomes. 
Nuclear membrane

 

 The nuclear membrane surrounds and protects the chromosomes. 
Nucleolus

 

The nucleolus is a spot within the nucleus where ribosomes are made.
Chromosomes

 

No. The chromosomes are inside the nucleus. They’re (incorrectly) represented here as if the cell were dividing, with an “X” like shape.

[/rdgm]

 

Note on WordPress “Block Editor” (Gutenberg):  To create a new hotspot image with the Swinging Hotspot Wizard, start a “Classic” paragraph or block, and click the   icon.  (You may first have to click the “Toolbar Toggle” icon — the “neon-cocktail” icon is in the second row.)

Leave a comment

Your email address will not be published.