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.

Image 9

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.

Image a

Task 2 - C2a. The Importance of Plagiarism

Page 3: Grab learners’ attention with plagiarism cases.

Image b

Task 2 - C2c. Practice correcting errors

Page 4: This is where the citation learning happens.

Image c

Workshop Tool

Image d

Tool Sample

Image e

Task 2 - C2d Group Workshop

Page 5: Group meeting to correct paper that lacks citations and references.

Image f

Task 2 - C3a. Assessment of Workshop

Page 6: Instructor assessment.

Image 10

Task 2 - C3b. Summary

Page 7: Student learning outcomes.

Image 11

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.Image 12

B1a. Navigation and Tracking Page (clipped 2/6)

The landing page serves as the central navigation point to launch the “Why Source?” Introduction.

Image 13

B2a. Introduction Page (Intro at top, fragment)

Image 14

B2a. Introduction Page (Rubric, fragment)

Image 15

B. C1 Content – Plagiarism Case Studies (fragment)

Includes Video and Audio players.

Image 16

B. C2 Content – API Reference Instruction (clipped)

Includes Generative AI and formative assessment data that is passed to C5.

Image 17

B. C3 Content – Reference Correction Practice (fragment)

Includes formative assessment data that is passed to C5.

Image 18

B. C4 Content – Plagiarism Avoidance Workshop (fragment)

Includes Generative AI to support plagiarism checks and summative assessment data that is passed to C5.

Image 19

B. C5-1 Instructor Review (clipped)

Displays key learning achievements by students from C2, C3, C4. Supports grading and comments.

Image 1a

B. C5-2 Instructor Assessment (fragment)

Image 1b

B. C6-1 Student Master Completed (clipped)

Image 1c

B. C6-2 Student Master Completed (fragment)

Image 1d

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.