Creating Fully Accessible Resources from PowerPoint

MASK Model - 6 Points of View

The Minnesota Department of Transportation (MnDOT) had the foresight to capture critical information from their experienced employees. They used a technique called MASK (Method for Analyzing and Structuring Knowledge) creating knowledge books for bituminous, concrete repair, and the engineering of bridges.

The end result of MASK is a PowerPoint organizing the text, images, and videos in a single, very large file. Historically MASK has been used for very proprietary information such as the French Atomic Energy Commission and the formulas and processes for KRAFT Foods. So, the size of the file was not as critical.

However, the MnDOT wanted to make their knowledge available to the inspectors and local engineers out in the field as well as on the MnDOT website. Each Knowledge Book averaged 300 slides and took up almost one gig of space. The PowerPoint files couldn’t be conveniently viewed on a phone or tablet and they weren’t accessible to people with disabilities.

We decided to convert the PowerPoint slides into a web-based presentation using Articulate Storyline 360. This not only met MnDOT’s requirements but added features such as interactivity and basic animations.

Here is a screen shot from the original Concrete Repair Knowledge Book:

Here is the same information using Articulate 360. (Click on the image to view the interactive page.)

Notice how the dense PowerPoint text was converted by chunking the content into two hot tabs, focusing the reader’s attention. Information common to both hot tabs can be easily displayed using the base layer.

Benefits of the Converted Knowledge Books

Here is a list of some of the benefits we’ve gained using Articulate Storyline:

  • Content is completely interactive and can be published on the web. (Published Storyline files are encrypted so changes cannot be maliciously made to the presentation.)
  • Content is responsive. It can be viewed on a smart phone, tablet, or desktop computer.
  • Content is accessible. Videos include closed captioning and graphics include alternative text for screen readers.
  • Animation can be used to demonstrate key principles.

Workflow Bonus

As each knowledge book was being converted we used Review 360 (part of the Storyline suite) to communicate any changes or modifications to each page. Content experts at MnDOT could view the current version of the knowledge book, using a hidden URL. Review 360 automatically made a screenshot of the page they were viewing. Even people who aren’t comfortable using new software found Review 360 easy to use.

There are two main screens in Review 360. Here is the main Review view:

Review 360 Review Page

This is the Feedback view showing the discussion thread for each edit:

Review 360 made the editing process smooth and efficient for both the content experts and the developer.

You can learn more about the MASK methodology at KRAFT Foods here.

The MnDOT Newsline February 2019 includes an article describing the knowledge books at MnDOT.

Mike Leegard created this presentation showing how MnDOT uses MASK to create their knowledge books.

Parson Problems for Interactive Assessment

Example of a Parson Problem

In his blog, Mark Guzdial highlights Parson’s Problems offer the same learning gains as writing or fixing code. Mark highlights how useful Parson’s Problems can be for interactive learning modules.

Not Just Computer Science

The article emphasizes how useful Parson Problems can be for computer science. Many other fields use this same type of learning instruction. For example, a healthcare module might use this technique to ensure students learn specific steps for procedures like taking a person’s blood pressure or drawing blood.

Increasing the Challenge with Distractors

To increase the challenge to students, add distractors. Instead of one-to-one answers, add extra items not critical to the process.

Try a Parson Problem Yourself!

Here is a sample Parson Puzzle. Students can check their learning after finishing the tutorial on using CSS Flexbox.  The tutorial shows the code with examples. This puzzle summarizes the content midway through the tutorial. Notice the distractors.

You may not be familiar with Flexbox coding, so here is a screenshot of the correct order 😉

Flexbox answer to Parson ProblemFor more details, read the original study, Parson’s Programming Puzzles: A Fun and Effective Learning Tool for First Programming Courses by Dale Parsons and Patricia Haden.

This sample Parson Puzzle was created using Articulate Storyline 360.

Battleship: Waterfall Design vs. Agile

The classic game of Battleship has been repurposed to demonstrate the effectiveness of agile methods.

Mark Suurmond has created a simulation, available on GitHub, that allows programmers and students to experience the difference between the waterfall design process and the agile process.

When the simulation first displays it is set to 40 iterations.  The player has to guess where on the board the ships are located, but doesn’t find out until the last attempt is finished.

There is some success, but also a lot of wasted effort, much like we often experience when developing a project using the waterfall method.

 On the second trial, the programmer gets feedback after every attempt. This would be like having the client at your side each time you wrote a bit of code. The finished product is much more “on target”, much like we experience when using agile methods.

The third and fourth trial is run, getting feedback every 5 iterations, and then every 10. Running this simulation the programmer can gain an appreciation of constant feedback vs. getting regular feedback after multiple iterations. It isn’t always possible to meet after every programming decision is made.

Here is a guide so you can implement this with your own students or programming team: lab: Battleship Waterfall vs. Agile

Photo courtesy of Wikipedia. US Navy 100530-N-2798F-011 Aviation Ordnanceman Airman Justin Stout and Aviation Electronics Technician Airman Anthony Bertolino spend their break playing the game Battleship aboard the Nimitz-class aircraft carrier USS Harry S.jpg


Course Design Philosophy

Externsteine rock formation in Horn-Bad Meinberg, GermanyAs I develop more and more online courses I’m starting to fine-tune my design philosophy. How do these bullet points fit with your own experience?


  • Have a clear path for the learner to follow.
  • Strive for deeper learning.
  • Focus on the learning, not the technology.
  • Be platform independent whenever possible.
  • Utilize open source frameworks
  • Create adaptable content for both mobile and desktop devices.
  • Pluralize your content. Present the same information in multiple formats for maximum learning.
  • Always nudge your students’ learning up to the next level of Bloom’s taxonomy.

Presentation of Material

  • Incorporate short video (3-4 minutes) with sound and closed-captioning.
  • Written materials must be presented in an interesting manner.
  • Create succinct checklists for future fast reference and re-learning.
  • Edit, edit, edit. Be Hemingway by removing all extra words, phrases, and explanations.

Utilize the Writer’s Craft

  • Create suspense
  • Be clear and organized
  • Use scenarios, creating memorable and personable “characters” that the learner can identify with.
  • Overlap information in a kind and gentle manner.
  • Follow the Hero’s Journey pattern  established by Carl Jung, Joseph Campbell, and incorporated by George Lucas, director of Star Wars.

Listen Closely to Your Students

  • Their questions tell you where you need clarity.
  • Their observations or ideas can be used to enhance the content.
  • Ask for their feedback near the end of the course.  What worked? What didn’t. What should I change? Take notes!
  • Throughout the course, highlight changes you’ve made to the course as a result of previous student input.

Check Your Writing Before You Send It ( in actionIn today’s online world you are very often judged on how well you write. In the pre-Web days of the 80’s we would always pass a letter or report around the office to at least three people, checking for typos, grammar, and spelling errors. (We also helped each other check for "attitude" in our writing.)

With you can do this quickly yourself. This free service checks for spelling, grammar, word choice, style, and vocabulary words. It will even give you a letter grade based on all these factors.

Unlike Word and other grammar/spelling checkers, seems to catch those subtle mistakes such as when to use "past" and when to use "passed".

(The only thing doesn’t do is check for ‘attitude’. You’ll have to do that on your own.)

The site also includes a Vocabulary Builder. This is a great tool to use in the morning to get a "word for the day" and then see how many times you can use it throughout the day. At the end of the day you can review the word and write it down in a journal to show yourself how many new words you are adding to your vocabulary.

The creators at the site plan to offer premium services in the near future and are always open to donations. (They should include a PayPal account on their home page!) They say in the FAQ that they will always offer the basic service for free.

I’m going to run this article through the PaperRater to see how I’ve done. I’ll take a screen shot so you can see the before "picture". (Click on the image for a larger view.)

Report on this article by PaperRater

 Wow, look at that! I spelled "grammar" two different ways! Oops. (Also my vocabulary was low.)

Make a good impression. Let the world know how professional you are. (And improve your writing skills at the same time!)

Use for all your business writing.


The Finger Dance

Computer KeyboardOn the keyboard? Stay on the keyboard. On the mouse? Stay on the mouse.

Every time you switch back and forth your brain has to remap itself to new processing areas. 

 For example, if you are editing web pages:
1. Start out in your text editor.
(Have FireFox already open and viewing the same file:  File/Open File)
(Using your pinky finger on the CTRL or ALT key so you can do these one-handed)
2. CTRL s
– Save
– switch to FireFox
4. ALT r 
   – Refresh the web page to see your changes
– switch back to your text editor  (Hit TAB multiple times to jump to other open applications.)
6. Edit the code in your editor.
7. CTRL s
– Save your changes and loop around again.

 Other very help hot keys (to keep your brain from switching tracks every few seconds)

CTRL a – Select all information (without having to scroll down)
copy the selection  or CTRL x  – cut the selection
– insert the selection (think of the v as a wedge inserting at the cursor position)

And my all time favorites:

CTRL z – undo  (walk backward through your changes)
– undo your undo

All of these work on all operating systems which makes them especially powerful.

Remember the mantra: On the keyboard? Stay on the keyboard. On the mouse? Stay on the mouse.

6 Success Tips from a Student

I recently received a letter from Chad Peterson, one of my Information Systems students who will be graduating this spring. He graciously took the time to write, giving me feedback on some of the things he appreciated about my courses.

In addition, he also listed several things he has learned about becoming a successful student. With his permission, I thought I’d pass these on to you.

Chad’s Tips
To current and future students, as a student who has many ups and downs with these courses there are a few things that will help you out as you go through the [Computer Careers] program:

  • The first thing is to do the tutorials! From start to finish! It does seem like a lot of work at first, but I’m being honest in that it truly does not take a lot of time if you give yourself enough time.
  • Being organized is the number one key and Peter emphasizes that very appropriately.
  • Do the self-quizzes as well! The trick is to keep doing the self -quiz as you finish each section of the tutorials.
  • Coming to class with questions about the material is a huge advantage because otherwise I have personally found that I lose focus because I am not caught up, and when it comes time to ask questions, I either ask very dumb, out of place questions.
  • Asking a lot of questions and being involved in the class discussion is also another big way to stay focused and excited about what you are learning.

  • Another great piece of advice is to use the old- fashioned pencil and paper. Sketching/drawing/writing your ideas down before you start with the code will help you tremendously. It is much easier to write code and view it when you already have something to look at. This comes in very handy when starting out with a project.

Thanks for the kind words Chad and the excellent advice for other students.

Noodling and Hunkering

One of my favorite technical words is “noodling”. I have my students noodle around with code to see how it works – have them break it and then fix it again to get control.

I often noodle around with code when working on a project, trying to stretch things a little more, trying to find out “What happens if I do this?”. This is especially useful when working with CSS and a new website design.

At South by Southwest I heard Jared Spool from User Interface Engineering talk about design and user interfaces. I’m on their mailing list now and today he introduced me to another technical term: hunkering.

Here’s an excerpt from his article:
The behavior of hunkering was the same [for all types of people]:

  1. They lay out whatever physical pieces they have — raw materials,
    sketches, and images they’d collected.
  2. They work to put things close to where they’d be in their final
    form, relative to the other pieces.
  3. Then they step back and ponder it for a while.
  4. In some cases, they walk around to view it from a different
    angle, to see what it looked like from another perspective.
  5. Then they start back up to work.

This can be done in any type of business from web design,  to programming, to cabinet making, to dress designing.

Hunkering also ties in with a book I’m reading, A Whole New Mind, by Daniel Pink. Daniel talks about using both sides of the brain, both the analytic left side as well as the more artistic, free-flowing right-side in order to deal with challenges we face in today’s world. No longer can we just be analytical thinkers working a problem in a straight line. Instead, we have to become more artistic thinkers, looking at things as a whole and getting ideas from other disciplines. Jared’s term “hunkering” describes how to do this process in a very real manner.

So, next time you are starting a project, before you start writing code or hammering nails, do some noodling around and hunkering to kick your right brain into gear.

Here’s Jared’s article: Hunkering: Putting Disorientation in the Design Process.

Browser Shots allows you to specify the URL of a target website and then proceeds to take “pictures” of how the page will look in each of the browsers you selected. This is a great way to do the final testing on how well your pages work without having multiple browsers loaded on your machine.

Here’s what the home page looks like:

Click for a larger view
Click for a larger view

There is also a link that will validate your CSS code as well as your XHTML code.

The top graphic a look at my home page which is a valid (strict) XTHML page. Notice how text and images don’t show up on all the browsers including the new IE 8.0

Special thank to Tim for telling me about this valuable web site.