Our Team

Essentials 6, Interactive Learning Module

Hello, everyone! I’m back with the first major content post on this blog, and I’d like to talk about something that I’m proud to have had a hand in. It’s a project that we refer to as ‘E6’– Essentials of Fire Fighting, 6th edition. E6 was a project that a lot of us worked on. It’s a neat example of collaborative programming that showed a lot of our newer employees the ropes in version control, GitHub use, and teamwork.

The project itself was commissioned by Fire Protection Publications (FPP), who are a section of Oklahoma State University’s College of Engineering, Architecture, and Technology. They’re the headquarters for IFSTA, the International Fire Service Training Association, which is a committee dedicated to upgrading firefighting techniques and improving safety with training. FPP wanted an interactive learning module for students and firefighters-in-training to accompany the material in their textbook, the above mentioned Essentials.

The project began as a request from FPP to Beardon, to find a way to display the information in a slideshow or notes-like format. Most similar platforms operated with a system based on Adobe Flash, which is not supported by any iOS devices, or Android Jellybean or above. A Beardon employee got the idea to use reveal.js, which is a pretty interesting web presentation framework. If you’re looking for an alternative to PowerPoint to create a more unique presentation, I highly recommend it. There’s also a drag-and-drop interface version if you’re not much for programming, found here. It’s great for students because it’s a lot like the notes that they’d take in class, so it’s a relatable format.

So, using reveal.js, one of our senior developers, Martin, designed a frame. It’s gone through several iterations, but it stayed pretty true to its roots; it looks about like this:


Martin reworked the frame using a combination of HTML, JavaScript, and CSS. After building a sample chapter for FPP, they liked it– enough to request more. Twenty four full chapters’ worth, in fact. There was so much content there to cover that we split the whole thing into three major phases, and divvied up the chapters around the office. First we handled all of the actual raw text content, using HTML and storyboards provided by FPP, as well as some examples of what they wanted things to look like.

Then we moved on to the second phase, which was adding interactivity. We first did that in the form of pop-up dialogue boxes. A slide might look like the above upon viewing, but clicking any of the boxes would pull open a window, like so:


We called them interactive tables, and they’re a neat tool to deliver information while adding a touch of interaction. Images and concise bullet points could fill a slide, while the bulk of the more detailed information could come forth with a click, making it easy to take notes while keeping the slides themselves concise. Pictures were especially well-implemented; a photo could represent a physical object or diagram, such as how to perform a specific task, and clicking it would pull up details. The feature was even programmed so that all of the information on a slide, interactive tables included, must be viewed before the reader could move on to the next.

Once all of the core content from the book had been covered in the slides and pop up windows, we divided up based on skillsets. Some of us went to work on image-maps, which are images that pull up different windows based on where the picture is clicked. So an image might look like this:


But, if the word Education is clicked, it would pull up a window like this:


Similar pop-ups would show if Enforcement, Engineering, or the other star tips were clicked, giving details on the subject at hand.

While some of us worked on setting up image maps sprinkled throughout the chapters, others started placing in videos provided by FPP. These videos were made by IFSTA, and gave demonstrations and more information about various firefighting techniques. Videos also allow the viewer to stop reading, helping to alleviate the information overload from pages of raw text. Like the interactive tables, a video also had to be watched to completion to progress through the slides.


Finally, we put some people into producing quizzes placed at the end of each chapter section, or in the middle of some of the longer sections. These quizzes, called Knowledge Checks, ask the reader to answer questions based on the last set of slides they viewed. To progress to the next section, a reader would have to answer the questions correctly, with a score of 100%. If a question is answered incorrectly, they would be taken back to the slide with the pertinent information on it.


Then we worked with FPP on a few revisions of the final content, to make all of the slides up to their expectations. The final version is hosted on ResourceOne, an online classroom platform IFSTA uses to deliver their content and track student progress. We plan to provide long-term support to the online learning module. Right now, we’re in the process of making it SCORM (Sharable Content Object Reference Model) compliant, and doing bugfixes with the new ResourceOne host.

Overall, E6 was a very unique project. I really can’t do it justice describing it on my own. At least seven employees worked on it over the course of its development, and it was a great experience overall. Several of them were interns, like me, who had never worked on any programming works of that scale.

E6 was a great experience, which got Beardon working together and introduced its newer employees to version control and group coding with GitHub. Overall, I would say it’s one of the coolest things I’ve worked on, and I’m hopeful that you find it interesting as well. If you have any questions on the application, IFSTA, FPP, reveal.js, or anything at all, please ask! Comments are appreciated, I’m eager for feedback. I think my next post will be about either an engineering project I and another student worker spearheaded the development on, or something about the company’s business philosophy. Until then, take care.