Articulate Weekly Challenges

Happy Holidays, all! The E-Learning Heroes Challenges community has been a valuable place to spend my time. It's opened up opportunities for meaningful work and friendships. Thanks to David Anderson, Articulate, and the esteemed ELH challengers!

I played with a mix of Rise360 and Storyline360 this week. Take a dive into the Magentaverse palette and learn about additive color models.

Features:

• Single page website aesthetic with Rise360 tabs and collapsible accordions

• Storyline interactive elements: Dial and Slider for color changing

• Multiple state changes applied throughout palette exploration activity

Liter of Light (Isang Litrong Liwanag) has been a charity I have been following for over 10 years. It was especially important to me not only because of its human and ecological impact, but personally because it shed light on my mother's upbringing on a Post-WWII, off-grid farm in the Philippines.

The sections about how the inventions work are included, but brief, because I really wanted to set the stage for the affective portion of this storytelling - the reality that moved me even a decade ago. I may add to the "how it works" section in time.

Features:

• Motion paths, drag and drop interaction to aid storytelling

• Embedded video to give context to "how it works" topic

• Multiple triggers for controlling the fluid navigation response of the project

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

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

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

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

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

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

Features:

• Text Entry fields

• Print Slide trigger

• Open-ended user response

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

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"

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.

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

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

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

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

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

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

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