Adicionado o Ranking e reorganização do projeto.

Adabriand Furtado
1 parent 3d5def44
Showing 63 changed files with 840 additions and 245 deletions Show diff stats
validador.py
view/assets/css/main.css
view/assets/css/ranking.css
view/assets/fonts/Helvetica.otf
view/assets/fonts/TitilliumWeb-Black.ttf
view/assets/fonts/TitilliumWeb-Bold.ttf
view/assets/fonts/TitilliumWeb-BoldItalic.ttf
view/assets/fonts/TitilliumWeb-ExtraLight.ttf
view/assets/fonts/TitilliumWeb-ExtraLightItalic.ttf
view/assets/fonts/TitilliumWeb-Italic.ttf
view/assets/fonts/TitilliumWeb-Light.ttf
view/assets/fonts/TitilliumWeb-LightItalic.ttf
view/assets/fonts/TitilliumWeb-Regular.ttf
view/assets/fonts/TitilliumWeb-SemiBold.ttf
view/assets/fonts/TitilliumWeb-SemiBoldItalic.ttf
view/assets/fonts/roboto/Roboto-Black.ttf
view/assets/fonts/roboto/Roboto-BlackItalic.ttf
view/assets/fonts/roboto/Roboto-Bold.ttf
view/assets/fonts/roboto/Roboto-BoldItalic.ttf
view/assets/fonts/roboto/Roboto-Italic.ttf
@@ -35,7 +35,7 @@ class Validador:
     def __update_project_info(self, project):
         template = self.env.get_template('template.html')
         project.info['task_presenter'] = template.render(server=self.config['HOST_STATIC_FILES_ENDPOINT'], server_backend=self.config['HOST_ENDPOINT'], app_shortname=self.config['PYBOSSA_APP_SHORT_NAME'])
-        project.info['thumbnail'] = self.config['HOST_STATIC_FILES_ENDPOINT'] + "/img/thumbnail.png"
+        project.info['thumbnail'] = self.config['HOST_STATIC_FILES_ENDPOINT'] + "/assets/img/thumbnail.png"
         project.info['sched'] = "incremental"
         project.info['published'] = True
         project.allow_anonymous_contributors = False
@@ -98,7 +98,6 @@ class Validador:
         task_id = request.form['task_id']
         project_id = request.form['project_id']
         sign_name = request.form['sign_name']
-        api_host = self.config['API_HOST']
         api_dbhost = self.config['API_DB_HOST']
         number_of_approval = int(request.form['number_of_approval'])
         number_of_avatar_disapproval = int(request.form['number_of_avatar_disapproval'])
+@import url("ranking.css");
+
 @font-face {
 	font-family: 'Titillium Web';
-	src: url('../fonts/TitilliumWeb-SemiBold.ttf') format('truetype');
+	src: url('../fonts/titilliumweb/TitilliumWeb-SemiBold.ttf')
+		format('truetype');
+}
+
+#alert-container {
+	padding: 0px;
+}
+
+#alert-container .alert-actions a {
+	padding: 10px 15px 10px 0px;
+}
+
+#main-container {
+	font-family: 'Titillium Web', sans-serif;
+}
+
+/* Navbar */
+#validador-navbar {
+	padding-top: 10px;
+}
+
+#validador-navbar .ranking-button {
+	font-size: 20px;
+	font-weight: bold;
 }
+/* Validador */
 .video-body {
 	height: 338px;
 	width: 85%;
@@ -19,39 +45,31 @@
 	margin-right: 0%;
 }
-/* Sombras */
 .line-separator, .btn-default {
 	box-shadow: 2px 2px 2px rgba(215, 217, 221, 1.0);
 	-webkit-box-shadow: 2px 2px 2px rgba(215, 217, 221, 1.0);
 	-moz-box-shadow: 2px 2px 2px rgba(215, 217, 221, 1.0);
 }
-/* Fontes */
-.btn-default, .finish-task-button, .radio-options span, h1,
-	h2, h3, h4, h5, h6 {
-	font-family: 'Titillium Web', sans-serif;
+#validador-header {
+	padding-left: 15px;
 }
-/* Header */
-#validador-header {
-	padding: 1px;
-	background: rgba(255, 255, 255, 1.0);
+#validador-header .validador-question {
+	margin-top: 0px;
 }
-/* Body */
 .body-container {
 	background: rgba(236, 238, 242, 1.0);
-	padding-bottom: 10px;
+	padding: 0px 0px 10px 0px;
 }
-/* Linha */
 .line-separator {
 	height: 2px;
 	width: 100%;
 	background-color: rgba(145, 200, 206, 1.0);
 }
-/* Texto */
 h1, h2, h3, h4, h5, h6 {
 	color: rgba(144, 164, 174, 1.0);
 }
@@ -74,7 +92,7 @@ h6 {
 }
 #finish-task-container {
-	padding-right: 40px;
+	padding-right: 15px;
 }
 .finish-padding-top {
@@ -142,11 +160,11 @@ h6 {
 #loading-container {
 	display: none;
 	position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 1040;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	z-index: 1040;
 }
 #loading-container img {
@@ -0,0 +1,124 @@
+@font-face {
+	font-family: 'Roboto';
+	src: url('../fonts/roboto/Roboto-Light.ttf') format('truetype');
+}
+
+#ranking-container {
+	display: none;
+	background-color: #ffffff;
+	border-radius: 5px;
+	-moz-border-radius: 5px;
+	-webkit-border-radius: 5px;
+	padding-right: 0px;
+	overflow: hidden;
+	font-family: 'Roboto';
+	padding-left: 15px;
+    margin: 10px 15px 5px 15px;
+}
+
+#ranking-info-container {
+	padding-left: 0px;
+}
+
+#ranking-info-container .title {
+	color: #000000;
+	font-size: 50px;
+}
+
+#ranking-info-container .avatar-info {
+	text-align: center;
+	padding-top: 30px;
+}
+
+#ranking-info-container .avatar-container {
+	display: none;
+}
+
+#ranking-info-container .avatar-info img {
+	width: 100%;
+}
+
+#ranking-info-container .achievement-info {
+	color: #028c12;
+}
+
+#ranking-info-container .progress-container {
+	padding-left: 100px;
+	margin-top: 10px;
+}
+
+#ranking-info-container .achievements-container {
+	position: relative;
+	padding: 10px 0px 0px 0px;
+	word-wrap: break-word;
+}
+
+#ranking-info-container .progress-label {
+	position: absolute;
+	left: 0px;
+}
+
+#ranking-info-container .done-tasks {
+	color: #84DC76;
+}
+
+#ranking-info-container .total-tasks {
+	color: #f0ad4e;
+}
+
+#ranking-info-container .tooltip-inner {
+	font-size: 16px;
+	max-width: 220px;
+}
+
+#leaderboard-container {
+	background-color: #fefcfc;
+	padding: 0px;
+	min-height: 560px;
+}
+
+#leaderboard-container table {
+	margin-bottom: 0px;
+}
+
+#leaderboard-container  .table-striped>tbody>tr:nth-of-type(odd) {
+	background-color: #f1f2f2;
+}
+
+#leaderboard-container  .table-striped>tbody>tr:hover {
+	background-color: #e0e0e0;
+}
+
+#leaderboard-container  .table-striped>tbody>tr.highlight {
+	background-color: #fbefa3;
+}
+
+#leaderboard-container  .table-striped>tbody>tr.highlight:hover {
+	background-color: #f7e783;
+}
+
+#leaderboard-container  th {
+	text-align: center;
+	border: 0px;
+	padding-bottom: 15px;
+}
+
+#leaderboard-container  td {
+	text-align: center;
+	border: 0px;
+}
+
+#leaderboard-container  td:nth-of-type(1), #leaderboard-container  td:nth-of-type(2)
+	{
+	width: 75px;
+}
+
+#leaderboard-container  td:nth-of-type(2), #leaderboard-container  th:nth-of-type(2),
+	#leaderboard-container  td:nth-of-type(3), #leaderboard-container  th:nth-of-type(3)
+	{
+	text-align: left;
+}
+
+#leaderboard-container  th:nth-of-type(3) img {
+	padding-left: 20px;
+}
 \ No newline at end of file
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="100px" height="100px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+viewBox="0 0 100 100"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+  <style type="text/css">
+   <![CDATA[
+    .fil0 {fill:#5EC7BD;fill-rule:nonzero}
+   ]]>
+  </style>
+ </defs>
+ <g id="finish">
+  <metadata id="finish"/>
+  <path class="fil0" d="M44 79c-4,4 -10,4 -13,0l-20 -20c-2,-2 -3,-4 -3,-6 0,-3 1,-5 3,-7 3,-3 9,-3 13,0l12 12c0,1 2,1 3,0l37 -37c2,-2 5,-3 7,-3l0 0c2,0 5,1 6,3 2,1 3,4 3,6 0,3 -1,5 -3,7l-45 45z"/>
+ </g>
+</svg>
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="100px" height="100px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+viewBox="0 0 100 100"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+  <style type="text/css">
+   <![CDATA[
+    .fil0 {fill:#5EC7BD;fill-rule:nonzero}
+   ]]>
+  </style>
+ </defs>
+ <g id="skip">
+  <metadata id="skip"/>
+  <path class="fil0" d="M10 24c1,-1 23,-17 45,0 8,6 12,15 13,26l22 0 -34 34 -34 -34 22 0c0,-1 1,-3 1,-4 -2,-29 -19,-26 -35,-22z"/>
+ </g>
+</svg>
@@ -0,0 +1,145 @@
+/*!
+ * JavaScript Cookie v2.0.4
+ * https://github.com/js-cookie/js-cookie
+ *
+ * Copyright 2006, 2015 Klaus Hartl & Fagner Brack
+ * Released under the MIT license
+ */
+(function (factory) {
+	if (typeof define === 'function' && define.amd) {
+		define(factory);
+	} else if (typeof exports === 'object') {
+		module.exports = factory();
+	} else {
+		var _OldCookies = window.Cookies;
+		var api = window.Cookies = factory();
+		api.noConflict = function () {
+			window.Cookies = _OldCookies;
+			return api;
+		};
+	}
+}(function () {
+	function extend () {
+		var i = 0;
+		var result = {};
+		for (; i < arguments.length; i++) {
+			var attributes = arguments[ i ];
+			for (var key in attributes) {
+				result[key] = attributes[key];
+			}
+		}
+		return result;
+	}
+
+	function init (converter) {
+		function api (key, value, attributes) {
+			var result;
+
+			// Write
+
+			if (arguments.length > 1) {
+				attributes = extend({
+					path: '/'
+				}, api.defaults, attributes);
+
+				if (typeof attributes.expires === 'number') {
+					var expires = new Date();
+					expires.setMilliseconds(expires.getMilliseconds() + attributes.expires * 864e+5);
+					attributes.expires = expires;
+				}
+
+				try {
+					result = JSON.stringify(value);
+					if (/^[\{\[]/.test(result)) {
+						value = result;
+					}
+				} catch (e) {}
+
+				if (!converter.write) {
+					value = encodeURIComponent(String(value))
+						.replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g, decodeURIComponent);
+				} else {
+					value = converter.write(value, key);
+				}
+
+				key = encodeURIComponent(String(key));
+				key = key.replace(/%(23|24|26|2B|5E|60|7C)/g, decodeURIComponent);
+				key = key.replace(/[\(\)]/g, escape);
+
+				return (document.cookie = [
+					key, '=', value,
+					attributes.expires && '; expires=' + attributes.expires.toUTCString(), // use expires attribute, max-age is not supported by IE
+					attributes.path    && '; path=' + attributes.path,
+					attributes.domain  && '; domain=' + attributes.domain,
+					attributes.secure ? '; secure' : ''
+				].join(''));
+			}
+
+			// Read
+
+			if (!key) {
+				result = {};
+			}
+
+			// To prevent the for loop in the first place assign an empty array
+			// in case there are no cookies at all. Also prevents odd result when
+			// calling "get()"
+			var cookies = document.cookie ? document.cookie.split('; ') : [];
+			var rdecode = /(%[0-9A-Z]{2})+/g;
+			var i = 0;
+
+			for (; i < cookies.length; i++) {
+				var parts = cookies[i].split('=');
+				var name = parts[0].replace(rdecode, decodeURIComponent);
+				var cookie = parts.slice(1).join('=');
+
+				if (cookie.charAt(0) === '"') {
+					cookie = cookie.slice(1, -1);
+				}
+
+				try {
+					cookie = converter.read ?
+						converter.read(cookie, name) : converter(cookie, name) ||
+						cookie.replace(rdecode, decodeURIComponent);
+
+					if (this.json) {
+						try {
+							cookie = JSON.parse(cookie);
+						} catch (e) {}
+					}
+
+					if (key === name) {
+						result = cookie;
+						break;
+					}
+
+					if (!key) {
+						result[name] = cookie;
+					}
+				} catch (e) {}
+			}
+
+			return result;
+		}
+
+		api.get = api.set = api;
+		api.getJSON = function () {
+			return api.apply({
+				json: true
+			}, [].slice.call(arguments));
+		};
+		api.defaults = {};
+
+		api.remove = function (key, attributes) {
+			api(key, '', extend(attributes, {
+				expires: -1
+			}));
+		};
+
+		api.withConverter = init;
+
+		return api;
+	}
+
+	return init(function () {});
+}));
@@ -0,0 +1,21 @@
+(function(loadHtmlHelper, $, undefined) {
+	
+	var baseUrl = '';
+	
+	function _preprocessHtml(data) {
+		return data.replace(/{{ server }}/g, baseUrl);
+	}
+	
+	loadHtmlHelper.load = function(target, url, callback) {
+		var completeUrl = baseUrl + url;
+		$.get(completeUrl, function(data) {
+			$(target).html(_preprocessHtml(data));
+			callback && callback();
+		});
+	}
+	
+	loadHtmlHelper.setup = function(url) {
+		baseUrl = url;
+	};
+
+}(window.loadHtmlHelper = window.loadHtmlHelper || {}, jQuery));
@@ -0,0 +1,44 @@
+(function(pybossaApiHelper, $, undefined) {
+	
+	var pybossaEndpoint = '';
+	var projectName = '';
+	
+	function _getProjectId() {
+		return $.ajax({
+			url : pybossaEndpoint + '/api/project?short_name=' + projectName
+		});
+	}
+
+	function _getUserProgress() {
+		return $.ajax({
+			url : pybossaEndpoint + '/api/project/' + projectName + '/userprogress',
+			cache : false,
+			dataType : 'json'
+		});
+	}
+
+	function _getAnswers(projectId, userId) {
+		return $.ajax({
+			url : pybossaEndpoint + '/api/taskrun?project_id=' + projectId
+					+ '&user_id=' + userId
+		});
+	}
+	
+	pybossaApiHelper.setup = function(endpoint, name) {
+		pybossaEndpoint = endpoint;
+		projectName = name;
+	}
+	
+	pybossaApiHelper.getProjectId = function() {
+		return _getProjectId();
+	}
+	
+	pybossaApiHelper.getUserProgress = function() {
+		return _getUserProgress();
+	}
+
+	pybossaApiHelper.getAnswers = function(projectId, userId) {
+		return _getAnswers(projectId, userId);
+	}
+	
+}(window.pybossaApiHelper = window.pybossaApiHelper || {}, jQuery));
@@ -0,0 +1,163 @@
+(function(ranking, $, undefined) {
+
+	var NUMBER_OF_TOP_USERS = 10;
+	var STARS_MAP = ['', 'gold', 'silver', 'bronze'];
+	var baseUrl = '';
+	var pybossaEndpoint = '';
+	var projectName = '';
+	var loggedUser = {};
+	var totalTasks = 0;
+	var doneTasks = 0;
+	var showingRanking = false;
+	var tasksEnded = false;
+
+	function _getRankingData(callback) {
+		$.ajax({
+			url : pybossaEndpoint + '/api/leaderboard?limit='
+					+ NUMBER_OF_TOP_USERS,
+			success : function(response) {
+				callback(typeof response == 'object' ? response[projectName]
+						: '');
+			},
+			error : function(xhr, textStatus, error) {
+				alert(xhr.responseText);
+			}
+		});
+	}
+
+	function _processRankingRow(rowData) {
+		var rank = rowData.rank;
+		if (rank < 0) {
+			return '';
+		}
+		var starHTML = '';
+		if (rank > 0 && rank < 4) {
+			starHTML = '<img src="' + baseUrl + '/assets/img/ranking/'
+					+ STARS_MAP[rank] + '-star-icon.png">';
+		}
+		var trHTML = '<tr>';
+		if (rowData.name === loggedUser.name) {
+			trHTML = '<tr class="warning">';
+			loggedUser.rank = rowData.rank;
+		}
+		rank = rank == 0 ? '-' : rank + '.';
+		return trHTML + '<td>' + starHTML + '</td><td>' + rank
+				+ '</td><td><a href="/pybossa/account/' + rowData.name
+				+ '/" target="_blank">' + rowData.fullname + '</a></td><td>'
+				+ rowData.score + '</td></tr>';
+	}
+
+	function _updateRanking() {
+		_getRankingData(function(data) {
+			if (data === '')
+				return;
+
+			var rowsHTML = '';
+			for (var i = 0; i < data.length; i++) {
+				rowsHTML += _processRankingRow(data[i]);
+			}
+			$('#leaderboard-container tbody').html(rowsHTML);
+			$('#ranking-info-container .rank-position').html(loggedUser.rank);
+			$('#ranking-info-container .username').html(loggedUser.fullName);
+			if (loggedUser.avatarUrl != '') {
+				$('#ranking-info-container .avatar-container img').attr('src',
+						loggedUser.avatarUrl);
+				$('#ranking-info-container .avatar-placeholder').hide();
+				$('#ranking-info-container .avatar-container').show();
+			}
+			if (loggedUser.rank === 0) {
+				$('#ranking-info-container .rank-position-container').hide();
+			}
+			_updateProgress();
+		});
+	}
+
+	function _getUserData() {
+		return $.ajax({
+			url : pybossaEndpoint + '/api/user?name=' + loggedUser.name
+		});
+	}
+
+	function _getAvatarUrl(data) {
+		return !data || typeof data.avatar === 'undefined' || typeof data.container === 'undefined' ?
+				'' : pybossaEndpoint + '/uploads/' + data.container + '/' + data.avatar;
+	}
+
+	function _updateProgress() {
+		pybossaApiHelper
+				.getUserProgress()
+				.done(
+						function(response) {
+							totalTasks = response.total;
+							doneTasks = response.done;
+							var percentage = (doneTasks / totalTasks) * 100;
+							$('#ranking-info-container .progress-bar').attr(
+									'aria-valuenow', percentage).css('width',
+									percentage + '%');
+							$('#ranking-container [data-toggle="tooltip"]')
+									.tooltip(
+											{
+												title : '<strong><span class="done-tasks">'
+														+ doneTasks
+														+ '</span> / <span class="total-tasks">'
+														+ totalTasks
+														+ '</span> sinais ensinados.</strong>',
+												placement : 'bottom',
+												trigger : 'manual'
+											});
+						});
+	}
+
+	function _loadRankingData() {
+		_getUserData().done(function(response) {
+			if (typeof response == 'undefined' || response.length < 1) {
+				return;
+			}
+			loggedUser.fullName = response[0].fullname;
+			loggedUser.avatarUrl = _getAvatarUrl(response[0].info);
+			_updateRanking();
+		});
+	}
+	
+	function _showRanking() {
+		$('#validador-container').hide();
+		$('#ranking-container').show();
+		$('#validador-navbar .ranking-button').html("Voltar");
+		if (doneTasks > 0) {
+			$('#ranking-container [data-toggle="tooltip"]').tooltip('show');
+		}
+		showingRanking = true;
+	}
+	
+	function _hideRanking() {
+		$('#ranking-container').hide();
+		$('#validador-navbar .ranking-button').html("Ver Ranking");
+		showingRanking = false;
+		
+		if (!tasksEnded) {
+			$('#validador-container').show();
+		}
+	}
+
+	ranking.toggle = function() {
+		if (showingRanking) {
+			_hideRanking();
+		} else {
+			_showRanking();
+		}
+	};
+	
+	ranking.tasksEnded = function() {
+		tasksEnded = true;
+	};
+
+	ranking.setup = function(serverUrl, endpoint, name, user) {
+		baseUrl = serverUrl;
+		pybossaEndpoint = endpoint;
+		projectName = name;
+		loggedUser.name = user;
+		loadHtmlHelper.load('#ranking-container', '/assets/templates/ranking/ranking.html',
+				_loadRankingData);
+	};
+
+}(window.ranking = window.ranking || {}, jQuery));
 (function(validador, $, undefined) {
-	var videos_url = "";
-	var base_url = "";
-	var server_backend_url = '';
-	var current_task_id = -1;
+	var baseUrl = '';
+	var serverBackendUrl = '';
+	var videosUrl = '';
+	var pybossaEndpoint = '';
+	var projectName = '';
+	var currentTaskId = -1;
+
+	function _getLoggedUser() {
+		var pybossaRememberToken = Cookies.get('remember_token');
+		var splittedTokenId = pybossaRememberToken.split('|');
+		return splittedTokenId.length > 0 ? splittedTokenId[0] : 'anonymous';
+	}
 	function _disableFinishButton() {
-		$("#finish-button").off("click");
-		$("#finish-button").removeClass("enabled-button");
-		$("#finish-button").addClass("disabled-button");
+		$('#finish-button').off('click');
+		$('#finish-button').removeClass('enabled-button');
+		$('#finish-button').addClass('disabled-button');
 	}
 	function _enableFinishButton(task, deferred) {
-		$("#finish-button").removeClass("disabled-button");
-		$("#finish-button").addClass("enabled-button");
-		$("#finish-button").off("click").on("click", function() {
+		$('#finish-button').removeClass('disabled-button');
+		$('#finish-button').addClass('enabled-button');
+		$('#finish-button').off('click').on('click', function() {
 			_readAnswer(task, deferred, false);
 		});
 	}
 	function _hideCommentAvatar() {
-		$("#comment-avatar").hide();
-		$("#finish-task-container").removeClass("finish-padding-top-adjust");
+		$('#comment-avatar').hide();
+		$('#finish-task-container').removeClass('finish-padding-top-adjust');
 	}
 	function _hideCommentRef() {
-		$("#comment-ref").hide();
+		$('#comment-ref').hide();
 	}
 	function resetComments() {
-		$("#comment-avatar textarea").val("")
-		$("#comment-ref textarea").val("");
+		$('#comment-avatar textarea').val('')
+		$('#comment-ref textarea').val('');
 		_hideCommentAvatar();
 		_hideCommentRef();
 	}
 	function _enableLoading() {
-		$("#loading-container").show();
-		$("#main-container").addClass("mask");
+		$('#loading-container').show();
+		$('#main-container').addClass('mask');
 	}
 	function _disableLoading() {
-		$("#loading-container").hide();
-		$("#main-container").removeClass("mask");
+		$('#loading-container').hide();
+		$('#main-container').removeClass('mask');
 	}
 	function _handleAvatarRadioClick(el, task, deferred) {
-		var is_incorrect_button = $(el).val() == "INCORRECT";
-		if (is_incorrect_button) {
+		var isIncorrectButton = $(el).val() == 'INCORRECT';
+		if (isIncorrectButton) {
 			_hideCommentRef();
-			$("#comment-avatar").show();
-			$("#finish-task-container").addClass("finish-padding-top-adjust");
+			$('#comment-avatar').show();
+			$('#finish-task-container').addClass('finish-padding-top-adjust');
 		} else {
 			_hideCommentAvatar();
 		}
-		var isRefChecked = $("#ref-radio-answers input[type=radio]").is(
-				":checked");
+		var isRefChecked = $('#ref-radio-answers input[type=radio]').is(
+				':checked');
 		if (isRefChecked) {
 			_enableFinishButton(task, deferred);
 		} else {
@@ -64,23 +72,24 @@
 	}
 	function _handleRefRadioClick(el, task, deferred) {
-		var is_incorrect_button = $(el).val() == "INCORRECT";
-		if (is_incorrect_button) {
-			$("#incorrect-avatar-button").prop("checked", true);
-			$("#comment-ref").show();
+		var isIncorrectButton = $(el).val() == 'INCORRECT';
+		if (isIncorrectButton) {
+			$('#incorrect-avatar-button').prop('checked', true);
+			$('#comment-ref').show();
 			_hideCommentAvatar();
 		} else {
-			var is_avatar_disabled = $("#avatar-radio-answers input[type=radio]").is(":disabled");
-			if (is_avatar_disabled) {
-				$("#incorrect-avatar-button").prop("checked", false);
+			var isAvatarDisabled = $('#avatar-radio-answers input[type=radio]')
+					.is(':disabled');
+			if (isAvatarDisabled) {
+				$('#incorrect-avatar-button').prop('checked', false);
 			}
 			_hideCommentRef();
 		}
-		$("#avatar-radio-answers input[type=radio]").prop("disabled",
-				is_incorrect_button);
-		var is_avatar_checked = $("#avatar-radio-answers input[type=radio]").is(
-				":checked");
-		if (is_avatar_checked) {
+		$('#avatar-radio-answers input[type=radio]').prop('disabled',
+				isIncorrectButton);
+		var isAvatarChecked = $('#avatar-radio-answers input[type=radio]').is(
+				':checked');
+		if (isAvatarChecked) {
 			_enableFinishButton(task, deferred);
 		} else {
 			_disableFinishButton();
@@ -90,69 +99,68 @@
 	function _setupGUI(task, deferred) {
 		resetComments();
 		_disableFinishButton();
-		$("#avatar-radio-answers input[type=radio]").prop("disabled", false);
-		$("#avatar-radio-answers input[type=radio]").prop("checked", false);
-		$("#ref-radio-answers input[type=radio]").prop("checked", false);
-		$("#avatar-radio-answers input[type=radio]").off("click").on("click",
+		$('#avatar-radio-answers input[type=radio]').prop('disabled', false);
+		$('#avatar-radio-answers input[type=radio]').prop('checked', false);
+		$('#ref-radio-answers input[type=radio]').prop('checked', false);
+		$('#avatar-radio-answers input[type=radio]').off('click').on('click',
 				function() {
 					_handleAvatarRadioClick(this, task, deferred);
 				});
-		$("#ref-radio-answers input[type=radio]").off("click").on("click",
+		$('#ref-radio-answers input[type=radio]').off('click').on('click',
 				function() {
 					_handleRefRadioClick(this, task, deferred);
 				});
-		$("#skip-button").off("click").on("click", function() {
+		$('#skip-button').off('click').on('click', function() {
 			_readAnswer(task, deferred, true);
 		});
 	}
-	function _readAnswer(task, deferred, has_skipped) {
-		var status = "";
-		var avatar_answer = $("#avatar-radio-answers input[type=radio]:checked")
-				.val();
-		var ref_answer = $("#ref-radio-answers input[type=radio]:checked")
+	function _readAnswer(task, deferred, hasSkipped) {
+		var status = '';
+		var avatarAnswer = $('#avatar-radio-answers input[type=radio]:checked')
 				.val();
-		if (has_skipped) {
-			status = "SKIPPED";
-		} else if (ref_answer == "INCORRECT") {
-			status = "REF_DISAPPROVED";
-		} else if (avatar_answer == "INCORRECT") {
-			status = "AVATAR_DISAPPROVED";
+		var refAnswer = $('#ref-radio-answers input[type=radio]:checked').val();
+		if (hasSkipped) {
+			status = 'SKIPPED';
+		} else if (refAnswer == 'INCORRECT') {
+			status = 'REF_DISAPPROVED';
+		} else if (avatarAnswer == 'INCORRECT') {
+			status = 'AVATAR_DISAPPROVED';
 		} else {
-			status = "AVATAR_APPROVED";
+			status = 'AVATAR_APPROVED';
 		}
-		_submitAnswer(task, deferred, status, has_skipped);
+		_submitAnswer(task, deferred, status, hasSkipped);
 	}
 	function _createAnswer(task, status) {
 		var answer = {};
-		var last_answer = task.info.last_answer;
-		var hasLastAnswer = typeof last_answer != "undefined";
+		var lastAnswer = task.info.last_answer;
+		var hasLastAnswer = typeof lastAnswer != 'undefined';
 		if (hasLastAnswer) {
-			answer = last_answer;
+			answer = lastAnswer;
 		} else {
 			answer = {
-				"number_of_approval" : 0,
-				"number_of_avatar_disapproval" : 0,
-				"number_of_ref_disapproval" : 0
+				'number_of_approval' : 0,
+				'number_of_avatar_disapproval' : 0,
+				'number_of_ref_disapproval' : 0
 			};
 		}
-		answer["status"] = status;
-		answer["comment_avatar"] = "";
-		answer["comment_ref"] = "";
-		if (status == "AVATAR_APPROVED") {
-			answer["number_of_approval"] = answer.number_of_approval + 1;
-		} else if (status == "AVATAR_DISAPPROVED") {
-			answer["number_of_avatar_disapproval"] = answer.number_of_avatar_disapproval + 1;
-			var comment_avatar = $("#comment-avatar textarea").val();
-			if (comment_avatar.trim() != "") {
-				answer["comment_avatar"] = comment_avatar;
+		answer['status'] = status;
+		answer['comment_avatar'] = '';
+		answer['comment_ref'] = '';
+		if (status == 'AVATAR_APPROVED') {
+			answer['number_of_approval'] = answer.number_of_approval + 1;
+		} else if (status == 'AVATAR_DISAPPROVED') {
+			answer['number_of_avatar_disapproval'] = answer.number_of_avatar_disapproval + 1;
+			var commentAvatar = $('#comment-avatar textarea').val();
+			if (commentAvatar.trim() != '') {
+				answer['comment_avatar'] = commentAvatar;
 			}
-		} else if (status == "REF_DISAPPROVED") {
-			answer["number_of_ref_disapproval"] = answer.number_of_ref_disapproval + 1;
-			var comment_ref = $("#comment-ref textarea").val();
-			if (comment_ref.trim() != "") {
-				answer["comment_ref"] = comment_ref;
+		} else if (status == 'REF_DISAPPROVED') {
+			answer['number_of_ref_disapproval'] = answer.number_of_ref_disapproval + 1;
+			var comment_ref = $('#comment-ref textarea').val();
+			if (comment_ref.trim() != '') {
+				answer['comment_ref'] = comment_ref;
 			}
 		}
 		return answer;
@@ -162,21 +170,21 @@
 		_enableLoading();
 		$
 				.ajax({
-					type : "POST",
-					url : server_backend_url + "/finish_task",
+					type : 'POST',
+					url : serverBackendUrl + '/finish_task',
 					data : {
-						"task_id" : task.id,
-						"project_id" : task.project_id,
-						"sign_name" : task.info.sign_name,
-						"number_of_approval" : answer.number_of_approval,
-						"number_of_avatar_disapproval" : answer.number_of_avatar_disapproval,
-						"number_of_ref_disapproval" : answer.number_of_ref_disapproval
+						'task_id' : task.id,
+						'project_id' : task.project_id,
+						'sign_name' : task.info.sign_name,
+						'number_of_approval' : answer.number_of_approval,
+						'number_of_avatar_disapproval' : answer.number_of_avatar_disapproval,
+						'number_of_ref_disapproval' : answer.number_of_ref_disapproval
 					},
 					success : function(response) {
 						pybossa.saveTask(task.id, answer).done(function() {
 							_disableLoading();
-							$("#success").fadeIn(500);
-							$("#main-container").hide();
+							$('#success').fadeIn(500);
+							$('#validador-container').hide();
 							setTimeout(function() {
 								deferred.resolve();
 							}, 2000);
@@ -187,12 +195,11 @@
 						alert(xhr.responseText);
 					}
 				});
-
 	}
-	function _submitAnswer(task, deferred, status, has_skipped) {
+	function _submitAnswer(task, deferred, status, hasSkipped) {
 		var answer = _createAnswer(task, status);
-		if (has_skipped) {
+		if (hasSkipped) {
 			_saveAnswer(task, deferred, answer);
 		} else {
 			_finishTask(task, deferred, answer);
@@ -201,8 +208,8 @@
 	function _saveAnswer(task, deferred, answer) {
 		pybossa.saveTask(task.id, answer).done(function() {
-			$("#success").fadeIn(500);
-			$("#main-container").hide();
+			$('#success').fadeIn(500);
+			$('#validador-container').hide();
 			setTimeout(function() {
 				deferred.resolve();
 			}, 2000);
@@ -210,39 +217,49 @@
 	}
 	function _loadTaskInfo(task) {
-		current_task_id = task.id;
-		var sign_name = task.info.sign_name;
-		var avatar_vid_link = videos_url + sign_name + "_AVATAR.webm";
-		var ref_vid_link = videos_url + sign_name + "_REF.webm";
-		$(".sign-label").text(sign_name);
-		$("#avatar-video").attr("src", avatar_vid_link);
-		$("#ref-video").attr("src", ref_vid_link);
+		currentTaskId = task.id;
+		var signName = task.info.sign_name;
+		var avatarVidLink = videosUrl + signName + '_AVATAR.webm';
+		var refVidLink = videosUrl + signName + '_REF.webm';
+		$('.sign-label').text(signName);
+		$('#avatar-video').attr('src', avatarVidLink);
+		$('#ref-video').attr('src', refVidLink);
+	}
+
+	function _loadMainComponents() {
+		pybossaApiHelper.setup(pybossaEndpoint, projectName);
+		loadHtmlHelper.setup(baseUrl);
+		ranking.setup(baseUrl, pybossaEndpoint, projectName, _getLoggedUser());
 	}
 	pybossa.presentTask(function(task, deferred) {
-		if (!$.isEmptyObject(task) && current_task_id != task.id) {
+		_loadMainComponents();
+		if (!$.isEmptyObject(task) && currentTaskId != task.id) {
 			_loadTaskInfo(task);
 			_setupGUI(task, deferred);
-			$("#success").hide();
-			$("#main-container").fadeIn(500);
+			$('#success').hide();
+			$('#validador-container').fadeIn(500);
 		} else {
-			$("#main-container").hide();
-			$("#finish").fadeIn(500);
+			$('#validador-container').hide();
+			$('#finish').fadeIn(500);
+			ranking.tasksEnded();
 		}
 	});
 	// Private methods
 	function _run(projectname) {
-		pybossa.setEndpoint("/pybossa");
+		pybossa.setEndpoint(pybossaEndpoint);
 		pybossa.run(projectname);
 	}
 	// Public methods
-	validador.run = function(serverhost, serverbackend, projectname) {
-		base_url = serverhost;
-		server_backend_url = serverbackend;
-		videos_url = base_url + "/videos/";
-		_run(projectname);
+	validador.run = function(serverhost, serverbackend, projname) {
+		baseUrl = serverhost;
+		serverBackendUrl = serverbackend;
+		videosUrl = baseUrl + '/videos/';
+		pybossaEndpoint = '/pybossa';
+		projectName = projname;
+		_run(projectName);
 	};
 }(window.validador = window.validador || {}, jQuery));
 \ No newline at end of file
@@ -0,0 +1,47 @@
+<div id="ranking-info-container" class="col-sm-4">
+	<div class="title">WikiRanking</div>
+	<div>Lorem Ipsum é apenas uma simulação de texto da indústria
+		tipográfica e de impressos, e vem sendo utilizado desde o século XVI.</div>
+	<div class="avatar-info col-sm-12">
+		<div class="avatar-placeholder col-sm-6 col-sm-offset-3">
+			<img src="{{ server }}/assets/img/ranking/user-shape.png">
+		</div>
+		<div class="avatar-container col-sm-8 col-sm-offset-2">
+			<img src="">
+		</div>
+		<div class="col-sm-12">
+			<div class="username"></div>
+			<div class="rank-position-container">
+				<strong><span class="rank-position"></span>º Posição</strong>
+			</div>
+		</div>
+	</div>
+	<div class="achievements-container col-sm-12">
+		<div class="progress-container col-sm-12">
+			<div class="progress">
+				<div class="progress-bar" role="progressbar" aria-valuenow="0"
+					aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip"
+					data-html="true"></div>
+			</div>
+		</div>
+		<div class="progress-label">
+			<span><strong>Progresso:</strong></span>
+		</div>
+	</div>
+</div>
+<div id="leaderboard-container" class="col-sm-8">
+	<table class="table table-striped table-hover">
+		<thead>
+			<tr>
+				<th></th>
+				<th>#</th>
+				<th><img src="{{ server }}/assets/img/ranking/trophy-icon.png">
+					<div>Membro</div></th>
+				<th><img src="{{ server }}/assets/img/ranking/signs-icon.png">
+					<div>Sinais</div></th>
+			</tr>
+		</thead>
+		<tbody>
+		</tbody>
+	</table>
+</div>
 \ No newline at end of file
@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="100px" height="100px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
-viewBox="0 0 100 100"
- xmlns:xlink="http://www.w3.org/1999/xlink">
- <defs>
-  <style type="text/css">
-   <![CDATA[
-    .fil0 {fill:#5EC7BD;fill-rule:nonzero}
-   ]]>
-  </style>
- </defs>
- <g id="finish">
-  <metadata id="finish"/>
-  <path class="fil0" d="M44 79c-4,4 -10,4 -13,0l-20 -20c-2,-2 -3,-4 -3,-6 0,-3 1,-5 3,-7 3,-3 9,-3 13,0l12 12c0,1 2,1 3,0l37 -37c2,-2 5,-3 7,-3l0 0c2,0 5,1 6,3 2,1 3,4 3,6 0,3 -1,5 -3,7l-45 45z"/>
- </g>
-</svg>
@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="100px" height="100px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
-viewBox="0 0 100 100"
- xmlns:xlink="http://www.w3.org/1999/xlink">
- <defs>
-  <style type="text/css">
-   <![CDATA[
-    .fil0 {fill:#5EC7BD;fill-rule:nonzero}
-   ]]>
-  </style>
- </defs>
- <g id="skip">
-  <metadata id="skip"/>
-  <path class="fil0" d="M10 24c1,-1 23,-17 45,0 8,6 12,15 13,26l22 0 -34 34 -34 -34 22 0c0,-1 1,-3 1,-4 -2,-29 -19,-26 -35,-22z"/>
- </g>
-</svg>
 <link rel="stylesheet" href="{{ server }}/assets/css/main.css">
+<script src="{{ server }}/assets/js/external-libs/js.cookie.js"></script>
+<script src="{{ server }}/assets/js/helpers/pybossa-api-helper.js"></script>
+<script src="{{ server }}/assets/js/helpers/load-html-helper.js"></script>
+<script src="{{ server }}/assets/js/ranking.js"></script>
 <script src="{{ server }}/assets/js/validador.js"></script>
-<div class="row">
-	<div id="success" class="alert alert-success" style="display: none;">
-		<strong>Parabéns!</strong> <span>Tarefa concluída.</span>
-	</div>
-	<div id="finish" class="alert alert-success" style="display: none;">
-		<strong>Parabéns!</strong> <span> Você completou todas as
-			tarefas disponíveis! </span> <br />
-		<div class="alert-actions">
-			<a class="btn small" href="/">Voltar</a> <a class="btn small"
-				href="/pybossa/project">ou, olhar outros projetos.</a>
+<div id="alert-container" class="container">
+	<div class="row">
+		<div id="success" class="alert alert-success" style="display: none;">
+			<a class="close" data-dismiss="alert" href="#">×</a> <strong>Parabéns!</strong>
+			<span>Tarefa concluída.</span>
+		</div>
+		<div id="finish" class="alert alert-success" style="display: none;">
+			<a class="close" data-dismiss="alert" href="#">×</a> <strong>Que
+				pena,</strong> <span> não há mais tarefas disponíveis! </span> <br />
+			<div class="alert-actions">
+				<a class="btn small" href="/">Voltar</a> <a class="btn small"
+					href="/pybossa/project">ou, olhar outros projetos.</a>
+			</div>
 		</div>
 	</div>
 </div>
 <div id="loading-container">
-	<img src="{{ server }}/img/loading.gif">
+	<img src="{{ server }}/assets/img/loading.gif">
 </div>
-<div id="main-container" class="container">
-	<div id="validador-header">
-		<h2>
-			A animação do sinal "<span class="sign-label"></span>" está correta?
-		</h2>
+<div id="main-container" class="container body-container">
+	<div id="validador-navbar" class="row">
+		<div class="col-sm-12">
+			<div class="btn btn-warning ranking-button pull-right"
+				onclick="ranking.toggle()">Ver Ranking</div>
+		</div>
 	</div>
-	<div class="line-separator"></div>
-	<div id="corretor-container" class="row body-container">
-		<div id="avatar-container" class="col-sm-6 video-container">
-			<div class="row">
-				<h6>
-					ANIMAÇÃO "<span class="sign-label"></span>":
-				</h6>
-			</div>
-			<div class="row">
-				<video id="avatar-video" src="" preload="metadata"
-					class="video-body" autoplay loop controls>
-					<source type="video/webm">
-				</video>
-			</div>
-			<div id="avatar-radio-answers" class="row radio-options">
-				<div class="correct-answer-container"">
-					<span class="correct-answer-label">ESTÁ CORRETO</span><img
-						class="icon" src="{{ server }}/img/correct.png"></img><input
-						value="CORRECT" type="radio" name="avatar-answers">
+	<div id="validador-container" class="row">
+		<div id="validador-header">
+			<h2 class="validador-question">
+				A animação do sinal "<span class="sign-label"></span>" está correta?
+			</h2>
+		</div>
+		<div class="line-separator"></div>
+		<div class="row">
+			<div id="avatar-container" class="col-sm-6 video-container">
+				<div class="row">
+					<h6>
+						ANIMAÇÃO "<span class="sign-label"></span>":
+					</h6>
 				</div>
-				<div>
-					<span class="incorrect-answer-label">ESTÁ ERRADO</span><img
-						class="icon" src="{{ server }}/img/incorrect.png"></img><input
-						id="incorrect-avatar-button" value="INCORRECT" type="radio"
-						name="avatar-answers">
+				<div class="row">
+					<video id="avatar-video" src="" preload="metadata"
+						class="video-body" autoplay loop controls>
+						<source type="video/webm">
+					</video>
 				</div>
-			</div>
-			<div id="comment-avatar" class="form-group">
-				<h6>ENVIAR COMENTÁRIO SOBRE A ANIMAÇÃO:</h6>
-				<textarea class="form-control" rows="2"></textarea>
-			</div>
-		</div>
-		<div id="ref-container" class="col-sm-6 video-container">
-			<div class="row">
-				<h6>
-					VÍDEO DE REFERÊNCIA “<span class="sign-label"></span>”:
-				</h6>
-			</div>
-			<div class="row">
-				<video id="ref-video" src="" preload="metadata" class="video-body"
-					autoplay loop controls>
-					<source type="video/webm">
-				</video>
-			</div>
-			<div id="ref-radio-answers" class="row radio-options">
-				<div class="correct-answer-container"">
-					<span class="correct-answer-label">ESTÁ CORRETO</span><img
-						class="icon" src="{{ server }}/img/correct.png"></img><input
-						value="CORRECT" type="radio" name="ref-answers">
+				<div id="avatar-radio-answers" class="row radio-options">
+					<div class="correct-answer-container"">
+						<span class="correct-answer-label">ESTÁ CORRETO</span><img
+							class="icon" src="{{ server }}/assets/img/correct.png"></img><input
+							value="CORRECT" type="radio" name="avatar-answers">
+					</div>
+					<div>
+						<span class="incorrect-answer-label">ESTÁ ERRADO</span><img
+							class="icon" src="{{ server }}/assets/img/incorrect.png"></img><input
+							id="incorrect-avatar-button" value="INCORRECT" type="radio"
+							name="avatar-answers">
+					</div>
 				</div>
-				<div>
-					<span class="incorrect-answer-label">ESTÁ ERRADO</span><img
-						class="icon" src="{{ server }}/img/incorrect.png"></img><input
-						id="incorrect-ref-button" value="INCORRECT" type="radio"
-						name="ref-answers">
+				<div id="comment-avatar" class="form-group">
+					<h6>ENVIAR COMENTÁRIO SOBRE A ANIMAÇÃO:</h6>
+					<textarea class="form-control" rows="2"></textarea>
 				</div>
 			</div>
-			<div id="comment-ref" class="form-group">
-				<h6>ENVIAR COMENTÁRIO SOBRE O VÍDEO DE REFERÊNCIA:</h6>
-				<textarea class="form-control" rows="2"></textarea>
-			</div>
-			<div id="finish-task-container" class="row finish-padding-top">
-				<div id="finish-button" class="finish-task-button enabled-button">
-					<span id="finish-button-text">ENVIAR ANÁLISE E FINALIZAR</span><img
-						class="icon" src="{{ server }}/img/finish.svg"></img>
+			<div id="ref-container" class="col-sm-6 video-container">
+				<div class="row">
+					<h6>
+						VÍDEO DE REFERÊNCIA “<span class="sign-label"></span>”:
+					</h6>
+				</div>
+				<div class="row">
+					<video id="ref-video" src="" preload="metadata" class="video-body"
+						autoplay loop controls>
+						<source type="video/webm">
+					</video>
+				</div>
+				<div id="ref-radio-answers" class="row radio-options">
+					<div class="correct-answer-container"">
+						<span class="correct-answer-label">ESTÁ CORRETO</span><img
+							class="icon" src="{{ server }}/assets/img/correct.png"></img><input
+							value="CORRECT" type="radio" name="ref-answers">
+					</div>
+					<div>
+						<span class="incorrect-answer-label">ESTÁ ERRADO</span><img
+							class="icon" src="{{ server }}/assets/img/incorrect.png"></img><input
+							id="incorrect-ref-button" value="INCORRECT" type="radio"
+							name="ref-answers">
+					</div>
+				</div>
+				<div id="comment-ref" class="form-group">
+					<h6>ENVIAR COMENTÁRIO SOBRE O VÍDEO DE REFERÊNCIA:</h6>
+					<textarea class="form-control" rows="2"></textarea>
 				</div>
-				<div id="skip-button" class="finish-task-button enabled-button">
-					PULAR<img class="icon" src="{{ server }}/img/skip.svg"></img>
+				<div id="finish-task-container" class="row finish-padding-top">
+					<div id="finish-button" class="finish-task-button enabled-button">
+						<span id="finish-button-text">ENVIAR ANÁLISE E FINALIZAR</span><img
+							class="icon" src="{{ server }}/assets/img/finish.svg"></img>
+					</div>
+					<div id="skip-button" class="finish-task-button enabled-button">
+						PULAR<img class="icon" src="{{ server }}/assets/img/skip.svg"></img>
+					</div>
 				</div>
 			</div>
 		</div>
 	</div>
+	<div id="ranking-container" class="row"></div>
 </div>
 <script type="text/javascript">
-	validador.run("{{ server }}", "{{ server_backend }}", "{{ app_shortname }}");
+	validador
+			.run("{{ server }}", "{{ server_backend }}", "{{ app_shortname }}");
 </script>
	@@ -0,0 +1,124 @@		@@ -0,0 +1,124 @@
		1	+@font-face {
		2	+ font-family: 'Roboto';
		3	+ src: url('../fonts/roboto/Roboto-Light.ttf') format('truetype');
		4	+}
		5	+
		6	+#ranking-container {
		7	+ display: none;
		8	+ background-color: #ffffff;
		9	+ border-radius: 5px;
		10	+ -moz-border-radius: 5px;
		11	+ -webkit-border-radius: 5px;
		12	+ padding-right: 0px;
		13	+ overflow: hidden;
		14	+ font-family: 'Roboto';
		15	+ padding-left: 15px;
		16	+ margin: 10px 15px 5px 15px;
		17	+}
		18	+
		19	+#ranking-info-container {
		20	+ padding-left: 0px;
		21	+}
		22	+
		23	+#ranking-info-container .title {
		24	+ color: #000000;
		25	+ font-size: 50px;
		26	+}
		27	+
		28	+#ranking-info-container .avatar-info {
		29	+ text-align: center;
		30	+ padding-top: 30px;
		31	+}
		32	+
		33	+#ranking-info-container .avatar-container {
		34	+ display: none;
		35	+}
		36	+
		37	+#ranking-info-container .avatar-info img {
		38	+ width: 100%;
		39	+}
		40	+
		41	+#ranking-info-container .achievement-info {
		42	+ color: #028c12;
		43	+}
		44	+
		45	+#ranking-info-container .progress-container {
		46	+ padding-left: 100px;
		47	+ margin-top: 10px;
		48	+}
		49	+
		50	+#ranking-info-container .achievements-container {
		51	+ position: relative;
		52	+ padding: 10px 0px 0px 0px;
		53	+ word-wrap: break-word;
		54	+}
		55	+
		56	+#ranking-info-container .progress-label {
		57	+ position: absolute;
		58	+ left: 0px;
		59	+}
		60	+
		61	+#ranking-info-container .done-tasks {
		62	+ color: #84DC76;
		63	+}
		64	+
		65	+#ranking-info-container .total-tasks {
		66	+ color: #f0ad4e;
		67	+}
		68	+
		69	+#ranking-info-container .tooltip-inner {
		70	+ font-size: 16px;
		71	+ max-width: 220px;
		72	+}
		73	+
		74	+#leaderboard-container {
		75	+ background-color: #fefcfc;
		76	+ padding: 0px;
		77	+ min-height: 560px;
		78	+}
		79	+
		80	+#leaderboard-container table {
		81	+ margin-bottom: 0px;
		82	+}
		83	+
		84	+#leaderboard-container .table-striped>tbody>tr:nth-of-type(odd) {
		85	+ background-color: #f1f2f2;
		86	+}
		87	+
		88	+#leaderboard-container .table-striped>tbody>tr:hover {
		89	+ background-color: #e0e0e0;
		90	+}
		91	+
		92	+#leaderboard-container .table-striped>tbody>tr.highlight {
		93	+ background-color: #fbefa3;
		94	+}
		95	+
		96	+#leaderboard-container .table-striped>tbody>tr.highlight:hover {
		97	+ background-color: #f7e783;
		98	+}
		99	+
		100	+#leaderboard-container th {
		101	+ text-align: center;
		102	+ border: 0px;
		103	+ padding-bottom: 15px;
		104	+}
		105	+
		106	+#leaderboard-container td {
		107	+ text-align: center;
		108	+ border: 0px;
		109	+}
		110	+
		111	+#leaderboard-container td:nth-of-type(1), #leaderboard-container td:nth-of-type(2)
		112	+ {
		113	+ width: 75px;
		114	+}
		115	+
		116	+#leaderboard-container td:nth-of-type(2), #leaderboard-container th:nth-of-type(2),
		117	+ #leaderboard-container td:nth-of-type(3), #leaderboard-container th:nth-of-type(3)
		118	+ {
		119	+ text-align: left;
		120	+}
		121	+
		122	+#leaderboard-container th:nth-of-type(3) img {
		123	+ padding-left: 20px;
		124	+}
0	\ No newline at end of file	125	\ No newline at end of file
@@ -0,0 +1,17 @@		@@ -0,0 +1,17 @@
	1	+<?xml version="1.0" encoding="UTF-8"?>
	2	+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
	3	+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="100px" height="100px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
	4	+viewBox="0 0 100 100"
	5	+ xmlns:xlink="http://www.w3.org/1999/xlink">
	6	+ <defs>
	7	+ <style type="text/css">
	8	+ <![CDATA[
	9	+ .fil0 {fill:#5EC7BD;fill-rule:nonzero}
	10	+ ]]>
	11	+ </style>
	12	+ </defs>
	13	+ <g id="finish">
	14	+ <metadata id="finish"/>
	15	+ <path class="fil0" d="M44 79c-4,4 -10,4 -13,0l-20 -20c-2,-2 -3,-4 -3,-6 0,-3 1,-5 3,-7 3,-3 9,-3 13,0l12 12c0,1 2,1 3,0l37 -37c2,-2 5,-3 7,-3l0 0c2,0 5,1 6,3 2,1 3,4 3,6 0,3 -1,5 -3,7l-45 45z"/>
	16	+ </g>
	17	+</svg>
@@ -0,0 +1,145 @@		@@ -0,0 +1,145 @@
	1	+/*!
	2	+ * JavaScript Cookie v2.0.4
	3	+ * https://github.com/js-cookie/js-cookie
	4	+ *
	5	+ * Copyright 2006, 2015 Klaus Hartl & Fagner Brack
	6	+ * Released under the MIT license
	7	+ */
	8	+(function (factory) {
	9	+ if (typeof define === 'function' && define.amd) {
	10	+ define(factory);
	11	+ } else if (typeof exports === 'object') {
	12	+ module.exports = factory();
	13	+ } else {
	14	+ var _OldCookies = window.Cookies;
	15	+ var api = window.Cookies = factory();
	16	+ api.noConflict = function () {
	17	+ window.Cookies = _OldCookies;
	18	+ return api;
	19	+ };
	20	+ }
	21	+}(function () {
	22	+ function extend () {
	23	+ var i = 0;
	24	+ var result = {};
	25	+ for (; i < arguments.length; i++) {
	26	+ var attributes = arguments[ i ];
	27	+ for (var key in attributes) {
	28	+ result[key] = attributes[key];
	29	+ }
	30	+ }
	31	+ return result;
	32	+ }
	33	+
	34	+ function init (converter) {
	35	+ function api (key, value, attributes) {
	36	+ var result;
	37	+
	38	+ // Write
	39	+
	40	+ if (arguments.length > 1) {
	41	+ attributes = extend({
	42	+ path: '/'
	43	+ }, api.defaults, attributes);
	44	+
	45	+ if (typeof attributes.expires === 'number') {
	46	+ var expires = new Date();
	47	+ expires.setMilliseconds(expires.getMilliseconds() + attributes.expires * 864e+5);
	48	+ attributes.expires = expires;
	49	+ }
	50	+
	51	+ try {
	52	+ result = JSON.stringify(value);
	53	+ if (/^[\{\[]/.test(result)) {
	54	+ value = result;
	55	+ }
	56	+ } catch (e) {}
	57	+
	58	+ if (!converter.write) {
	59	+ value = encodeURIComponent(String(value))
	60	+ .replace(/%(23\|24\|26\|2B\|3A\|3C\|3E\|3D\|2F\|3F\|40\|5B\|5D\|5E\|60\|7B\|7D\|7C)/g, decodeURIComponent);
	61	+ } else {
	62	+ value = converter.write(value, key);
	63	+ }
	64	+
	65	+ key = encodeURIComponent(String(key));
	66	+ key = key.replace(/%(23\|24\|26\|2B\|5E\|60\|7C)/g, decodeURIComponent);
	67	+ key = key.replace(/[\(\)]/g, escape);
	68	+
	69	+ return (document.cookie = [
	70	+ key, '=', value,
	71	+ attributes.expires && '; expires=' + attributes.expires.toUTCString(), // use expires attribute, max-age is not supported by IE
	72	+ attributes.path && '; path=' + attributes.path,
	73	+ attributes.domain && '; domain=' + attributes.domain,
	74	+ attributes.secure ? '; secure' : ''
	75	+ ].join(''));
	76	+ }
	77	+
	78	+ // Read
	79	+
	80	+ if (!key) {
	81	+ result = {};
	82	+ }
	83	+
	84	+ // To prevent the for loop in the first place assign an empty array
	85	+ // in case there are no cookies at all. Also prevents odd result when
	86	+ // calling "get()"
	87	+ var cookies = document.cookie ? document.cookie.split('; ') : [];
	88	+ var rdecode = /(%[0-9A-Z]{2})+/g;
	89	+ var i = 0;
	90	+
	91	+ for (; i < cookies.length; i++) {
	92	+ var parts = cookies[i].split('=');
	93	+ var name = parts[0].replace(rdecode, decodeURIComponent);
	94	+ var cookie = parts.slice(1).join('=');
	95	+
	96	+ if (cookie.charAt(0) === '"') {
	97	+ cookie = cookie.slice(1, -1);
	98	+ }
	99	+
	100	+ try {
	101	+ cookie = converter.read ?
	102	+ converter.read(cookie, name) : converter(cookie, name) \|\|
	103	+ cookie.replace(rdecode, decodeURIComponent);
	104	+
	105	+ if (this.json) {
	106	+ try {
	107	+ cookie = JSON.parse(cookie);
	108	+ } catch (e) {}
	109	+ }
	110	+
	111	+ if (key === name) {
	112	+ result = cookie;
	113	+ break;
	114	+ }
	115	+
	116	+ if (!key) {
	117	+ result[name] = cookie;
	118	+ }
	119	+ } catch (e) {}
	120	+ }
	121	+
	122	+ return result;
	123	+ }
	124	+
	125	+ api.get = api.set = api;
	126	+ api.getJSON = function () {
	127	+ return api.apply({
	128	+ json: true
	129	+ }, [].slice.call(arguments));
	130	+ };
	131	+ api.defaults = {};
	132	+
	133	+ api.remove = function (key, attributes) {
	134	+ api(key, '', extend(attributes, {
	135	+ expires: -1
	136	+ }));
	137	+ };
	138	+
	139	+ api.withConverter = init;
	140	+
	141	+ return api;
	142	+ }
	143	+
	144	+ return init(function () {});
	145	+}));
@@ -0,0 +1,21 @@		@@ -0,0 +1,21 @@
	1	+(function(loadHtmlHelper, $, undefined) {
	2	+
	3	+ var baseUrl = '';
	4	+
	5	+ function _preprocessHtml(data) {
	6	+ return data.replace(/{{ server }}/g, baseUrl);
	7	+ }
	8	+
	9	+ loadHtmlHelper.load = function(target, url, callback) {
	10	+ var completeUrl = baseUrl + url;
	11	+ $.get(completeUrl, function(data) {
	12	+ $(target).html(_preprocessHtml(data));
	13	+ callback && callback();
	14	+ });
	15	+ }
	16	+
	17	+ loadHtmlHelper.setup = function(url) {
	18	+ baseUrl = url;
	19	+ };
	20	+
	21	+}(window.loadHtmlHelper = window.loadHtmlHelper \|\| {}, jQuery));
@@ -0,0 +1,44 @@		@@ -0,0 +1,44 @@
	1	+(function(pybossaApiHelper, $, undefined) {
	2	+
	3	+ var pybossaEndpoint = '';
	4	+ var projectName = '';
	5	+
	6	+ function _getProjectId() {
	7	+ return $.ajax({
	8	+ url : pybossaEndpoint + '/api/project?short_name=' + projectName
	9	+ });
	10	+ }
	11	+
	12	+ function _getUserProgress() {
	13	+ return $.ajax({
	14	+ url : pybossaEndpoint + '/api/project/' + projectName + '/userprogress',
	15	+ cache : false,
	16	+ dataType : 'json'
	17	+ });
	18	+ }
	19	+
	20	+ function _getAnswers(projectId, userId) {
	21	+ return $.ajax({
	22	+ url : pybossaEndpoint + '/api/taskrun?project_id=' + projectId
	23	+ + '&user_id=' + userId
	24	+ });
	25	+ }
	26	+
	27	+ pybossaApiHelper.setup = function(endpoint, name) {
	28	+ pybossaEndpoint = endpoint;
	29	+ projectName = name;
	30	+ }
	31	+
	32	+ pybossaApiHelper.getProjectId = function() {
	33	+ return _getProjectId();
	34	+ }
	35	+
	36	+ pybossaApiHelper.getUserProgress = function() {
	37	+ return _getUserProgress();
	38	+ }
	39	+
	40	+ pybossaApiHelper.getAnswers = function(projectId, userId) {
	41	+ return _getAnswers(projectId, userId);
	42	+ }
	43	+
	44	+}(window.pybossaApiHelper = window.pybossaApiHelper \|\| {}, jQuery));
@@ -0,0 +1,163 @@		@@ -0,0 +1,163 @@
	1	+(function(ranking, $, undefined) {
	2	+
	3	+ var NUMBER_OF_TOP_USERS = 10;
	4	+ var STARS_MAP = ['', 'gold', 'silver', 'bronze'];
	5	+ var baseUrl = '';
	6	+ var pybossaEndpoint = '';
	7	+ var projectName = '';
	8	+ var loggedUser = {};
	9	+ var totalTasks = 0;
	10	+ var doneTasks = 0;
	11	+ var showingRanking = false;
	12	+ var tasksEnded = false;
	13	+
	14	+ function _getRankingData(callback) {
	15	+ $.ajax({
	16	+ url : pybossaEndpoint + '/api/leaderboard?limit='
	17	+ + NUMBER_OF_TOP_USERS,
	18	+ success : function(response) {
	19	+ callback(typeof response == 'object' ? response[projectName]
	20	+ : '');
	21	+ },
	22	+ error : function(xhr, textStatus, error) {
	23	+ alert(xhr.responseText);
	24	+ }
	25	+ });
	26	+ }
	27	+
	28	+ function _processRankingRow(rowData) {
	29	+ var rank = rowData.rank;
	30	+ if (rank < 0) {
	31	+ return '';
	32	+ }
	33	+ var starHTML = '';
	34	+ if (rank > 0 && rank < 4) {
	35	+ starHTML = '<img src="' + baseUrl + '/assets/img/ranking/'
	36	+ + STARS_MAP[rank] + '-star-icon.png">';
	37	+ }
	38	+ var trHTML = '<tr>';
	39	+ if (rowData.name === loggedUser.name) {
	40	+ trHTML = '<tr class="warning">';
	41	+ loggedUser.rank = rowData.rank;
	42	+ }
	43	+ rank = rank == 0 ? '-' : rank + '.';
	44	+ return trHTML + '<td>' + starHTML + '</td><td>' + rank
	45	+ + '</td><td><a href="/pybossa/account/' + rowData.name
	46	+ + '/" target="_blank">' + rowData.fullname + '</a></td><td>'
	47	+ + rowData.score + '</td></tr>';
	48	+ }
	49	+
	50	+ function _updateRanking() {
	51	+ _getRankingData(function(data) {
	52	+ if (data === '')
	53	+ return;
	54	+
	55	+ var rowsHTML = '';
	56	+ for (var i = 0; i < data.length; i++) {
	57	+ rowsHTML += _processRankingRow(data[i]);
	58	+ }
	59	+ $('#leaderboard-container tbody').html(rowsHTML);
	60	+ $('#ranking-info-container .rank-position').html(loggedUser.rank);
	61	+ $('#ranking-info-container .username').html(loggedUser.fullName);
	62	+ if (loggedUser.avatarUrl != '') {
	63	+ $('#ranking-info-container .avatar-container img').attr('src',
	64	+ loggedUser.avatarUrl);
	65	+ $('#ranking-info-container .avatar-placeholder').hide();
	66	+ $('#ranking-info-container .avatar-container').show();
	67	+ }
	68	+ if (loggedUser.rank === 0) {
	69	+ $('#ranking-info-container .rank-position-container').hide();
	70	+ }
	71	+ _updateProgress();
	72	+ });
	73	+ }
	74	+
	75	+ function _getUserData() {
	76	+ return $.ajax({
	77	+ url : pybossaEndpoint + '/api/user?name=' + loggedUser.name
	78	+ });
	79	+ }
	80	+
	81	+ function _getAvatarUrl(data) {
	82	+ return !data \|\| typeof data.avatar === 'undefined' \|\| typeof data.container === 'undefined' ?
	83	+ '' : pybossaEndpoint + '/uploads/' + data.container + '/' + data.avatar;
	84	+ }
	85	+
	86	+ function _updateProgress() {
	87	+ pybossaApiHelper
	88	+ .getUserProgress()
	89	+ .done(
	90	+ function(response) {
	91	+ totalTasks = response.total;
	92	+ doneTasks = response.done;
	93	+ var percentage = (doneTasks / totalTasks) * 100;
	94	+ $('#ranking-info-container .progress-bar').attr(
	95	+ 'aria-valuenow', percentage).css('width',
	96	+ percentage + '%');
	97	+ $('#ranking-container [data-toggle="tooltip"]')
	98	+ .tooltip(
	99	+ {
	100	+ title : '<strong><span class="done-tasks">'
	101	+ + doneTasks
	102	+ + '</span> / <span class="total-tasks">'
	103	+ + totalTasks
	104	+ + '</span> sinais ensinados.</strong>',
	105	+ placement : 'bottom',
	106	+ trigger : 'manual'
	107	+ });
	108	+ });
	109	+ }
	110	+
	111	+ function _loadRankingData() {
	112	+ _getUserData().done(function(response) {
	113	+ if (typeof response == 'undefined' \|\| response.length < 1) {
	114	+ return;
	115	+ }
	116	+ loggedUser.fullName = response[0].fullname;
	117	+ loggedUser.avatarUrl = _getAvatarUrl(response[0].info);
	118	+ _updateRanking();
	119	+ });
	120	+ }
	121	+
	122	+ function _showRanking() {
	123	+ $('#validador-container').hide();
	124	+ $('#ranking-container').show();
	125	+ $('#validador-navbar .ranking-button').html("Voltar");
	126	+ if (doneTasks > 0) {
	127	+ $('#ranking-container [data-toggle="tooltip"]').tooltip('show');
	128	+ }
	129	+ showingRanking = true;
	130	+ }
	131	+
	132	+ function _hideRanking() {
	133	+ $('#ranking-container').hide();
	134	+ $('#validador-navbar .ranking-button').html("Ver Ranking");
	135	+ showingRanking = false;
	136	+
	137	+ if (!tasksEnded) {
	138	+ $('#validador-container').show();
	139	+ }
	140	+ }
	141	+
	142	+ ranking.toggle = function() {
	143	+ if (showingRanking) {
	144	+ _hideRanking();
	145	+ } else {
	146	+ _showRanking();
	147	+ }
	148	+ };
	149	+
	150	+ ranking.tasksEnded = function() {
	151	+ tasksEnded = true;
	152	+ };
	153	+
	154	+ ranking.setup = function(serverUrl, endpoint, name, user) {
	155	+ baseUrl = serverUrl;
	156	+ pybossaEndpoint = endpoint;
	157	+ projectName = name;
	158	+ loggedUser.name = user;
	159	+ loadHtmlHelper.load('#ranking-container', '/assets/templates/ranking/ranking.html',
	160	+ _loadRankingData);
	161	+ };
	162	+
	163	+}(window.ranking = window.ranking \|\| {}, jQuery));
	@@ -0,0 +1,47 @@		@@ -0,0 +1,47 @@
		1	+<div id="ranking-info-container" class="col-sm-4">
		2	+ <div class="title">WikiRanking</div>
		3	+ <div>Lorem Ipsum é apenas uma simulação de texto da indústria
		4	+ tipográfica e de impressos, e vem sendo utilizado desde o século XVI.</div>
		5	+ <div class="avatar-info col-sm-12">
		6	+ <div class="avatar-placeholder col-sm-6 col-sm-offset-3">
		7	+ <img src="{{ server }}/assets/img/ranking/user-shape.png">
		8	+ </div>
		9	+ <div class="avatar-container col-sm-8 col-sm-offset-2">
		10	+ <img src="">
		11	+ </div>
		12	+ <div class="col-sm-12">
		13	+ <div class="username"></div>
		14	+ <div class="rank-position-container">
		15	+ <strong><span class="rank-position"></span>º Posição</strong>
		16	+ </div>
		17	+ </div>
		18	+ </div>
		19	+ <div class="achievements-container col-sm-12">
		20	+ <div class="progress-container col-sm-12">
		21	+ <div class="progress">
		22	+ <div class="progress-bar" role="progressbar" aria-valuenow="0"
		23	+ aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip"
		24	+ data-html="true"></div>
		25	+ </div>
		26	+ </div>
		27	+ <div class="progress-label">
		28	+ <span><strong>Progresso:</strong></span>
		29	+ </div>
		30	+ </div>
		31	+</div>
		32	+<div id="leaderboard-container" class="col-sm-8">
		33	+ <table class="table table-striped table-hover">
		34	+ <thead>
		35	+ <tr>
		36	+ <th></th>
		37	+ <th>#</th>
		38	+ <th><img src="{{ server }}/assets/img/ranking/trophy-icon.png">
		39	+ <div>Membro</div></th>
		40	+ <th><img src="{{ server }}/assets/img/ranking/signs-icon.png">
		41	+ <div>Sinais</div></th>
		42	+ </tr>
		43	+ </thead>
		44	+ <tbody>
		45	+ </tbody>
		46	+ </table>
		47	+</div>
0	\ No newline at end of file	48	\ No newline at end of file
	@@ -1,17 +0,0 @@	@@ -1,17 +0,0 @@
1	-<?xml version="1.0" encoding="UTF-8"?>
2	-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3	-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="100px" height="100px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
4	-viewBox="0 0 100 100"
5	- xmlns:xlink="http://www.w3.org/1999/xlink">
6	- <defs>
7	- <style type="text/css">
8	- <![CDATA[
9	- .fil0 {fill:#5EC7BD;fill-rule:nonzero}
10	- ]]>
11	- </style>
12	- </defs>
13	- <g id="finish">
14	- <metadata id="finish"/>
15	- <path class="fil0" d="M44 79c-4,4 -10,4 -13,0l-20 -20c-2,-2 -3,-4 -3,-6 0,-3 1,-5 3,-7 3,-3 9,-3 13,0l12 12c0,1 2,1 3,0l37 -37c2,-2 5,-3 7,-3l0 0c2,0 5,1 6,3 2,1 3,4 3,6 0,3 -1,5 -3,7l-45 45z"/>
16	- </g>
17	-</svg>