How to create a custom component/plugin on adapt framework?

Question

I installed the adapt framework successfully. Was able to edit a new course. But i need to create a new custom component, quite similar to textinput. under src/components I tried copying adapt-contrib-textInput, changing its name to my own custom name in both bower.json and in the function Adapt.register. However when i try to use the new components in a course component (in src/course/en/components.js) it gives me this error:

adaptView.js:48 Uncaught TypeError: template is not a function
    at n.render (adaptView.js:48)
    at n.initialize (adaptView.js:31)
    at n.e.View (backbone.min.js:2)
    at n [as constructor] (backbone.min.js:2)
    at n [as constructor] (backbone.min.js:2)
    at n [as constructor] (backbone.min.js:2)
    at n [as constructor] (backbone.min.js:2)
    at new n (backbone.min.js:2)
    at n.addChildren (adaptView.js:103)
    at n.postRender (adaptView.js:38) 

This is my bower.json:

    {
      "name": "adapt-html-testing",
      "version": "3.0.1",
      "framework": ">=2.0.16",
      "homepage": "https://github.com/adaptlearning/adapt-contrib-textInput",
      "issues": "https://github.com/adaptlearning/adapt_framework/issues/new",
      "description": "A question component that allows the learner to input text based upon a question stem.",
      "main": "/js/adapt-contrib-textInput.js",
      "displayName" : "Html Testing",
      "component" : "htmltesting",
      "keywords": [
        "adapt-plugin",
        "adapt-component"
      ],
      "license": "GPLv3"
    }

This is my main js, adapt-contrib-textInput.js:

       define([
        'core/js/adapt',
        './textInputView',
        './textInputModel',
    ], function(Adapt, TextInputView, TextInputModel) {

        console.log("register htmltesting: before");
        return Adapt.register('htmltesting', {
            view: TextInputView,
            model: TextInputModel
        });

       });

and this is the components.js component(which i left as is just changed the compnent field to htmltesting. it was 'textinput':

 {
        "_id": "c-70",
        "_parentId": "b-50",
        "_type": "component",
        "_component": "htmltesting",
        "_classes": "",
        "_layout": "left",
        "_attempts": 1,
        "_questionWeight": 1,
        "_canShowModelAnswer": true,
        "_shouldDisplayAttempts": false,
        "_isRandom": true,
        "_allowsAnyCase": true,
        "_allowsPunctuation": true,
        "title": "Text Input",
        "displayTitle": "Myyy Text Input",
        "body": "Can you name one of the three companies that established Adapt as a community led Open Source project?",
        "instruction": "Input your answer and select Submit.",
        "_answers": [
            ["City & Guilds Kineo", "Kineo"],
            ["Learning Pool"],
            ["Sponge"]
        ],
        "_items": [
            {
                "prefix": "",
                "placeholder": "Enter answer here",
                "suffix": ""
            }
        ],
        "_feedback": {
            "title": "Feedback",
            "correct": "Correct answer feedback.<br><br>That’s correct. The Adapt Open Source project was established by Kineo, Learning Pool and Sponge. At the time of writing, there are a total of nine <a href='https://www.adaptlearning.org/index.php/collaborators/' target='_blank'>official collaborators</a>.<br><br><em>Component facts: <strong>Text input</strong> components let learners enter their own answers, which is great for questions that require a bit more flexibility, like those with answers that could be written as both full words and numbers.</em>",
            "_partlyCorrect": {
                "final": "Incorrect answer feedback.<br><br>Sorry, that’s not right. The Adapt Open Source project was established by Kineo, Learning Pool and Sponge. At the time of writing, there are a total of nine <a href='https://www.adaptlearning.org/index.php/collaborators/' target='_blank'>official collaborators</a>.<br><br><em>Component facts: <strong>Text input</strong> components let learners enter their own answers, which is great for questions that require a bit more flexibility, like those with answers that could be written as both full words and numbers.</em>"
            },
            "_incorrect": {
                "final": "Incorrect answer feedback.<br><br>Sorry, that’s not right. The Adapt Open Source project was established by Kineo, Learning Pool and Sponge. At the time of writing, there are a total of nine <a href='https://www.adaptlearning.org/index.php/collaborators/' target='_blank'>official collaborators</a>.<br><br><em>Component facts: <strong>Text input</strong> components let learners enter their own answers, which is great for questions that require a bit more flexibility, like those with answers that could be written as both full words and numbers.</em>"
            }
        },
        "_pageLevelProgress": {
            "_isEnabled": true,
            "_isCompletionIndicatorEnabled": true
        }
    },

In conclusion i need help understanding how to create a custom component. It seems the adapt documentation https://github.com/adaptlearning/adapt_framework/wiki/Developing-plugins forgot to mention some important step.

I feel like i'm doing it right and it should work but still i get this error:

adaptView.js:48 Uncaught TypeError: template is not a function
    at n.render (adaptView.js:48)
    at n.initialize (adaptView.js:31)
    at n.e.View (backbone.min.js:2)
    at n [as constructor] (backbone.min.js:2)
    at n [as constructor] (backbone.min.js:2)
    at n [as constructor] (backbone.min.js:2)
    at n [as constructor] (backbone.min.js:2)
    at new n (backbone.min.js:2)
    at n.addChildren (adaptView.js:103)
    at n.postRender (adaptView.js:38)

Answer 1

I solved this by changing the names of the .hbs and .less files to my registered component name, 'htmltesting'. The naming matters, though i couldn't find any mention of this in the documenation. Hope it helps someone.