Works » Wine Lab | Sarah V. Gomez Portfolio

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.

Technologies Used

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.