Commit 5b18db8f authored by mc16's avatar mc16

- Gráfico da média

- Menu lateral na tela do professor
- corzinha no fundo da tela inicial
- tela de teste centralizada
parent 8d2dd52d
/* regra para o box-sizing */
*, *:before, *:after {
-webkit-box-sizing: border-box;
......@@ -28,10 +26,10 @@
width:370px;
position:fixed;
top:0;
z-index:2;
left:-320px;
}
#lateral:before {
z-index:1000;
color:white;
position:fixed;
left:4px;
......@@ -85,6 +83,9 @@ left:-500px
transition: all 0.5s ease;
}
#header{
z-index:10;
}
#form{
margin: 20px auto;
width: 700px;
......@@ -99,7 +100,7 @@ fieldset{
}
#corpo, #voltar{
#voltar{
margin: 0 auto;
width: 30.1%;
height: 300px;
......@@ -108,11 +109,14 @@ fieldset{
#label{
text-align: center;
font-size: 24px;
font-weight: bold;
}
#conta{
text-align: center;
padding: 20px;
font-size: 10px;
}
b{
font-family: 'Source Sans Pro', sans-serif;
......@@ -130,28 +134,29 @@ b{
padding-left: 30px;
border-radius: 30px;
}
#form{
#formNome{
position: absolute;
background: white;
transform: translateY(-50%) translateX(-50%);
top: 40%;
left: 50%;
border-radius: 30px;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 150px;
padding-left: 30px;
}
#conta{
text-align: center;
}
#FormularioNome{
position:absolute;
top:0;
left:0;
z-index:11;
background-color:lightblue;
width:100%;
height:100%;
}
.button-verde {
background: rgb(28, 184, 65); /* this is a green */
font-family: 'Noto Sans', sans-serif;
......@@ -190,3 +195,24 @@ b{
.pure-menu-link{
color:rgb(100,100,100);
}
#graficoC
{
z-index: 1;
}
#graficoI
{
z-index: 1;
}
#graficoIMedia
{
z-index: 1;
}
#graficoCMedia
{
z-index: 1;
}
#corpoConfig{
position: absolute;
top: 10%;
left:40%;
}
......@@ -20,52 +20,54 @@
<!--*******************************************************************************************!-->
<div id="FormularioNome">
<div id ="form" class="pure-form pure-form-aligned" >
<center><p><b>Olá!</b></p> Bem vindo ao teste Stroop.<br>
Antes de começar, precisamos de alguns dados:
<br><br>
</center>
<fieldset>
<div class="splash-container">
<label for="name">Nome</label>
<input id="nome" name="nome" type="text" placeholder="Nome" class="pure-input-rounded">
<br>
<label for="idade">Idade</label>
<input id="idade" name="idade" type="text" placeholder="Idade" class="pure-input-rounded">
</div>
<br><br>
<button class="pure-button pure-button-primary" name="botao" onClick="iniciar();">Começar</button>
<br><br>
<a class="pure-button pure-button-primary" href="professor.html">Gerenciar Resultados</a>
<br><br>
</fieldset>
</div>
<div id ="formNome" class="pure-form pure-form-aligned" >
<center><p><b>Olá!</b></p> Bem vindo ao teste Stroop.<br>
Antes de começar, precisamos de alguns dados:
<br><br>
</center>
<fieldset>
<div class="splash-container">
<label for="name">Nome</label>
<input id="nome" name="nome" type="text" placeholder="Nome" class="pure-input-rounded">
<br>
<label for="idade">Idade</label>
<input id="idade" name="idade" type="text" placeholder="Idade" class="pure-input-rounded">
</div>
<br><br>
<button class="pure-button pure-button-primary" name="botao" onClick="iniciar();">Começar</button>
<br><br>
<a class="pure-button pure-button-primary" href="professor.html">Gerenciar Resultados</a>
<br><br>
</fieldset>
</div>
</div>
<!--*******************************************************************************************!-->
<!--*******************************************************************************************!-->
<div class="pure-form" id="corpo" style="display:none;">
<div id="botoes" style="display:block;">
<p id ="label"></p>
<input type="button" class="button-vermelho pure-button" value="Vermelho" id ="vermelho" onclick=clicou("vermelho") />
<input type="button" class="button-azul pure-button" value="Azul" id ="azul" onclick=clicou("azul") />
<input type="button" class="button-verde pure-button" value="Verde" id ="verde" onclick=clicou("verde") />
<input type="button" class="button-roxo pure-button" value="Roxo" id ="roxo" onclick=clicou("roxo") />
<input type="button" class="button-marrom pure-button" value="Marrom" id ="verde" onclick=clicou("marrom") />
</br>
</br>
<div id="conta"></div>
</div>
<div id="final">
<input type="hidden" value='a' id ="nome"/>
<input type="hidden" value='a' id ="idade"/>
</div>
<div id="voltar" style="display:none" >
<input type="button" class="pure-button" value="Voltar ao início" onclick=voltar()>
</div>
<div id="botoes" style="display:block;">
<p id ="label"></p>
<input type="button" class="button-vermelho pure-button" value="Vermelho" id ="vermelho" onclick=clicou("vermelho") />
<input type="button" class="button-azul pure-button" value="Azul" id ="azul" onclick=clicou("azul") />
<input type="button" class="button-verde pure-button" value="Verde" id ="verde" onclick=clicou("verde") />
<input type="button" class="button-roxo pure-button" value="Roxo" id ="roxo" onclick=clicou("roxo") />
<input type="button" class="button-marrom pure-button" value="Marrom" id ="verde" onclick=clicou("marrom") />
</br>
</br>
<div id="conta"></div>
</div>
<div id="final">
<input type="hidden" value='a' id ="nome"/>
<input type="hidden" value='a' id ="idade"/>
</div>
<div id="voltar" style="display:none" >
<input type="button" class="pure-button" value="Voltar ao início" onclick=voltar()>
</div>
</div>
<!--*******************************************************************************************!-->
......
var numeroTestes = 0;
function logado_config_addTeste(){
var ordem = document.getElementById("logado_config_selects");
var all = document.createElement("DIV");
all.id = "config_select_all"+numeroTestes;
var select = document.createElement("SELECT");
select.id = "config_select"+numeroTestes;
var option;
option = document.createElement("option");
option.text = "Congruente";
option.value = "C";
select.options.add(option);
option = document.createElement("option");
option.text = "Incongruente";
option.value = "I";
select.options.add(option);
option = document.createElement("option");
option.text = "Pre-teste Congruente";
option.value = "pC";
select.options.add(option);
option = document.createElement("option");
option.text = "Pre-teste Incongruente";
option.value = "pI";
select.options.add(option);
all.appendChild(select);
var buttonRemove = document.createElement("button");
buttonRemove.type = "button";
buttonRemove.value = numeroTestes;
buttonRemove.innerHTML="X";
buttonRemove.onclick = function(){
var value = this.value;
var all = document.getElementById("config_select_all"+value);
ordem.removeChild(all);
}
all.appendChild(buttonRemove);
all.appendChild(document.createElement("BR"));
numeroTestes++;
ordem.appendChild(all);
return select;
}
function configuracoes(){
paginaAtual = "config";
document.getElementById("logado_config_selects").innerHTML = "";
var NUM_DE_PERGUNTAS = 5;
if(localStorage.perguntas != undefined)
NUM_DE_PERGUNTAS = localStorage.perguntas;
else
localStorage.setItem("perguntas",NUM_DE_PERGUNTAS);
document.getElementById("logado_config_numero_perguntas").value = NUM_DE_PERGUNTAS;
var ordemBateria = ["pC","C","C", "pI", "I","I","F"];
if(localStorage.ordemBateria != undefined)
ordemBateria = JSON.parse(localStorage.ordemBateria);
else
localStorage.setItem("ordemBateria",JSON.stringify(ordemBateria));
var ordemBateria = JSON.parse(localStorage.ordemBateria);
for(var t in ordemBateria){
if(ordemBateria[t] == "F"){
break;
}
var select = logado_config_addTeste();
for(var op in select.options){
if(select.options[op].value == ordemBateria[t]){
select.selectedIndex = op;
}
}
}
loadPage();
}
function logado_config_salvaConfig(){
if(confirm("Fazendo isso você deletará todos os testes!\nDeseja continuar?")){
localStorage.perguntas = document.getElementById("logado_config_numero_perguntas").value;
newOrdemBateria = []
for(var i = 0; i < numeroTestes; i++){
var select = document.getElementById("config_select"+i);
if(select){
var v = select.options[select.selectedIndex].value;
newOrdemBateria.push(v);
}
}
newOrdemBateria.push("F");
localStorage.ordemBateria = JSON.stringify(newOrdemBateria);
console.log(newOrdemBateria);
dataSet = [];
salvaTestes();
}
}
......@@ -7,6 +7,7 @@ if (typeof(Storage) !== "undefined") {
if(localStorage.getItem("dataSet") != null){
console.log(localStorage.getItem("dataSet"));
dataSet = JSON.parse(localStorage.dataSet);
}
......@@ -44,7 +45,9 @@ var paginaAtual = "main";
function loadPage(){
document.getElementById("logado_main").style.display = "none";
document.getElementById("logado_gerenciar").style.display = "none";
document.getElementById("logado_config").style.display = "none";
document.getElementById("logado_"+paginaAtual).style.display = "inline";
document.getElementById("lateral").innerHTML =" <div id=menu><h3 class=link-titulo>Menu</h3><ul class=box><li><a value='enviado' onClick=downloadCsv();>Baixar os resultados</a></li><li><a value='enviado' onClick=buscaTestes()>Examinar os gráficos</a></li><li><a onClick=save_data();>Salvar dados</a></li><li><input type=file id=input_load_data onchange=load_data(this.files)></li><li><a href=index.html>Fazer teste</a></li></ul></div> "
}
loadPage();
......@@ -56,6 +59,7 @@ function buscaTestes(){
geraGraficos();
geraDadosGerenciar();
loadPage();
}
//Função chamada para carregar a aba de gerencia de testes
......@@ -216,6 +220,7 @@ function plotaGraficoX(/*vetX,vetY */indice,idHTML, grafico){
var j;
for(var i = 0; i < dados.length; i++){
console.log(dados[i]);
console.log(buscaTempoResposta(dados[i].stringResposta[indice]));
//Linhas
var tempos = buscaTempoResposta(dados[i].stringResposta[indice]);
......@@ -254,12 +259,52 @@ function plotaGraficoX(/*vetX,vetY */indice,idHTML, grafico){
auxVetX = [];
}
function plotaGraficoMediaX(/*vetX,vetY */indice,idHTML, grafico){
var vetLinhas = [];
var j;
var media = [];
for(var i=0; i< dados[0].ordemBateria.length; i++)
{
media[i] = 0;
}
for(var i = 0; i < dados.length; i++)
{
var tempos = buscaTempoResposta(dados[i].stringResposta[indice]);
for(var j=0; j< tempos.length; j++)
{
media[j] = parseFloat(media[j]) + parseFloat(tempos[j]);
console.log("dentro do for");
console.log(media[j]);
}
}
for(var i=0; i< media.length; i++)
{
media[i] = parseFloat(media[i])/parseFloat(dados.length);
}
console.log("Media " + media.length)
console.log(media);
vetLinhas[vetLinhas.length] = {
x: range(media.length),
y: media,
type: 'scatter',
mode:'lines+markers',
name: "media"
};
var node = document.createElement("DIV");
node.id = idHTML;
document.getElementById(grafico).appendChild(node);//idHTML+"<br><center id='"+idHTML+"'></center>"
Plotly.newPlot(idHTML, vetLinhas);
vetLinhas = [];
}
//Percorre os testes do professor e os plota de acordo com a congruencia
function geraGraficos(){
document.getElementById("graficoC").innerHTML = "";
document.getElementById("graficoI").innerHTML = "";
document.getElementById("graficoCMedia").innerHTML= "";
document.getElementById("graficoIMedia").innerHTML= "";
if(dados){
if(!dados.length)
......@@ -278,12 +323,31 @@ function geraGraficos(){
plotaGraficoX(congruentes+incongruentes,"Incongruente "+(incongruentes+1), "graficoI");
incongruentes++;
}
}
congruentes=0;
incongruentes=0;
for( var i = 0; i< dados[0].ordemBateria.length; i++){
if(dados[0].ordemBateria[i] == "C"){
plotaGraficoMediaX(congruentes+incongruentes,"CongruenteMedia "+(congruentes+1), "graficoCMedia");
congruentes++;
}
if(dados[0].ordemBateria[i] == "I"){
plotaGraficoMediaX(congruentes+incongruentes,"IncongruenteMedia "+(incongruentes+1), "graficoIMedia");
incongruentes++;
}
}
}
}
}
......
......@@ -20,9 +20,21 @@ function enviarDados(dados){
//Numero de perguntas existentes (eliminar futuramente para haver testes dinamicos)
var NUM_DE_PERGUNTAS = 5;
if(localStorage.perguntas != undefined)
NUM_DE_PERGUNTAS = localStorage.perguntas;
else
localStorage.setItem("perguntas",NUM_DE_PERGUNTAS);
var ordemBateria = ["pC","C","C", "pI", "I","I","F"]; //pC = pre Congruente, C = Congruente, pI = pre Incongruente, I = Incongruente, F = Fim
if(localStorage.ordemBateria != undefined)
ordemBateria = JSON.parse(localStorage.ordemBateria);
else
localStorage.setItem("ordemBateria",JSON.stringify(ordemBateria));
console.log(localStorage.ordemBateria);
console.log(localStorage.perguntas);
var contaPerguntas = 0;
var ultimoCerto = 0;
......@@ -32,7 +44,6 @@ var data = {};
data.stringResposta = [];
var ordemBateria = ["pC","C","C", "pI", "I","I","F"]; //pC = pre Congruente, C = Congruente, pI = pre Incongruente, I = Incongruente, F = Fim
var testeAtual=0; //Indica quantos testes ja foram feitos no total
var testesSalvos=0; //Indica quantos testes ja foram feitos e salvos ('C' e I)
......
......@@ -11,20 +11,7 @@
<script src="js/jquery-3.1.1.min.js"></script>
<script src='js/plotly-latest.min.js'></script>
<script>
</script>
<style>
.header{
top:0;
height:10%;
}
#corpo{
top:10%;
height:90%;
}
.spanErrou{
color:red;
}
......@@ -37,8 +24,6 @@
</style>
</head>
<body>
<!--*******************************************************************************************!-->
<div id="logado_main" style="display:none;">
<div class="header">
......@@ -48,44 +33,29 @@
<ul class="pure-menu-list">
<li class="pure-menu-item pure-menu-selected"><a onClick="inicioTestes();" class="pure-menu-link">Início</a></li>
<li class="pure-menu-item"><a onClick="gerenciarTestes();" class="pure-menu-link">Gerenciar Testes</a></li>
<li class="pure-menu-item"><a onClick="configuracoes();" class="pure-menu-link">Configurações</a></li>
</ul>
</div>
</div>
<div class="corpo">
<input id='hidden_1' type='hidden' name='acao' value=''>
<input type="file" id="input_load_data" onchange="load_data(this.files)">
<br>
</div>
<div id="lateral">
<div id="menu">
<h3 class="link-titulo">Resultados</h3>
<ul class="box">
<li><a value='enviado' onClick="downloadCsv();">Baixar</a></li>
</ul>
<h3 class="link-titulo">Gráficos</h3>
<ul class="box">
<li><a value='enviado' onClick="buscaTestes()">Examinar</a></li>
</ul>
<div id="lateral">
<div id="menu">
<h3 class="link-titulo">Menu</h3>
<ul class="box">
<li><a value='enviado' onClick="downloadCsv();">Baixar os resultados</a></li>
<li><a value='enviado' onClick="buscaTestes()">Examinar os gráficos</a></li>
<li><a onClick="save_data();">Salvar dados</a></li>
<li><input type=file id=input_load_data onchange=load_data(this.files)></li>
<li><a href="index.html">Fazer teste</a></li>
</ul>
<h3 class="link-titulo">Dados</h3>
<ul class="box">
<li><a onClick="save_data();">Salvar</a></li>
</ul>
</div> <!-- /#menu -->
</div> <!-- /#lateral -->
<h3 class="link-titulo">Teste</h3>
<ul class="box">
<li><a href="index.html">Fazer teste</a></li>
</ul>
</div> <!-- /#menu -->
</div id="link"> <!-- vazio --> <div>
</div> <!-- /#lateral -->
<center id='graficoC'></center>
<center id='graficoI'></center>
<center id='graficoCMedia'></center>
<center id='graficoIMedia'></center>
</div>
<!--*******************************************************************************************!-->
......@@ -99,8 +69,21 @@
<ul class="pure-menu-list">
<li class="pure-menu-item pure-menu-selected"><a onClick="inicioTestes();" class="pure-menu-link">Início</a></li>
<li class="pure-menu-item"><a onClick="gerenciarTestes();" class="pure-menu-link">Gerenciar Testes</a></li>
<li class="pure-menu-item"><a onClick="configuracoes();" class="pure-menu-link">Configurações</a></li>
</ul>
</div>
<div id="lateral">
<div id="menu">
<h3 class="link-titulo">Menu</h3>
<ul class="box">
<li><a value='enviado' onClick="downloadCsv();">Baixar os resultados</a></li>
<li><a value='enviado' onClick="buscaTestes()">Examinar os gráficos</a></li>
<li><a onClick="save_data();">Salvar dados</a></li>
<li><input type=file id=input_load_data onchange=load_data(this.files)></li>
<li><a href="index.html">Fazer teste</a></li>
</ul>
</div> <!-- /#menu -->
</div> <!-- /#lateral -->
</div>
<div class="corpo">
<center id="gerencia_testes">
......@@ -109,9 +92,59 @@
</div>
</div>
<!--*******************************************************************************************!-->
<!--*******************************************************************************************!-->
<div id="logado_config" style="display:none;">
<div class="header">
<div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed" style='background-color:#0078e7;'>
<a class="pure-menu-heading" href="">STROOP</a>
<ul class="pure-menu-list">
<li class="pure-menu-item pure-menu-selected"><a onClick="inicioTestes();" class="pure-menu-link">Início</a></li>
<li class="pure-menu-item"><a onClick="gerenciarTestes();" class="pure-menu-link">Gerenciar Testes</a></li>
<li class="pure-menu-item"><a onClick="configuracoes();" class="pure-menu-link">Configurações</a></li>
</ul>
</div>
<div id="lateral">
<div id="menu">
<h3 class="link-titulo">Menu</h3>
<ul class="box">
<li><a value='enviado' onClick="downloadCsv();">Baixar os resultados</a></li>
<li><a value='enviado' onClick="buscaTestes()">Examinar os gráficos</a></li>
<li><a onClick="save_data();">Salvar dados</a></li>
<li><input type=file id=input_load_data onchange=load_data(this.files)></li>
<li><a href="index.html">Fazer teste</a></li>
</ul>
</div> <!-- /#menu -->
</div> <!-- /#lateral -->
</div>
<div id="corpoConfig">
<center>
Número de perguntas
<br>
<input type=number id="logado_config_numero_perguntas">
<br>
<br>
Ordem dos testes
<br>
<center id="logado_config_selects"></center>
<br>
<br>
<button onClick="logado_config_addTeste();">Adicionar teste</button>
<br>
<br>
<button onClick="logado_config_salvaConfig()">Salvar</button>
</center>
</div>
</div>
<!--*******************************************************************************************!-->
<br><br>
</body>
<script src="js/professor.js"></script>
<script src="js/save_data.js"></script>
<script src="js/configuracoes.js"></script>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment