Simplified version of flickrperson app. See https://github.com/PyBossa/pybossa.js/issues/8 for more information.

presenter.html

<h2>Do you see a human in this photo?</h2>

<div class="img-container"></div>

<button class="btn btn-large btn-success">Yes</button>
<button class="btn btn-large btn-danger">No</button>
<button class="btn btn-large btn-maybe">I don't know</button>

<script>

pybossa.taskLoaded(function(task, deferred) {
    // load image from flickr
    var img = $('<img />');
    img.load(function() {
        // continue as soon the image is loaded
        deferred.resolve();
    });
    img.attr('src', task.info.image_url);
    task.info.image = img;
});

pybossa.presentTask(function(task, deferred) {
    $('.img-container').html('').append(task.info.image);
    $('.btn').off('click').on('click', function(evt) {
        var answer = $(evt.target).html();
        pybossa.saveTask(task.id, answer).done(function() {
            deferred.resolve();
        });
    });
});

pybossa.run('flickrperson2');

</script>