Adapt Learning Community: Linking to a specific block in the framework

Hi there,

I've built a course using the framework and I need to link to a specific block on the page from a different block on that same page. At the moment I'm using an anchor tag within the body of a component, that points to the block ie. <a href='./#/id/b-02'> which does work the first time you press it, but only once. My course can be seen at http://tincdesign.com.au/Adapt/ASHM/build_open_2/#/id/co-01 and the link I'm talking about is the useful resource link that's in the 5th block which should link back to the video in block 2.

Any suggestions would be greatly appreciated. Ideally it would be nice to have an animated scroll the way the progress menu goes to a page, but otherwise a straight jump is fine too.

Thanks, zee

Hi Zee.

You could try using Adapt.scrollTo or Adapt.navigateToElement

Regards.

Show parent | Reply

Thanks Ignoacio. So can I use those directly from the body section of a component within the components.json file? I'm just not too sure what syntax to put around it.

Show parent | Reply

Zee, here's a simple way.

components.json file add class to <a> element.

<a class='link-b-02' href='#'>Link to block</a>

your-javascript-file.js (e.g. adapt-contrib-vanilla/js/vanilla.js) add handle anchor click event

Adapt.on('pageView:postRender', function(view) { view.$el.on('click', 'a.link-b-02', function(e) { e.preventDefault(); Adapt.scrollTo('.b-02',{duration:500}) });

Hope this helps

Show parent | Reply

Ah that worked perfectly, thanks so much Ignacio for your detailed response. much appreciated.

Show parent | Reply

Hi Ingacio,

I've used this code and it works great, do you know how I can incorporate a override/skip trickle with it? I'd like to go straight to a block without trickle stopping me.

Thanks

Kelly

Show parent | Reply

Hi, can you try adding Adapt.trigger("trickle:skip") before Adapt.scrollTo.

Show parent | Reply

Works perfect, thanks so much.

Show parent | Reply