Messages

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. That’s 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 proceed 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.js

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

hello.jst

<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 convenience (there are more here):

Links out

PI tasks have a system to prevent accidental browsing away from your tasks. It will ask the user if she is sure that she wants to navigate away. When using links within you tasks you want the links to allow immediate navigation away. In order to do that, all you have to do is add a pi-link attribute to your link,

<a href="google.com" pi-link>Link text</a>

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 displayed using the following options: