Messages

• Core
  • Overview
  • API
  • Playground
• Tasks
  • Messages
  • Post
  • Redirect
• Examples
  • Weight experiment
  • Displaying Video

The message tasks are built to be as simple as possible, all they do is present simple html templates. In order to load a template simply set it into the template property as a string, or set the appropriate URL into templateUrl. Thats it. (This is not relevant for most users, but the templates are rendered using angularjs $compile and therefore all the relevant directives are available).

The context for the template has the following variables available: {global, current, task}.

The following example will display the message "Hello World. I am a template.", and procede when the keys space is pressed.

var task = {
    template: '<div>Hello World. I am a template.</div>',
    keys: ' '
}

The following task will do the exact same thing using two separate files:

manager.html

var task = {
    templateUrl: 'hello.htmlt',
    keys: ' '
}

hello.htmlt

<div>Hello World. I am a template.</div>

Proceeding

There are two types of controls that allow users to proceed to the next task.

First, you can use any element in your template as a proceed button, all you have to do is add the pi-message-done attribute to the appropriate element.

<button type="button" pi-message-done>Click here to proceed</button>

Alternatively you may use the keys property in order to set a key (or keys) that proceed. The keys property takes either a key (i.e. 'a') a keyCode (i.e. 65) or an array of such (i.e. ['a','b']).

This table shows several useful keyCodes for your convinience (there are more here):

Project Implicit build

The project implicit build has an optional "meta template" that you may use by setting the piTemplate property to true. When using it, you have several additional options.

The project implicit template supports a debrief template activated by setting piTemplate to 'debrief'. If it is activated, there are two additional functions exposed from within the template. They can be used like so: <%= showPanel('body','header','footer') %> or <%= showFeedback({wrap:false}) %>.

showPanel(body, header, footer)

<%= showPanel('body','header','footer') %>

showPanel displays content within a stylized panel.

showFeedback(options)

<%= showFeedback({wrap:false}) %>

showFeedback automatically gathers feedback from the global object and displays it within your page. It takes an options object as its single argument. The feedback is gathered from the global object by going through each task object (current) and searching for the feedback property. It depends on the individual tasks respecting this convention. You can fine tune the way feedback is collected and desplayed using the following options: