template.html

<div class="row">
    <!-- Success and Error Messages for the user --> 
    <div class="col-md-6 col-md-offset-2" style="height:50px">
        <div id="success" class="alert alert-success" style="display:none;">
            <a class="close">×</a>
            <strong id="i18n_welldone">Well done!</strong> <span id="i18n_welldone_text">Your answer has been saved</span>
        </div>
        <div id="loading" class="alert alert-info" style="display:none;">
            <a class="close">×</a>
            <span id="i18n_loading_next_task">Loading next task...</span>
        </div>
        <div id="taskcompleted" class="alert alert-info" style="display:none;">
            <strong id="i18n_task_completed">The task has been completed!</strong> <span id="i18n_thanks">Thanks a lot!</span>
        </div>
        <div id="finish" class="alert alert-success" style="display:none;">
            <strong id="i18n_congratulations">Congratulations!</strong> <span id="i18n_congratulations_text">You have participated in all available tasks!</span>
            <br/>
            <div class="alert-actions">
                <a class="btn small" href="/">Go back</a>
                <a class="btn small" href="/app">or, Check other projects</a>
            </div>
        </div>
        <div id="error" class="alert alert-danger" style="display:none;">
            <a class="close">×</a>
            <strong>Error!</strong> Something went wrong, please contact the site administrators
        </div>
    </div> <!-- End Success and Error Messages for the user -->
</div> <!-- End of Row -->

<!--
    Task DOM for loading the Images
    It uses the class="skeleton" to identify the elements that belong to the
    task.
-->
<div class="row skeleton"> <!-- Start Skeleton Row-->
    <div class="col-md-6 "><!-- Start of Question and Submission DIV (column) -->
        <h1 id="question1"><span id="i18n_question1">Do you see a mosquito in this photo?</span></h1> <!-- The question will be loaded here -->
        <div id="answer1"> <!-- Start DIV for the submission buttons -->
            <!-- If the user clicks this button, the saved answer will be value="yes"-->
            <button class="btn btn-success btn-answer1" value='mosquito-yes'><i class="fa fa-thumbs-o-up"></i> <span id="i18n_yes1">Yes</span></button>
            <!-- If the user clicks this button, the saved answer will be value="no"-->
            <button class="btn btn-danger btn-answer1" value='mosquito-no'><i class="fa fa-thumbs-o-down"></i> <span id="i18n_no1">No</span></button>
            <!-- If the user clicks this button, the saved answer will be value="NotKnown"-->
            <button class="btn btn-info btn-answer1" value='mosquito-unknown'><i class="fa fa-question-circle"></i> <span id="i18n_unknown1">I don't know</span></button>

            <a class="btn btn-link" type="button" href="http://atrapaeltigre.com/web/ves-un-mosquito-en-esta-foto/" target="_blank"><i class="fa fa-info-circle fa-2x"></i></a>
        </div><!-- End of DIV for the submission buttons -->

<div hidden id="q2a2"><!-- DIV that is hidden unless user sees mosquito -->
        <h1 id="question2"><span id="i18n_question2">Is it a tiger mosquito?</span></h1> <!-- The question will be loaded here -->
        <div id="answer2"> <!-- Start DIV for the submission buttons -->
            <!-- If the user clicks this button, the saved answer will be value="yes"-->
            <button class="btn btn-success btn-answer2" value='tiger-yes'><i class="fa fa-thumbs-o-up"></i> <span id="i18n_yes2">Yes</span></button>
            <!-- If the user clicks this button, the saved answer will be value="no"-->
            <button class="btn btn-danger btn-answer2" value='tiger-no'><i class="fa fa-thumbs-o-down"></i> <span id="i18n_no2">No</span></button>
            <!-- If the user clicks this button, the saved answer will be value="NotKnown"-->
            <button class="btn btn-info btn-answer2" value='tiger-unknown'><i class="fa fa-question-circle"></i> <span id="i18n_unknown2">I don't know</span></button>

            <a class="btn btn-link" type="button" href="http://atrapaeltigre.com/web/es-un-mosquito-tigre/" target="_blank"><i class="fa fa-info-circle fa-2x"></i></a>

        </div><!-- End of DIV for the submission buttons -->
</div><!-- End of DIV for q2a2 area -->
        <h1 id="question3"><span id="i18n_question3">Do you see a mosquito breeding site in this photo?</span></h1> <!-- The question will be loaded here -->
        <div id="answer3"> <!-- Start DIV for the submission buttons -->
            <!-- If the user clicks this button, the saved answer will be value="yes"-->
            <button class="btn btn-success btn-answer3" value='site-yes'><i class="fa fa-thumbs-o-up"></i> <span id="i18n_yes3">Yes</span></button>
            <!-- If the user clicks this button, the saved answer will be value="no"-->
            <button class="btn btn-danger btn-answer3" value='site-no'><i class="fa fa-thumbs-o-down"></i> <span id="i18n_no3">No</span></button>
            <!-- If the user clicks this button, the saved answer will be value="NotKnown"-->
            <button class="btn btn-info btn-answer3" value='site-unknown'><i class="fa fa-question-circle"></i> <span id="i18n_unknown3">I don't know</span></button>

            <a class="btn btn-link" type="button" href="http://atrapaeltigre.com/web/ves-un-posible-lugar-de-cria-de-mosquito-tigre-en-esta-foto/" target="_blank"><i class="fa fa-info-circle fa-2x"></i></a>

        </div><!-- End of DIV for the submission buttons -->

<br>

<div style="text-align: center;"> 
  <button style="width:100%;position=absolute;" class="btn btn-success btn-answer-submit" value='submit'><i class="fa fa-upload"></i> <span id="i18n_submit">Submit Responses</span></button>
</div>

<br>

        <!-- Feedback items for the user -->
        <p><span id="i18n_working_task">You are working now on task:</span> <span id="task-id" class="label label-warning">#</span></p>
        <p><span id="i18n_tasks_completed">You have completed:</span> <span id="done" class="label label-info"></span> <span id="i18n_tasks_from">tasks from</span>
        <!-- Progress bar for the user -->
        <span id="total" class="label label-info"></span></p>
        <div class="progress progress-striped">
            <div id="progress" rel="tooltip" title="#" class="progress-bar" style="width: 0%;"  role="progressbar"></div>
        </div>

        <!-- taking out Discus comments:
        <div id="disqus_show_btn" style="margin-top:5px;">
            <button class="btn btn-primary btn-large btn-disqus" onclick="loadDisqus()"><i class="fa fa-comments"></i> <span id="i18n_show_comments">Show comments</span></button>
            <button class="btn btn-large btn-disqus" onclick="loadDisqus()" style="display:none"><i class="fa fa-comments"></i> <span id="i18n_hide_comments">Hide comments</span></button>
        </div>
        <div id="disqus_thread" style="margin-top:5px;display:none"></div>
        -->
        
    </div><!-- End of Question and Submission DIV (column) -->
    <div class="col-md-6"><!-- Start of Photo DIV (column) -->
        <a id="photo-link" href="#">
            <img id="photo" src="http://i.imgur.com/GeHxzb7.png" style="max-width=100%">
        </a>
    </div><!-- End of Photo DIV (columnt) -->
</div><!-- End of Skeleton Row -->


<div id="turnip" hidden>O495B2557Y64gcy</div>
        <!-- taking out Discus comments:
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */

    /* * * DON'T EDIT BELOW THIS LINE * * */
    function loadDisqus() {
    $("#disqus_thread").toggle();
    $(".btn-disqus").toggle();
    var disqus_shortname = 'pybossa'; // required: replace example with your forum shortname
    //var disqus_identifier = taskId;
    var disqus_developer = 1;

    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
    }

</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
-->

<script>
// Default language
var userLocale = "en";
// Translations
var messages = {"en": {
                        "i18n_welldone": "Well done!",
                        "i18n_welldone_text": "Your answer has been saved",
                        "i18n_loading_next_task": "Loading next task...",
                        "i18n_task_completed": "The task has been completed!",
                        "i18n_thanks": "Thanks a lot!",
                        "i18n_congratulations": "Congratulations",
                        "i18n_congratulations_text": "You have participated in all available tasks!",
                        "i18n_yes1": "Yes",
                        "i18n_no1": "No",
                        "i18n_unknown1": "I don't know",
                        "i18n_yes2": "Yes",
                        "i18n_no2": "No",
                        "i18n_unknown2": "I don't know",
                        "i18n_yes3": "Yes",
                        "i18n_no3": "No",
                        "i18n_unknown3": "I don't know",
                        "i18n_working_task": "You are working now on task:",
                        "i18n_tasks_completed": "You have completed:",
                        "i18n_tasks_from": "tasks from",
//                        "i18n_show_comments": "Show comments:",
//                        "i18n_hide_comments": "Hide comments:",
                        "i18n_question1": "Do you see a mosquito in this photo?",
                        "i18n_question2": "Is it a tiger mosquito?",
                        "i18n_question3": "Do you see a potential tiger mosquito breeding site in this photo?",
			"i18n_submit": "Submit Responses",
                      },
                "es": {
                        "i18n_welldone": "Bien hecho!",
                        "i18n_welldone_text": "Tu respuesta ha sido guardada",
                        "i18n_loading_next_task": "Cargando la siguiente tarea...",
                        "i18n_task_completed": "La tarea ha sido completadas!",
                        "i18n_thanks": "Muchísimas gracias!",
                        "i18n_congratulations": "Enhorabuena",
                        "i18n_congratulations_text": "Has participado en todas las tareas disponibles!",
                        "i18n_yes1": "Sí",
                        "i18n_no1": "No",
                        "i18n_unknown1": "No sé",
                        "i18n_yes2": "Sí",
                        "i18n_no2": "No",
                        "i18n_unknown2": "No sé",
                        "i18n_yes3": "Sí",
                        "i18n_no3": "No",
                        "i18n_unknown3": "No sé",
                        "i18n_working_task": "Estás trabajando en la tarea:",
                        "i18n_tasks_completed": "Has completado:",
                        "i18n_tasks_from": "tareas de",
//                        "i18n_show_comments": "Mostrar comentarios",
 //                       "i18n_hide_comments": "Ocultar comentarios",
                        "i18n_question1": "¿Ves un mosquito en esta foto?",
                        "i18n_question2": "¿Es un mosquito tigre?",
                        "i18n_question3": "¿Ves un posible lugar de cría de mosquito tigre en esta foto?",
			"i18n_submit": "Enviar respuestas",
                      },
               };
// Update userLocale with server side information
 $(document).ready(function(){
     userLocale = document.getElementById('PYBOSSA_USER_LOCALE').textContent.trim();

});

function i18n_translate() {
    var ids = Object.keys(messages[userLocale])
    for (i=0; i<ids.length; i++) {
        console.log("Translating: " + ids[i]);
        document.getElementById(ids[i]).innerHTML = messages[userLocale][ids[i]];
    }
}


function loadUserProgress() {
    pybossa.userProgress('Tigapics').done(function(data){
        var pct = Math.round((data.done*100)/data.total);
        $("#progress").css("width", pct.toString() +"%");
        $("#progress").attr("title", pct.toString() + "% completed!");
        $("#progress").tooltip({'placement': 'left'}); 
        $("#total").text(data.total);
        $("#done").text(data.done);
    });
}

pybossa.taskLoaded(function(task, deferred) {
    if ( !$.isEmptyObject(task) ) {
        // load image
        var img = $('<img />');
        img.load(function() {
            // continue as soon as the image is loaded
            deferred.resolve(task);
        });
        this_turnip = document.getElementById('turnip').textContent.trim();    
        img.attr('src', 'http://tigaserver.atrapaeltigre.com/get_photo/' + this_turnip + '/180374bd-ae38-4475-8fd5-edd54550cda5/medium');
        img.addClass('img-thumbnail img-responsive');
        task.info.image = img;
	$('#q2a2').hide();

    }
    else {
        deferred.resolve(task);
    }
});
  
pybossa.presentTask(function(task, deferred) {
    if ( !$.isEmptyObject(task) ) {
        loadUserProgress();
        i18n_translate();
	this_turnip = document.getElementById('turnip').textContent.trim();      
        $('#photo-link').html('').append(task.info.image);
        $("#photo-link").attr("href", 'http://tigaserver.atrapaeltigre.com/get_photo/' + this_turnip + '/180374bd-ae38-4475-8fd5-edd54550cda5/full');
        $("#photo-link").attr("target", "_blank");

        $('#task-id').html(task.id);

	$('.btn').removeClass('active');

	// handle buttons as radio groups
	$('.btn-answer1').off('click').on('click', function() {
		$('.btn-answer1').removeClass('active');
	   	$(this).addClass('active');
		if($('.btn-answer1.active').attr("value") == "mosquito-yes"){
			$('#q2a2').show(100);
		} else{
		$('#q2a2').hide(100);
		}

	});
	$('.btn-answer2').off('click').on('click', function() {
		$('.btn-answer2').removeClass('active');
	   	$(this).addClass('active');
	});

	$('.btn-answer3').off('click').on('click', function() {
		$('.btn-answer3').removeClass('active');
	   	$(this).addClass('active');
	});



	// handle answers
        $('.btn-answer-submit').off('click').on('click', function() {
            var answer = "{mosquito:" + $('.btn-answer1.active').attr("value") + ", tiger:" + $('.btn-answer2.active').attr("value") + ", site:" + $('.btn-answer3.active').attr("value") + "}";
            if (typeof answer != 'undefined') {
                //console.log(answer);
                pybossa.saveTask(task.id, answer).done(function() {
                    deferred.resolve();
                });
                $("#loading").fadeIn(500);
                
                /* if ($("#disqus_thread").is(":visible")) {
                    $('#disqus_thread').toggle();
                    $('.btn-disqus').toggle();
                } */
            }
            else {
                $("#error").show();
            }
        });
        $("#loading").hide();
    }
    else {
        $(".skeleton").hide();
        $("#loading").hide();
        $("#finish").fadeIn(500);
    }
});

pybossa.run('Tigapics'); 
</script>