What goes into making an interactive case?
Educational Resources at UGA has a rich history when it comes to developing interactive media for students. This ranges from iBooks to VR experiences and HTML5 content. Since this case was intended for a scheduled lab activity in small groups, we chose to develop this project using Tumult Hype, with final output as an HTML5 package uploaded to UGA’s learning management system (LMS).
Tools
- Tumult Hype 5
- PowerPoint
- Adobe Photoshop
- Adobe Illustrator
Hype is timeline-based and uses JavaScript, HTML5, and CSS that is ultimately exported as an .html file that is viewed on a browser. You may be familiar with similar eLearning authoring tools such as Adobe Captivate or Articulate Storyline.
Development
Content experts, like Dr. Katie Ellis, create a PowerPoint in conjunction with us at Educational Resources to create the outline of how the interactive will flow. This includes what the narrative will be, feedback for if a student gets a question right or wrong, and what anatomical structures to show.
Assets are created in Adobe Photoshop and Adobe Illustrator and the eLearning content is built using Tumult Hype. This content undergoes multiple rounds of review.
We observe the students using the interactive media in class and take notes. Were there any hiccups with technology? Did students not notice a button because it was too subtle? This, in conjunction with instructor feedback after the activity is finished, helps us improve the activity for next year.
Design
The tab progression design was adapted from a previous successful interactive created by Mia Nickell in collaboration with Educational Resources for her Master’s Research Project. View her work here! The tabs at the top allow students to keep track of where they are at so far in the progression of the case.
Since the case followed a linear narrative that was delivered via an experienced veterinarian guiding the student through the case, I needed to make a character who suited the part. I illustrated multiple expressions to indicate approval or disapproval depending on if the answer to a question is correct.
I illustrated a horse and a dog for each case as well, since they were the main characters in the narrative!
Equine nerve block
For this case, we wanted the students to choose from a few options when administering a nerve block. Students can click one of the three colored circles to select where they want to do the block. Depending on how they answer, the veterinarian responds and redirects them to try again. Students are asked to type in what structures are affected by their chosen nerve block.
Viewing radiological findings
Both the equine and canine case involve reviewing radiographs. This includes adding toggle-able highlights to point students to radiological findings that are relevant for the case. Students can also view normal radiographs to compare in real time.
