D292 Task 3: Prototype Mockup for an E-Learning Solution
Plagiarism lesson. Students will create a prototype mockup for an e-learning solution, demonstrating their understanding of instructional design principles and user experience.
Prototype Mockup for an E-Learning Solution on Plagiarism Avoidance
A. Context
Section ‘A.’ contains LXD Foundations materials to provide context for plagiarism instructional problem evaluated in a Weaver University case study:
Task 1 - C1. Learning Objective
Learners will apply correct APA citation techniques to revise a research paper that contains plagiarism errors, demonstrating mastery of academic integrity skills required for WR001.
Task 2 - C. Storyboard
The LxD storyboard uses GitHub Pages, Markdown, and HTML. It is published on the internet here, but all relevant elements for this assignment are captured within the document in slide-like visuals.
Task 2 - C1a. Why Plagiarism Matters
Page 1: Key questions and content; this would likely be personalized by the instructor.

Task 2 - C1b. Introduction
Page 2: Insight provided to the learner on the training objectives. This is Merril’s 1st principle with slight modifications to meet objectives of this assignment.

Task 2 - C2a. The Importance of Plagiarism
Page 3: Grab learners’ attention with plagiarism cases.

Task 2 - C2c. Practice correcting errors
Page 4: This is where the citation learning happens.

Workshop Tool

Tool Sample

Task 2 - C2d Group Workshop
Page 5: Group meeting to correct paper that lacks citations and references.

Task 2 - C3a. Assessment of Workshop
Page 6: Instructor assessment.

Task 2 - C3b. Summary
Page 7: Student learning outcomes.

B. Original E-Learning Training Module
This plagiarism workshop system is a sophisticated, multi-module e-learning solution that far exceeds the basic mockup requirements. Instead of 6-10 screens, I have prototyped a 6-module learning system.
This document is intended to cover requirements. However, the system is online and is at:
https://pages.opencodingsociety.com/plagiarism
Generative AI features require a login (user: hop, password: 123Hop!) at:
https://pages.opencodingsociety.com/login
Return to link on plagiarism (above) after login.
-
User navigation with progress tracking and introduction
-
Cross-module data integration, progression to support tracking
-
Plagiarism case studies C1
-
Mastery modules C2, C3, C4, each formative, but as whole they are summative
-
Assessment Module C5
-
Student Mastery Certificate
-
Generative AI support in C2 (API citation generator is a must try)
-
Generative AI support (Plagiarism detection, Thesis building, 5-paragraph essay, Research paper)
-
Instructor assessment tools
-
Certificate generation
-
UI/UX/LxD design to meet Task 3 requirements
-
Contains the Test Mode buttons to support quick module transitions.

B1a. Navigation and Tracking Page (clipped 2/6)
The landing page serves as the central navigation point to launch the “Why Source?” Introduction.

B2a. Introduction Page (Intro at top, fragment)

B2a. Introduction Page (Rubric, fragment)

B. C1 Content – Plagiarism Case Studies (fragment)
Includes Video and Audio players.

B. C2 Content – API Reference Instruction (clipped)
Includes Generative AI and formative assessment data that is passed to C5.

B. C3 Content – Reference Correction Practice (fragment)
Includes formative assessment data that is passed to C5.

B. C4 Content – Plagiarism Avoidance Workshop (fragment)
Includes Generative AI to support plagiarism checks and summative assessment data that is passed to C5.

B. C5-1 Instructor Review (clipped)
Displays key learning achievements by students from C2, C3, C4. Supports grading and comments.

B. C5-2 Instructor Assessment (fragment)

B. C6-1 Student Master Completed (clipped)

B. C6-2 Student Master Completed (fragment)

C. Explain Sensory and Interactive Elements
Review of learning achievements.
Visuals and Graphic Design Principles
-
The navigation page provides custom SVG icons for each module
-
Progress bar shows progressions
-
Status badges (locked/available/completed)
-
Card hover effects with shimmer animations
Interactivity:
-
Click-to-progress module unlocking
-
Interactive form submissions with real-time validation
-
Auto-loading data between modules
-
Quick comment template buttons for instructors
-
Frontend/Backend Generative AI API presentations
Videos:
-
Working link embedded in C1 Plagiarism Cases card
-
Video links staged for Navigation elements (TBD)
-
Framework ready for audio narration (video links support this)
Audio:
- Audio player integration on C1
How This Meets Academic Requirements
C1. Visual & Graphic Design Principles:
-
White Space: Clean card layouts with proper padding, breathing room between elements
-
Visual Hierarchy: Clear typography scales (h2, h3), color-coded status system, logical information flow
-
Alignment: Grid-based layout, consistent button alignment, centered progress elements
-
Movement: Smooth transitions, hover animations, progress bar fills, card lifting effects
C2. Usability Best Practices:
-
Effectiveness: Sequential learning path ensures goal achievement
-
Efficiency: Auto-loading eliminates manual data entry, quick templates speed instructor feedback
-
Engagement: Interactive exercises, visual progress tracking, achievement system
-
Error Tolerance: Graceful localStorage fallbacks, clear error messages, retry mechanisms
-
Ease of Learning: Intuitive navigation, consistent interface patterns, clear status indicators
C3. Universal Design for Learning (UDL):
-
Engagement: Multiple learning modalities (video, text, interactive exercises), progress gamification
-
Representation: Text + visual + interactive content, self-pacing through module system
-
Action & Expression: Multiple assessment formats, instructor feedback options, student choice in completion order
C4. Accessibility:
-
Perceivability: High contrast design, clear typography, meaningful color coding beyond color alone
-
Operability: Keyboard navigation support, touch-friendly buttons, logical tab order
-
Understandability: Consistent navigation patterns, clear status messages, predictable interactions
D. Acknowledgment of Sources
No sources used outside of WGU-provided materials. Sources used in visuals are self-contained and managed outside of this document.