Articulate Weekly Challenges

By day, I am an e-Developer for Briljent. By night, I sharpen my skills demonstrating a solution to a weekly challenge prompted by Articulate.

#379 Using Virtual Tours and Field Trips in E-Learning

We attended a Star Party where an astronomer pointed out summer constellations of the Northern Hemisphere under one of the darkest skies in the US. I took photos of the indoor exhibit. We took a panoramic photo using my cell phone and I was able to adjust the canvas size height, edit it, and upload it as a 360 degree image in Storyline360. I recreated the exhibit displays I had clear photos of, simplifying some of the text while communicating main points.

Features:

  • 360 degree image for virtual tour

  • Custom slide interactions with digitally recreated exhibits

#378 Create Your Own E-Learning Challenge (2022)

This week, my challenge was to create a Collpase/Expand effect within Storyline360. This is my first iteration and is a little messy. I have added a link to the .story file in Review 360. If you know of a more efficient way to achieve this effect, I'd be happy to learn!

Features:

  • Hover state changes

  • Custom single slide interaction

#377 Quick and Dirty Image Effects for Cover Slides

We scheduled a tour to watch up to 10 million bats exit a maternity cave at sunset tonight -- a new adventure to kick off our Father's Day weekend.

Features:

  • Hover state changes

  • Entrance Animations

  • Personal Photography and Video

#376 Creating E-Learning Templates from Vector Graphics

I created a hover-based interaction using the vectors from a free-license Adobe Stock .ai vector image. I copied from Adobe Illustrator, pasted into PowerPoint, then selected sections of the scene to paste into my Storyline slide, piece by piece.

Here is the original vector image:
https://stock.adobe.com/images/

Features:

  • Hover state changes

  • Custom single slide interaction

#375 What Should Course Designers Know About xAPI?

This challenge has prompted an educational week for me. Over the past few days, I have been wrapping my mind around the concepts I was introduced to, and decided to make a tutorial I can review later to help me remember what I've learned. It's currently incomplete, although I plan to update this as I gain more knowledge and practice.

Features:

  • Hover state changes

  • Custom tab navigation

#374 Zooming and Magnifying Parts of an Image in E-Learning

I recently heard about a customized map maker, Felt.com, and explored a few of its features to recreate my hiking experience at Lost Maples State Natural Area. I used the park trail map for descriptions and pinned sites, as well as trail color coding, then inserted my own photos from my experiences in the park for a more interactive version of the park's PDF and paper map.

Features:

  • State changes

  • Custom template and color scheme to coordinate with Felt's brand

#373 Course Starter Templates Inspired by Restaurant Menus

I enjoyed the Hello Matcha menu from Art of the Menu and developed a simple Course Starter demonstration inspired by the physical and digital menus of the restaurant.

Features:

  • State changes

  • Multiple Response Quiz demonstration

  • Numeric and Text input field demonstration

  • Custom template and color scheme to coordinate with Hello Matcha's brand

#372 Using Button Sets to Create Interactive Objects in Storyline360

This was such a helpful challenge. Button Sets really do simplify selecting between options. When I considered sets, I thought about furniture sets, and created this Workspace design interaction using Button Sets and Vectors. (Cross-posted for 376 Vector challenge)

Features:

  • State changes

  • Button Sets

  • Custom template and color scheme

#366 Blurred Backgrounds in E-Learning Course Design

A simple demo of the impact of blurred backgrounds on text fields, using photos I took of my hometown during my last visit 4 years ago. Images and .story file are attached in Review360 for your downloading delight:

Features:

  • State changes

  • Triggers based on state changes

  • Custom template and color scheme

#364 E-Learning Podcasts: Audio Interviews with Course Designers

A 10 question mock-interview in podcast format, including audio options paired with text.

Features:

  • State changes

  • Text and Audio to accommodate access modalities

  • Text that meets WCAG 2.0 AAA Guidelines for contrast and size

#360 Using Button UI Kits to Jumpstart E-Learning Course Development

I created a simple button and UI set with four state changes and lesser used shapes, but instead of just showing the end screen in the beginning, I created a few slides to walk the user through experiencing the button states and other buttons in the set.

Features:

  • State changes

  • Triggers based on state changes

  • Custom template and color scheme

  • Text that meets WCAG 2.0 AAA Guidelines for contrast and size (normal)

Permalink: 360 'alawa Button UI Set
Download: 360_'alawa_Button_UI_Set.story

#359 Design an E-Learning Template or Interaction for Valentine's Day

I created a template that appears to move left to right in an infinite loop, but actually uses the Jump To Slide On Click trigger to highlight each icon's information, focusing on self-care and self love for Valentine's Day.

Features:

  • Custom template and color scheme

  • Text that meets WCAG 2.0 AAA Guidelines for contrast and size

  • Images and color schemes that meets WCAG 2.0 AA Guidelines for contrast

#358 Create a Custom Table of Contents Menu for E-Learning Courses

A simple menu template, where categories are listed to the right, and pages within the categories are represented by squares on the left side of the main navigation pane.

Features:

  • Custom template and color scheme

  • Custom menu navigation

  • Animated menu elements

#356 Animated Cutouts and Masking Effects in E-Learning Design

I was interested in creating a magnifying interaction, and created a custom slider, using the magnifying lens as the slider and an old news article with a poem by Edgar Allen Poe as the slide. I used masking effects and state changes to create the magnified effect to the right.

Features:

  • Custom slider

  • Masking effect with state changes

  • Images and color schemes that meets WCAG 2.0 AA Guidelines for contrast

#355 Using Interactive Dials as Draggable Menus in E-Learning

I customized an oversized dial and placed it off the slide to create this draggable dial menu featuring four chicken entrees from different countries.

Features:

  • Custom draggable dial menu

  • Text that meets WCAG 2.0 AAA Guidelines for contrast and size

  • Images and color schemes that meets WCAG 2.0 AA Guidelines for contrast

#354 How Are E-Learning Designers Using the Pantone 2022 Color of the Year

I took this challenge as an opportunity to complete a color study of Very Peri as well as all four color palettes curated by Pantone that harmonize, complement, or accent the 2022 Color of the Year. The resulting work does not dabble in interactivity, so much as it was a challenge of visualizing the color, playing with visual design, and using the drawing tools in Storyline360. I spent hours drawing every scene with shapes to bring the colors to fruition in a static story.

Features:

  • Graphics drawn completely in Storyline360, visualizing the Pantone palettes.

  • Text that meets WCAG 2.0 AAA Guidelines for contrast and size

  • Images and color schemes that meets WCAG 2.0 AA Guidelines for contrast

#353 Give Your E-Learning Course an Accessibility Makeover

Here are steps I took to make a previous work more accessible.

1. Removed layers and "merged" information on the layer onto the base slide.

2. Used Colourcontrast.cc to fine tune background and foreground colors.

3. I referred to WebAIm's WCAG 2.0 Checklist, their own interpretation of Guidelines

4. I downloaded NVDA screen reader and tested my story file, repeatedly.

5. The simplest way to change alt-text is to go to Home on the Storyline ribbon while in Slide View and click on Focus Order.

Features:

  • Text that meets WCAG 2.0 AAA Guidelines for contrast and size

  • Images and color schemes that meets WCAG 2.0 AA Guidelines for contrast

  • Alt-Text for up and down arrow use on NVDA screen reader

#352 Using Timed Activities in E-Learning

Have a minute? How about an Internet Minute? I used Slide.ElapsedTime to show layers over milliseconds, which was helpful for fine tuning data to appear as the minute visually elapses.

Features:

  • Slide.ElapsedTime variable used to fine tune triggered events

  • Animated layers

  • Link to inspiration

#351 Using Design Themes to Create Light and Dark E-Learning Templates

I ordered my first Cortado from a cafe last week and was curious about what a Cortado was. In effect, I learned about Espresso based drinks and the basic ratios of how to make them. This morning, I worked on creating a light and dark "mood" for my experiment with sliders and espresso.

Features:

  • Slider interactions

  • Light and Dark theme selection

  • Animated layers

  • Background audio

  • Links to audio credit

#350 Using Accordions to Chunk Info and Reduce Cognitive Load in E-Learning

When I taught second grade, Rainforest Flip Books were a popular interactive notebook my students created. I merged that idea with inspiration from PBS.org and created a Storyline 360 accordion version presenting the layers of the rainforest.

Features:

  • Accordion click-to-reveal interactions

  • Animated layers

  • Background audio

  • Links to inspiration and audio credit

#349 Using Click-And-Reveals to Show More Info in E-Learning

I turned a mindful.org article into a tab-style click-to-reveal Mindfulness App Preview project. I'm considering adding information about each app to make it more informative.

Features:

  • Click-to-reveal interactions

  • Mobile-style interface

  • Graphic creation

  • Brand representation

  • Links to mobile app websites

#348 How to Succeed as an E-Learning Designer or Freelancer

I am learning about how to use Storyline in hopes of entering the field as an e-learning designer/developer, so I honestly do not have advice to give about achieving success. My fiancé offered this statement as a quote to animate in Storyline, and gave me ideas about how he wanted his quote to come to life. This is what I came up with for an interactive and static version of his quote:

Features:

  • Hotspots and Drag option

  • Triggered events

  • Animated transitions and emphasized motions

#346 How are Designers Using Anthropomorphic Characters in E-Learning

This week, I focused on manipulating the timeline, adding audio, and inserting shapes to create the background and anthropomorphic character:

Features:

  • Click-to-reveal interactions

  • Animated layers

  • Background audio

  • Graphic creation

  • Links to information sources

#345 Using Font Games to Learn About Typography

My first use of Drag and Drop Interactions as well as many State Changes. Explore some of what goes in to Font Pairing selections in this (incomplete) demo course:

Features:

  • Drag-and-Drop interactions

  • Selection and submission feedback

  • State change interactions

  • Animated layers

#159 Multiple Choice Quiz Makeovers in E-Learning

I created a quiz for identifying face shapes, a reinterpretation of Zenni Optical's website quiz. This is a different sort of multiple choice quiz and was interesting to write variables for. What's your face shape?

Features:

  • Click-to-reveal interactions

  • Quiz variables

  • Brand representation

  • Links to shop on Zenni.com