Elearning Portfolio

In 2015, I joined Savv-e and went from building websites to eLearning modules. Most of these will just be screenshots with some content erased as they are not for the general public to use.

Featured - First Stop Transport eLearning

First Stop Transport promo image

Tag: Custom HTML

Along with the website a eLearning module was also delivered. This module was also checked for accessibility by Vision Australia. Features include a visibility switcher button, carousels, and 2 pools of questions in the assessment.

Check out the module

Filters

Type:
project screenshot
A2

Tag: Custom HTML

This module was made using a custom React framework. It's responsive using grid CSS. It also uses CSS for a sliding animation between pages.

project screenshot
AEC

Tag: Custom HTML

More than 20-30 modules were made for the client. The screenshot shows a more fun one with some gamificated elements.

project screenshot
AEC Bendelta

Tag: Custom HTML

A big feature in this module is a survey where the results are displayed in graph form. Another page also contains a set of videos that have to be viewed in order.

project screenshot
ASIC

Tag: Custom HTML

This module is fully responsive and accessible. The project went smoothly and the client was really happy with the result. Most of the pages were multiple choice questions with audio and overlays but the entire structure was interesting in that it was split into 3 sections that each had it's own subsections.

project screenshot
ASIC 2

Tag: Custom HTML

This is definitely the most technically complicated module I've made by far. It contains page flipping animation, page bookmarking that shows up in the navigation, page commenting and a predefined search bar.

project screenshot
ASIC 3

Tag: Custom HTML

The home page was pretty funky for this one. There was topic buttons and when you pressed one, it would enlarge and show the subtopics. Pressing the button again would take you to the topic. There was also a flip card page that would change to a multiple choice after all the cards were flipped.

project screenshot
ASIC 4

Tag: Custom HTML

This module also had a Reaccreditation version where people would be retested without having to do the entire module again. Then if they got any wrong, a button would appear showing how many pages and which ones to review before they could reattempt the assessment.

project screenshot
ASIC 5

Tag: Custom HTML

This module uses React and was a team effort. I worked on areas like the accordion and button overlays and popups.

project screenshot
ASIC 6

Tag: Custom HTML

One of the features of this module was the home page where there is a long horizontal list of topic buttons. I added arrow buttons that would take you from the start to end of the list.

project screenshot
Ausgrid

Tag: Articulate

The module contains a ton of video tracking. There are 4 roles to choose from. Each has 4 topics and each topic has around 2-5 videos.

project screenshot
Ausgrid 2

Tag: Articulate

This module has a flower icon in the bottom left that 'grows' as you check certain items. At the end you can review what you've checked and then print out the checked items.

project screenshot
BPAY

Tag: Articulate

This was the first Articulate module I made. Articulate is a pretty good program, though for someone who knows how to code, I prefer custom HTML. This module has a lot of animations and pop ups.

project screenshot
BPAY Osko

Tag: Custom HTML

A suite of 6 modules, I set up the page templates and then handed it over to someone else to finish them off. CSS animations were added to add life to the modules.

project screenshot
CBA

Tag: Custom HTML

Responsive and accessible, the main star of this module is the design with the full screen background and fun characters (which I didn't do). There's also some CSS3 animation splashed in.

project screenshot
CBA 2

Tag: Custom HTML

This project consisted of about 6 modules, each with up to 3 language choices using Handlebars. The modules also included some sort of gamification like limited tries in the form of 'lives' or a bar that changes depending on the answers. It also works offline except in IE due to how it handles local storage.

project screenshot
CBA 3

Tag: Custom HTML

This project was done in a similar style to CBA 1. It didn't build the modules but I created a theme so future modules could be updated in 1 go. I also helped with bug fixes.

project screenshot
CBA 4

Tag: Custom HTML

This module was originally multi-paged where you would scroll down to the next page after completing one. Even with all the testing, it was causing issues on the live site so it was converted back to a single page per screen module.

project screenshot
CBA 5

Tag: Custom HTML

This module starts with a full screen carousel and has a photorealistic styles to it compared to previous modules.

project screenshot
Department of Justice Disaster

Tag: Custom HTML

A suite of 2 modules, these modules initally contained a "scenario" page type. There were multiple interactions in 1 page. However this caused issues for the navigation so it was scraped and reverted back to separate pages.

project screenshot
Department of Justice OEM

Tag: Custom HTML

A suite of 3 modules, these modules contained code where when you pressed the button to start the assessment it would update the numbers of attempts before progressing. This caused a slight delay after the button press but was the most reliable way of tracking assessment attempts.

project screenshot
GenesisCare

Tag: Custom HTML

The home page has a path that the character Kate follows as you progress through the module. The module scrolls from right to left and contains a lot of animated svgs. It also contains a language select.

project screenshot
Gladestone Ports

Tag: Articulate

This was a conversion from Flash to Articulate. It has audio that must be finished before progressing to the next screen.

project screenshot
Kaplan

Tag: Custom HTML

A suite of 9 modules, these scroll down but only have 1 screen on at a time. The client requested a feature were clicking on the disabled next button would show a prompt about what you had to do continue. This was interesting as the button was disabled.

project screenshot
Kaplan 11

Tag: Custom HTML

This module has interactions to tracked saved topics. It contains frame by frame animations and background image animations that only trigger when all the images are loaded.

project screenshot
Kaplan 11 2

Tag: Custom HTML

This module has a pressure test with a countdown timer, a question page where a heart metre goes up and each correct answer and a print button at the end to print out selected areas for review and self written notes.

project screenshot
Kaplan T2

Tag: Custom HTML

This project has around 10 modules that have changing backgrounds on button press, questions skipped if they were answered correctly before as well as a popup that shows what topics to review. There are also dropdown questions that each have to be changed before the submit button highlights. IE was an issue as usual and the LMS having to run the module in a popup.

project screenshot
Landcom

Tag: Custom HTML

This module is accessible, contains an audio/image slideshows and true and false questions with overlay feedbacks. It also has a social media like simulator that you can 'like'. Finally the assessment allows you to skip questions that you got right previously.

project screenshot
MLA PLA

Tag: Custom HTML

The modules were mostly done when I started working on it. I did a bunch of functionality changes including saving the number of times each question was answered correctly or uncorrectly. The module is not on an LMS so the data was saved to a cookie.

project screenshot
Munro

Tag: Custom HTML

This suite of modules is responsive, has parallax, swipe carousels, multiple question scenarios and audio conversations.

project screenshot
Munro 2

Tag: Custom HTML

This module had a timeline that was responsive and you navigate either by pressing the years on the side or swiping right after doing the interaction. More years would unlock as you progress.

project screenshot
NAB

Tag: Custom HTML

This module has a try again feature on question pages, a progress bar and works in IE quirks mode.

project screenshot
NAB 2

Tag: Custom HTML

This module has rollovers that reveal content, an assessment question randomiser and a retry functionality when getting a quesiton wrong the first time.

project screenshot
NAB 3

Tag: Custom HTML

The one feature this module has is the use of image maps due to the design.

project screenshot
NAB 4

Tag: Custom HTML

This massive 3 part module's main feature is this simulation where the user can make different choices and it will affect the results. It's quite complicated because of all the branching paths that can happen.

project screenshot
PSC

Tag: Custom HTML

Accessibility was important for this module. So we added the ability to toggle audio descriptions for the videos among other things.

project screenshot
PMC

Tag: Custom HTML

The this module that a funky thing on the home page where you could hover over it and it would move around in 3d. It's an assessment with flip cards, and all the questions are in random order every time.

project screenshot
Qantas

Tag: Custom HTML

These responsive vertically scrolling modules had a lot of audio conversations where it would simulate 2 people talking. Also there were a lot of text input responses that they would then get generic feedback on.

project screenshot
Smith Family

Tag: Custom HTML

This is more of a resource than an elearning module. The home page contains some animations to make it more fun.

project screenshot
Slater+Gordon

Tag: Custom HTML

This module is not visually impressive at all with no images however I am very happy with it technicallly. Users first select their preferences from dropdowns and then they get 10 random questions related to their choices. This is also my first project that uses handlebars, having all the question content in the js.

project screenshot
Sydney Trains

Tag: Custom HTML

This was a suite of 10 modules where I set up the templates for others to create the modules. One of the page types of the image comparison where you can scroll left and right to look at the difference between 2 images.

project screenshot
Sydney Water

Tag: Custom HTML

This module has CSS transistions to add some animations to some pages. Also it remembers the last page you were on so the home page updates accordingly every time you return to it.

project screenshot
Sydney Water 2

Tag: Custom HTML

This module contains a quiz where an avatar updates depending whether you got the question right or not. There is also a form which leads to an email with the details filled in. The module also has a module first feel to it.

project screenshot
Sydney Water 3

Tag: Custom HTML

Each topic in this module is it's own page and it will auto scroll you to the section after the current section is complete. As you scroll an svg line will also draw itself throughout the module. The module is full of svg drawings that animate in.

project screenshot
Sydney Uni

Tag: Custom HTML

A module where accessibility is important. I did bug fixes and updates after someone else made the module.

project screenshot
Sydney Uni 2

Tag: Custom HTML

Made using a react framework, this was another team effort to get it done on time. I helped with the progress bar, the navigation buttons and sidebar menu. There is a also a feature where you can input text into text areas throughour the module and can at any time print them out.

project screenshot
Toll

Tag: Custom HTML

This module uses the bootstrap framework but not pages work on mobile. Working on mobile was not a requirement, and the module had a couple of drag and drop pages. The module also features multiple audio on the page which interact with each other, and timed events depending on which part the audio is up to.

project screenshot
Toll 2

Tag: Articulate

A very straight forward project: to convert a powerpoint to an Articulate module. Not the prettiest module but delivered on time and within budget.

project screenshot
Tramada

Tag: Custom HTML

Tramada had 10+ modules that also had an American version. It contains simulations done in Captivate, a progress bar and audio slideshows.

project screenshot
Urban Growth

Tag: Custom HTML

Urban Growth had a scroll to bottom to complete page type to mix it up a bit while also showing a lot of content on the one page.

close