Framework in five minutes

If you're new to the Adapt framework, or the project in general, this page will provide the background you need to get started.

What is the Adapt framework?

In a (somewhat verbose) nutshell 🌰, the Adapt framework is:

a modular, reusable codebase for developing single-version, easily localisable, responsive e-learning courses.

What this means in practice:

Multi-device delivery: The framework offers the cross-platform and cross-browser versatility that you expect from standard web pages, so a single build of your course will work across all devices in the supported tech spec. With mobile devices quickly becoming the de facto way to access the web, Adapt provides a future-proof solution.

Single source: Keeping content current becomes less problematic when there's only one version to maintain.

Single-page app: Rather than force the user to download lots of pages individually, we've chosen to create Adapt as single-page app, meaning less HTTP requests, and a much more responsive experience for users, especially those on mobile or with poor data connections.

Designed for e-learning: Built from the ground up specifically for e-learning, the framework comes bundled with a number of useful plugins, including learner progress tracking, customisable assessments and a learning resources 'drawer'.

Accessibility out-of-the-box: Courses created in the Adapt framework are fully accessible with no need for a separate version to comply with DDA guidelines.

Easily localisable: Content can be exported from the framework to a CSV file, translated, then imported back in. A language picker allows learners to easily choose and switch languages. Find out more in the Course Localisation Wiki page

Free: All source code for the framework and core bundle of plugins are available for download free (as in speech) on our GitHub page, for you to take and modify as you like.

You can check out our complete vision statement for more.

Adapt ❤️ learning design

Adapt isn’t just an e-learning framework for developers, it also offers a variety of fresh ideas and options for learning designers to create exciting new content for web savvy audiences.

No more templates: Ditching the rigid, template-based design of the past, Adapt pages are constructed by combining a wide range of interactive components in a flexible two-column layout capable of crafting much more complex learning paths.

Web-inspired navigation: No longer is page content limited by screen capacity; Adapt's scrolling page layout gives the learning designer control over how their courses should be navigated.

Configuration: Flexibility is at the core of Adapt; layouts, styling and a whole heap of behavioural options are configurable without needing to touch code, allowing you to completely customise courses to just how you want them.

Tailoring the content to the device

Responsive e-learning design is more than having the ability to present an entire course on a variety of different devices; it’s also about having total control of what content is shown on each different platform.

Presenting an hour long course on advanced accountancy on a small mobile screen may not be the greatest way to deliver this training. However, supplementing a desktop course with a short mobile course offering summary screens, takeaway guides and expert tip videos would be a great way of getting more mileage.

With the Adapt framework, courses can be easily tailored for different screen sizes, meaning you can customise the learning experience based on how your course is viewed, and all using the same source.

Layout and Navigation

Perhaps the most immediately obvious difference between Adapt and other e-learning tools and frameworks is what’s possible with both layout and navigation; taking the lead from modern web design, scrolling pages are favoured over presenting information in a sequence of single, fixed-position pages.

These scrolling layouts provide us with:

• An opportunity to structure content in more varied ways.
• The ability to incorporate art direction throughout the course, rather than being limited to specific branding areas (such as the nav bar).
• No more need for unnecessary pages and extra navigation as a result of the designer running out of screen ‘real estate’.

Learn your ABCs

To better fit the new scrolling page design ethic, we've created a more suitable hierarchy and nomenclature inspired by print publications. Gone are the topics and screens of old; say hello to pages, articles, blocks and components!

Pages are how the main learning content is presented (similar to a page on the web), and can contain a number of sub-elements, making them perfect to present a single topic in an e-learning course.

Articles are the next step down, and are used to present compound pieces of information within the page. Like pages, articles can be formed of many sub-elements. Articles can also be used to split up a page for presentation purposes.

Blocks have replaced the traditional screens/slides found in most e-learning publishing software, and present small chunks of related content using components.

Components are the main interactions in Adapt, and present simple ideas. Components can be used in a block full-width, or combined with another component for more variety. In general, it's best not to add more than two half-width or one full-width component per block, because component order is adjusted for RTL languages.

To summarise: Pages contain Articles contain Blocks contain Components.

Think A, B, C!

Getting technical

The Adapt framework has been designed to be easily accessible to developers. By using popular web frameworks, and a modular plug-and-play architecture, you can spend more time developing fun stuff, and less time trying to integrate with the core product.

Open standards and familiar frameworks

Rather than reinventing the wheel, the Adapt framework builds upon well established web standards and frameworks, meaning that most web developers coming to Adapt will already be familiar with some or all of the technologies we use:

• HTML/JavaScript/CSS with LESS
• RequireJS and Backbone.js for structure
• Handlebars for templating
• Grunt for building and previewing
• JSON for course content and configuration

Pluggable core

Adapt's core, while lightweight, has all the functionality you need to create complex plugins to enhance your courses. Our simple API encourages a modular style of coding and means that you can reuse your plugins in any of your Adapt courses.

Adapt plugins fit into four different categories:

Components: small interactive widgets (e.g. text, slider).
Extensions: additional functionality extending the core (e.g. resources, assessment).
Themes: custom course styling (e.g. vanilla).
Menus: determines how the learner navigates through the course (e.g. box menu).

Streamlined development and deployment with the Adapt command-line interface

Developed in tandem with the framework, the Adapt command-line interface (CLI) is a set of tools aimed at simplifying the development of Adapt courses and plugins, by automating many of the Adapt workflows, such as creating new courses and creating, publishing and installing new plugins.

Next steps

Now that you've had a run-down of the basics, you're ready to start experimenting on your own! Here are a few useful links to get started:

• Setting up your development environment
• Creating your first course
• Contributing to the Adapt framework
• Adapt learning community
• Frequently asked questions