Articulate Weekly Challenges

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

#397 Using Monochromatic Color Themes in E-Learning Design

I learned that sepia is represented on the web by a unique color: Hex #704214


I navigated to the following website to generate tints and shades of sepia and used the copy feature to build out my color theme in Storyline360: https://maketintsandshades.com/

Features:

  • Created a demo company, applied bespoke design features thematically

  • Use of subtle transition and object animation

  • Content Library photography with sepia tint applied, contrast, and brightness adjusted


#396 Custom Glossary Interactions in E-Learning

On the developer side, I created many line motion paths, and drew every graphic in Storyline. I wanted to play with features to see what I could create. I also used my first Dialog layer to share some Developer Notes (aka nerdy ramblings).

Features:

  • Line motion path title to coordinate with Universal Serial Bus defintion

  • Use of Dialog Layer

  • Graphics drawn in Storyline360


#395 Share Your E-Learning Certficate of Completion Template

My quickest challenge yet: 35 minutes from beginning to posting. Presenting a portrait-oriented certificate of appreciation.

Features:

  • Text Entry for customization

  • Print Slide Trigger

  • Print Slide actionable button hides on user click for printing


#394 How to Make the Perfect Fruit Smoothie

I was curious about allowing the user to explore nutrition data for the recipe as well as laying the ground work for an accessible smoothie simulation. I played with leveraging the timeline to create a basic animated blending effect. I'll add alternative text and resource links the next time I have a couple of spare evening hours.

Features:

  • Nutrition data explorable by user action

  • Accessible-friendly recipe simulation

  • Coming: alternative text, focus order


#393 Share Your Tips for Surviving the Zombie Apocalypse This Halloween

Something simple that I had way too much fun writing. Presents like an e-book, ending with a space for the user to write and save their own tip, ala ELH Challenge #392.

Features:

  • Print Slide trigger

  • Text Entry fields at the end of the guide

  • E-Book look and feel


#392 Using Variables to Create Question and Answer Activities

A rare bout of insomnia caused me to pull together this "Dream Log."

Features:

  • Text Entry fields

  • Print Slide trigger

  • Open-ended reponse


#391 How Do Course Designers Build Custom Graphics for E-Learning

Screencast: Creating a Scalable Vector Graphic in Google Slides. I used Articulate Replay for the first time to put my video together. It was simple and straightforward to use, and I could also publish the video to Review360. I also hosted the video on Youtube to add closed captions.

Features:

  • Closed Captions

  • Screencast demonstration of creating an .SVG in Google Slides


#390 Custom Bookmarking and Conditional Navigation in E-Learning

After work tonight, I sat and thought about what things in my life must follow a sequence, and considered my calendar. Here's an example of conditional navigation, using a Mid-Century Modern Desert .emf I drew in Storyline. The future dates are disabled until the user clicks the immediate date, which changes the state of the subsequent dates to normal.

Features:

  • Change of states, initial states set to disabled

  • States triggered by user action, subsequent links "unlocked"


#388 Using Personality and Social Quizzes in E-Learning Design

I really just wanted to play with using video, music, and images from the first Indie Game of the Year (2020), and one I want to make time to beat. I emailed the company for copyright permissions and was sent a link to their generous credited use policy.

Features:

  • Customized quiz triggers, using a visible scoring system to inform the user.

  • Adding music, video, and images from another created with credited use.


#387 Using Scrolling Panels to Manage Content in E-Learning

Thanks to Jonathan Hill's comment about Challenge #273, I modified the Javascript of Preethi Ravisankar, his own, and Chris Hodgson's to attempt to simulate a "Scrolly Telling" style website that triggers actions based on scrollbar position. I was not able to make it as smooth as I'd like yet, though it seems to work best with slow and steady scrolling.

Features:

  • Execute JavaScript for Scrollbar Area

  • Animations timed using cue points

  • Text / colors that meets WCAG 2.1 AA (Large) Guidelines for contrast and size


#386 Using Brutalist Design in E-Learning

I modified Storyline's "Resonate" template with an attempt at a Brutalist flair. Brutalist-esque style + Flat design elements + Office-themed photography (Content Library). Interactions are select-to-reveal, this time using change of states with initial states of key items set to "Hidden" and made "Normal" upon user selection.

Features:

  • Alt-Text and Custom Focus Order for keyboard / screen reader users

  • Exploration of select-to-reveal using only change of states.

  • Text / colors that meets WCAG 2.1 AA (Large) Guidelines for contrast and size


#385 Showing Interactive Comparisons in E-Learning

Happy 10 years, ELH Challenges!


This anniversary challenge helped me reflect on where the last 10+ years have gone. I compared Skeuomorphism / Flat / Glassmorphism because I did not have a strong understanding of what each trend was (and doing is learning for me). I dug up my own archived art examples, created month / year calendar examples, and wrote hypothetical productivity styles to describe the vibe of each design trend.

Features:

  • Alt-Text and Custom Focus Order for keyboard / screen reader users

  • Exploration of meeting accessibility standards using layers

  • Text / colors that meets WCAG 2.1 AAA (Large) Guidelines for contrast and size


#384 Using Pictograms to Design Custom E-Learning Characters

I continued my exploration of triggering interactions on a single slide using cue points, while leveraging the timeline to show how I layered Storyline360 shapes to form these pictogram musicians.

Features:

  • Gender-neutral Alt-Text

  • Triggers based on Cue Points

  • Text that meets WCAG 2.1 AAA (Large) Guidelines for contrast and size


#383 Project Management Tips for E-Learning Designers

I experimented with making Zoom Regions triggered by user click using this video tutorial by Veronica Budnikas: https://www.youtube.com/watch?v=VD7fdqiTIns&t=1s

The resulting single-slide project allows you to magnify four different regions that discuss tips for file management when juggling contracts and multiple clients.

Features:

  • Zoom regions enabled by user click

  • Triggers based on Cue Points

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


#381 Mixology and Beverage-Making Classes with E-Learning

Exploration of Drag and Drop with set targets and variable triggers to brew tea in a "low-tech" fashion.

Features:

  • Continuity between slides

  • Motion paths and animations

  • Drag and Drop with state changes

  • Slider with state change triggers


#380 Simulating Real-World Activites with Drag-and-Drop Simulations

A simple drag and drop task with targets set to (None) / Free.

Features:

  • Javascript Print Window exports the slide as a PDF without a header and footer

  • Freeform Drag and Drop to no set targets

#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)

#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