Adapt Learning Community: Developing new component/extension/plugin

Hi all,

I am currently working on transforming an old flash learning object to the adapt framework.
So far everything is going well and even though I've had little problems here and there it's been mostly smooth sailing.
I want to develop a component/extension/plugin that will be exactly like a text component, but on completion of the question e.g. any final answer, be it the right or wrong one, I would like an image to appear next to the answer.
First of all, i'd like to know has anyone done something like this?
also can i simply copy the relevant contrib files and add what's necessary for an image to appear?
How do I start?
I'll admit I'm not an excellent programmer, just middle of the road, I am not proficient in backbone, my knowledge of javascript and jquery is good but not excellent, should i even try?

thanks to anyone who'll answer :)

Of course you should try! How else will you improve and become an excellent programmer?!

Do you mean that it will be "exactly like the text input component"? If so, I'm not sure if someone has done this or not but don't let that stop you as this sounds like a great task to get going with Adapt development.

Yes I would simply copy the contrib files to use as a starting point. It then depends whether you're going to make a completely new component or amend the existing one so that it is configurable to allow an image to be shown alongside the feedback (as well as the default behaviour). I'd suggest the latter as that sounds like it could be quite useful and so your code may well end up being pulled back into the community version!

There's a guide to components on the Wiki here that may help: https://github.com/adaptlearning/adapt_framework/wiki/Developers-guide:-components

Show parent | Reply

Hi Matt,

thanks so much for your very uplifting response!
You helped me a lot in understanding where to start from, also I never thought of simply extending functionality for the textInput component, that's a really good idea. The only thing i'm now trepidacious about is whether or not to add the initial image as an image component because that would mean having to communicate between components I don't think there is anything in the framework that works that way, or if I should use the narrative component as a basis for it...
Anyway, sorry it took so long to answer but you need to know that your response was very helpful to me.

thanks again,
Inbal

Show parent | Reply

What he said :)

Perhaps you could take the text input component but then borrow code from the image component to create your own. I borrowed from one of the contribs when i did one. The order i ended up working (good or bad) :

Handlebars (View): Add the image component's handlebar code to the textinput, sort out your css for it so that it will sit however you envision it at the different widths.

Styles : (make sure the styles for the image are in your components LESS files)

JSON (Model) : Bring in the JSON code that was in the image component into your textinputImageReveal component.

Code (Controller): Make sure your image starts off invisible, runs it original code in the functions that are probably in TextInput e.g. PreRender, PostRender etc.. there are a bunch they inherit from the core component they extend. Check which they share and which you might need to add.. Then trigger the 'show' on the submit button etc....

Getting it to all work on one size (desktop) first is probably a good idea, then you will spend a little time getting the CSS right at the different breakpoints :)

Show parent | Reply