<commit_before><style type="text/css">

        h1,h2,h3,h4,h5,h6 {font-family: 'Museo Slab', Arial, Helvetica, sans-serif;font-weight: normal;}
	   h1 {font-size: 24px; line-height: 26px;}
	   h2 {font-size: 18px; line-height: normal;}
	   h3 {font-size: 15px; line-height: normal;}
	   .alignright {float: right;}
	   .alignleft {float: left;}
	   .aligncenter {display: block; margin: 0 auto; clear: both}
	   .clearleft {clear: left;}
	   .clearright {clear: right;}
	   .clearboth {clear: both;}
       .subheader {
           margin: 10px 0 0 200px;
       }
       #iphone {
           max-width: 100%;
		   background: url(../../../static/img/micromappers/imageClicker/lpoT2x4.png) left top no-repeat;
		   width: 618px;
		   height: 455px;
		   margin-top: -28px;
		   float:left;
           border: 0px;
       }
	   #taggedimg {
		   min-width: 355px;
		   min-height: 280px;
		   padding: 59px 0 0 175px;
		   float:left;
	   }
	   ul#damage {
	       padding: 59px 0 0 10px;
		   margin:0;
		   float:left;
	   }
	   ul#damage>a>li {
	       padding: 0 0 36px 0;
		   list-style: none;
	   }
	   ul#damage>a>li.none {
	       background: url(../../../static/img/micromappers/imageClicker/JPqxj2S.png) left top no-repeat;
		   width: 58px;
		   height: 69px;
	   }
	   ul#damage>a>li.mild {
	       background: url(../../../static/img/micromappers/imageClicker/Vrijj2Z.png) left top no-repeat;
		   width: 57px;
		   height: 71px;
	   }
	   ul#damage>a>li.severe {
	       background: url(../../../static/img/micromappers/imageClicker/JI2aZ52.png) left top no-repeat;
		   width: 57px;
		   height: 67px;
	   }
	   ul#damage>a>li:hover.none {
            background: url(../../../static/img/micromappers/imageClicker/hSzWKrN.png) left top no-repeat;
            width: 58px;
            height: 69px;
    		cursor: pointer;
	   }
	   ul#damage>a>li:hover.mild {
	       background: url(../../../static/img/micromappers/imageClicker/dMPYuJC.png) left top no-repeat;
		   width: 57px;
		   height: 71px;
           cursor: pointer;
	   }
	   ul#damage>a>li:hover.severe {
	       background: url(../../../static/img/micromappers/imageClicker/kZDwZMK.png) left top no-repeat;
		   width: 57px;
		   height: 67px;
           cursor: pointer;
	   }

       ul#damage>a>li:active.none {
            background: url(../../../static/img/micromappers/imageClicker/hSzWKrN.png) left top no-repeat;
            width: 58px;
            height: 69px;
            cursor: pointer;
           filter: hue-rotate(110deg);
           -webkit-filter: hue-rotate(110deg);
           -moz-filter: hue-rotate(110deg);
           -o-filter: hue-rotate(110deg);
           -ms-filter: hue-rotate(110deg);
	   }

       ul#damage>a>li:active.mild {
	       background: url(../../../static/img/micromappers/imageClicker/dMPYuJC.png) left top no-repeat;
		   width: 57px;
		   height: 71px;
           cursor: pointer;
           filter: hue-rotate(110deg);
           -webkit-filter: hue-rotate(110deg);
           -moz-filter: hue-rotate(110deg);
           -o-filter: hue-rotate(110deg);
           -ms-filter: hue-rotate(110deg);
	   }
	   ul#damage>a>li:active.severe {
	       background: url(../../../static/img/micromappers/imageClicker/kZDwZMK.png) left top no-repeat;
		   width: 57px;
		   height: 67px;
           cursor: pointer;
           filter: hue-rotate(110deg);
           -webkit-filter: hue-rotate(110deg);
           -moz-filter: hue-rotate(110deg);
           -o-filter: hue-rotate(110deg);
           -ms-filter: hue-rotate(110deg);
	   }

	   #tagged {
	       margin: -90px 0 0 324px;
		   float:left;
	   }
	   input {
           max-width: 100%;
       }
       .btn {
           margin: 0 6px 0 0;
       }

        .thumbnail{
        position: relative;
        z-index: 0;
        border: 0px;
        }

        .thumbnail:hover{
        background-color: transparent;
        z-index: 50;
        }

        .thumbnail span{ /*CSS for enlarged image*/
        position: absolute;
        background-color: #ffffff;
        padding: 0px;
        left: -1000px;
        border: 3px solid;
        visibility: hidden;
        color: black;
        text-decoration: none;
        }

        .thumbnail span img{ /*CSS for enlarged image*/
        border-width: 0;
        padding: 0px;

        }

        .thumbnail:hover span{ /*CSS for enlarged image on hover*/
        visibility: visible;
        top: 0;
        left: 0px; /*position where enlarged image should offset horizontally */

        }

    </style>



<div class="row">
    <!-- Success and Error Messages for the user --> 
    <div class="span6 offset2" style="height:50px">

        <div id="taskcompleted" class="alert alert-info" style="display:none;">
            <strong>The task has been completed!</strong> Thanks a lot!
        </div>
        <div id="finish" class="alert alert-success" style="display:none;">
            <strong>Congratulations!</strong> You have participated in all available tasks!
            <br/>
            <div class="alert-actions">
                <a class="btn small" href="/">Go back</a>
                <a class="btn small" href="/app">or, Check other applications</a>
            </div>
        </div>
        <div id="error" class="alert alert-error" style="display:none;">
            <a class="close">×</a>
            <strong>Error!</strong> Something went wrong, please contact the site administrators
        </div>
         <div id="loading" style="padding: 25px 0 0 325px;float:left;">
                                        <img src="http://aidr.qcri.org/img/ajax-loader.gif">
         </div>
    </div> <!-- End Success and Error Messages for the user -->
</div> <!-- End of Row -->

<!--
    Task DOM for loading the Tweets
    It uses the class="skeleton" to identify the elements that belong to the
    task.

-->
<div class="row">
    <div class="span12" style="background-color: #ffffff; border: 0px;padding-bottom: 10px;margin-top: -100px;">
         <h1><a href="/app/MM_ImageClicker/">Image Clicker</a> : MicroMappers</h1>
     </div>
</div>
<div class="row skeleton"> <!-- Start Skeleton Row-->
    <div class="span12" style="margin-top: -50px;"><!-- Start of Question and Submission DIV (column) -->

        <div class="row-fluid" >

            <div class="span3">

                <div style="text-align:center;margin-right:120px;padding-bottom: 10px;">
                        <a class="btn btn-primary" href="../tutorial" ><i class="icon-question-sign"></i> Tutorial</a>
                </div>

                <div style="
    margin-right: 4px;
    padding: 7px;
    background-color: #0FC5BA;
    border: 1px solid #D5CECE;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
">
                    <input type="hidden" id="task-id">
                    <p>Completed: <span id="done" class="label label-info"></span> out of
                    <span id="total" class="label label-inverse"></span> Clicks</p>
                    <p><span id="remain" class="label label-info"></span> Clicks remaining!</p>
                    <p><b>Rank : <span id="rank"></span></b></p>
                </div>

            </div>
            <div class="span9">

                <div class="row">
                    <div>
                        <h2 class="subheader">How much damage do you see in this picture:</h2>
                        <div id="iphone">
                            <div id="taggedimg" class="thumbnail">
                                <a href="#thumb" id="photo-link"></a>
                            </div>

                            <ul id="damage">
                              <a href="#"><li value="severe" class="none btn-answer" ></li></a>
                              <a href="#"><li value="mild"  class="mild btn-answer" ></li></a>
                              <a href="#"><li value="none" class="severe btn-answer" ></li></a>
                            </ul>
                        </div>
                        <br/>
                        <br/>
                    </div>

                </div>
            </div>


        </div>
    </div>

<div class="span12" style="bottom: 0px;">
    <div style="margin-top:100px;width: 0%;color: #ffffff">

     </div>
</div>


        <!-- Feedback items for the user -->

</div><!-- End of Skeleton Row -->


<script>

function loadUserProgress() {
    pybossa.userProgress('MM_ImageClicker').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'});

        var remaining = data.total - data.done;
        $("#total").text(data.total);
        $("#done").text(data.done);
        $("#remain").text(remaining);

        var completed = data.done;
        var rankTitle = "Volunteer";

        if(completed>10 && completed <= 29){
            rankTitle = "Red Cross Intern";
        }
        else if(completed>30 && completed <= 59){
            rankTitle = "New FEMA Recruit";
        }
        else if(completed>60 && completed <= 99){
            rankTitle = "UN Humanitarian";
        }
        else if(completed>100 && completed <= 299){
            rankTitle = "Senior UN Official";
        }
        else if(completed>300 && completed <= 499){
            rankTitle = "UN Country Director";
        }
        else if(completed>500 && completed <= 999){
            rankTitle = "Head of UN OCHA";
        }
        else if(completed>1000 ){
            rankTitle = "UN Secretary General";
        }

         $("#rank").text(rankTitle);

    });
}

function imgError(image) {
    image.onerror = "";
    image.src = "../../../static/img/micromappers/imageClicker/mm_pleaseclicknone.png";
    return true;
}
  
pybossa.taskLoaded(function(task, deferred) {
    if ( !$.isEmptyObject(task) ) {
        
      var img = $('<img name="tweetphoto" onerror="imgError(this);"/>');
                  

        var imURL = task.info.imgurl;
      

        img.attr('src', task.info.imgurl).css( {'height': '260px',
                                                'width': '260px',
                                                'margin-left': '42px',
                                                'margin-top': '5px'});
        img.addClass('img-polaroid');

        task.info.image = img;
        task.answer = {'category': null,
                        'tweet': task.info.tweet,
                        'tweetid': task.info.tweetid,
                        'taskid': task.id,
                        'author': task.info.author,
                        'url': task.info.url,
                        'timestamp': task.info.timestamp,
                        'lon': task.info.lon,
                        'lat': task.info.lat,
                        'imgurl': task.info.imgurl
                    };

       // img.load(function() {
            // continue as soon as the image is loaded
            deferred.resolve(task);
       // });

    }
    else {
        deferred.resolve(task);
    }
});

pybossa.presentTask(function(task, deferred) {
    if ( !$.isEmptyObject(task) ) {
        loadUserProgress();
        $('#photo-link').html('').append(task.info.image);
        var imURL = task.info.imgurl;

        $("#photo-link").attr("href", task.info.imgurl);
        $("#photo-link").append('<span ><img id="fsize" width="530" height="530" onerror="imgError(this);"/></span>');
        $("#fsize").attr("src", task.info.imgurl);
        $('#task-id').html(task.id);
        $(window).one('keydown', function(e) {
            console.log(e.keyCode);
            if (e.type == "keydown") {
                if(e.keyCode == 51) {
                    task.answer.category = 'severe';
                    pybossa.saveTask(task.id, task.answer).done(function() {
                        deferred.resolve();
                    });
                    $("#loading").fadeIn(500);
                }
                if (e.keyCode == 50) {
                    task.answer.category = 'mild';
                    pybossa.saveTask(task.id, task.answer).done(function() {
                        deferred.resolve();
                    });
                    $("#loading").fadeIn(500);
                }
                if (e.keyCode == 49) {
                    task.answer.category = 'none';
                    pybossa.saveTask(task.id, task.answer).done(function() {
                        deferred.resolve();
                    });
                    $("#loading").fadeIn(500);
                }
            }
        });
        $('.btn-answer').off('click').on('click', function(evt) {

            var selectedValue = $(evt.target).attr("class");
            selectedValue = selectedValue.replace("btn-answer","");
            console.log(selectedValue);
            task.answer.category = selectedValue;
            if (typeof task.answer.category != 'undefined') {
                pybossa.saveTask(task.id, task.answer).done(function() {
                    deferred.resolve();
                });
                $("#loading").fadeIn(500);
            } else {
                $("#error").show();
            }
        });
        $("#loading").hide();
    }
    else {
        $(".skeleton").hide();
        $("#loading").hide();
        $("#finish").fadeIn(500);
    }
});

pybossa.run('MM_ImageClicker');


</script><commit_msg>optimze template<commit_after><style type="text/css">

        h1,h2,h3,h4,h5,h6 {font-family: 'Museo Slab', Arial, Helvetica, sans-serif;font-weight: normal;}
	   h1 {font-size: 24px; line-height: 26px;}
	   h2 {font-size: 18px; line-height: normal;}
	   h3 {font-size: 15px; line-height: normal;}
	   .alignright {float: right;}
	   .alignleft {float: left;}
	   .aligncenter {display: block; margin: 0 auto; clear: both}
	   .clearleft {clear: left;}
	   .clearright {clear: right;}
	   .clearboth {clear: both;}
       .subheader {
           margin: 10px 0 0 200px;
       }
       #iphone {
           max-width: 100%;
		   background: url(../../../static/img/micromappers/imageClicker/lpoT2x4.png) left top no-repeat;
		   width: 618px;
		   height: 455px;
		   margin-top: -28px;
		   float:left;
           border: 0px;
       }
	   #taggedimg {
		   min-width: 355px;
		   min-height: 280px;
		   padding: 59px 0 0 175px;
		   float:left;
	   }
	   ul#damage {
	       padding: 59px 0 0 10px;
		   margin:0;
		   float:left;
	   }
	   ul#damage>a>li {
	       padding: 0 0 36px 0;
		   list-style: none;
	   }
	   ul#damage>a>li.none {
	       background: url(../../../static/img/micromappers/imageClicker/JPqxj2S.png) left top no-repeat;
		   width: 58px;
		   height: 69px;
	   }
	   ul#damage>a>li.mild {
	       background: url(../../../static/img/micromappers/imageClicker/Vrijj2Z.png) left top no-repeat;
		   width: 57px;
		   height: 71px;
	   }
	   ul#damage>a>li.severe {
	       background: url(../../../static/img/micromappers/imageClicker/JI2aZ52.png) left top no-repeat;
		   width: 57px;
		   height: 67px;
	   }
	   ul#damage>a>li:hover.none {
            background: url(../../../static/img/micromappers/imageClicker/hSzWKrN.png) left top no-repeat;
            width: 58px;
            height: 69px;
    		cursor: pointer;
	   }
	   ul#damage>a>li:hover.mild {
	       background: url(../../../static/img/micromappers/imageClicker/dMPYuJC.png) left top no-repeat;
		   width: 57px;
		   height: 71px;
           cursor: pointer;
	   }
	   ul#damage>a>li:hover.severe {
	       background: url(../../../static/img/micromappers/imageClicker/kZDwZMK.png) left top no-repeat;
		   width: 57px;
		   height: 67px;
           cursor: pointer;
	   }

       ul#damage>a>li:active.none {
            background: url(../../../static/img/micromappers/imageClicker/hSzWKrN.png) left top no-repeat;
            width: 58px;
            height: 69px;
            cursor: pointer;
           filter: hue-rotate(110deg);
           -webkit-filter: hue-rotate(110deg);
           -moz-filter: hue-rotate(110deg);
           -o-filter: hue-rotate(110deg);
           -ms-filter: hue-rotate(110deg);
	   }

       ul#damage>a>li:active.mild {
	       background: url(../../../static/img/micromappers/imageClicker/dMPYuJC.png) left top no-repeat;
		   width: 57px;
		   height: 71px;
           cursor: pointer;
           filter: hue-rotate(110deg);
           -webkit-filter: hue-rotate(110deg);
           -moz-filter: hue-rotate(110deg);
           -o-filter: hue-rotate(110deg);
           -ms-filter: hue-rotate(110deg);
	   }
	   ul#damage>a>li:active.severe {
	       background: url(../../../static/img/micromappers/imageClicker/kZDwZMK.png) left top no-repeat;
		   width: 57px;
		   height: 67px;
           cursor: pointer;
           filter: hue-rotate(110deg);
           -webkit-filter: hue-rotate(110deg);
           -moz-filter: hue-rotate(110deg);
           -o-filter: hue-rotate(110deg);
           -ms-filter: hue-rotate(110deg);
	   }

	   #tagged {
	       margin: -90px 0 0 324px;
		   float:left;
	   }
	   input {
           max-width: 100%;
       }
       .btn {
           margin: 0 6px 0 0;
       }

        .thumbnail{
        position: relative;
        z-index: 0;
        border: 0px;
        }

        .thumbnail:hover{
        background-color: transparent;
        z-index: 50;
        }

        .thumbnail span{ /*CSS for enlarged image*/
        position: absolute;
        background-color: #ffffff;
        padding: 0px;
        left: -1000px;
        border: 3px solid;
        visibility: hidden;
        color: black;
        text-decoration: none;
        }

        .thumbnail span img{ /*CSS for enlarged image*/
        border-width: 0;
        padding: 0px;

        }

        .thumbnail:hover span{ /*CSS for enlarged image on hover*/
        visibility: visible;
        top: 0;
        left: 0px; /*position where enlarged image should offset horizontally */

        }

    </style>



<div class="row">
    <!-- Success and Error Messages for the user --> 
    <div class="span6 offset2" style="height:50px">

        <div id="taskcompleted" class="alert alert-info" style="display:none;">
            <strong>The task has been completed!</strong> Thanks a lot!
        </div>
        <div id="finish" class="alert alert-success" style="display:none;">
            <strong>Congratulations!</strong> You have participated in all available tasks!
            <br/>
            <div class="alert-actions">
                <a class="btn small" href="/">Go back</a>
                <a class="btn small" href="/app">or, Check other applications</a>
            </div>
        </div>
        <div id="error" class="alert alert-error" style="display:none;">
            <a class="close">×</a>
            <strong>Error!</strong> Something went wrong, please contact the site administrators
        </div>
         <div id="loading" style="padding: 25px 0 0 325px;float:left;">
                                        <img src="http://aidr.qcri.org/img/ajax-loader.gif">
         </div>
    </div> <!-- End Success and Error Messages for the user -->
</div> <!-- End of Row -->

<!--
    Task DOM for loading the Tweets
    It uses the class="skeleton" to identify the elements that belong to the
    task.

-->
<div class="row">
    <div class="span12" style="background-color: #ffffff; border: 0px;padding-bottom: 10px;margin-top: -100px;">
         <h1><a href="/app/MM_ImageClicker/">Image Clicker</a> : MicroMappers</h1>
     </div>
</div>
<div class="row skeleton"> <!-- Start Skeleton Row-->
    <div class="span12" style="margin-top: -50px;"><!-- Start of Question and Submission DIV (column) -->

        <div class="row-fluid" >

            <div class="span3">

                <div style="text-align:center;margin-right:120px;padding-bottom: 10px;">
                        <a class="btn btn-primary" href="../tutorial" ><i class="icon-question-sign"></i> Tutorial</a>
                </div>

                <div style="
    margin-right: 4px;
    padding: 7px;
    background-color: #0FC5BA;
    border: 1px solid #D5CECE;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
">
                    <input type="hidden" id="task-id">
                    <p>Completed: <span id="done" class="label label-info"></span> out of
                    <span id="total" class="label label-inverse"></span> Clicks</p>
                    <p><span id="remain" class="label label-info"></span> Clicks remaining!</p>
                    <p><b>Rank : <span id="rank"></span></b></p>
                </div>

            </div>
            <div class="span9">

                <div class="row">
                    <div>
                        <h2 class="subheader">How much damage do you see in this picture:</h2>
                        <div id="iphone">
                            <div id="taggedimg" class="thumbnail">
                                <a href="#thumb" id="photo-link"></a>
                            </div>

                            <ul id="damage">
                              <a href="#"><li value="severe" class="none btn-answer" ></li></a>
                              <a href="#"><li value="mild"  class="mild btn-answer" ></li></a>
                              <a href="#"><li value="none" class="severe btn-answer" ></li></a>
                            </ul>
                        </div>
                        <br/>
                        <br/>
                    </div>

                </div>
            </div>


        </div>
    </div>

<div class="span12" style="bottom: 0px;">
    <div style="margin-top:100px;width: 0%;color: #ffffff">

     </div>
</div>


        <!-- Feedback items for the user -->

</div><!-- End of Skeleton Row -->


<script>
var localtask;
var currentTaskItem;
function loadUserProgress() {
    pybossa.userProgress('MM_ImageClicker').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'});

        var remaining = data.total - data.done;
        $("#total").text(data.total);
        $("#done").text(data.done);
        $("#remain").text(remaining);

        var completed = data.done;
        var rankTitle = "Volunteer";

        if(completed>10 && completed <= 29){
            rankTitle = "Red Cross Intern";
        }
        else if(completed>30 && completed <= 59){
            rankTitle = "New FEMA Recruit";
        }
        else if(completed>60 && completed <= 99){
            rankTitle = "UN Humanitarian";
        }
        else if(completed>100 && completed <= 299){
            rankTitle = "Senior UN Official";
        }
        else if(completed>300 && completed <= 499){
            rankTitle = "UN Country Director";
        }
        else if(completed>500 && completed <= 999){
            rankTitle = "Head of UN OCHA";
        }
        else if(completed>1000 ){
            rankTitle = "UN Secretary General";
        }

         $("#rank").text(rankTitle);

    });
}

function imgError(image) {
    image.onerror = "";
    image.src = "../../../static/img/micromappers/imageClicker/mm_pleaseclicknone.png";
    return true;
}
  
pybossa.taskLoaded(function(task, deferred) {
    if ( !$.isEmptyObject(task) ) {
        console.log("taskLoaded");
        console.log("taskLoaded : " + task.id);
        var img = $('<img name="tweetphoto" onerror="imgError(this);"/>');

        img.attr('src', task.info.imgurl).css( {'height': '260px',
                                                'width': '260px',
                                                'margin-left': '42px',
                                                'margin-top': '5px'});
        img.addClass('img-polaroid');

      //  task.info.image = img;
        task.image = img;
        task.answer = {'category': null,
                        'tweet': task.info.tweet,
                        'tweetid': task.info.tweetid,
                        'taskid': task.id,
                        'author': task.info.author,
                        'url': task.info.url,
                        'timestamp': task.info.timestamp,
                        'lon': task.info.lon,
                        'lat': task.info.lat,
                        'imgurl': task.info.imgurl
                    };

        img.load(function() {
            // continue as soon as the image is loaded
            deferred.resolve(task);
        });

    }
    else {
        deferred.resolve(task);
    }
});

pybossa.presentTask(function(task, deferred) {
    if ( !$.isEmptyObject(task) ) {
        console.log("presentTask");
        console.log("presentTask : " + task.id);
        loadUserProgress();
        currentTaskItem = task;
        localtask = task.answer;
        $('#photo-link').html('').append(task.image);

        $("#photo-link").attr("href", task.info.imgurl);
        $("#photo-link").append('<span ><img id="fsize" width="530" height="530" onerror="imgError(this);"/></span>');
        $("#fsize").attr("src", task.info.imgurl);
        $('#task-id').html(task.id);
        $(window).one('keydown', function(e) {
            console.log(e.keyCode);
            if (e.type == "keydown") {
                if(e.keyCode == 51) {
                    task.answer.category = 'severe';
                    pybossa.saveTask(task.id, localtask).done(function() {
                        deferred.resolve();
                    });
                    $("#loading").fadeIn(500);
                }
                if (e.keyCode == 50) {
                    task.answer.category = 'mild';
                    pybossa.saveTask(task.id, localtask).done(function() {
                        deferred.resolve();
                    });
                    $("#loading").fadeIn(500);
                }
                if (e.keyCode == 49) {
                    task.answer.category = 'none';
                    pybossa.saveTask(task.id, localtask).done(function() {
                        deferred.resolve();
                    });
                    $("#loading").fadeIn(500);
                }
            }
        });
        $('.btn-answer').off('click').on('click', function(evt) {

            var selectedValue = $(evt.target).attr("class");
            selectedValue = selectedValue.replace("btn-answer","");
            console.log(selectedValue);
            task.answer.category = selectedValue;
            if (typeof task.answer.category != 'undefined') {
                pybossa.saveTask(task.id, localtask).done(function() {
                    $("#loading").fadeIn(500);
                    deferred.resolve();
                });

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

pybossa.run('MM_ImageClicker');


</script>
{'fraction_non_alphanumeric': 0.15885539759298986, 'fraction_numerical': 0.023851943424353705, 'mean_word_length': 1.6410601113885155, 'pattern_counts': {'":': 0, '<': 253, '<?xml version=': 0, '>': 295, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 24, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '406673', 'n_tokens_mistral': 9186, 'n_tokens_neox': 8113, 'n_words': 1704}