Adapt Learning Community: Implementing jQuery

Hi,

I've been trying to implement jQuery here and there in my courses for the past months and I've been getting a hard time since some functions aren't accepted in Adapt. The basic functionalities like show/hide works, but it seems that when you get into more complex functions, Adapt totally stop the script from running.

Here's an example that I've made and trying to implement: https://jsfiddle.net/be7azc1u/1/

The html and css are recognized, but when comes to add jQuery, nothing works. I've looked up in the console log(see ConsoleErros.png) and it seemed that jquery.v2.min.js, velocity.min.js and adapt.min.js had problems. I thought the problem could be because I was using version 2.4 of the authoring tool, but I've upgraded a test server with the latest version and I still had the same problem. I've also linked the jQuery version 3.3.1 in the code so it's not jQuery's library.

I've also tried to embed the code from jsfiddle and iframe it into the course and it worked (see iFrameWorks.png).

Are there jQuery functions that adapt doesn't support? What are the workarounds for this and how do you make it work?

Thank you!

I'm certainly not aware of anything in JQuery that wouldn't work in Adapt. The only thing to bear in mind that you typically build stuff in Adapt in Backbone so there's a slight difference in the way you use JQuery with Backbone - mainly around how you scope your JQuery selectors.

It would help if you could share how exactly you're trying to implement this in Adapt. At the moment we can only see how you're implementing it outside of Adapt and the errors you get when you try to run whatever you're doing in Adapt - so at the moment there's a big piece of the puzzle missing.

Just to note that you'll probably find it a LOT easier to do this sort of experimentation/development using the Framework rather than the authoring tool - mainly because any changes take effect immediately, you don't have to upload and republish.

Show parent | Reply

Thanks for the reply Matt.

I was not aware that Backbone was linked with jQuery in Adapt. I'll have to look into it in more detail.

I'm not sure if there's an alternative, but how I would implement my jQuery would be to directly inject the html and add the jQuery in <script></script> tags at the end of the page. For the css, I would sometimes implement in <style> tags at the top of the page, add style="" in tags or in the project setting css style sheet.

Is there another way to implement jQuery?

Also, I haven't had time to take a look at the Framework. I guess it could be wise to invest some time into learning how it works.

Thank you.

Show parent | Reply

OK, so what you're trying is definitely not the way to add something like this to an Adapt course.

The editor in the authoring tool is really there to allow you to enter text-with-formatting. Some basic JavaScript can be included - for example to enable simple functionality like clicking a text link to show a 'Notify' popup - or to send the user to another page in the course - but that's about it.

You're also trying to include JQuery into something that already includes JQuery - which is not only redundant but likely to cause issues if the version you're including is different from what's already loaded.

If you want to include custom content such as in your example there's two ways you can go about this.

If it's a one-off piece of custom content then I would build it entirely separately then use one of the iframe plugins to load it in. This is a bit trickier when using the Authoring tool as you'll either have to host your custom content separately or you'll have to add it in manually every time you publish the course.

If it's something you'll use multiple times within the course, typically with slightly different content/configuration each time, then you want to build it as a proper Adapt Plugin. To do this, you're definitely going to need to know about Backbone, not to mention Handlebars and LESS. There is some information on the Wiki here and there was a good intro to building an Adapt component by Dan Storey at last year's Adapt meetup - just trying to track down where the video of that might be for you.

Show parent | Reply

Oh wow, that makes a lot of sense! It's clear now that the source editor is simply for basic formatting.

Thanks for letting me know about Backbone, Handlebars and LESS. I'll see with my team if we could invest more time into creating our own components, which would be very interesting to share with the Adapt community.

Thanks a lot!

Show parent | Reply