Commit fa3379d5 authored by mc16's avatar mc16

Tutorial na página inicial e no inicio do teste + legenda de acertos no gráfico

parent cc53279f
......@@ -100,12 +100,33 @@ fieldset{
font-size: 24px;
font-weight: bold;
}
#labelTutorialCongruente{
text-align: center;
font-size: 24px;
font-weight: bold;
}
#labelTutorialIncongruente{
text-align: center;
font-size: 24px;
font-weight: bold;
}
#conta{
text-align: center;
padding: 20px;
font-size: 10px;
}
#respostaC{
text-align: center;
padding: 20px;
font-size: 10px;
}
#respostaI{
text-align: center;
padding: 20px;
font-size: 10px;
}
b{
font-family: 'Source Sans Pro', sans-serif;
font-size: 30px;
......@@ -119,14 +140,33 @@ b{
#formNome{
position: absolute;
background: white;
transform: translateY(-50%) translateX(-50%);
top: 40%;
top: 20%;
left: 50%;
max-width: 50%;
border-radius: 30px;
padding-right: 30px;
padding-left: 30px;
padding-right: 40px;
padding-left: 40px;
}
#tutorial{
position: absolute;
background: white;
top: 5%;
left: 5%;
border-radius: 30px;
padding-right: 40px;
padding-left: 40px;
}
#formTutorial{
position: absolute;
background: white;
left: 0%;
max-width: 30%;
padding-right: 1%;
padding-left: 1%;
height: 100%;
}
#voltar{
position:absolute;
top:0;
......@@ -159,6 +199,14 @@ b{
width:100%;
height:100%;
}
#FormularioTutorial{
position:absolute;
top:0;
left:0;
background-color:#A2B5CD;
width:100%;
min-height: 150%;
}
@media screen and (max-width: 450px) {
[class*="button-"] {
......@@ -257,7 +305,9 @@ b{
#boxDeBotoes {
text-align: center;
}
#boxDeBotoesTutorialCongruente {
text-align: center;
}
#countdown {
position: absolute;
......
......@@ -7,13 +7,13 @@
<link rel="stylesheet" href="css/pure-min.css">
<link rel="stylesheet" href="css/style.css">
<!-- 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.countdown360.js" type="text/javascript" charset="utf-8"></script>
<!-- Insert this line after script imports -->
<script>if (window.module) module = window.module;</script>
</head>
......@@ -37,20 +37,87 @@
</div>
<br><br>
<button class="pure-button pure-button-primary" name="botao" onClick="iniciar();">Começar</button>
<button class="pure-button pure-button-primary" name="botao" onClick="tutorial();">Começar</button>
<br><br>
<a class="pure-button pure-button-primary" href="professor.html">Gerenciar Resultados</a>
<br><br>
</fieldset>
</div>
<div id ="formTutorial" class="pure-form pure-form-aligned" >
<center><p><b>Instruções!</b></p><br></center>
1) Preencha seu nome
<br><br>
2) No campo Grupo preencha o grupo correspondente:
<br>
&nbsp;&nbsp;&nbsp;&nbsp;1 para Normal
<br>
&nbsp;&nbsp;&nbsp;&nbsp;2 para Meditação
<br><br>
3) Clique em "Começar" para iniciar o teste.
<br><br>
</div>
</div>
<!--*******************************************************************************************!-->
<!--*******************************************************************************************!-->
<div id="FormularioTutorial" style="display:none;">
<div class="pure-form" id="tutorial">
<center><p><b>Tutorial!</b></p><br></center>
&nbsp;&nbsp;1)Ao clicar no botão “Iniciar” você começará a relacionar a cor da palavra com o botão correspondente da mesma.
<br><br>
&nbsp;&nbsp;2)Durante o teste, as questões poderão ser congruentes ou incongruentes.
<br><br>
&nbsp;&nbsp;&nbsp;&nbsp;Nas congruentes, as palavras estarão coloridas com a cor que representam (verde escrito com a cor verde).
<br>
&nbsp;&nbsp;&nbsp;&nbsp;Use o exemplo abaixo para treinar.
<div id="tutorialCongruente" style="display:block;">
<p id ="labelTutorialCongruente"></p>
<div id="boxDeBotoesTutorialCongruente">
<input type="button" class="button-vermelho pure-button" value="Vermelho" id ="vermelho" onclick=clicouTutorialC("vermelho") />
<input type="button" class="button-azul pure-button" value="Azul" id ="azul" onclick=clicouTutorialC("azul") />
<input type="button" class="button-verde pure-button" value="Verde" id ="verde" onclick=clicouTutorialC("verde") />
<input type="button" class="button-roxo pure-button" value="Roxo" id ="roxo" onclick=clicouTutorialC("roxo") />
<input type="button" class="button-marrom pure-button" value="Marrom" id ="verde" onclick=clicouTutorialC("marrom") />
</div>
<div id="respostaC"></div>
</div>
<br><br>
&nbsp;&nbsp;&nbsp;&nbsp;Nas incongruentes as palavras não estarão necessariamente coloridas com a sua cor (palavra verde colorida com a cor vermelha).
<br>
&nbsp;&nbsp;&nbsp;&nbsp;Use o exemplo abaixo para treinar.
<div id="tutorialIncongruente" style="display:block;">
<p id ="labelTutorialIncongruente"></p>
<div id="boxDeBotoesTutorialCongruente">
<input type="button" class="button-vermelho pure-button" value="Vermelho" id ="vermelho" onclick=clicouTutorialI("vermelho") />
<input type="button" class="button-azul pure-button" value="Azul" id ="azul" onclick=clicouTutorialI("azul") />
<input type="button" class="button-verde pure-button" value="Verde" id ="verde" onclick=clicouTutorialI("verde") />
<input type="button" class="button-roxo pure-button" value="Roxo" id ="roxo" onclick=clicouTutorialI("roxo") />
<input type="button" class="button-marrom pure-button" value="Marrom" id ="verde" onclick=clicouTutorialI("marrom") />
</div>
<div id="respostaI"></div>
</div>
<br><br>
&nbsp;&nbsp;3)Na série seguinte você fará a mesma coisa com a diferença de a palavra não será correspondente a cor.
<br><br>
&nbsp;&nbsp;4) Haverá pausas de 5 segundos ao longo do teste.
<br><br>
&nbsp;&nbsp;5) Não feche o navegador enquanto realiza o teste.
<br><br>
&nbsp;&nbsp;6) Ao fim do teste, pode liberar o aparelho para o responsável.
<br><br>
<center>
<button class="pure-button pure-button-primary" name="botao" onClick="iniciar();">Iniciar</button>
</center>
<br><br>
</div>
</div>
<!--*******************************************************************************************!-->
<div class="pure-form" id="corpo" style="display:none;">
<div id="botoes" style="display:block;">
<p id ="label"></p>
<div id="boxDeBotoes">
......
......@@ -315,7 +315,7 @@ function plotaGraficoMedia(graficoGlobal, indice,idHTML, grafico){
yref: 'paper',
x: 1,
xanchor: 'bottom',
y: 0,
y: 1.1,
yanchor: 'right',
text: 'Quantidade total: '+quantidadePergunatasAbsolutas+' Quantidade acertos: '+acertosAbsolutos,
showarrow: false
......
......@@ -78,7 +78,7 @@ function repouso(){
teste = "Incongruente";
} else {
teste = "Fim";
}
}
document.getElementById("label").innerHTML = teste;
document.getElementById("conta").innerHTML = "...";
setTimeout("repouso();",1000);
......@@ -95,7 +95,7 @@ function repouso(){
}
function iniciar(){
document.getElementById("FormularioNome").style.display = "none";
document.getElementById("FormularioTutorial").style.display = "none";
document.getElementById("corpo").style.display = "inline";
data.nome = document.getElementById("nome").value;
data.grupo = document.getElementById("grupo").value;
......@@ -104,21 +104,54 @@ function iniciar(){
repouso();
}
function tutorial(){
document.getElementById("FormularioNome").style.display = "none";
document.getElementById("FormularioTutorial").style.display = "inline";
document.getElementById("labelTutorialCongruente").style.color = "#11aa11";
document.getElementById("labelTutorialCongruente").innerHTML = "Verde";
document.getElementById("labelTutorialIncongruente").style.color = "#ff0000";
document.getElementById("labelTutorialIncongruente").innerHTML = "Verde";
document.getElementById("respostaC").innerHTML = "Clique na resposta certa";
document.getElementById("respostaI").innerHTML = "Clique na resposta certa";
}
function tempo(){
t+=0.01;
}
function clicouTutorialC(cor){
if(cor == "verde")
{
document.getElementById("respostaC").innerHTML = "Resposta certa";
}
else
{
document.getElementById("respostaC").innerHTML = "Resposta errada";
}
}
function clicouTutorialI(cor){
if(cor == "vermelho")
{
document.getElementById("respostaI").innerHTML = "Resposta certa";
}
else
{
document.getElementById("respostaI").innerHTML = "Resposta errada";
}
}
function clicou(cor){
if(tempoRestanteRepouso<=-1){
contaPerguntas++; //COMECA DO 1
document.getElementById("conta").innerHTML = "Questão "+(contaPerguntas+1);
var limitePerguntas = NUM_DE_PERGUNTAS;
if(ordemBateria[testeAtual] == "pI" || ordemBateria[testeAtual] == "pC"){
limitePerguntas = NUM_DE_PERGUNTAS_PRE;
}
if (contaPerguntas <= limitePerguntas){ //Se o teste ainda nao acabou
if(ordemBateria[testeAtual] == "I" || ordemBateria[testeAtual] == "C"){
var acertou = 0;
......@@ -283,7 +316,7 @@ function contagem() {
});
countdown.start();
console.log('countdown360 ',countdown);
$("#countdown").css("left",window.innerWidth*0.5 - countdown.settings.radius - countdown.settings.strokeWidth);
if(window.innerHeight < 356) {
......@@ -297,7 +330,7 @@ function contagem() {
// 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) {
......@@ -310,4 +343,3 @@ function contagem() {
$("#countdown").css("left",window.innerWidth*0.5 - countdown.settings.radius - countdown.settings.strokeWidth);
});
}
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