Updating the template for the tasks

How to update the task presenter for the application

We are almost done! We have created our own application, we have created some tasks, however, we want to lear how we can update the task presenter to fit our needs.

If you open the template.html file you will see that it has two main sections:

The HTML skeleton for the tasks
The JavaScript code for getting the task input, fill in the skeleton, and actions to save the users's answers.

The HTML Skeleton

The HTML skeleton is really simple. PyBossa provides for us the header and footer for our application, so we only have to create the layout for our application, nothing else.

As you will see, the HTML has two main sections:

Feedback row
Question, Task ID, Photo and answer buttons (or skeleton) for the task

The feedback section is really important. We will be hiding and showing these elements (success, warning and error messages) when the user has submitted an answer, if the user is doing something wrong or if something failed when getting or submitting a task.

As you will see the structure for the HTML is really simple. We define a row, and within that row, we specify how many colums will have this row (maximum 12, minimum 1):

</div>

The above HTML code has created a row with two columns, each one having the same width. In the feedback section you will see that we have created one row with one column with a with equal to "span8". However, in order to center in the page the column, we move it two columns towards the right specifying it with the offset class:

This basically tells the column to be moved two columns to the right, use 8 columns and leave another 2 empty (remember that we can use a maximum of 12 columns). Thus, the column will be centered in the page.

As we will be hiding and showing the feedback messages, we have to name them. We will do by identifying each of them with the followin HTML argument:

For the feedback boxes we will use "success", "error" and "warning".

The Task Skeleton uses the same approach, so have a look and see which are the names of the elements and how they have been configured within the template.

The JavaScript

Well, we have the skeleton, however we do not have nothing to show. If we load in this moment the template in the browser we will not see any image, except the layout that we have created.

We need to fill in the gaps!

In order to add the photo images into the skeleton we will be using the PyBossa.JS library that will simplify the usage of the PyBossa API.

The PyBossa.JS library provides two public methods:

pybossa.newTask( "flickrperson").done( function(data){});
pybossa.saveTask( taskid, answer );

JavaScript works in an asynchronous mode, so when you call pybossa.newTask, the web browser will run asynchrousnly the query. In other words, you do not wait for the answer, what you do is that when the query is done you work with the returned data, in this case the Task information for the application.

PyBossa.newTask will return for us the following JSON object:

data = { question: application.description,
  task: {
          id: value,
          ...,
          info: {
                  url:
                  link:
                 }
        }
};

Therefore, if we want to load the question into our skeleton we will have to use the following code:

$("#question h1").text(data.question);

As we will be loading several times the task information into the skeleton, the  template provides a function that we can call when we want to add the photo, question and extra information to the skeleton.

After loading the Task info into the skeleton, we only have to bind actions to the buttons that we will be using for saving the answer: yes, no I don't know.

As you will see, in the template, each button has an associated event "onclick" with the function submitTask().

If the user clicks in the yes button, the submitTask function will be fired with the string argument "Yes", then pybossa.saveTask will send the answer to the PyBossa server and save it.

The pybossa.saveTask method needs to submit the answer for a give Task ID, for this reason, we use the function submitTask to get that value from the skeleton that we previously loaded:

var taskid = $("#task-id").text();