Focus On Youth 24/7

Unlike our other projects, this project required custom development of Moodle. Moodle is a Learning Management System that isn’t very friendly to customization.

Monarch Media, Inc. was referred to us by another agency we worked with in the past. With absolutely no Moodle experience, we paved some new territory!

Serviced Provided

Work We Performed:

  • HTML Development
  • CSS Development
  • JavaScript / AJAX Development
  • PHP Programming
  • MySQL Database Administration

Included Functionality

Project Consists Of:

  • Progression Gates
  • Gamification Visualization
  • Unique Look/Feel

Development Insight

The Problem We Faced!

Moodle isn’t really designed to be friendly for customizing how content is rendered. When Monarch Media presented us with their unique design, there was no easy way of getting it implemented. Our first pass was a very hackish method, but we later implemented a better solution.

Our first approach was to load the HTML into Moodle and then use an excessive amount of JavaScript to render data. Using AJAX, we would make calls to pull the data we needed. The problem with this approach was that it created really long load times. Additionally, many users were using very outdated versions of Internet Explorer.

When we finally had an opportunity to implement a better solution. We moved all of the code outside of Moodle. By invoking Moodle’s core, we could tap directly into Moodle’s data without needing to go through it. This allowed us to shave 3 to 5 seconds off of the load times that users previously experienced.

eLearning Dashboard

As a user went through the eLearning courses, they unlocked the next set of courses.  Each set provided users with points, which were used to level up their avatar.  Each avatar had 4 unique “super hero” phases that could be unlocked.  A great deal of custom programming was required for this.

Avatar Selection

Many programmatic gates were put in place to ensure the user performed all required tasks before starting the eLearning courses.  One of those gates was selecting an Avatar.  Once an avatar was selected, the user was permitted to change their avatar at any time throughout their training.

Discussion Boards

As Focus on Youth was designed for community leaders, it was only natural to provide an area where users could communicate.  Since the theme wasn’t entirely permitted by Moodle, special coding was required to inject the styling appropriately.

Resource Page

The Focus on Youth 24/7 eLearning website converted textbooks into an interactive training course.  There were many resources that still needed to be provided to the users.  The resource page was a combination of downloads and external links.


When you are covering a huge amount of training, there are many terms that are specific to the training material.  A special glossary page was created to provide users with easy access to those unique terms.

Administration Dashboard

A website isn’t complete without an Administration Dashboard!  While Moodle comes with one already, this custom dashboard was created to give admins access to new/custom administration tools.

What our clients are saying about us!

Chris stepped into a difficult project and was able to take a complex set of requirements and deliver on them with excellence. Working to customize the open-source Moodle platform, Chris showed great programming ability. Over the many months of the project Chris had to work independently and solve challenging problems. He asked great questions and brought new ideas to the project that improved the final product immensely. He’s a great communicator and is able to think holistically to build smart solutions. I’d work with him again in a heartbeat.

Claire Schneeberger

Chief Innovation Officer, Monarch Media, Inc.

Do NOT follow this link or you will be banned from the site!