From 82c23ef0eb7347aa707dee441a1e2457c832eea5 Mon Sep 17 00:00:00 2001
From: Bruno Meyer <buba.meyer_@hotmail.com>
Date: Fri, 8 Dec 2017 08:44:47 -0200
Subject: [PATCH] resultados ao finalizar os testes

---
 versao_bootstrap/css/style.css   |   2 +
 versao_bootstrap/index.html      |  17 ++--
 versao_bootstrap/js/professor.js |  69 ++++++++--------
 versao_bootstrap/js/script.js    | 135 ++++++++++++++++++++++++-------
 versao_bootstrap/professor.html  |  18 ++++-
 5 files changed, 168 insertions(+), 73 deletions(-)

diff --git a/versao_bootstrap/css/style.css b/versao_bootstrap/css/style.css
index 82dc9f7..1fa4766 100644
--- a/versao_bootstrap/css/style.css
+++ b/versao_bootstrap/css/style.css
@@ -187,6 +187,7 @@ b{
   height:100%;
 }
 */
+/*
 #botao{
   position: fixed;
 	background: white;
@@ -200,6 +201,7 @@ b{
   border-radius: 30px;
   text-align: center;
 }
+*/
 #conta{
 	text-align: center;
 }
diff --git a/versao_bootstrap/index.html b/versao_bootstrap/index.html
index 749de84..7f7fa0d 100644
--- a/versao_bootstrap/index.html
+++ b/versao_bootstrap/index.html
@@ -14,7 +14,8 @@
 	<!-- Insert this line above script imports  -->
 	<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
 
-	<script src="js/jquery-3.0.0.min.js" type="text/javascript" charset="utf-8"></script>
+	<script src="js/jquery-3.1.1.min.js"></script>
+	<script src='js/plotly-latest.min.js'></script>
 	<script src="js/jquery.countdown360.js" type="text/javascript" charset="utf-8"></script>
 
 	<!-- Insert this line after script imports -->
@@ -198,16 +199,20 @@
 					<input type="hidden" value='a' id ="grupo"/>
 				</div>
 				
-				
+			
 				<div class="container-fluid" id="voltar" style="display:none" >
+					
 					<center>
-					<div id="botao">
-					<h2>Fim do teste Stroop</h2>
+						<h1>Fim do teste Stroop</h1>
+					</center>
 					</br>
 					</br>
-					<input type="button" class="btn btn-secondary" value="Voltar ao início" onclick=voltar() />
+					<center>
+						<input type="button" class="btn btn-secondary" value="Voltar ao início" onclick=voltar() />
 					</center>
-				</div>
+					<br><br>
+					
+				<div id="mostra_resultados"></div>
 				
 				
 			</div>
diff --git a/versao_bootstrap/js/professor.js b/versao_bootstrap/js/professor.js
index a19f24e..a15b996 100644
--- a/versao_bootstrap/js/professor.js
+++ b/versao_bootstrap/js/professor.js
@@ -270,8 +270,8 @@ function plotaGraficoMedia(graficoGlobal, indice,idHTML, grafico){
 
 
 	for(var i=0; i< quantidadePerguntas; i++){
-			media[i] = 0;
-			acertos[i] =0;
+		media[i] = 0;
+		acertos[i] =0;
 	}
 
 
@@ -311,19 +311,18 @@ function plotaGraficoMedia(graficoGlobal, indice,idHTML, grafico){
 	node.class = "divGrafico";
 	document.getElementById("logado_main").appendChild(node);
 	Plotly.newPlot(idHTML, vetLinhas, {
-	title: idHTML,
-  annotations: [ {
-    xref: 'paper',
-    yref: 'paper',
-    x: 1,
-    xanchor: 'bottom',
-    y: 1.1,
-    yanchor: 'right',
-		text: 'Quantidade total: '+quantidadePergunatasAbsolutas+' Quantidade acertos: '+acertosAbsolutos,
-    showarrow: false
-  }]
-
-} );
+		title: idHTML,
+		annotations: [ {
+			xref: 'paper',
+			yref: 'paper',
+			x: 1,
+			xanchor: 'bottom',
+			y: 1.1,
+			yanchor: 'right',
+				text: 'Quantidade total: '+quantidadePergunatasAbsolutas+' Quantidade acertos: '+acertosAbsolutos,
+			showarrow: false
+		}]
+	});
 
 	vetLinhas = [];
 }
@@ -357,36 +356,34 @@ function geraGraficos(){
 		}
 	}
 
-for(var m=0; m<grupos.length; m++)
-{
-	for(var j =0; j <dados.length; j++){
-		if(dados[j].grupo == grupos[m])
-		{
-    congruentes = 0;
-    incongruentes = 0;
-			for( var i = 0; i < dados[0].ordemBateria.length; i++){
-				if(dados[0].ordemBateria[i] == "C"){
-					graficoGlobalC.push(dados[j].stringResposta[congruentes+incongruentes]);
-					congruentes++;
-				}
-				if(dados[0].ordemBateria[i] == "I"){
-					graficoGlobalI.push(dados[j].stringResposta[congruentes+incongruentes]);
-					incongruentes++;
+	for(var m=0; m<grupos.length; m++){
+		for(var j =0; j <dados.length; j++){
+			if(dados[j].grupo == grupos[m]){
+				congruentes = 0;
+				incongruentes = 0;
+				for( var i = 0; i < dados[0].ordemBateria.length; i++){
+					if(dados[0].ordemBateria[i] == "C"){
+						graficoGlobalC.push(dados[j].stringResposta[congruentes+incongruentes]);
+						congruentes++;
+					}
+					if(dados[0].ordemBateria[i] == "I"){
+						graficoGlobalI.push(dados[j].stringResposta[congruentes+incongruentes]);
+						incongruentes++;
+					}
 				}
 			}
 		}
-	}
 
-	if(congruentes)
-	 plotaGraficoMedia(graficoGlobalC, congruentes,"Media Congruente do grupo "+(grupos[m]), "graficoCMedia");
-	if(incongruentes)
-		plotaGraficoMedia(graficoGlobalI, incongruentes,"Media Incongruente do grupo "+(grupos[m]), "graficoIMedia");
+		if(congruentes)
+			plotaGraficoMedia(graficoGlobalC, congruentes,"Media Congruente do grupo "+(grupos[m]), "graficoCMedia");
+		if(incongruentes)
+			plotaGraficoMedia(graficoGlobalI, incongruentes,"Media Incongruente do grupo "+(grupos[m]), "graficoIMedia");
 
 		congruentes = 0;
 		incongruentes = 0;
 		graficoGlobalC=[];
 		graficoGlobalI=[];
-}
+	}
 
 
 
diff --git a/versao_bootstrap/js/script.js b/versao_bootstrap/js/script.js
index 6c347e0..385bc75 100644
--- a/versao_bootstrap/js/script.js
+++ b/versao_bootstrap/js/script.js
@@ -14,6 +14,7 @@ if (typeof(Storage) !== "undefined") {
 function enviarDados(dados){
 	dataSet.push(dados);
 	localStorage.dataSet = JSON.stringify(dataSet);
+	mostraResultados();
 }
 
 
@@ -331,33 +332,113 @@ function contagem() {
          	label       : ["", ""],
          	smooth: true,
          	onComplete  : function () { /*console.log('done')*/; }
-		   });
-			countdown.start();
-			//console.log('countdown360 ',countdown);
-		 	
-            $("#countdown").css("left",window.innerWidth*0.5 - countdown.settings.radius - countdown.settings.strokeWidth);
-
-            if(window.innerHeight < 356) {
-                $("#countdown").css("top",355-100);
-            } else {
-                $("#countdown").css("bottom",0);
-            }
+   });
+	countdown.start();
+	//console.log('countdown360 ',countdown);
+	
+	$("#countdown").css("left",window.innerWidth*0.5 - countdown.settings.radius - countdown.settings.strokeWidth);
 
-			// $("#countdown360_countdown").css("position", "fixed");
-			// $("#countdown360_countdown").css("botton", 0);
+	if(window.innerHeight < 356) {
+		$("#countdown").css("top",355-100);
+	} else {
+		$("#countdown").css("bottom",0);
+	}
 
-			// this.settings.width = (this.settings.radius * 2) + (this.settings.strokeWidth * 2);
-        	// this.settings.height = this.settings.width;
+	// $("#countdown360_countdown").css("position", "fixed");
+	// $("#countdown360_countdown").css("botton", 0);
 
-            // Nao sei por que buga as vezes e o relogio vira um quadrado
-            $( window ).resize(function() {
-                if(window.innerHeight < 356) {
-                    $("#countdown").css("top",355-120);
-                    $("#countdown").css("bottom","");
-                } else {
-                    $("#countdown").css("bottom",0);
-                    $("#countdown").css("top","");
-                }
-                $("#countdown").css("left",window.innerWidth*0.5 - countdown.settings.radius - countdown.settings.strokeWidth);
-            });
-    }
+	// this.settings.width = (this.settings.radius * 2) + (this.settings.strokeWidth * 2);
+	// this.settings.height = this.settings.width;
+
+	// Nao sei por que buga as vezes e o relogio vira um quadrado
+	$( window ).resize(function() {
+		if(window.innerHeight < 356) {
+			$("#countdown").css("top",355-120);
+			$("#countdown").css("bottom","");
+		} else {
+			$("#countdown").css("bottom",0);
+			$("#countdown").css("top","");
+		}
+		$("#countdown").css("left",window.innerWidth*0.5 - countdown.settings.radius - countdown.settings.strokeWidth);
+	});
+}
+
+
+function range(x){
+	var ret = [];
+	for(var i = 1; i <= x; i++){
+		ret.push(i);
+	}
+
+	return ret;
+}
+
+function mostraResultados(){
+	var ordem = dataSet[dataSet.length-1].ordemBateria;
+	totalC = 0;
+	totalI = 0;
+	for(var i in ordem){
+		if(ordem[i] == "C"){
+			plotaGraficoMedia(totalC+totalI,"Congruente "+(totalC+1));
+			totalC++;
+		}
+		if(ordem[i] == "I"){
+			plotaGraficoMedia(totalC+totalI,"Incongruente "+(totalI+1));
+			totalI++;
+		}
+	}
+}
+
+function plotaGraficoMedia(indice, idHTML){
+	
+	var rgb = [];
+	var auxVetX = [];
+	var auxVetY = [];
+	var vetLinhas = [];
+	var i = dataSet.length-1;
+	for(var j = 0; j < dataSet[i].stringResposta[indice].length; j++){
+		if(dataSet[i].stringResposta[indice][j].acertou){ // Acertou
+			auxVetX.push(j+1);
+			auxVetY.push(dataSet[i].stringResposta[indice][j].tempo);
+			rgb.push('rgb(31,119,180)');
+		} else {
+			auxVetX.push(j+1);
+			auxVetY.push(dataSet[i].stringResposta[indice][j].tempo);
+			rgb.push('rgb(180,30,31)');
+		}
+	}
+	vetLinhas[vetLinhas.length] = {
+		x: auxVetX,
+		y: auxVetY,
+		type: 'bar',
+		marker: { color: rgb },
+		name: dataSet[i].nome
+	};
+
+	
+
+	var node = document.createElement("CENTER");
+	node.id = idHTML;
+	node.class = "container-fluid";
+	document.getElementById("mostra_resultados").appendChild(node);
+	Plotly.newPlot(idHTML, vetLinhas, {
+		title: idHTML,
+		xaxis: {
+			type: 'category',
+			title: 'Número da questão',
+		},
+		yaxis: {
+			title: 'Tempo (segundos)'
+		},
+
+		annotations: [ {
+			xref: 'paper',
+			yref: 'paper',
+			x: 1,
+			xanchor: 'bottom',
+			y: 1.1,
+			yanchor: 'right',
+			showarrow: false
+		}]
+	});
+}
diff --git a/versao_bootstrap/professor.html b/versao_bootstrap/professor.html
index 5bd1baa..2f6ce55 100644
--- a/versao_bootstrap/professor.html
+++ b/versao_bootstrap/professor.html
@@ -57,7 +57,9 @@
 					<input id="upfile" type="file" value="upload" onchange="load_data(this.files)"/>
 				</div>
 				<li class="container-fluid text-center"><a href="index.html">Fazer teste</a></li>
+				<li><center><a id="menu-untoggle" href="#menu-untoggle" class="btn btn-secondary"><</a></center></li>
 		</ul>
+		
 	</div>
 	
 	
@@ -158,18 +160,26 @@
 			e.preventDefault();
 			$("#wrapper").toggleClass("toggled");
 		});
+		$("#menu-untoggle").click(function(e) {
+			e.preventDefault();
+			$("#wrapper").removeClass("toggled");
+		});
 		$(".sidebar-nav a").click(function(c){
+			if($(this).attr("id") == "menu-untoggle"){
+				return;
+			}
 			$(".sidebar-nav a").each(function(i,x){
 				$(x).parent().removeClass("sidebar-brand");
 			});
 			
 			$(this).parent().addClass("sidebar-brand");
-			$("#wrapper").removeClass("toggled");
+			//~ $("#wrapper").removeClass("toggled");
 		});
 		
-		$(".container-fluid").click(function(c){
-			$("#wrapper").removeClass("toggled");
-		});
+		
+		//~ $(".container-fluid").click(function(c){
+			//~ $("#wrapper").removeClass("toggled");
+		//~ });
 		
 		buscaTestes();
 	</script>
-- 
GitLab