PyBossa loading and presenting tasks

I am trying to set up a project on CrowdCrafting.org by using the PyBOSSA framework. I followed their tutorial for project development. The first parts seemed very clear to me, creating the project and adding the tasks worked fine.

Then I built my own HTML webpage to present the task to the users. Now the next step would be to load the tasks from the project, present them to the users, and save their answers.

Unfortunately, I don't understand how to do this.

I will try to formulate some questions to make you understand my problem:

1. How can I try this out? The only way seems to be by updating the code and then running pbs update_project
2. Where can I find documentation for PyBossa.js? I just saw (in the tutorial and on other pages) that there are some functions like pybossa.taskLoaded(function(task, deferred){}); and pybossa.presentTask(function(task, deferred){});. But I don't know how they work and what else there is. This page looks like it would contain some documentation, but it doesn't (broken links or empty index).
3. How do I use the library? I want to a) load a task, b) present it to the user, c) show the user his progress, and, d) send the answer. So I think I'll have to call 4 different functions. But I don't know how.

4. Looking at the example project's code, I don't understand what this stuff about loading disqus is. I think disqus is a forum software, but I am not sure about that and I don't know what this has to do with my project (or theirs).

As far as I understand, the essential parts of the JS-library are:

pybossa.taskLoaded(function(task, deferred) {
  if ( !$.isEmptyObject(task) ) {
    deferred.resolve(task);
  }
  else {
      deferred.resolve(task);
  }
  });

  pybossa.presentTask(function(task, deferred) {
  if ( !$.isEmptyObject(task) ) {
      // choose a container within your html to load the data into (depends on your layout and on the way you created the tasks)
      $("#someID").html(task.info.someName);
      // by clickin "next_button" save answer and load next task
      $("#next_button").click( function () {
    // save answer into variable here
    var answer = $("#someOtherID").val();
    if (typeof answer != 'undefined') {
       pybossa.saveTask(task.id, answer).done(function() {
       deferred.resolve();
       });
    }
      });
   }
  else {
      $("#someID").html("There are no more tasks to complete. Thanks for participating in ... ");
  }
  });

  pybossa.run('<short name>');

I will try to answer your points one by one:

1. You can either run pbs update project or go to the project page > tasks > task presenter and edit the code there.

2. I believe this link works, and there you should find the information you want.

3. So, once you've created the project and added the tasks and the presenter (the HTML you've built) you should include the Javascript code inside the presenter itself. You actually only need to write those two functions: pybossa.taskLoaded(function(task, deferred){}); and pybossa.presentTask(function(task, deferred){});

   Within the first one you'll have to write what you want to happen once the task has been loaded but before you're ready to present it to the user (e.g. load additional data associated to the tasks, other than the task itself, like images from external sites). Once this is done, you must call deferred.resolve(), which is the way to tell pybossa.js that we are done with the load of the task (either if it has been successful or some error has happened).

   After that, you must write the callback for the second one (pybossa.presentTask) where you set up everything for your task, like the event handlers for the button answer submission and here is where you should put the logic of the user completing the task itself, and where you should then call pybossa.saveTask(). Again, you should in the end call deferred.resolve() to tell pybossa.js that the user is done with this task and present the next one. I would recommend you to do in inside the callback for pybossa.saveTask(task).done(callbackFunc()), so you make sure you go on to the next task once the current one has correctly been saved.

4. You can forget about that discuss code. These are only templates provided, in which there is included some code to allow people comment about the tasks. For that, Disquss is used, but it is up to you whether you want to use it or not, so you can safely remove this code.