Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

DevLearn 2017 - Getting Started with Adapt

706 views

Published on

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.

Published in: Technology
  • Are You Heartbroken? Don't be upset, let Justin help you get your Ex back.  http://ow.ly/mOLD301xGxr
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

DevLearn 2017 - Getting Started with Adapt

  1. 1. Adapt Getting Started with an Open-Source eLearning Tool Chad Udell Managing Partner Steve Richey Software Developer
  2. 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. 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. 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. 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. 6. Let’s start using components. Let’s begin creating reusable solutions.
  7. 7. Opensource is a great way to do this. Photo by Jakub Gorajek on Unsplash - https://unsplash.com/photos/hISbNBGlYXk
  8. 8. Opensource Web based, collaborative Responsive, modern output Free! Introducing Adapt - An open source framework and authoring tool for learning content development.
  9. 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. 10. Some examples of Adapt created content
  11. 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. 12. Installing Adapt Photo by LEMUR on Unsplash - unsplash.com/photos/xkFuWsyG7ZA
  13. 13. Installing Adapt Downloading Node nodejs.org Download 6.11.4 LTS
  14. 14. Windows 10 macOS Installing Adapt Node setup
  15. 15. Windows 10 macOS Installing Adapt Start Menu + “command” Command (⌘)-Space Command prompt
  16. 16. Windows 10 macOS Installing Adapt Command prompt
  17. 17. Windows 10 macOS Installing Adapt Community Server mongodb.com/download-center
  18. 18. Windows 10 macOS Installing Adapt Use installer Unzip downloaded file Installing MongoDB
  19. 19. Windows 10 macOS Installing Adapt “cd ” (without quotes)
  20. 20. Windows 10 macOS Installing Adapt Drag bin folder of MongoDB
  21. 21. Windows 10 macOS Installing Adapt mkdir datadb mkdir -p data/db Starting MongoDB
  22. 22. Windows 10 macOS Installing Adapt Starting MongoDB
  23. 23. Windows 10 macOS Installing Adapt mongod.exe ./mongod -dbpath data/db Starting MongoDB
  24. 24. Windows 10 macOS Installing Adapt Leave this window open! Starting MongoDB
  25. 25. Make a new window! Photo by Olu Eletu - unsplash.com/photos/ohh8ROaQSJg
  26. 26. Windows 10 macOS Installing git git-scm.com Windows only 🤷♀️
  27. 27. Windows 10 macOS Installing Adapt git clone https://github.com/adaptlearning/adapt_authoring.git Installing authoring tools
  28. 28. Windows 10 macOS Installing Adapt Installing authoring tools
  29. 29. Windows 10 macOS Installing Adapt cd adapt_authoring Configuring authoring tools
  30. 30. Windows 10 macOS Installing Adapt Configuring authoring tools
  31. 31. Windows 10 macOS Installing Adapt npm install --production Configuring framework
  32. 32. Windows 10 macOS Installing Adapt Configuring framework
  33. 33. Windows 10 macOS Installing Adapt node install Configuring framework node install npm install -g grunt-cli
  34. 34. Windows 10 macOS Installing Adapt Confirm defaults Configuring framework
  35. 35. Windows 10 macOS Installing Adapt Write it down! Configuring framework
  36. 36. Windows 10 macOS Installing Adapt Configuring framework
  37. 37. Windows 10 macOS Installing Adapt Starting authoring tools node server
  38. 38. Windows 10 macOS Installing Adapt Leave this window open too! Starting authoring tools
  39. 39. Windows 10 macOS Installing Adapt Using authoring tools localhost:5000
  40. 40. Windows 10 macOS Installing Adapt Enter username/password Using authoring tools
  41. 41. 🎉
  42. 42. Authoring with Adapt Photo by Raphael Schaller- unsplash.com/photos/Cz_Xbm3Jyyw
  43. 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. 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. 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. 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. 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. 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. 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. 50. Extending Adapt Photo by Federico Beccari - unsplash.com/photos/ahi73ZN5P0Y
  51. 51. Extending Adapt Adding plugins
  52. 52. Extending Adapt Plugin Management
  53. 53. Extending Adapt Upload Plugin
  54. 54. Extending Adapt
  55. 55. Extending Adapt github.com/gowithfloat/adapt-copyright Clone or download
  56. 56. Extending Adapt Download ZIP
  57. 57. Windows 10 macOS Extending Adapt
  58. 58. Windows 10 macOS Extending Adapt
  59. 59. Windows 10 macOS adapt-copyright-master/js/adapt-copyright.js Extending Adapt
  60. 60. Windows 10 macOS Open JavaScript file Extending Adapt
  61. 61. Windows 10 macOS Extending Adapt
  62. 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. 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. 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. 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. 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. 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. 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. 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. 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. 71. Windows 10 macOS Extending Adapt Send to: Compressed (zipped) folder Compress Bundling our extension
  72. 72. Windows 10 macOS Extending Adapt Bundling our extension
  73. 73. Extending Adapt Choose file
  74. 74. Extending Adapt Upload
  75. 75. Extending Adapt Success!
  76. 76. Extending Adapt
  77. 77. Extending Adapt Select course
  78. 78. Extending Adapt Manage extensions
  79. 79. Extending Adapt Enabling extensions
  80. 80. Extending Adapt Find “Copyright”
  81. 81. Extending Adapt Back to menu
  82. 82. Extending Adapt Project settings
  83. 83. Extending Adapt Extensions
  84. 84. Extending Adapt Change message
  85. 85. Extending Adapt
  86. 86. Extending Adapt Save
  87. 87. Extending Adapt Preview
  88. 88. Extending Adapt View first page
  89. 89. Extending Adapt Troubleshooting: ● Browser cache ● Temp directory ● Restart server
  90. 90. Extending Adapt ● Custom theming with Less ○ http://www.lesscss.org ● Adapt components
  91. 91. Discussion What will you do with Adapt? How would you extend it?

×