E-Learning Challenge #89 – Creative Menu Buttons

THE IDEA: I’ve racked my brain for a few days trying to think of an everyday application with lots of buttons that I could recreate for Challenge #89-Creative Button Effects. For some reason, a drive-through restaurant came to mind… so many options to choose from. I locked onto the idea of creating different button shapes for each category of food, although experimenting with different Hover and Visited states for each individual button.


Click to play

THE TECHNICAL SIDE: I set up the menu in Articulate Storyline as a single slide with 7 slide layers:

  1. Headings
  2. Main Dish buttons
  3. Side Dish buttons
  4. Desserts buttons
  5. Veggies pop-up (see the Troubleshooting section)
  6. Thank you

Each of the buttons has a Normal state, a Hover state, and a Selected state. I added the icon and text label on the Normal state, so the graphic would act as a group. I downloaded the icons from flaticon.com, which is definitely a new favorite resource.

Of course if I was creating these buttons on a more traditional module, I would use a more consistent style on all the buttons, but I tried to take advantage of the chance to play with different style treatments: pop-ups, color changes, 3d shadows, etc.

Between the last week’s challenge and this one, I learned how to create a transparent player, so that the module seems to float on a white background. I really like this clean look, especially when there is no need for the Next/Previous buttons or the Resources link.

TROUBLESHOOTING: Although I was already familiar with the functionality of States in Articulate Storyline, this was an excellent opportunity to really explore how to use them as well as to brainstorm button graphics.

The biggest headache I ran into was that sometimes the states seemed to overlap each other in ways that I couldn’t figure out. The graphics of the “Visited” state sometimes behind the “Hover” state. This seems to be a common problem (as noted in this discussion on the e-Learning Heroes Community) for other users as well. I was able to solve this issue for a several of the buttons, but others I never could. Instead I figured out how to adjust the design to work within the limitations of the software.

I also ran into an issue with the “Fresh Veggies” Hover state. Because the pop-up bubble overlaps the shapes on the Main Dishes layer, it sometimes hid behind those graphics, depending on the order in which you opened the layers. (I’ve actually run into this issue before when it was impossible to order the shapes on the timeline to avoid this unwanted effect.) The workaround I discovered today was to place the pop-up shape on a new layer and add an object trigger to “Show layer … when the user hovers the mouse over.”

Like many of the other submissions for this challenge, I attempted to animate some of my button states. However, I quickly realized that I was somewhat limited by the animations available in the original Storyline software (as opposed to Storyline 2). I was able to make the animations work seamlessly for the “Pizza,” “Fruit Salad,” and “Ice Cream” buttons, while I really wished for the ability to use a “Wipe” animation for several of the others.

TAKING IT ONE STEP FURTHER: This challenge was mostly about creating custom buttons, but as I read several of the resource links, I was also intrigued by the ability to add more functionality to the buttons.

  • Because my menu was divided into categories, I used button sets to force the user to select only one option per category. (tutorial on Adding Button Sets)
  • I used the Disabled state and added four variables (MainDish, SideItem, Dessert, and PlaceOrder) to force the user to choose a main dish and side item before “unlocking” the dessert options. (similar tutorial on How to Disable the Next Button Until Learners Finish Interacting with a Slide, although my scenario was a bit more complex since I was working with my custom buttons on multiple layers)


E-Learning Challenge #88 – Play-See-Hear-Learn Soundboard

There goes all of my spare time! I recently found the E-Learning Challenges blog sponsored by E-Learning Heroes. Each week they post a new challenge, inspiring you to explore the capabilities and opportunities of interactive e-learning activities. This week’s was Challenge #88-Interactive Audio: Using Soundboards in E-Learning Courses. For my first attempt… I could definitely work with that!!

STARTING WITH IDEA #1: I started by mocking up an orchestra seating chart, hoping to match each section to an audio clip of that instrument. After playing around with it for a few minutes and trying to search online for free sound clips, I decided that this idea may take more time than I have available in between real work projects right now.

MOVING TO IDEA #2: Still building off of the music theme, I decided to focus on individual notes rather than instruments. I’m not the musician in my family (my sister is!), so I was totally intrigued when I found the Online Tone Generator and could actually relate these sounds that I hear to frequency measurements. In my soundboard module, I’ve created a piano keyboard that represents one octave (C4-B4 in musician speak). When a learner clicks on each key, the tone plays, and pop-ups appear showing where that note appears on the staff, as well as the standard frequency of the note.

OneLineOctive_02Click to play

TROUBLESHOOTING THE TECHNICAL SIDE: I built the module in Articulate Storyline as a single slide with hover states for objects and a slide layer for each note. After troubleshooting the grouping and ordering of objects, I was finally able to create a seamless transition between notes with no break in sound: while listening to one note, you can hear another note with just one click.

BUILDING ON THIS IDEA: Once I had the basic interaction down, other ideas started overflowing in my head about how to add more value to this e-learning activity. Given that this was a quick project for an online challenge, I had to rein myself in this time. However, here are a few other ideas that I brainstormed as I was working:

  • Expanding beyond one octave
  • Creating songs that the learner could either follow or play along with
  • Visually representing frequencies on a graph
  • Quizzing students on which note is which
  • Assessing whether students can order the notes by pitch
  • Comparing the different waveforms
  • Featuring different instruments as if you were tuning their strings (ex. guitar, violin, bango)

Genetics Modules… “A” from ADDIE

The Genetics e-Learning Modules that I designed last year for VCOM-Carolinas Campus were so successful that I’ve been commissioned to develop two more modules for the upcoming 2015-2016 school year. Over the next couple of months I hope to report on my progress through the lens of the ADDIE model of instructional design (Analyze, Design, Develop, Implement, Evaluate).


The first step of the ADDIE instructional design model is “Analyze.” After initiating a project, it is critical to develop project goals and understand the needs of your learner.

This week I met with the genetic counselor (the subject matter expert) to kick off round two of the Genetics e-learning modules. We’ve decided to build on the templates, etc. that we used previously, so much of the analysis phase was already complete.

Here’s a recap…

Overall Purpose: Same as before… to relate classical and molecular genetics taught in the medical school classroom to the use of genetic information in the clinical setting.

Timeline: Scheduled to be delivered to the students in mid-September.

Audience: First-year medical students; proficiency in basic genetics concepts varies. The students will work together in pairs or small groups to complete the modules.

Technology: Modules will be created in Articulate Storyline and distributed to the students through a LMS. These modules should match the design layouts/template used for the previous modules.

Improvements: Student feedback from the first three Genetics e-Learning Modules highlighted the importance of reviewing basic genetics concepts such as reading pedigrees.

Learning Objectives: The modules should correspond to the learning objectives that are already established for the Genetics course. In addition, after completing these modules, a student should be able to:

  • Apply knowledge about genetics of specific cancers/disorders, and develop appropriate test strategies.
  • Analyze a pedigree to assess inheritance pattern, develop a differential diagnosis, and calculate carrier risks.
  • Evaluate medical literature, National Comprehensive Cancer Network (NCCN) guidelines, and online resources to develop a medical management plan and counsel patients.
  • Interpret genetic test reports.

Module Topics:

  1. Introduction to Medical Genetics: to explain in detail how to navigate the modules, to introduce some of the common reference resources, and to familiarize the students with the basic genetic vocabulary and language. Clinical case scenario will be Hereditary BRCA-related Breast and Ovarian Cancer.
  2. TBA: A branching scenario to explore the consequences of various testing strategies. The genetic counselor is still deciding on what clinical case scenario will be most appropriate.

Formative Assessment: Interactive, knowledge-based questions (multiple choice, ranking, drag-and-drop, etc.) will be asked throughout each module, allowing the user to self-assess his or her understanding of the important concepts. Students will receive immediate feedback after choosing an answer, confirming the correct answer or explaining why the answer choice was incorrect.

Summative Assessment: A multiple-choice exam will be administered to the class that will test the students on their mastery of the learning objectives from the modules, as well as other lectures and learning activities from the Genetics course.

Where I am now… and how I arrived here

After discovering the field of instructional design and educational technology, a metaphorical light bulb went off in my head.  Though my education and career path may seem like aimless wandering to some, I believe that each stepping stone has pointed in this direction all along. I have always been passionate about designing exceptional and accessible curriculum, activities, and assessments for students from all walks of life and incorporating technology to make learning more effective and efficient.

Knowing I wanted to spend my college years engaged in a creative, yet academically rigorous environment, I entered the Industrial Design program at Georgia Tech in the fall of 2002. During college and in the years that followed, I worked for a product design firm, designing product concepts for various industries. I enjoyed projects that required me to organize research projects and discover consumers’ unmet needs, and I looked forward to those where I could coordinate cross-disciplinary teams and brainstorm new product ideas.

However, I found myself increasingly drawn to a career as a teacher, believing that I could bring multi-sensory experiences and outside-the-box thinking to the middle school math classroom. I wrote and designed activities, supplemental materials, and exams to intentionally integrate the curriculum and fully engage my students. My instructional design efforts were often recognized and highly praised by my colleagues and administrators. You better believe that I had the best designed worksheets and PowerPoint lessons in the school!

After moving to Spartanburg, SC in 2011, I took on the role of Education Specialist at Edward Via College of Osteopathic Medicine, where I am involved in many stages of the curriculum design process, from syllabi and schedules to lecture objectives and exams. I often rely on my design experience and creative problem-solving skills to find technological solutions that address the unique needs of our students and faculty.

Even while working full-time during the day, I never wanted to leave the world of design totally behind. I have been fortunate to work on many freelance graphic design projects, as well as to coordinate the marketing and communication efforts for both Spartanburg Ear, Nose, and Throat and St. James United Methodist Church.

Whether I find myself working as an a graphic designer, an instructional designer, or a educational strategist, I am passionate about harnessing and integrating technology to meet the ever-changing needs of a 21st-century audience.