Picture of aaron quinn
what are your solutions for callouts and popups?
by aaron quinn - Thursday, 5 January 2017, 7:49 PM
 

hi all,

in the courses i build, we often click a text link to either a) show a callout to display a small amount of text and/or a small image, or b) open a popup that contains more [text, images, animations, videos].

is there anything built into adapt to handle either of these? are there any recommended plugins?

what cool tips and tricks do you have so the user can "click the link for more info"?

thanks.

Picture of Sam Tsiu
Re: what are your solutions for callouts and popups?
by Sam Tsiu - Friday, 6 January 2017, 2:15 AM
 

Hi Aaron,

There are so many brilliant plugins built by the community does what you described. You may want to have a look of the following:

adapt-hotgrid

adapt-expose

adapt-contrib-flipcard

adapt-hint

Check out the Adapt Plugin directory, you'll find more.

 

Cheers

Sam

Picture of aaron quinn
Re: what are your solutions for callouts and popups?
by aaron quinn - Saturday, 7 January 2017, 7:27 PM
 

hi sam,

all of the plugins you have mentioned are very cool and i plan on using them in the future. they all work well and are easy to configure in the AT.

Picture of Matt Leathes
Re: what are your solutions for callouts and popups?
by Matt Leathes - Friday, 6 January 2017, 10:27 AM
 

There is a module built into Adapt to handle exactly this, it's called Notify and is documented here. Many of the Adapt plugins will be using this (the Hot Grid component Sam mentions in his reply for example).

You can also trigger it manually in any Adapt course if you want to see it in action - quite useful for being able to see all the different options available to you.

With an Adapt course running in your browser, open the developer tools (F12) then go to Console.

Type/copy-paste in the following then press Enter:

var Adapt = require('core/js/adapt');

This creates a reference to Adapt. Now that you've done that you can trigger Notify in the course by running commands in the Console such as:

Adapt.trigger('notify:popup', {title: 'this is the title', body: 'this is the body'});

Or, one that's sadly little-used but which I rather like:

Adapt.trigger('notify:push', {body: 'Ah, push it (get up on this)'});

See the documentation for more examples.

Picture of aaron quinn
Re: what are your solutions for callouts and popups?
by aaron quinn - Saturday, 7 January 2017, 7:41 PM
 

hi matt,

thanks for the heads-up. you gave me a great idea for an experiment. here is an example showing how to trigger the notifications from a link in the text component.

and, ooh - ahh - push it, push it real good may turn out to be my favorite, too. i can already think of a few ways in which it can be used.

Picture of Matt Leathes
Re: what are your solutions for callouts and popups?
by Matt Leathes - Monday, 9 January 2017, 9:48 AM
 
and, ooh - ahh - push it, push it real good may turn out to be my favorite, too. i can already think of a few ways in which it can be used.

It has the added benefit of helping you to become number one in a hot party show.