Picture of Kumar Ah
How to create new templates/interactions?
by Kumar Ah - Friday, 20 November 2015, 3:31 PM

I want to create a new interaction template in Adapt Framework V2.0. What are the steps to followed so that it displays in the build?

Picture of Chuck Lorenz
Re: How to create new templates/interactions?
by Chuck Lorenz - Saturday, 21 November 2015, 7:00 PM

Hi Mihir,

Welcome to the forums.

"Interactions" in Adapt fall under the broad category of plug-ins: components, extensions, themes, and menus. The techniques to build each will differ. The way most learners interact with Adapt content is through components, so I'll focus on them for the rest of this post.

The short answer to your question is to make a copy of a stable component that provides a good foundation for what you need and then build out the rest of the functionality you desire. The core plug-ins bundled with the Adapt framework is arguably the best ones to copy since they are maintained by the core team of developers. Nonetheless, a number of companies and individual developers with proven skills have plug-ins available in their public GitHub repos. You may find something that provides a more complete foundation among these.

The longer answer is too long to post here. Here's some thoughts of mine to get you started. I hope others will add their own.


  • Know enough about the Adapt framework and Adapt authoring tool to not confuse the two—better yet to recognize information that would pertain to one or the other or to both. Develop plug-ins in the framework; deploy stable plug-ins the authoring tool to author courses.
  • Be comfortable with creating courses with the Adapt framework. (Creating courses with the Adapt authoring tool may ease you into the skills to work directly with the framework, but it is not a substitute for this process IMO.)
  • Be comfortable with the process of adding and removing stable plug-ins from the framework.
  • Have at least moderate skills in JavaScript, HTML, CSS, and jQuery.
  • Familiarize yourself with the concepts of backbone, underscore, handlebars, and Less so that you can reference these when needed.

Resources and References:

General Steps in Component Development

  1. Create an Adapt course to use as your development environment.
  2. Make a copy of your model component (its complete folder) and paste it into the framework's src/components directory.
  3. Rename the copy and replace all references to the original name within all its code in the complete folder. (This assumes you are not extending the new component from the model but rather creating a wholly new component.)
  4. Test the new component now by referencing it in your development environment's course JSON (e.g., "_component": "myNewComponentName") and rebuilding the course. It should look and function exactly like its model. Do not add or alter any functionality or style rules until this is working.
  5. Add functionality to your component by altering the .js and .hbs. Reference the code of other stable components for ideas, strategies, and insights.
  6. Respect the lifecycle of plug-ins. Look for functions within superclasses (src/core/js/views/componentView.js; src/core/js/views/questionView.js, etc.) that may need to be implemented in your component.
  7. Add minimally necessary styling in the .less. (Expect major styling do be done through the theme.)  
  8. Ensure your component is responsive across devices. Address accessibility. If your component does not meet common expectations in these areas, please note the limitations in your README.
  9. Create a properties.schema to allow your component to be deployed within the authoring tool. Make your code public, please, somewhere such as GitHub. Many hours have been donated to this project. Making your code public is an easy way to give back and to further its success.
  10. Consider officially registering your component. Registering it makes it easy for the community to locate your component.

I have found this community to be helpful and willing to share from its experience. If this outline is too general, please post more specific questions and we'll see what we can do to help you along.

Picture of Kumar Ah
Re: How to create new templates/interactions?
by Kumar Ah - Tuesday, 24 November 2015, 12:35 PM

Thanks a lot Chuck. Your detail reply is quite helpful to understand the basics. Basically I am looking for the procedures/steps to be followed to develop and add a custom interaction in the course. Now I am going to do as you have described in 'General Steps in Component Development' section. I will keep you and this forum posted. Thanks again.