Forum Discussion
Heart Anatomy Lab
A subject matter expert came to me with an inquiry about converting a lab from their anatomy & physiology course into something in a digital format. We started with a simple image of a heart, and the goal was to label the parts of a heart and assign points based on their labels (and communicate those points to our LMS of course). I quickly got excited and knew there was a way I could accomplish this with Storyline.
As I got started on the project it became very daunting, as I couldn't use traditional storyline graded questions to accomplish what I wanted. ESPECIALLY because I couldn't use JavaScript. I ended up using a complex combination of states, triggers, variables, AND storyline graded questions to pull it off.
This video is an explanation of how the whole process went, what work arounds had to be found, and what finally clicked to make this project work. It is in no way up to my personal visual design standards, but that should come later!
I would LOVE to hear from others if there are different ways I could have pulled this off. Again, keeping in mind I couldn't use JavaScript. Below I am including a link to the project on Review360 and a step-by-step explanation.
1 Reply
Hi Cameron,
Thanks for sharing your example—I took a look, and I think it’s clear and works well as it is!
However, if you're looking for alternative approaches, I’d probably go with a “Drag and Drop” question from the Freeform options.
This would allow you to enlarge the heart image in the center, since you wouldn’t need the extra space on the left and right. I’d place the radio buttons directly on the parts of the heart that need to be labeled.
Then, I’d turn the labels into draggable buttons and position them either at the bottom of the slide (like in your example) or on the sides of the heart.
That way, the user just drags each label to the correct part of the heart. You could even play with button states—highlighting which ones still need to be placed, for example.
Why Drag and Drop? I find it more intuitive, it doesn’t require extra triggers, and it gives you more space to work with, so you can make the image larger and clearer.
Also, I don’t think you need a separate slide for submission before showing the results. You could simply reveal the results when the user clicks Submit. Instead of using the default player button with an arrow, you could insert a custom Submit button on the slide and adjust the trigger accordingly.
I’d love to see an analysis slide after the results—maybe showing the heart image with the user’s submission, highlighting incorrect labels in red/gray and correct ones in green. That would be super helpful!
My example below is simplified—just to show the structure I’d use. (The smiley face stands in for the heart illustration, and the numbered buttons represent anatomical labels.)
