Wine Lab by CRU

The demand of e-learning modules is on the rise as our world evolves digitally. Organizations across the world use e-learning platforms to deliver content to both their users as well as their employees. This academic project was based on the challenge of creating an e-learning application to teach users a new skill as well as test the user's skills as they progress through their learning. This assignment was worked as a team. Project team: Tamia Muller (project management), Allyssa Anderson (videography), Anna McNeill (scripting), Angela Castro(graphic design), and myself(web development).

Landing page sets the tone of the e-learning web app, as well as presents general information about the course.
Each module, or "chapter", follows a specific color palette to ensure continuity.
Drag-n-Drop assessments with the help of Javascript's dataTransfer.setData() method.
Wine lab by cru website mockup

Technologies Used

Adobe Photoshop Icon Adobe Illustrator Icon Wordpress Icon JS Icon HTML5 Icon CSS3 Icon SaSS Icon

Technical Challenges

My role as web developer in this project proved to be particularly complex in two aspects: the integration of graphical components to ensure learning, and the use of interactive assessments to effectively gauge the user's acquired knowledge.

This e-learning web app had to be, not only a responsive web application that abided by the already-set brand guidelines established by the team, but also embody the e-learning applications' interactivity using Javascript.

See the Pen Module Icons by saraconache (@saraconache) on CodePen.

<article id='basicmarkup'</article>

The markup for the learning modules consisted in recreating good ol' iframes designs but with the use of divs. This required some help of Javascript.

#styles{display: block;}

The most predominant thing of this particular design is that there is no body scrolling. The e-learning web app is supposed to be encompassed within the viewports dimensions.

var title = 'javascript rocks';

Module page design was conceived toggling visibility between containers to replicate the behavior of iframes, as well as most assessments had a Drag-n-Drop component of some sort: from dragging and dropping images, to fill in the blanks, and a word search.