Picture of aaron quinn
how to trigger each of the four types of Notify notifications
by aaron quinn - Saturday, 7 January 2017, 7:10 PM
 

hi all,

based on one of the answers to my question about callouts and popups, i wanted to see if i could trigger each of the four types of notifications from Notify, the internal notifications system built into adapt. for the experiment, i used the text component so i could trigger the notifications from a link that gets clicked or tapped. once i figured how to set it all up, triggering all four of the notifications was pretty easy.

 

here's a cool trick... did you know that you can add javascript into the instruction text? i wouldn't go crazy with it, but it was an easy way of checking some things out, and proved useful for this experiment.

addJsintoText

 

ok, now for the code...

edit the source of the text in a text component and make links like this (you can pass values 0,1,2 into popMe() so the link will target and display a different obz) :

<a href="javascript:popMe(0);">bresaola chicken</a>
<a href="javascript:alertMe();">anim ball tip</a>
<a href="javascript:promptMe();">shankle quis magna</a>
<a href="javascript:pushMe();">swine ut et sirloin</a>

 

and then paste this into the instruction text (i simply commented out the _callbackEvents, no use for them in the experiment.) :

be sure to enclose this code in a script tag

/* this field contains javascript code */

  var MyAdapt;

  function loadAdapt(){
    MyAdapt = require('coreJS/adapt');
  }

  loadAdapt();

  function popMe(n){
    var obz = [
      { "title": "title 1", "body": "body 1:
Chuck in rump deserunt bresaola ullamco nostrud. Pastrami boudin tail adipisicing ground round filet mignon short loin corned beef est deserunt aliquip landjaeger anim bacon ut."}, { "title": "title 2", "body": "body 2:
Chuck in rump deserunt bresaola ullamco nostrud. Pastrami boudin tail adipisicing ground round filet mignon short loin corned beef est deserunt aliquip landjaeger anim bacon ut."}, { "title": "title 3", "body": "body 3:
Chuck in rump deserunt bresaola ullamco nostrud. Pastrami boudin tail adipisicing ground round filet mignon short loin corned beef est deserunt aliquip landjaeger anim bacon ut."} ]; var popupObject = { title: obz[n].title, body: obz[n].body }; MyAdapt.trigger('notify:popup', popupObject); MyAdapt.trigger('popup:opened'); /*must be called when opening a popup manually, popup:closed must also be called when closing the popup manually. this is done automatically when closing the default popup.*/ } function alertMe(){ var alertObject = { title: "Alert", body: "Oops - looks like you've not passed this assessment. Please try again.", confirmText: "Ok", _callbackEvent: /*"assessment:notPassedAlert"*/ "", _showIcon: true }; MyAdapt.trigger('notify:alert', alertObject); } function promptMe(){ var promptObject = { title: "Leaving so soon?", body: "Looks like you're trying to leave this page, yet you haven't completed all the learning. Would you like to stay on this page and complete it?", _prompts:[ { promptText: "Yes", _callbackEvent: /*"pageLevelProgress:stayOnPage"*/ "" }, { promptText: "No", _callbackEvent: /*"pageLevelProgress:leavePage"*/ "" } ], _showIcon: true }; MyAdapt.trigger('notify:prompt', promptObject); } function pushMe(){ var pushObject = { title: "Great work!", body: "You've just done something that merited a push notification.", _timeout: 5000, _callbackEvent: /*"pushNotify:clicked"*/ "" /*The _callbackEvent is triggered only if the push notification is clicked*/ }; MyAdapt.on('pushNotify:clicked', function() { console.log('A push notification was clicked'); }); MyAdapt.trigger('notify:push', pushObject); }

  

everything worked as expected, so now it's time to figure out how this can be turned into a component.

:)

 

 

Picture of Helen Bailey
Re: how to trigger each of the four types of Notify notifications
by Helen Bailey - Wednesday, 11 January 2017, 5:46 PM
 

Stunning research work! Look forward to seeing your component and great tip about the code in Instruction text!!

Helen

Picture of Ross Murray
Re: how to trigger each of the four types of Notify notifications
by Ross Murray - Friday, 19 November 2021, 9:03 AM
 

This is fantastic! I've just tested this and it does work! I want to check the accessibility of it before using in client projects, but knowing that links can receive focus, I'm hoping this will work fine!

 

Was the functionality ever developed into a component?

 

Ross

Picture of Mike Stevens
Re: how to trigger each of the four types of Notify notifications
by Mike Stevens - Friday, 19 November 2021, 2:21 PM
 

Hi everyone, just wanted to mention if you are using the authoring tool you can also you my Multiple Notify Component which automatically populates either of the 4 and has a click for completion setting too incase you need that. 

GitHub - zarek3333/adapt-contrib-MultipleNotify