Content designers want highly customized learning content, but that requires a developer to create custom HTML/CSS/JavaScript for each course. And this causes developers to spend too much time copying and pasting content and applying the HTML markup instead of focusing on developing the functionality. The solution is the Adapt authoring tool. This tool allows developers to create tools that content designers can use to deliver content.

1. Adapt
Getting Started with an Open-Source eLearning Tool
Chad Udell
Managing Partner
Steve Richey
Software Developer

2. ● Managing Partner at Float
● Faculty for over 10 years at Bradley University in
Interactive Media
● Awarded eLearning Guild Guild Master,
recognition for contributions to the industry
● Author of Learning Everywhere: How Mobile
Content Strategies are Transforming Training
● Editor and Author of Mastering Mobile Learning:
Tips and Techniques for Success - Chad Udell
and Gary Woodil, Dr. Ed.D. (contributing authors
from the Float team)
● Software Developer at Float
● Faculty at Bradley University in Interactive Media
● Award winning Game Developer
● Open source software contributor and project
teams:
○ TensorFlow
○ Tango
○ Haxe/OpenFL
Introductions
Chad Steve

3. Where do your
instructional designers
spend their time?
And where should they?
Photo by Jo Szczepanska on Unsplash
https://unsplash.com/photos/9OKGEVJiTKk

4. And where should they?
Where do your
instructional
technologists spend
their time?
Photo by Ilya Pavlov on Unsplash
https://unsplash.com/photos/OqtafYT5kTw

5. Let’s stop the copy and paste.
Let’s quit the hack and slash.
Photo by Rodion Kutsaev on Unsplash - https://unsplash.com/photos/xkEtD4Stn0I

6. Let’s start using components.
Let’s begin creating reusable solutions.

7. Opensource is a great way to do this.
Photo by Jakub Gorajek on Unsplash - https://unsplash.com/photos/hISbNBGlYXk

8. Opensource
Web based, collaborative
Responsive, modern output
Free!
Introducing Adapt - An
open source framework and
authoring tool for learning content
development.

9. Creating fantastic e-learning that your users will
love has never been easier. Developed using
leading edge open source technology, Adapt
Builder gives you complete control to build and
edit great courses in minutes.
A Quick Video

10. Some examples of Adapt created content

11. Float’s Experience with Adapt
Numerous Client Projects Built with
Adapt
Multiple Adapt installs available for
clients and maintained
Numerous Adapt extensions in the
public repository available for free reuse

12. Installing Adapt
Photo by LEMUR on Unsplash - unsplash.com/photos/xkFuWsyG7ZA

13. Installing Adapt
Downloading Node
nodejs.org
Download 6.11.4 LTS

14. Windows 10 macOS
Installing Adapt
Node setup

15. Windows 10 macOS
Installing Adapt
Start Menu + “command” Command (⌘)-Space
Command prompt

16. Windows 10 macOS
Installing Adapt
Command prompt

17. Windows 10 macOS
Installing Adapt
Community Server
mongodb.com/download-center

18. Windows 10 macOS
Installing Adapt
Use installer Unzip downloaded file
Installing MongoDB

19. Windows 10 macOS
Installing Adapt
“cd ” (without quotes)

20. Windows 10 macOS
Installing Adapt
Drag bin folder of MongoDB

21. Windows 10 macOS
Installing Adapt
mkdir datadb mkdir -p data/db
Starting MongoDB

22. Windows 10 macOS
Installing Adapt
Starting MongoDB

23. Windows 10 macOS
Installing Adapt
mongod.exe ./mongod -dbpath data/db
Starting MongoDB

24. Windows 10 macOS
Installing Adapt
Leave this window open!
Starting MongoDB

25. Make a new window!
Photo by Olu Eletu - unsplash.com/photos/ohh8ROaQSJg

26. Windows 10 macOS
Installing git
git-scm.com
Windows only
🤷♀️

27. Windows 10 macOS
Installing Adapt
git clone https://github.com/adaptlearning/adapt_authoring.git
Installing authoring tools

28. Windows 10 macOS
Installing Adapt
Installing authoring tools

29. Windows 10 macOS
Installing Adapt
cd adapt_authoring
Configuring authoring tools

30. Windows 10 macOS
Installing Adapt
Configuring authoring tools

31. Windows 10 macOS
Installing Adapt
npm install --production
Configuring framework

32. Windows 10 macOS
Installing Adapt
Configuring framework

33. Windows 10 macOS
Installing Adapt
node install
Configuring framework
node install
npm install -g grunt-cli

34. Windows 10 macOS
Installing Adapt
Confirm defaults
Configuring framework

35. Windows 10 macOS
Installing Adapt
Write it down!
Configuring framework

36. Windows 10 macOS
Installing Adapt
Configuring framework

37. Windows 10 macOS
Installing Adapt
Starting authoring tools
node server

38. Windows 10 macOS
Installing Adapt
Leave this window open too!
Starting authoring tools

39. Windows 10 macOS
Installing Adapt
Using authoring tools
localhost:5000

40. Windows 10 macOS
Installing Adapt
Enter username/password
Using authoring tools

41. 🎉

42. Authoring with Adapt
Photo by Raphael Schaller- unsplash.com/photos/Cz_Xbm3Jyyw

43. Adapt authoring
Adapt is a web based tool, so open a browser and go to
this address after you’ve installed it:
http://localhost:5000
Then… Login!
Use the Email address and Password you set up when you
installed it.
You did write it down? Right?

44. Creating a Course
To begin, click the "Add new course"
button on the dashboard, give the
course a title and description, choose
who it should be visible to, and give it
any appropriate tags (these details can
be edited after the course has been
created).
Once the course has been created, it
should show up on the dashboard.
Double click the course, or click the
gear icon and then choose "Edit". This
will take you into the course editor.

45. Adapt Basics
Menus: The way your course will be navigable for your learners.
The only content items that will appear here are pages and sub-
menus.
Pages: The basic, highest level content container. If you're
editing a new page, you'll find yourself with a single empty
article with an empty block. If you try to preview now, you'll be
given an error, as the tool won't let you publish a course with
empty blocks.
Article: A collection of Blocks (Think of this kind of like a
lesson, or a main topic/section area).
Blocks: A collection of components (eg. content). This is where
your instructional text, media and interactive pieces will live.
Components: The actual content. Can be media, text, etc.

46. Create Some Content
Most actions in the Adapt tool require a double-click on the
section in order to create/edit the content.
Editing is simple and the body text editor is similar to blog
entry – It’s WYSYWIG.
Other settings include instruction text, Classes (for use in
CSS or custom JS), whether the content is optional and
whether the content should be available or not (hidden)
Once you’ve entered the text or content you want,

47. Configure Your Course
Project settings: Metadata, Custom Start Commands, Button Labels, Basic
Accessibility
Configuration Settings: Language settings, Debugging, More Accessibility
options, Screensize settings
Theme Picker: Choose an already created and uploaded theme. Themes
change the look and feel of your Adapt course. They contain Less, templates,
Javascript, fonts and assets.
Menu Picker: Types of gateways into pages of content. They present options to
the learner. Sometimes they reflect sections of a topic. Boxmenu comes bundled
with the Adapt framework. Boxmenu displays content options in a grid of boxes.
Manage Extensions: Add/enable installed extensions. You can create
extensions for existing components or core framework elements (e.g. the
Triggered extension hides components and reveals them on button press)

48. Preview Your Course
Loads a fully functioning preview of your course in a new
window.
As the course runs on a simple web server, there is no
cross-session tracking (although you will get single session
progress tracking). To fully test tracking, you need to either
download a published version of your course, or use the
scorm_test_harness.html file (see Advanced use).
This can take a little while if the course is large or you
are on a slow computer!

49. Publishing Your Course
Generates a Zip archive containing all course
content, pages, interactions, etc.
This ZIP can be uploaded to a webserver for
use, or if you have installed the
SCORM/xAPI extensions and configured
them, you can use the content there.
This content will NOT run on your local
computer as a file. It requires HTTP(S).

50. Extending Adapt
Photo by Federico Beccari - unsplash.com/photos/ahi73ZN5P0Y

51. Extending
Adapt
Adding plugins

52. Extending
Adapt
Plugin Management

53. Extending
Adapt
Upload Plugin

54. Extending
Adapt

55. Extending
Adapt
github.com/gowithfloat/adapt-copyright
Clone or download

56. Extending
Adapt
Download ZIP

57. Windows 10 macOS
Extending Adapt

58. Windows 10 macOS
Extending Adapt

59. Windows 10 macOS
adapt-copyright-master/js/adapt-copyright.js
Extending Adapt

60. Windows 10 macOS
Open JavaScript file
Extending Adapt

61. Windows 10 macOS
Extending Adapt

62. define(["coreJS/adapt", "./copyright-view", "./copyright-model"], function(Adapt, CopyrightView, CopyrightModel) {
// set up your reusable objects here
// after data has loaded, you can set up your plugin
Adapt.on("app:dataLoaded", function() {
Adapt.on("pageView:postRender", function(view) {
// code in here gets called whenever the view redraws
});
});
});
adapt-copyright.js

63. define(["coreJS/adapt", "./copyright-view", "./copyright-model"], function(Adapt, CopyrightView, CopyrightModel) {
// set up your reusable objects here
var copyrightModel = new CopyrightModel();
// after data has loaded, you can set up your plugin
Adapt.on("app:dataLoaded", function() {
Adapt.on("pageView:postRender", function(view) {
// code in here gets called whenever the view redraws
});
});
});
adapt-copyright.js

64. define(["coreJS/adapt", "./copyright-view", "./copyright-model"], function(Adapt, CopyrightView, CopyrightModel) {
// set up your reusable objects here
var copyrightModel = new CopyrightModel();
var copyrightView = new CopyrightView({model: copyrightModel});
// after data has loaded, you can set up your plugin
Adapt.on("app:dataLoaded", function() {
Adapt.on("pageView:postRender", function(view) {
// code in here gets called whenever the view redraws
});
});
});
adapt-copyright.js

65. define(["coreJS/adapt", "./copyright-view", "./copyright-model"], function(Adapt, CopyrightView, CopyrightModel) {
// set up your reusable objects here
var copyrightModel = new CopyrightModel();
var copyrightView = new CopyrightView({model: copyrightModel});
// after data has loaded, you can set up your plugin
Adapt.on("app:dataLoaded", function() {
Adapt.on("pageView:postRender", function(view) {
// code in here gets called whenever the view redraws
var copyright = Adapt.course.get("_copyright");
});
});
});
adapt-copyright.js

66. define(["coreJS/adapt", "./copyright-view", "./copyright-model"], function(Adapt, CopyrightView, CopyrightModel) {
// set up your reusable objects here
var copyrightModel = new CopyrightModel();
var copyrightView = new CopyrightView({model: copyrightModel});
// after data has loaded, you can set up your plugin
Adapt.on("app:dataLoaded", function() {
Adapt.on("pageView:postRender", function(view) {
// code in here gets called whenever the view redraws
var copyright = Adapt.course.get("_copyright");
copyrightModel.set("isEnabled", copyright._isEnabled);
});
});
});
adapt-copyright.js

67. define(["coreJS/adapt", "./copyright-view", "./copyright-model"], function(Adapt, CopyrightView, CopyrightModel) {
// set up your reusable objects here
var copyrightModel = new CopyrightModel();
var copyrightView = new CopyrightView({model: copyrightModel});
// after data has loaded, you can set up your plugin
Adapt.on("app:dataLoaded", function() {
Adapt.on("pageView:postRender", function(view) {
// code in here gets called whenever the view redraws
var copyright = Adapt.course.get("_copyright");
copyrightModel.set("isEnabled", copyright._isEnabled);
var replace = copyright.message.replace("{{year}}", (new Date()).getFullYear());
});
});
});
adapt-copyright.js

68. define(["coreJS/adapt", "./copyright-view", "./copyright-model"], function(Adapt, CopyrightView, CopyrightModel) {
// set up your reusable objects here
var copyrightModel = new CopyrightModel();
var copyrightView = new CopyrightView({model: copyrightModel});
// after data has loaded, you can set up your plugin
Adapt.on("app:dataLoaded", function() {
Adapt.on("pageView:postRender", function(view) {
// code in here gets called whenever the view redraws
var copyright = Adapt.course.get("_copyright");
copyrightModel.set("isEnabled", copyright._isEnabled);
var replace = copyright.message.replace("{{year}}", (new Date()).getFullYear());
copyrightModel.set("message", replace);
});
});
});
adapt-copyright.js

69. define(["coreJS/adapt", "./copyright-view", "./copyright-model"], function(Adapt, CopyrightView, CopyrightModel) {
// set up your reusable objects here
var copyrightModel = new CopyrightModel();
var copyrightView = new CopyrightView({model: copyrightModel});
// after data has loaded, you can set up your plugin
Adapt.on("app:dataLoaded", function() {
Adapt.on("pageView:postRender", function(view) {
// code in here gets called whenever the view redraws
var copyright = Adapt.course.get("_copyright");
copyrightModel.set("isEnabled", copyright._isEnabled);
var replace = copyright.message.replace("{{year}}", (new Date()).getFullYear());
copyrightModel.set("message", replace);
view.$el.append(copyrightView.$el);
});
});
});
adapt-copyright.js

70. define(["coreJS/adapt", "./copyright-view", "./copyright-model"], function(Adapt, CopyrightView, CopyrightModel) {
// set up your reusable objects here
var copyrightModel = new CopyrightModel();
var copyrightView = new CopyrightView({model: copyrightModel});
// after data has loaded, you can set up your plugin
Adapt.on("app:dataLoaded", function() {
Adapt.on("pageView:postRender", function(view) {
// code in here gets called whenever the view redraws
var copyright = Adapt.course.get("_copyright");
copyrightModel.set("isEnabled", copyright._isEnabled);
var replace = copyright.message.replace("{{year}}", (new Date()).getFullYear());
copyrightModel.set("message", replace);
view.$el.append(copyrightView.$el);
});
});
});
adapt-copyright.js

71. Windows 10 macOS
Extending Adapt
Send to: Compressed (zipped) folder Compress
Bundling our extension

72. Windows 10 macOS
Extending Adapt
Bundling our extension

73. Extending
Adapt
Choose file

74. Extending
Adapt
Upload

75. Extending
Adapt
Success!

76. Extending
Adapt

77. Extending
Adapt
Select course

78. Extending
Adapt
Manage extensions

79. Extending
Adapt
Enabling extensions

80. Extending
Adapt
Find “Copyright”

81. Extending
Adapt
Back to menu

82. Extending
Adapt
Project settings

83. Extending
Adapt
Extensions

84. Extending
Adapt
Change message

85. Extending
Adapt

86. Extending
Adapt
Save

87. Extending
Adapt
Preview

88. Extending
Adapt
View first page

89. Extending
Adapt
Troubleshooting:
● Browser cache
● Temp directory
● Restart server

90. Extending Adapt
● Custom theming with Less
○ http://www.lesscss.org
● Adapt components

91. Discussion
What will you do with Adapt? How would you extend it?