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)
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.