Adapt Learning Community: Hmmm - next button?

Skip to main content

This may be a dumb question but I just want to implement a Next button to move on to the next page or section, but the URL seen in the top bar is always the same between pages and if I use the url link that the menu "view" button uses for that page/section it goes nowhere.

Am I able to implement a simple next button?

EDIT - Another easy one - am I able to add in the triggered and block slider components seen in the demo at https://community.adaptlearning.org/demo/index.html#/page/m05/t05/p05 ?

Thanks

Helen

https://community.adaptlearning.org/demo/index.html#/page/m05/t05/p05

Hi Helen

The forthcoming v2 release of the framework will allow you to navigate to any element within an Adapt course via the URL. Until then, it's only possible to navigate to different 'content objects' using that method, I'm afraid

It is possible to create a button that will do what you want, but it's definitely not simple at the moment...

As for the two components you mention that are in the Adapt Demo - that demo was actually built using the original version of Adapt (AKA Adapt 'Classic') which was created by Kineo originally and used as the basis for the open source framework. Unfortunately those particular two 'Adapt Classic' components have not yet been created for the open source version of Adapt. Kineo are working on an updated version of block slider - but it's only going to be compatible with Adapt v2.0 and later. I'm not sure about triggered components, sorry. You may find someone else has built a community plugin that does this though.

Sorry the demo is misleading, I believe the intention is to update it to the open source version alongside the release of v2.0

Show parent | Reply

Thank you for the great help Matt - things can't come quickly enough for me I'm loving where Adapt is going!

Helen

Show parent | Reply

Hi Matt,

Any direction on how we can now do this in v2 of the framework? The solution I had working below no longer seems to work in v2??

Thanks

Greg

Show parent | Reply

Not sure TBH.

In the out-of-the-box Adapt v2 framework I can jump to articles/blocks/components within pages absolutely fine either by putting the relevant id in the URL or by creating links in the JSON like this:

<a href='#/id/c-30'>Adapt</a> allows you to

Show parent | Reply

For some reason that doesn't appear to work for me...?! Because that is essentially what I was using previously.

I have tried using "adapt-quicknav" and have had success getting the Next button working within a block at the end of each page, however unfortunately the stock standard back button in the top nav no longer works, it just always takes you back to the main menu. I have tried putting the quicknav into the top navigation bar but am having trouble getting that working...?!

Show parent | Reply

If you try it on a fresh, unmodified copy of the framework, does it still not work?

Show parent | Reply

I ended up getting a standard link working this afternoon. There was something in my a tag that it didn't like apparently :-/

Thanks

Show parent | Reply

Realise this is fairly old, but...

This solution as it stands will probably break any SCORM API it's connected to (if you use such a thing) as the hard refresh will cause it to lose it's handle on it.

You can instead plug into the backbone routing, with something like this:

<a class="button" href="javascript: Backbone.history.navigate('#/id/56bbc0f3f43c483d3a94efa7', { trigger: true });">Next Section</a>

Show parent | Reply

Using:

<a href='#/id/c-30'>Adapt</a> allows you t

Works OK for me in IE11 and Firefox i.e. it doesn't cause a hard refresh and so doesn't break the connection with SCORM.

Show parent | Reply

This thread is pretty old, but in case others come across it while searching, using the Backbone router as shown in this example from Jonathan works in modern browsers (Chrome, Firefox, Edge, etc).

<a class="button" href="javascript: Backbone.history.navigate('#/id/56bbc0f3f43c483d3a94efa7', { trigger: true });">Next Section</a>

However, it is not working for me in IE. Matt's solution appears to work in all browsers for me. FYI.

<a href='#/id/c-30'>...

Cheers,

Ryan

Show parent | Reply

Hey Greg,

I've just discovered that this doesn't work for me either now - it was working fine until this morning... gonna check it out now.

*edit* after another force rebuild it seems to be working fine as it was!

Helen

Show parent | Reply

Martin Sandberg built a component that allows you to have an image/link to another object/page.

https://community.adaptlearning.org/mod/forum/discuss.php?d=455

You will see from my posts there though that I have struggled to get a properties.schema file working with it so it can be used in the Authoring Tool. Currently it will only work if you manually build it into a course outside of the tool.

I am playing with the responsiveIframe component though to try and achieve the same thing and I am very close.

Show parent | Reply

Cheers Greg!

Sorry I can't help with your other posts I'm just not techie enough :) Hope you get he answer soon

Helen

Show parent | Reply

I implemented previous and next buttons in our own adapt courses, it's basically a CSS-styled link in a text component. The url would basically be like:

<a href=\"#/id/co-20\" id=\"next-button\">Next</a>.

So if you're working on a multi-chapter (with the box menu extension) course, it will allow you to link between Content Objects, just make sure the component is full width layout and within the last block tied to whichever article you're adding it to.

Show parent | Reply

Thank you so much Stephen I will try that out!

Show parent | Reply

I can confirm this worked for me. Thanks!

Show parent | Reply

Works for me too! My question is why does it have to be a full width layout?! Happy to live with it I guess :)

Thanks again!

Show parent | Reply

I doubt that it has to be full width. It should work with anything.

Show parent | Reply

It doesn't necessarily need to be full width, I just use full-width because they are there as the final component in an article in our courses.

Show parent | Reply

By the way: Meanwhile, there is a simple plugin for this by liquidmelon: https://github.com/liquidmelon/adapt-component-pageJumper

Unfortunately, it doesn't seem to be compatible with the current Authoring tool:

Error: This plugin is incompatible with version 5.3.0 of the Adapt framework.

Show parent | Reply

Try this? https://github.com/cgkineo/adapt-pageNav

Show parent | Reply

I just added buttons at the end of each page to my course by using this HTML-code:

<button class="btn-text menu-item__button boxmenu-item__button js-btn-click"><a href='#/id/5eb3d0dd25b6bc1060490f13' style="color:white; text-decoration:none">next chapter</a></button>

It works when previewing it in the Authoring Tool, but each time after saving the component, the code gets lost and just replaced by:

<p>next chapter</p>

Does anyone know how i could fix this? I'm not that familiar with HTML, just wanted to have the link look like an ordinary button ...

Show parent | Reply

https://community.adaptlearning.org/mod/forum/discuss.php?d=3684

The editor strips out disallowed tags and tag attributes. If you have access to the authoring tool code, you can change the config file.

Show parent | Reply