Widgets

Summary: We provide a brief description of how to build custom HTML/Javascript widgets that can be served to participants of a NEXT experiment.

Step 4: Write a widget

Basics

A NEXT widget is a Jinja template for an HTML chunk. This template is passed in a query object which contains all the information needed to display the query.

For example, if the query object contains a string instructions, then we can place this string on the page in bold by using:

<b>{{query.instructions}}</b>

The query object is exactly that which is returned by a call to getQuery.

Further, the page on which our template is rendered has some Javascript objects pre-loaded. For one example, it has jQuery and bootstrap.css, but most importantly it has an object called next_widget. This object has several functions available, but the only one we will likely ever need is processAnswer. This can be called with a dictionary as its only argument that is fed directly into the processAnswer function in the application except pre-populated with exp_uid and query_uid an any timing information.

So, for a completely bare-bones query page, we could display the image (whose URL is in query.target.url) and a list of clickable links for each of the labels:

<img src="{{query.target.url}}" />
<br />Select a label that matches: <br />
<ul>
{% for l in labels %}
  <li><a href="#" onclick="next_widget.processAnswer({'label':'{{l}}')">{{l}}</a></li>
{% endfor %}
</ul>

(Of course, CSS styling can be applied as desired.) This would be saved in /next/apps/Apps/PoolBasedBinaryClassification/widget/getQuery_widget.html.

Note that we only need to pass the label to processAnswer since all the other arguments are either uids or timing information, which we said is taken care of by next_widget.

Contents of query

In App.py#L156 we see that we add some keys to the query dict mentioned above. In this we update query with the keys 'participant_uid', 'alg_id', 'exp_uid', 'alg_label', 'timestamp_query_generated' and 'query_uid'.