template.html

<style>
    .btn-tag {
        margin-bottom: 5px;
        text-transform: capitalize;
    }

    h3 {
        margin-top: 5px;
    }


</style>
<!-- Modal for surveys -->
<div id="survey" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Survey</h4>
      </div>
      <div class="modal-body" style="display: flex; justify-content: center;">
          <!-- Change the link to google form of your choice-->
            <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdeuBa0z7kKbEzkVw2UK89u1pa61klSVJuScAUJUlFR7L2Q9g/viewform?embedded=true" width="100%" height="500" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<!-- Success and Error Messages for the user --> 
<div class="row">
    <div class="col-md-6 col-md-offset-2" style="height:50px">
        <!-- SUCCESS message for the user -->
        <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>
        <!-- LOADING message for the user -->
        <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>
        <!-- TASK COMPLETED message for the user -->
        <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>
        <!-- FINISH message for the user -->
        <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="/project">or, Check other projects</a>
            </div>
        </div>
        <!-- ERROR message for the user -->
        <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 Flickr 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-4 "><!-- Start of Question and Submission DIV (column) -->
        <h2>Select any of the following tags that are applicable</h2>
        <h3>Topics</h3>
        <div id="topics">
        <button class="btn btn-sm btn-default btn-tag" value="multiculturalism">Multiculturalism</button>
        <button class="btn btn-sm btn-default btn-tag" value="mobility">Mobility</button>
        <button class="btn btn-sm btn-default btn-tag" value="inmigration">inmigration</button>
        <button class="btn btn-sm btn-default btn-tag" value="borders">boders</button>
        <button class="btn btn-sm btn-default btn-tag" value="religion">religion</button>
        <button class="btn btn-sm btn-default btn-tag" value="spiritualism">spiritualism</button>
        <button class="btn btn-sm btn-default btn-tag" value="brexit">brexit</button>
        <button class="btn btn-sm btn-default btn-tag" value="elections">elections</button>
        <button class="btn btn-sm btn-default btn-tag" value="referendum">referendum</button>
        <button class="btn btn-sm btn-default btn-tag" value="eu">European union</button>
        </div>

        <h3>People</h3>
        <div id="people">
        <button class="btn btn-sm btn-default btn-tag" value="emperor">emperor</button>
        <button class="btn btn-sm btn-default btn-tag" value="soldier">soldier</button>
        <button class="btn btn-sm btn-default btn-tag" value="warrior">warrior</button>
        <button class="btn btn-sm btn-default btn-tag" value="celt">Celt</button>
        <button class="btn btn-sm btn-default btn-tag" value="barbarian">barbarian</button>
        <button class="btn btn-sm btn-default btn-tag" value="anglo-saxon">Anglo-saxon</button>
        <button class="btn btn-sm btn-default btn-tag" value="roman">roman</button>
        </div>

        <h3>Periods</h3>
        <div id="periods">
        <button class="btn btn-sm btn-default btn-tag" value="roman">roman</button>
        <button class="btn btn-sm btn-default btn-tag" value="iron-age">iron age</button>
        <button class="btn btn-sm btn-default btn-tag" value="medieval">medieval</button>
        </div>

        <h3>Countries and Regions</h3>
        <div id="countriesRegions">
        <button class="btn btn-sm btn-default btn-tag" value="uk">UK</button>
        <button class="btn btn-sm btn-default btn-tag" value="us">US</button>
        <button class="btn btn-sm btn-default btn-tag" value="north-america">North america</button>
        <button class="btn btn-sm btn-default btn-tag" value="europe">europe</button>
        </div>

        <h3>Yours (comma separated)</h3>
        <input id="tags" type="text" name="tags">
        <div id="custom" style="margin-top:5px;">
        </div>

        <h4>Any comments?</h4>
        <textarea id="comments" rows="4" cols="45"></textarea>


    </div><!-- End of Question and Submission DIV (column) -->
    <div class="col-md-8"><!-- Start of Photo DIV (column) -->
       <div id="text" class="embed-responsive embed-responsive-4by3" style="margin-bottom:10px;"></div>

        <a id="newtab" target="_blank" href="#" class="btn btn-warning pull-right" style="margin-bottom:10px;margin-left:5px;">View the original</a>

       <button class="btn btn-success btn-lg btn-submit pull-left" style="display:none;">Submit</button>
       <a href="../tutorial" class="btn btn-primary pull-right" style="margin-bottom:10px;margin-left: 5px; ">Tutorial</a>
       <a href="//community.micropasts.org/category/crowdsourcing-support" class="btn btn-info pull-right" style="margin-bottom:10px;margin-left: 5px; ">Community Help</a>
 
    </div><!-- End of Photo DIV (columnt) -->
</div><!-- End of Skeleton Row -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<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_yes": "Yes",
                        "i18n_no_photo": "No photo",
                        "i18n_i_dont_know": "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_question": "Do you see a human face in this photo?",
                      },
                "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_yes": "Sí",
                        "i18n_no_photo": "No hay foto",
                        "i18n_i_dont_know": "No lo 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_question": "¿Ves una cara humana en esta foto?",
                      },
               };
// 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('texttagging').done(function(data){
        if (data.done === 1 ) {
            $('#survey').modal('show');
        }
    });
}

pybossa.taskLoaded(function(task, deferred) {
    if ( !$.isEmptyObject(task) ) {
        task.answer = {'topics': [],
            'people': [],
            'periods': [],
            'countriesRegions': [],
            'custom': [],
            'comments': ''
        }
       deferred.resolve(task);
    }
    else {
       deferred.resolve(task);
    }
});


function resetStyles(task) {
    $(".btn-tag").removeClass("active");
    $("#text").html("");
    $(".btn-submit").hide();
}


function deleteItem(task, key, item) {
    var index = task.answer[key].indexOf(item);
    if (index > -1) {
        task.answer[key].splice(index, 1);
    }
}


function toggleSubmit(task){
    total = []
    for (var key in task.answer) {
        console.log(task.answer[key]);
        total = total.concat(task.answer[key]);
        }
    console.log(total);
    if (total.length > 1) {
        $(".btn-submit").show();
    }
    else {
        $(".btn-submit").hide();
    }

}

function toggleBtn(btn, task) {
    var answer = $(btn).attr("value");
    var key =  $(btn).parent().attr("id");
    if ($(btn).hasClass('active')) {
        $(btn).removeClass('active');
        deleteItem(task, key, answer);
        //console.log(task.answer);
        if (key === 'custom') {
            $(btn).remove();
        }
    }
    else {
        $(btn).addClass('active');
        task.answer[key].push(answer);
        //console.log(task.answer);
    }

    toggleSubmit(task);
}


pybossa.presentTask(function(task, deferred) {
    if ( !$.isEmptyObject(task) ) {
        loadUserProgress();
        //i18n_translate();
        resetStyles(task);
        $('#task-id').html(task.id);

        var p = $("<p/>");
        var title = $("<h3/>");
        var source = $("<p/>");
        title.text(task.info.title);
        title.css("font-weight", "bold");
        title.css("font-size", "18px");

        var author = $("<p/>");
        author.text("By: " + task.info.author);
        author.css("font-size", "12px");

        var date = $("<p/>");
        date.text("Published: " + task.info.datetime);
        date.css("font-size", "12px");


        source.text("Source: " + task.info.source);
        source.css("font-size", "12px");

        p.html(task.info.text); 
        p.css("width", "100%");
        p.css("font-size", "14px");
        $("#text").html("").append(title);
        $("#text").append(author);
        $("#text").append(date);
        $("#text").append(source);
        $("#text").append(p);
        $("#newtab").attr("href", task.info.url);
        
        
        var handleBtn = function(evt) {
            toggleBtn(this, task);
        }

        $('.btn-tag').off('click').on('click', handleBtn);

        var lazyLoad = function(){
            var tags = $(this).val().replace(/ /g,'').split(",");
            //$("#custom").html("");
            //task.answer.custom = [];
            for(var tag in tags) {
                if (tags[tag] !== '') {
                    task.answer.custom.push(tags[tag].toLowerCase());
                    var btn = $("<btn/>");
                    btn.addClass("btn btn-xs btn-default btn-tag active");
                    btn.val(tags[tag]);
                    btn.text(tags[tag]);
                    btn.css("margin-right", "5px");
                    btn.on('click', handleBtn);
                    $("#custom").append(btn);
                }
            }
            $(this).val("");
            toggleSubmit(task);
        }


        $("#tags").on("change paste keyup", _.debounce(lazyLoad, 1000));
        $("#comments").on("change paste keyup", function(){
            task.answer.comments = $(this).val();
            //console.log(task.answer);
        });

        $('.btn.btn-submit').off('click').on('click', function(evt) {
                pybossa.saveTask(task.id, task.answer).done(function() {
                    deferred.resolve();
                });
        });

        $("#loading").hide();
    }
    else {
        $(".skeleton").hide();
        $("#loading").hide();
        $("#finish").fadeIn(500);
    }
});

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