• Skip to primary navigation
  • Skip to main content
  • Skip to footer

Jessica Ehleben Shields

UX Expert, Visual Designer, Web Developer, Leader

  • Home
  • About
  • Design Process
  • Portfolio
    • UI Design
    • UX Design
    • Print Design
    • Visual Identity
    • Publishing Design
    • Multimedia Design
You are here: Home / User Experience Design / JavaScript UX Design for eLearning

JavaScript UX Design for eLearning

JavaScript Learning Path Model
JavaScript Learning Path Model

Table of Contents

  • Summary
  • Results
  • Research
  • Methods
    • Conceptual Comprehension
    • Memorization
    • Objective Feedback

Summary

Learners in this course are provided an eText to learn JavaScript and administered an objective exam to determine competency. The 6-month completion rates were 76% and the feedback about the UX was poor.

There were two major research goals:

  • What skills do learners need to demonstrate the learning objectives?
  • Do learners have the right resources for those skills?

Results

9.2%
Increase

Prior to this project, the 6-month completion rates were 76%. After developing a targeted learning path 6-month completion rates rose to 83%.

Learnner feedback: 

“I sincerely appreciate all your help. The learning materials, study guide, and sample tests you created were excellent. You are extremely technically knowledgeable on the subject and excellent at explaining challenging concepts in an easy-to-understand way. This is a rare skill and you have mastered it.”

Andrew D.

Research

I conducted individual user interviews with 50+ learners that had taken and failed the exam at least once. These interviews centered around their preparations for the exam, experience with the exam, and course satisfaction. Questions asked:

  • Tell me about your experience with the assessment.
  • What surprises were on the assessment?
  • Which learning materials were helpful?
  • Which learning materials were missing?
  • What gaps did you find in the learning materials that were on the assessment?
  • What do you think would help you succeed on the next attempt?

Methods

I targeted three skills to develop competency: conceptual understanding, memorization, and objective feedback.

Conceptual Comprehension

This is where the bulk of learning takes place. Because we learn differently I sought to develop resources for video instruction and hands-on practice. First I developed a study guide listing each concept covered with links to examples on W3Schools.com:

  • What is JavaScriptDocument Object Model (DOM)
  • Including JavaScript
  • Variable
  • Statements/Expression
    • comparison & logical
    • conditional
  • Operators
    • assignment
    • arithmetic
  • Data types
    • number
    • string
    • Boolean
    • null
    • undefined
  • Data Type Conversions
    • parseInt()
    • parseFloat()
  • Objects
    • properties
    • methods
  • Common Methods
    • alert()
    • prompt()
    • confirm()
    • document.write()
    • isNaN()
    • toUpperCase()
  • Events
    • abort
    • focus
    • blur
    • change
    • error
    • select
    • load
    • unload
    • mouseOver
    • mouseOut
    • click
    • reset
    • submit
  • Functions
    • parameters/input
    • calling statement
    • return values/output

Then I created a video recording from a live course that covers the basic concepts with examples: JavaScript Overview Webinar 

Finally, for learners that required additional hands-on practice, I outlined free online resources within three sources. I connect learners to one of these three resources based on prior experience and learning style.

W3Schools

Complete these W3Schools JavaScript Exercises.

Codecademy

Complete these interactive, tutorials on Codecademy.

SoloLearn

Complete the interactive lessons on SoloLearn .

Memorization

Once the concepts of JavaScript are solidified, there is necessary memorization to successfully prepare for an assessment. This includes remembering key vocabulary, methods, and properties. I developed a set of interactive flashcards to help learners target recall: JavaScript Quizlet

The quizlet offers learners multiple modes to work with the terms:

  • Flashcards
  • Fill-in-the-blank
  • Tests
  • Games
Screenshot of Quizlet designed to help with memorization of key terms
Screenshot of Quizlet designed to help with memorization of key terms

Objective Feedback

The final step in preparing for an assessment is objective feedback to determine readiness and identify competencies that need further work. Because the course does not provide targeted practice items for JavaScript I developed a 37 item JavaScript Quiz

Screenshot of objective JavaScript quiz designed to improve the UX
Screenshot of objective JavaScript quiz designed to improve the UX

Created in 2019Key Skills: Assessment Design, eLearning, JavaScript & PHP & PythonDesign Type: User Experience Design

Footer

Skills & Competencies

2012 Vice Presidential Debate (7) Adobe Flash & After Effects (4) Adobe Illustrator (28) Adobe InDesign (29) Adobe Photoshop (9) Amazon Kindle (1) Assessment Design (3) Design Thinking (8) eLearning (11) Genesis Framework (5) HTML and CSS (16) Instructional Plans (1) Instructional Video (5) Invision & UXPin (2) JavaScript & PHP & Python (19) Leadership (5) Marketing & Advertisement (7) PowerPoint (4) Research (6) Shopify (1) Third Century Campaign (9) Universal Accessibility (6) WordPress (11)

Portfolio

  • Development (3)
  • Environmental Design (6)
  • Multimedia Design (8)
  • Print Design (24)
  • Publishing Design (6)
  • Research (4)
  • User Experience Design (8)
  • User Interface Design (17)
  • Visual Identity (9)

Learn More

  • About Jessica
  • My Design Process

Special Projects

  • Third Century Campaign
  • 2012 Vice Presidential Debate

Jessica writes about skills for academic success at collegestudysmarts.com

Jessica Ehleben Shields has 20 years of experience in visual design, web development, and higher education.

© 2026 All Rights Reserved · Contact · Connect on LinkedIn