editoramoan/propostas-didaticas-ensino-matematica
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
propostas-didaticas-ensino-.../propostas-didaticas-ensino-matematica/jogosfoz.js
Rafael Tavares Juliani 5fbf08693c INÍCIO
2025-09-04 15:53:18 -03:00

4132 lines
114 KiB
JavaScript
Executable File
Raw Blame History

var visibilidade_jogo_pdf_jm = false;
var jogo_da_memoria_pdf_jm = document.querySelector(".jogo_da_memoria_pdf_jm");
var container_pdf_jm = document.getElementById("container_pdf_jm");
var som_ativado_pdf_jm = true;
var som_pdf_jm = document.querySelector(".som_pdf_jm");
var sucesso_pdf_jm = document.getElementById("sucesso_pdf_jm");
var erro_pdf_jm = document.getElementById("erro_pdf_jm");
var fim_de_jogo_pdf_jm = document.getElementById("fim_de_jogo_pdf_jm");
var tela_final_pdf_jm = document.querySelector(".tela_final_pdf_jm");
var virando_a_carta_pdf_jm = document.getElementById("virando_a_carta_pdf_jm");
var jogo_pdf_jm = "";
var vez_pdf_jm = null;
var proximo_pdf_jm = null;
var tentativa_pdf_jm = 0;
let carta_anterior_pdf_jm;
var jg1_pdf_jm = null;
var jg2_pdf_jm = null;
var cor_de_acerto_pdf_jm = {"1":"#4CAF50","-1":"#03A9F4"};
var cor_padrao_pdf_jm = "antiquewhite";
var pontuacoes_pdf_jm = {"1":0,"-1":0};
var jogador_el_pdf_jm = {
"1": document.querySelector("#jogador1_pdf_jm"),
"-1": document.querySelector("#jogador2_pdf_jm")
}
var pontuacao_el_pdf_jm = {
"1": document.querySelector("#jogador1_pdf_jm .pontuacao_pdf_jm"),
"-1": document.querySelector("#jogador2_pdf_jm .pontuacao_pdf_jm") //"-1" é o segundo jogador, usei para facilitar a troca na seleção dos jogadores
};
var nome_el_pdf_jm = {
"1": document.querySelector("#jogador1_pdf_jm .nome_pdf_jm:first-child"),
"-1": document.querySelector("#jogador2_pdf_jm .nome_pdf_jm:first-child")
}
let questoes_pdf_jm = [
{"enunciado" : "Laura comeu 1/6 de um bolo e João 1/3 desse mesmo bolo. Qual é a fração que representa a maior quantidade de bolo que foi comido?",
"par" : 1
},
{"enunciado": "1/3 > 1/6, João comeu mais bolo.",
"par" : 1
},
{"enunciado": "Represente o número decimal 0,2 em forma de fração. Em seguida, represente essa fração na forma irredutível.",
"par" : 2
},
{"enunciado": "\\(\\frac{2}{10} = \\frac{1}{5}\\)",
"par" : 2
},
{"enunciado": "No aniversário de Maria, foram encomendados 900 salgadinhos, sendo \\(\\frac{2}{5}\\) de coxinha. Quantas coxinhas foram encomendadas para o aniversário?",
"par" : 3
},
{"enunciado": "360",
"par" : 3
},
{"enunciado" : "Para ir à escola, João utiliza sua bicicleta. Quando já havia percorrido \\(\\frac{1}{5}\\) da distância, sua bicicleta estragou. A partir daí ele foi caminhando. Qual a distância restante que ele deverá caminhar até a escola?",
"par" : 4
},
{"enunciado": "João caminhará \\(\\frac{4}{5}\\) do percurso restante até a escola.",
"par" : 4
},
{"enunciado": "Maria e José estão comendo uma pizza de 18 fatias. Sabendo que Maria comeu \\(\\frac{1}{3}\\) e José comeu \\(\\frac{1}{6}\\), quantas fatias eles comeram no total?",
"par" : 5
},
{"enunciado": "9 fatias",
"par" : 5
},
{"enunciado": "Num centro de convivência com 260 alunos, foram ofertadas três atividades extraclasse: música, dança e artes marciais. Sabe-se que \\(\\frac{3}{13}\\) escolheu música e dança, \\(\\frac{2}{5}\\) escolheu somente música, \\(\\frac{1}{4}\\) escolheu artes marciais e o restante escolheu apenas dança. Quantos alunos escolheram apenas dança?",
"par" : 6
},
{"enunciado": "31 alunos escolheram apenas dança.",
"par" : 6
},
{"enunciado" : "Em uma corrida participaram 26 ciclistas. Desses ciclistas, \\(\\frac{4}{13}\\) abandonaram a corrida por problemas na bicicleta. Quantos ciclistas terminaram a corrida?",
"par" : 7
},
{"enunciado": "18 ciclistas",
"par" : 7
},
{"enunciado": "Uma piscina teve \\(\\frac{4}{3}\\) da sua capacidade preenchida. No entanto, ainda faltam 2700 litros para que ela seja enchida por completo. Qual é a capacidade total dessa piscina?",
"par" : 8
},
{"enunciado": "10.800 litros",
"par" : 8
},
{"enunciado": "Nicolau tinha previsto, no orçamento, um gasto de R$ 2100,00 para pintar sua casa. Mas devido a imprevistos na obra, o valor aumentou 30%. Calcule quantos reais ele gastou na pintura?",
"par" : 9
},
{"enunciado": "R$ 2.730,00",
"par" : 9
},
{"enunciado" : "João corre todo fim de tarde. Sabe-se que ontem, a distância percorrida foi dada pela fórmula \\(P(n) = 4^{\\frac{n}{2}}\\) com \\(n = 3\\). Quantos km ele correu ontem?",
"par" : 10
},
{"enunciado": "8 km",
"par" : 10
},
{"enunciado" : "Para efetuar a compra de uma tv no valor de R$ 1420,00, José recebeu um desconto de R$ 426,00 no pagamento à vista. Qual é a fração que representa a porcentagem de desconto?",
"par" : 11
},
{"enunciado": "\\(\\frac{30}{100}\\)",
"par" : 11
},
{"enunciado": "Manoela comeu a quantia equivalente a 0,4444... de fatias de uma torta. Mostre em forma de fração quantas fatias ela comeu.",
"par" : 12
},
{"enunciado": "\\(\\frac{4}{9}\\)",
"par" : 12
},
{"enunciado": "Considere os números a seguir: \\({(\\frac{1}{4})}^{\\frac{-1}{2}}\\) e \\({(4)}^{\\frac{-3}{2}}\\). Indique qual representa o maior valor.",
"par" : 13
},
{"enunciado": "\\({(\\frac{1}{4})}^{\\frac{-1}{2}}\\) = \\({(4)}^{\\frac{1}{2}} = \\sqrt{4} = 2\\)",
"par" : 13
},
{"enunciado" : "Lançando um dado comum (valores de 1 a 6), não viciado, qual as chances de se obter um valor ímpar?",
"par" : 14
},
{"enunciado": "\\(\\frac{3}{6}\\)",
"par" : 14
},
{"enunciado": "Dentre os números \\(\\frac{7}{5}\\), \\(1,25\\) e \\(\\frac{9}{8}\\), qual representa o maior e menor valor, respectivamente?",
"par" : 15
},
{"enunciado": "\\(\\frac{7}{5}\\) e \\(\\frac{9}{8}\\)",
"par" : 15
},
]
let embaralhado_pdf_jm = [];
let interior_cartas_pdf_jm = [];
function abrir_jogo_da_memoria_pdf_jm(){
pegarnumJogadores_pdf_jm();
atualizarCamponomeJogador2_pdf_jm();
if(visibilidade_jogo_pdf_jm){
jogo_da_memoria_pdf_jm.classList.remove("fechar_pdf_jm");
jogo_da_memoria_pdf_jm.innerHTML = "Abrir Jogo da Memória";
container_pdf_jm.style.display = "none";
visibilidade_jogo_pdf_jm = false;
} else {
jogo_da_memoria_pdf_jm.classList.add("fechar_pdf_jm");
jogo_da_memoria_pdf_jm.innerHTML = "Fechar Jogo da Memória";
container_pdf_jm.style.display = "block";
visibilidade_jogo_pdf_jm = true;
}
}
function voltar_tela_inicial_pdf_jm(){
document.querySelector("#info_pdf_jm").style.visibility = "hidden";
document.querySelector("#info_pdf_jm").style.opacity = "0";
document.querySelector("#container_cartas_pdf_jm").style.visibility = "hidden";
document.querySelector("#container_cartas_pdf_jm").style.opacity = "0";
document.querySelector(".tela_inicial_pdf_jm").style.display = "flex";
}
function toggle_som_pdf_jm() {
if(som_ativado_pdf_jm){
som_pdf_jm.classList.toggle("som_desativado_pdf_jm");
som_ativado_pdf_jm = false;
} else {
som_pdf_jm.classList.toggle("som_desativado_pdf_jm");
som_ativado_pdf_jm = true;
}
}
var listeners_pdf_jm = {}
for(i = 0; i < questoes_pdf_jm.length; i++){
listeners_pdf_jm[i] = null;
}
function gerenciar_apos_erro(param_pdf_jm, x_pdf_jm, carta) {
let id_pdf_jm = parseInt(carta.parentNode.id);
listeners_pdf_jm[id_pdf_jm] = (event) => {
desvirar_apos_erro(event, param_pdf_jm, x_pdf_jm, carta, listeners_pdf_jm[id_pdf_jm]);
};
x_pdf_jm.addEventListener("click", listeners_pdf_jm[id_pdf_jm]);
}
function desvirar_apos_erro(event, param_pdf_jm, x_pdf_jm, carta, desvirar_apos_erro_callback) {
event.stopPropagation();
carta_anterior_pdf_jm.classList.toggle('virada_pdf_jm');
carta_anterior_pdf_jm.classList.add('disponivel_pdf_jm');
carta.classList.toggle('virada_pdf_jm');
carta.classList.add('disponivel_pdf_jm');
tentativa_pdf_jm = 1;
x_pdf_jm.style.display = "none";
disponibilizar_pdf_jm();
x_pdf_jm.removeEventListener("click", desvirar_apos_erro_callback);
if(param_pdf_jm == "com_2_jogadores"){
jogador_el_pdf_jm[vez_pdf_jm].classList.remove('pulsar');
jogador_el_pdf_jm[proximo_pdf_jm].classList.add('pulsar');
vez_pdf_jm = proximo_pdf_jm;
proximo_pdf_jm = (parseInt(vez_pdf_jm, 10)*(-1)).toString();
}
}
function fechar_tela_final_pdf_jm() {
tela_final_pdf_jm.style.display = "none";
}
function sanitizeInput(input) {
return input.replace(/[^a-zA-Z0-9\sçáâéêíóôúãõ]/g, '');
}
function disponibilizar_pdf_jm(){
for(i=0; i<embaralhado_pdf_jm.length; i++) {
if (!interior_cartas_pdf_jm[i].classList.contains('finalizado_pdf_jm')) {
interior_cartas_pdf_jm[i].classList.add('disponivel_pdf_jm');
}
}
}
function indisponibilizar_pdf_jm() {
for(i=0; i<embaralhado_pdf_jm.length; i++) {
interior_cartas_pdf_jm[i].classList.remove('disponivel_pdf_jm');
}
}
// Função para pegar o número de jogadores selecionado
function pegarnumJogadores_pdf_jm() {
let numJogadores_pdf_jm = document.querySelector('input[name="numJogadores_pdf_jm"]:checked').value;
return parseInt(numJogadores_pdf_jm);
}
// Função para exibir ou ocultar o campo de nome do jogador 2, dependendo do número de jogadores selecionado
function atualizarCamponomeJogador2_pdf_jm() {
var numJogadores_pdf_jm = pegarnumJogadores_pdf_jm();
var nomeJogador2_pdf_jmContainer_pdf_jm = document.querySelector('#nomeJogador2_pdf_jmContainer_pdf_jm');
if (numJogadores_pdf_jm === 2) {
nomeJogador2_pdf_jmContainer_pdf_jm.style.display = 'block';
} else {
nomeJogador2_pdf_jmContainer_pdf_jm.style.display = 'none';
}
}
// Adiciona um listener para atualizar o campo de nome do jogador 2 sempre que o número de jogadores selecionado mudar
var radioInputs_pdf_jm = document.querySelectorAll('input[name="numJogadores_pdf_jm"]');
for (var i = 0; i < radioInputs_pdf_jm.length; i++) {
radioInputs_pdf_jm[i].addEventListener('change', atualizarCamponomeJogador2_pdf_jm);
}
function chacoalharCarta(carta_pdf_jm){
// Define a quantidade de deslocamento em pixels
let deslocamento_pdf_jm = 5;
// Define o intervalo de tempo entre as mudanças de posição em milissegundos
let intervalo_pdf_jm = 50;
// Define o número de vezes que a div deve ser cacoalhada
let numVezes_pdf_jm = 10;
// Define uma variável para controlar o número de vezes que a div já foi cacoalhada
let contador_pdf_jm = 0;
carta_pdf_jm.style.left = "0";
// Define uma função para mover a div
function moverDiv_pdf_jm() {
// Alterna a posição da div entre sua posição atual e uma posição deslocada
if (contador_pdf_jm % 2 === 0) {
carta_pdf_jm.style.left = (parseInt(carta_pdf_jm.style.left) - deslocamento_pdf_jm) + 'px';
} else {
carta_pdf_jm.style.left = (parseInt(carta_pdf_jm.style.left) + deslocamento_pdf_jm) + 'px';
}
// Incrementa o contador
contador_pdf_jm++;
// Se a div já foi cacoalhada o número de vezes desejado, para o intervalo
if (contador_pdf_jm >= numVezes_pdf_jm) {
clearInterval(intervaloID_pdf_jm);
carta_pdf_jm.style.left = '0px'; // Restaura a posição original da div
}
}
// Inicia o intervalo para cacoalhar a div
let intervaloID_pdf_jm = setInterval(moverDiv_pdf_jm, intervalo_pdf_jm);
}
const finalizar_jogada_pdf_jm = {
"com_1_jogador": function(carta){
if(embaralhado_pdf_jm[carta_anterior_pdf_jm.parentNode.id]["par"] == embaralhado_pdf_jm[carta.parentNode.id]["par"]){
pontuacoes_pdf_jm[vez_pdf_jm] += 1;
pontuacao_el_pdf_jm[vez_pdf_jm].innerHTML = " = "+pontuacoes_pdf_jm[vez_pdf_jm];
console.log("Acertou!");
setTimeout(() => {
som_ativado_pdf_jm? sucesso_pdf_jm.play():null;
}, 500);
setTimeout(() => {
if(pontuacoes_pdf_jm["1"] < (questoes_pdf_jm.length/2)){
carta_anterior_pdf_jm.classList.add("finalizado_pdf_jm");
carta.classList.add("finalizado_pdf_jm");
carta_anterior_pdf_jm.querySelector('.verso_pdf_jm').style.backgroundColor = cor_de_acerto_pdf_jm[vez_pdf_jm];
carta.querySelector('.verso_pdf_jm').style.backgroundColor = cor_de_acerto_pdf_jm[vez_pdf_jm];
tentativa_pdf_jm = 1;
disponibilizar_pdf_jm();
} else {
carta_anterior_pdf_jm.classList.add("finalizado_pdf_jm");
carta.classList.add("finalizado_pdf_jm");
carta_anterior_pdf_jm.querySelector('.verso_pdf_jm').style.backgroundColor = cor_de_acerto_pdf_jm[vez_pdf_jm];
carta.querySelector('.verso_pdf_jm').style.backgroundColor = cor_de_acerto_pdf_jm[vez_pdf_jm];
setTimeout(() => {
som_ativado_pdf_jm? fim_de_jogo_pdf_jm.play():null;
let txt_pdf_jm = `Você conseguiu, <strong> ${jg1_pdf_jm}!</strong> Parabéns!`;
tela_final_pdf_jm.children[0].innerHTML = txt_pdf_jm;
tela_final_pdf_jm.style.display = "flex";
}, 1200);
}
}, 800);
} else {
console.log("Errou!");
setTimeout(() => {
som_ativado_pdf_jm? erro_pdf_jm.play():null;
chacoalharCarta(carta_anterior_pdf_jm);
chacoalharCarta(carta);
let x_pdf_jm = carta.querySelector(".fechar_pdf_jm");
x_pdf_jm.style.display = "block";
gerenciar_apos_erro("com_1_jogador", x_pdf_jm, carta);
}, 500);
}
},
"com_2_jogadores": function(carta){
if(embaralhado_pdf_jm[carta_anterior_pdf_jm.parentNode.id]["par"] == embaralhado_pdf_jm[carta.parentNode.id]["par"]){
pontuacoes_pdf_jm[vez_pdf_jm] += 1;
pontuacao_el_pdf_jm[vez_pdf_jm].innerHTML = " = "+pontuacoes_pdf_jm[vez_pdf_jm];
console.log("Acertou!");
setTimeout(() => {
som_ativado_pdf_jm? sucesso_pdf_jm.play():null;
}, 500);
setTimeout(() => {
if(pontuacoes_pdf_jm["1"]+pontuacoes_pdf_jm["-1"] < (questoes_pdf_jm.length/2)){
carta_anterior_pdf_jm.classList.add("finalizado_pdf_jm");
carta.classList.add("finalizado_pdf_jm");
carta_anterior_pdf_jm.querySelector('.verso_pdf_jm').style.backgroundColor = cor_de_acerto_pdf_jm[vez_pdf_jm];
carta.querySelector('.verso_pdf_jm').style.backgroundColor = cor_de_acerto_pdf_jm[vez_pdf_jm];
tentativa_pdf_jm = 1;
disponibilizar_pdf_jm();
} else {
carta_anterior_pdf_jm.classList.add("finalizado_pdf_jm");
carta.classList.add("finalizado_pdf_jm");
carta_anterior_pdf_jm.querySelector('.verso_pdf_jm').style.backgroundColor = cor_de_acerto_pdf_jm[vez_pdf_jm];
carta.querySelector('.verso_pdf_jm').style.backgroundColor = cor_de_acerto_pdf_jm[vez_pdf_jm];
jogador_el_pdf_jm[vez_pdf_jm].classList.remove('pulsar');
setTimeout(() => {
som_ativado_pdf_jm? fim_de_jogo_pdf_jm.play():null;
if(pontuacoes_pdf_jm["1"] > pontuacoes_pdf_jm["-1"]){
let txt_pdf_jm = `<strong>${jg1_pdf_jm} ganhou!</strong> <br /><br />
${jg1_pdf_jm} = ${pontuacoes_pdf_jm["1"]} <strong>ponto(s)</strong> <br />
${jg2_pdf_jm} = ${pontuacoes_pdf_jm["-1"]} <strong>ponto(s)</strong>`;
tela_final_pdf_jm.children[0].innerHTML = txt_pdf_jm;
tela_final_pdf_jm.style.display = "flex";
} else if(pontuacoes_pdf_jm["1"] == pontuacoes_pdf_jm["-1"]){
let txt_pdf_jm = `<strong>O jogo empatou!</strong> <br /><br />
${jg1_pdf_jm} = ${pontuacoes_pdf_jm["1"]} <strong>ponto(s)</strong> <br />
${jg2_pdf_jm} = ${pontuacoes_pdf_jm["-1"]} <strong>ponto(s)</strong>`;
tela_final_pdf_jm.children[0].innerHTML = txt_pdf_jm;
tela_final_pdf_jm.style.display = "flex";
} else {
let txt_pdf_jm = `<strong>${jg2_pdf_jm} ganhou!</strong> <br /><br />
${jg1_pdf_jm} = ${pontuacoes_pdf_jm["1"]} <strong>ponto(s)</strong> <br />
${jg2_pdf_jm} = ${pontuacoes_pdf_jm["-1"]} <strong>ponto(s)</strong>`;
tela_final_pdf_jm.children[0].innerHTML = txt_pdf_jm;
tela_final_pdf_jm.style.display = "flex";
}
}, 1200);
}
}, 800);
} else {
console.log("Errou!");
setTimeout(() => {
som_ativado_pdf_jm? erro_pdf_jm.play():null;
chacoalharCarta(carta_anterior_pdf_jm);
chacoalharCarta(carta);
let x_pdf_jm = carta.querySelector(".fechar_pdf_jm");
x_pdf_jm.style.display = "block";
gerenciar_apos_erro("com_2_jogadores", x_pdf_jm, carta);
}, 500);
}
}
}
function virarCarta(carta) {
if(carta.classList.contains('disponivel_pdf_jm')){
carta.classList.toggle('virada_pdf_jm');
som_ativado_pdf_jm? virando_a_carta_pdf_jm.play():null;
processar_jogada(carta);
}
}
function embaralhar_pdf_jm(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
function processar_jogada(carta){
carta.classList.remove('disponivel_pdf_jm');
if(tentativa_pdf_jm == 1){
carta_anterior_pdf_jm = carta;
tentativa_pdf_jm = 2;
} else if (tentativa_pdf_jm == 2){
indisponibilizar_pdf_jm();
finalizar_jogada_pdf_jm[jogo_pdf_jm](carta);
} else {
alert("O Jogo Já Acabou!");
}
}
function iniciar_pdf_jm(){
jogo_pdf_jm = "";
vez_pdf_jm = null;
proximo_pdf_jm = null;
tentativa_pdf_jm = 0;
jg1_pdf_jm = null;
jg2_pdf_jm = null;
pontuacoes_pdf_jm = {"1":0,"-1":0};
nome_el_pdf_jm["1"].innerHTML = "";
nome_el_pdf_jm["-1"].innerHTML = "";
pontuacao_el_pdf_jm["1"].innerHTML = "";
pontuacao_el_pdf_jm["-1"].innerHTML = "";
tela_final_pdf_jm.style.display = "none";
atualizarCamponomeJogador2_pdf_jm()
embaralhado_pdf_jm = embaralhar_pdf_jm(questoes_pdf_jm);
let numJogadores_pdf_jm = pegarnumJogadores_pdf_jm();
for(i=0; i<embaralhado_pdf_jm.length; i++){
let div = document.getElementById(i);
let interior = div.querySelector('.carta_interior_pdf_jm');
interior_cartas_pdf_jm.push(interior);
let enunciado = interior.querySelector('.verso_pdf_jm span');
enunciado.innerHTML = embaralhado_pdf_jm[i].enunciado;
interior.classList.add('disponivel_pdf_jm');
interior.classList.remove("finalizado_pdf_jm");
interior.classList.remove("virada_pdf_jm");
interior.querySelector('.verso_pdf_jm').style.backgroundColor = cor_padrao_pdf_jm;
//apagar x de erro e remover os event listeners
let xi_pdf_jm = interior.querySelector(".fechar_pdf_jm");
xi_pdf_jm.style.display == "block"? xi_pdf_jm.style.display = "none":null;
xi_pdf_jm.removeEventListener('click', listeners_pdf_jm[i]);
}
MathJax.typesetClear();
MathJax.typeset();
document.querySelector("#info_pdf_jm").style.visibility = "visible";
document.querySelector("#info_pdf_jm").style.opacity = "1";
document.querySelector("#container_cartas_pdf_jm").style.visibility = "visible";
document.querySelector("#container_cartas_pdf_jm").style.opacity = "1";
document.querySelector(".tela_inicial_pdf_jm").style.display = "none";
jg1_pdf_jm = document.querySelector('#nomeJogador1_pdf_jm').value.trim() || null;
jg2_pdf_jm = document.querySelector('#nomeJogador2_pdf_jm').value.trim() || null;
if(numJogadores_pdf_jm == 1){
jogo_pdf_jm = "com_1_jogador";
if(jg1_pdf_jm){
jg1_pdf_jm = sanitizeInput(jg1_pdf_jm);
nome_el_pdf_jm["1"].innerHTML = jg1_pdf_jm;
pontuacao_el_pdf_jm["1"].innerHTML = " = "+pontuacoes_pdf_jm["1"];
} else {
nome_el_pdf_jm["1"].innerHTML = "Pontuação";
pontuacao_el_pdf_jm["1"].innerHTML = " = "+pontuacoes_pdf_jm["1"];
jg1_pdf_jm = "Jogador";
}
} else {
jogo_pdf_jm = "com_2_jogadores";
if (jg1_pdf_jm && jg2_pdf_jm) {
jg1_pdf_jm = sanitizeInput(jg1_pdf_jm);
nome_el_pdf_jm["1"].innerHTML = jg1_pdf_jm;
jg2_pdf_jm = sanitizeInput(jg2_pdf_jm);
nome_el_pdf_jm["-1"].innerHTML = jg2_pdf_jm;
pontuacao_el_pdf_jm["1"].innerHTML = " = "+pontuacoes_pdf_jm["1"];
pontuacao_el_pdf_jm["-1"].innerHTML = " = "+pontuacoes_pdf_jm["-1"];
} else if(jg1_pdf_jm) {
jg1_pdf_jm = sanitizeInput(jg1_pdf_jm);
nome_el_pdf_jm["1"].innerHTML = jg1_pdf_jm;
pontuacao_el_pdf_jm["1"].innerHTML = " = "+pontuacoes_pdf_jm["1"];
nome_el_pdf_jm["-1"].innerHTML = "Jogador 2";
jg2_pdf_jm = "Jogador 2";
pontuacao_el_pdf_jm["-1"].innerHTML = " = "+pontuacoes_pdf_jm["-1"];
}else if(jg2_pdf_jm) {
jg2_pdf_jm = sanitizeInput(jg2_pdf_jm);
nome_el_pdf_jm["-1"].innerHTML = jg2_pdf_jm;
pontuacao_el_pdf_jm["-1"].innerHTML = " = "+pontuacoes_pdf_jm["-1"];
nome_el_pdf_jm["1"].innerHTML = "Jogador 1";
jg1_pdf_jm = "Jogador 1";
pontuacao_el_pdf_jm["1"].innerHTML = " = "+pontuacoes_pdf_jm["1"];
} else {
nome_el_pdf_jm["1"].innerHTML = "Jogador 1";
jg1_pdf_jm = "Jogador 1";
pontuacao_el_pdf_jm["1"].innerHTML = " = "+pontuacoes_pdf_jm["1"];
nome_el_pdf_jm["-1"].innerHTML = "Jogador 2";
jg2_pdf_jm = "Jogador 2";
pontuacao_el_pdf_jm["-1"].innerHTML = " = "+pontuacoes_pdf_jm["-1"];
}
}
vez_pdf_jm = "1";
proximo_pdf_jm = (parseInt(vez_pdf_jm, 10)*(-1)).toString();
tentativa_pdf_jm = 1;
jogo_pdf_jm == "com_2_jogadores"? jogador_el_pdf_jm["1"].classList.add('pulsar'):jogador_el_pdf_jm["1"].classList.remove('pulsar');
}
// +++++++++++++++++++++++++++++++++++++++++++++++++++ Jogo Percurso das Frações ++++++++++++++++++++++++++++++++++++++++++++++++++++
const duracao_movimento = 1000; // Duração da animação em milissegundos
let jogadores_pf = [];
let jogadores_ordenados_temp = [];
let chegada_pf = [];
class JogadorPF {
static id = 0;
constructor(nome, casa) {
this.id = JogadorPF.id++;
this.nome = nome;
this.casa = casa;
}
avancar_casas(numeroCasas) {
this.casa += numeroCasas;
console.log(`${this.nome} avançou ${numeroCasas} casas.`);
return this.casa;
}
}
const pecas = document.querySelectorAll(".peca_pf");
const casas_pf = document.querySelectorAll(".casa_pf");
const vez_el_pf = document.querySelector(".vez_el_pf");
const inicia_jogada_pf = document.querySelector(".inici_jogada_pf_pf");
let vez_pf;
let total_casas_pf = casas_pf.length;
const dado_pf = document.querySelector('.dado_pf');
const dado_pfFaces = document.querySelectorAll('.dado_pf-face');
let dado_resultado_pf = 0;
const info_pf = document.getElementById("info_pf");
let face_atual_pf;
let num_sorteado_anterior_pf;
let iteracaoAtual_pf = 0;
let som_ativado_pf = true;
let som_pf = document.querySelector(".som_pf");
const som_erro_pf = document.getElementById("erro_pf");
const som_movimento_pf = document.getElementById("movimento_pf");
const som_chegada_pf = document.getElementById("som_chegada_pf");
const som_acerto_pf = document.getElementById("mini_acerto_pf");
const som_dado_pf = document.getElementById("dado_curto_pf");
const som_voltar_pf = document.getElementById("retrocedendo_pf");
const som_finale_pf = document.getElementById("finale_pf");
let perguntas_pf = [
{
"enunciado":"Isabel fez a festa de aniversário de seu filho. Do total dos doces comprados, \\(\\frac{5}{20}\\) era de brigadeiro com granulado e \\(\\frac{6}{20}\\) de brigadeiro com leite ninho. Qual a fração da quantidade de brigadeiros que Isabel comprou para a festa?",
"fracao": true,
"multiplas_respostas": false,
"n": "11",
"d": "20"
},
{
"enunciado":"Em uma eleição, há 2 candidatos concorrendo para ocuparem a vaga de vereador. O Candidato A está com \\(\\frac{8}{12}\\) da intenção dos votos. O candidato B está com \\(\\frac{2}{6}\\) da intenção dos votos. Qual dos dois candidatos possui mais chances de ser eleito? Por quê? Responda com a maior fração.",
"fracao": true,
"multiplas_respostas": true,
"n": ["8","2"],
"d": ["12","3"]
},
{
"enunciado":"Pedro construiu uma piscina que tem a forma de um paralelepípedo retangular com as seguintes dimensões: 9,80 m de comprimento, 4,25 m de largura e 1,40 m de profundidade. A capacidade dessa piscina em litros é? Use somente números e vírgula. Letras serão ignoradas.",
"fracao": false,
"r": "58310"
},
{
"enunciado":"Qual é o volume, em mililitros (ml), de uma caixa de bis que tem a forma de um paralelepípedo retangular com largura de 3 cm, comprimento de 6 cm e altura de 19 cm? Use somente números e vírgula. Letras serão ignoradas.",
"fracao": false,
"r": "342"
},
{
"enunciado":"Estefani e Gisele trabalham de frentista em um posto de Combustível. Para chegar até o trabalho, Estefani percorre \\(\\frac{2}{9}\\) de quilômetro e Gisele \\(\\frac{2}{3}\\) de quilômetro. Que fração representa a quantidade de quilômetros que Estefani e Gisele percorrem juntas?",
"fracao": true,
"multiplas_respostas": false,
"n": "8",
"d": "9"
},
{
"enunciado":"Carla e Pietra trabalham em uma confeitaria. Em um determinado dia, Carla produziu \\(\\frac{8}{15}\\) da produção total de salgadinhos da confeitaria e Pietra \\(\\frac{3}{15}\\). Qual a fração que representa a quantidade de salgadinhos que Carla produziu a mais que Pietra?",
"fracao": true,
"multiplas_respostas": true,
"n": ["5", "1"],
"d": ["15", "3"]
},
{
"enunciado":"Gustavo tem uma tira retangular que está dividida em 11 partes iguais. Nessa tira, ele pintou 5 partes iguais de verde, só que ele eliminou 3 partes dessa parte verde. Com isso, a parte verde que restou representa que fração da tira inicial?",
"fracao": true,
"multiplas_respostas": false,
"n": "2",
"d": "11"
},
{
"enunciado":"A família de Francisco o saiu de Cascavel em direção a Curitiba. No primeiro dia, percorreu \\(\\frac{1}{2}\\) da distância que separa as duas cidades e no segundo dia foi percorrido \\(\\frac{4}{16}\\) do percurso total. Qual dia eles percorreram o maior trajeto do percurso? Responda com a maior fração.",
"fracao": true,
"multiplas_respostas": false,
"n": "1",
"d": "2"
},
{
"enunciado":"Em duas turmas com a mesma quantia de alunos do 9º ano, a professora de matemática quis comparar o desenvolvimento de seus alunos ao resolverem a mesma prova. O 9º D teve \\(\\frac{1}{3}\\) de suas provas gabaritadas, enquanto o 9º F teve \\(\\frac{6}{9}\\) de suas provas gabaritadas. Qual turma teve o maior número de provas gabaritadas? Responda com a maior fração.",
"fracao": true,
"multiplas_respostas": true,
"n": ["6","2"],
"d": ["9","3"]
},
{
"enunciado":"Rodolfo está vendendo duas casas de mesmo valor e recebeu duas propostas. Vanessa se interessou pela casa 1 e ofereceu \\(\\frac{2}{5}\\) do valor para pagamento à vista. Augusto, que se interessou pela casa 2, fez uma proposta de \\(\\frac{1}{3}\\) em cima do valor para pagamento à vista. Qual proposta é mais lucrativa para Rodolfo? Responda com a maior fração.",
"fracao": true,
"multiplas_respostas": false,
"n": "2",
"d": "5"
},
{
"enunciado":"Dois grupos de ciclistas saíram de Foz do Iguaçu com destino a Medianeira. Sabe-se que o primeiro grupo já percorreu \\(\\frac{1}{3}\\) do percurso e o segundo grupo percorreu \\(\\frac{1}{4}\\) do percurso. Qual grupo percorreu a maior parte do percurso? Responda com a maior fração.",
"fracao": true,
"multiplas_respostas": false,
"n": "2",
"d": "5"
},
{
"enunciado":"Ellen trabalha em uma empresa que possui uma regra para as reuniões: é preciso ter pelo menos \\(\\frac{2}{5}\\) dos funcionários da empresa presentes para que possam ser votadas algumas mudanças. Se no dia da reunião compareceram \\(\\frac{4}{7}\\) do total funcionários, uma votação poderá ter ocorrido? Se não poderá haver uma reunião, responda 0, caso contrário, responda 1.",
"fracao": false,
"r": "1"
},
{
"enunciado":"Renato é professor de Educação Física de uma escola, onde o esporte preferido de seus alunos do 8º ano é o futebol. Então, o professor fez a seguinte proposta: ele os deixaria jogar futebol na segunda parte da aula se pelo menos \\(\\frac{2}{3}\\) da turma estiver a favor. Sabendo que o 8º ano possui 30 alunos e 15 queriam jogar futebol, qual a fração que representa os alunos que concordaram em jogar futebol? Eles irão jogar futebol nesta aula? Se eles não vão poder jogar futebol, responda 0, caso contrário, responda 1.",
"fracao": false,
"r": "0"
},
{
"enunciado":"Gilberto leva \\(\\frac{12}{15}\\) de 1 hora para ir da sua casa até a universidade de ônibus e seu colega de sala, Lucas, leva \\(\\frac{6}{12}\\) de 1 hora indo de carro. Quem leva menos tempo para chegar à universidade? Responda com a maior fração.",
"fracao": true,
"multiplas_respostas": true,
"n": ["1","6"],
"d": ["2","12"]
},
{
"enunciado":"Sara comprou 5 pacotes de chicletes de morango e 7 de chicletes de uva. Qual é a razão do número de pacotes de chicletes de uva para o de morango?",
"fracao": true,
"multiplas_respostas": false,
"n": "7",
"d": "5"
},
{
"enunciado":"Beatriz foi ao mercado, comprou 6 refrigerantes e 4 sucos. Qual a razão de refrigerantes e sucos equivale que Beatriz comprou?",
"fracao": true,
"multiplas_respostas": true,
"n": ["6","3"],
"d": ["4","2"]
},
{
"enunciado":"Pedro levou 100 salgadinhos para festa de sua sala e a professora dividiu em quantidades iguais para seus 20 alunos. Qual a razão estabelecida entre salgadinhos e alunos?",
"fracao": true,
"multiplas_respostas": true,
"n": ["100","5"],
"d": ["20","1"]
},
{
"enunciado":"Roberta vende na feira a dúzia de Kiwi. Um de seus clientes pede apenas 2/6 de uma dúzia. Quantos kiwis Roberta terá que separar?",
"fracao": false,
"r": "4"
},
{
"enunciado":"Um lavador de carro gasta \\(\\frac{4}{3}\\) de um litro de água para lavar cada carro. Quantos carros ele consegue lavar com 40 litros?",
"fracao": false,
"r": "30"
},
{
"enunciado":"Qual é a fração geratriz da dízima periódica 0,4555...?",
"fracao": true,
"multiplas_respostas": false,
"n": "41",
"d": "90"
}
];
let respondidas_certas_pf = [];
let respondidas_erradas_pf = [];
function sanitizeInput_pf(input) {
return input.replace(/[^a-zA-Z0-9\sçáâéêíóôúãõ]/g, '');
}
function deixarSoNumerosVirgula_pf(input) {
return input.replace(/[^0-9,]/g, '');
}
function abrir_pf(){
vez_pf = 0;
const container_jogo_pf = document.querySelector(".container_jogo_pf");
const btn_pf = document.querySelector(".btn_pf");
const tela_inicial_pf = document.getElementById("tela_inicial_pf");
const tabuleiro_pf = document.querySelector(".tabuleiro_pf");
const cores_pf = ["#c57fb5", "#ff3b91", "#04bdec", "#fcde02", "#5ab946", "#f78d35"];
const total_cores_pf = cores_pf.length;
for(i=0; i < casas_pf.length; i++){
if(i == 0 || i == 34){continue};
let r = i % total_cores_pf;
casas_pf[i].style.backgroundColor = cores_pf[r];
const classes = casas_pf[i].classList;
for(let h = 0; h < classes.length; h++){
const classe = classes[h];
if(classe.startsWith("cs_")){
casas_pf[i].classList.remove(classe);
}
}
const id = casas_pf[i].id;
const num_array = id.split("_");
const numero_da_casa = num_array[1];
casas_pf[i].querySelector("span").innerHTML = numero_da_casa;
}
if(btn_pf.classList.contains("jogo_ativo_pf")){ // ---------------- Encerrando o jogo percurso das fracoes ----------
vez_pf = 0;
chegada_pf.length = 0;
jogadores_pf.length = 0;
const casa_inicial = document.getElementById("c_0_pf");
for(i=0; i < pecas.length; i++){
casa_inicial.appendChild(pecas[i]);
}
vez_el_pf.innerHTML = " ";
for (i=0; i < pecas.length; i++){
pecas[i].classList.remove("pulsar_pf");
}
iteracaoAtual_pf = 0;
dado_resultado_pf = 0;
container_jogo_pf.style.opacity = "0";
container_jogo_pf.style.height = "0";
info_pf.style.display = "none";
tabuleiro_pf.style.opacity = "0";
for(i=0; i<pecas.length; i++){
pecas[i].style.display = "none";
}
setTimeout(() => {
container_jogo_pf.style.display = "none";
}, 600);
btn_pf.innerHTML = "Abrir Jogo Percurso das Frações";
btn_pf.classList.remove("jogo_ativo_pf");
const msg = document.querySelector(".msg_sorteio_ordem");
const d8 = document.querySelector(".dado_8_pf-container");
const titulo_jan = document.querySelector(".titulo_ordem_pf");
const resultados = document.querySelector(".sorteados_sorteio_ordem");
msg.style.display = "block";
d8.style.display = "block";
titulo_jan.style.display = "block";
resultados.style.display = "block";
removerInstanciasJogadorPF();
} else {// --------------------------------- Abrindo o jogo percurso das fracoes ----------------------------------
atualizarJogadores_pf();
jogadores_ordenados_temp = [];
numeros_a_sortear_8_pf = [1,2,3,4,5,6,7,8];
container_jogo_pf.style.display = "block";
tela_inicial_pf.style.display = "flex";
setTimeout(() => {
container_jogo_pf.style.opacity = "1";
tela_inicial_pf.style.opacity = "1";
container_jogo_pf.style.height = "auto";
}, 200);
btn_pf.innerHTML = "Encerrar Jogo Percurso das Frações";
btn_pf.classList.add("jogo_ativo_pf");
atualizar_nome_jogadores_pf();
}//fecha o if das configuracoes de inicio do jogo
}// fecha a funcao iniciar_pf()
// Função para atualizar a interface de acordo com o número de jogadores selecionado
function atualizarJogadores_pf() {
const numJogadoresSelect = document.getElementById("numJogadores_pf");
const numJogadores = parseInt(numJogadoresSelect.value);
for (let i = 3; i <= 8; i++) {//8 é o número total de jogadores e comeca do 3 porque os jogadores 1 e 2 sempre existirao
let jg = "jogador_"+i+"_pf";
if(i <= numJogadores){
document.getElementById(jg).style.display = "flex";
} else {
document.getElementById(jg).style.display = "none";
}
}
}
function atualizar_nome_jogadores_pf(){
let jogador_div_pf = document.querySelectorAll(".jogador_div_pf");
for (i=0; i<8; i++){// 8 é o total de jogadores
let j_d_pf = jogador_div_pf[i];
let div_nome_pf = j_d_pf.querySelector("div:nth-child(2)");
let jogador_input_pf = j_d_pf.querySelector("input");
jogador_input_pf.value !== ""? div_nome_pf.textContent = sanitizeInput_pf(jogador_input_pf.value): null;
jogador_input_pf.addEventListener("input", function(){
div_nome_pf.textContent = sanitizeInput_pf(jogador_input_pf.value);
jogador_input_pf.value == ""? div_nome_pf.textContent = jogador_input_pf.placeholder: null;
});
}
}
function inverter_ordem_pf(o){//a ordem nas linhas nem sempre casa com a ordem das casas do tabuleiro, pois contamos as div da esquerda para direita e no tabuleiro pode estar sendo contado da direita para esquerda
switch(true){
case o >= 5 && o <= 8:
o = 13 - o;
break;
case o >= 16 && o <= 18:
o = 34 - o;
break;
case o >= 19 && o <= 21:
o = 40 - o;
break;
case o >= 29 && o <= 32:
o = 61 - o;
break;
default:
console.log("A linha não precisa de reorganização.");
break;
}
//se nao for nenhuma dessas linhas nada é invertido
return o;
}
function iniciarJogo_pf(){
const casa_surpresa = ["-1","+1", "-2","+2", "+3"];
// Sortear um número aleatório entre 3 e 30
let numeros_a_sortear = [];
for(i=3; i<=30; i++){//preparando os números de 3 a 30 para serem sorteados
numeros_a_sortear.push(i);
}
function sortearNumero() {
const len = numeros_a_sortear.length;
const indice_sorteado = Math.floor(Math.random() * (len-1));
const numeroSorteado = numeros_a_sortear[indice_sorteado];
numeros_a_sortear = numeros_a_sortear.filter(function(el){
return el !== numeroSorteado;
})
if(4 < numeroSorteado < 29){//eliminando o os dois números anteriores e os dois posteriores
numeros_a_sortear = numeros_a_sortear.filter(function(el){
return el !== numeroSorteado - 2 && el !== numeroSorteado - 1 && el !== numeroSorteado + 1 && el !== numeroSorteado + 2;
})
}
console.log(numeroSorteado);
return numeroSorteado;
}
const tam = casa_surpresa.length; //manter fixo para a iteracao
for (i=0; i<tam; i++){
let n = inverter_ordem_pf(sortearNumero());
if(n){
const indice_surpresa = Math.floor(Math.random() * (casa_surpresa.length-1))
casas_pf[n].querySelector("span").innerHTML = casa_surpresa[indice_surpresa];
casas_pf[n].style.backgroundColor = "#444";
let classe_pf = "cs_"+casa_surpresa[indice_surpresa];
casas_pf[n].classList.add(classe_pf);
casa_surpresa.splice(indice_surpresa,1);
console.log("n: "+n+"Indice surpresa: "+indice_surpresa+" --- numero dentro da casa surpresa: "+casa_surpresa[indice_surpresa]+" --- classe: "+classe_pf+" --- vetor casa surpresa: "+casa_surpresa);
}
}//fecha for para montar as casas surpresas
const tela_inicial_pf = document.getElementById("tela_inicial_pf");
const tabuleiro_pf = document.querySelector(".tabuleiro_pf");
tela_inicial_pf.style.opacity = "0";
tabuleiro_pf.style.display = "grid";
setTimeout(() => {
tela_inicial_pf.style.display = "none";
tabuleiro_pf.style.opacity = "1";
}, 200);
const numJogadoresSelect = document.getElementById("numJogadores_pf");
const numJogadores = parseInt(numJogadoresSelect.value);
const jogador_div_pf = document.querySelectorAll(".jogador_div_pf");
for (i=0; i<numJogadores; i++){
let j_d_pf = jogador_div_pf[i];
let nome = j_d_pf.querySelector("div:nth-child(2)").textContent;
let jogador = new JogadorPF(nome,0);
jogadores_pf.push(jogador);
console.log("Nome: "+jogadores_pf[i].nome);
pecas[i].style.display = "block";
}
info_pf.style.display = "flex";
definir_ordem_pf();
}//Fecha a funcao iniciarJogo_pf
function toggle_som_pf() {
if(som_ativado_pf){
som_pf.classList.toggle("som_desativado_pf");
som_ativado_pf = false;
} else {
som_pf.classList.toggle("som_desativado_pf");
som_ativado_pf = true;
}
}
function mostrar_janela_definicao_ordem_pf() {
const jan = document.getElementById("janela_definicao_ordem_pf");
jan.style.display = "flex";
setTimeout(() => {
jan.style.opacity = "1";
}, 300);
}
function apagar_janela_definicao_ordem_pf(){
const jan = document.getElementById("janela_definicao_ordem_pf");
jan.style.opacity = "0";
setTimeout(() => {
jan.style.display = "none";
document.querySelector(".container_ordem_definida_pf").remove();
}, 500);
}
function mostrar_janela_de_jogadas_pf() {
const jan = document.getElementById("janela_de_jogadas_pf");
const msg_jan = document.getElementById("msg_janela_de_jogadas_pf");
msg_jan.textContent = jogadores_pf[vez_pf].nome+", role o dado e responda a pergunta que aparecerá abaixo do dado.";
jan.style.display = "flex";
setTimeout(() => {
jan.style.opacity = "1";
}, 300);
}
function apagar_janela_de_jogadas_pf() {
const jan = document.getElementById("janela_de_jogadas_pf");
jan.style.opacity = "0";
setTimeout(() => {
jan.style.display = "none";
}, 500);
}
function definir_ordem_pf(d8_r){
let msg_ini = "Aguarde...";
iteracaoAtual_pf < jogadores_pf.length? msg_ini = jogadores_pf[iteracaoAtual_pf].nome+", role o dado!":null;
let msg = document.querySelector(".msg_sorteio_ordem");
let sorteados = document.querySelector(".sorteados_sorteio_ordem");
msg.style.opacity = "0";
setTimeout(() => {
msg.textContent = msg_ini;
msg.style.opacity = "1";
if(iteracaoAtual_pf >= jogadores_pf.length){
console.log("Ordem definida");
let temp = Object.keys(jogadores_ordenados_temp)
.filter(index => jogadores_ordenados_temp[index] !== undefined)
.map(index => jogadores_ordenados_temp[index]);
jogadores_pf = temp.reverse();
const jan = document.getElementById("janela_definicao_ordem_pf");
// Criação dos elementos
let container_ordem_definida = document.createElement("div");
container_ordem_definida.classList.add("container_ordem_definida_pf");
container_ordem_definida.style.display = "flex";
container_ordem_definida.style.flexDirection = "column";
container_ordem_definida.style.textAlign = "center";
let titulo = "<h3>Ordem Definida</h3>";
let nomesJogadores = [];
for (i = 0; i < jogadores_pf.length; i++) {
nomesJogadores.push(jogadores_pf[i].nome);
}
let textoJogadores = "";
if (nomesJogadores.length === 1) {
textoJogadores = nomesJogadores[0];
} else if (nomesJogadores.length === 2) {
textoJogadores = nomesJogadores.join(" e ");
} else {
textoJogadores = nomesJogadores.slice(0, -1).join(", ") + " e " + nomesJogadores.slice(-1);
}
let botaoOk = document.createElement("button");
botaoOk.style.cssText = "border-radius: 7px; margin: 15px; padding: 5px; background-color:#ff6c61; color: #fff; font-weight: bold; cursor: pointer;";
botaoOk.onclick = function() {apagar_janela_definicao_ordem_pf()};
botaoOk.textContent = "Ok";
let divConteudo = document.createElement("div");
divConteudo.innerHTML = titulo + "<div>" + textoJogadores + "</div>";
container_ordem_definida.appendChild(divConteudo);
container_ordem_definida.appendChild(botaoOk);
//display none nos elementos para definir a ordem
const d8 = document.querySelector(".dado_8_pf-container");
const titulo_jan = document.querySelector(".titulo_ordem_pf");
const resultados = document.querySelector(".sorteados_sorteio_ordem");
msg.style.display = "none";
d8.style.display = "none";
d8_r? d8.querySelector(".dado_8_pf").classList.remove("mostrar_face_"+d8_r+"_d8"):null;
titulo_jan.style.display = "none";
resultados.innerHTML = " ";
resultados.style.display = "none";
// Adiciona os elementos à janela de definicao de ordem
jan.appendChild(container_ordem_definida);
ativar_vez();
return;
} else {
dado_8_pf.addEventListener('click', callback);
}
}, 500);
mostrar_janela_definicao_ordem_pf();
function callback() {
const resultado = sortearDado_8_pf();
// Remover o eventListener após a primeira chamada
dado_8_pf.removeEventListener('click', callback);
jogadores_ordenados_temp[resultado] = jogadores_pf[iteracaoAtual_pf];
setTimeout(() => {
resultado > 4? msg.textContent = "Boa jogada!": msg.textContent = "Poderia ter sido melhor!";
sorteados.innerHTML+= " ("+jogadores_pf[iteracaoAtual_pf].nome+" = "+resultado+")";
iteracaoAtual_pf++;
}, 1000);
if(iteracaoAtual_pf < jogadores_pf.length){
setTimeout(() => {
definir_ordem_pf(resultado);
}, 3000);
}
}
}
function ativar_vez(){
setTimeout(() => {
vez_el_pf.textContent = jogadores_pf[vez_pf].nome+", clique na sua peça.";
const peca = pecas[jogadores_pf[vez_pf].id];
const localizacao = peca.parentNode.offsetTop;
const posicao_scroll = parseInt(localizacao) - (parseInt(window.innerHeight / 2));
window.scrollTo({
top: posicao_scroll,
behavior: "smooth"
});
peca.classList.add("pulsar_pf");
peca.style.cursor = "pointer";
peca.addEventListener("click", gerenciar_jogada_pf);
}, 1500);
}
function gerenciar_jogada_pf() {
mostrar_janela_de_jogadas_pf();
vez_el_pf.textContent = jogadores_pf[vez_pf].nome+" ainda está concluindo sua jogada...";
dado_pf.addEventListener('click', callback_sorteioDado_pf);
}
function callback_sorteioDado_pf(){
dado_resultado_pf = sortearDado_pf();
dado_pf.removeEventListener('click', callback_sorteioDado_pf);
sortear_pergunta_pf();
}
function sortear_pergunta_pf(){
const jan = document.getElementById("janela_de_jogadas_pf");
let pergunta;
if(perguntas_pf.length > 0){
const num = Math.floor(Math.random() * perguntas_pf.length);
pergunta = perguntas_pf[num];
} else if(perguntas_pf.length == 0 && respondidas_erradas_pf.length > 0){
const num = Math.floor(Math.random() * respondidas_erradas_pf.length);
pergunta = respondidas_erradas_pf[num];
} else {
perguntas_pf = respondidas_certas_pf.slice(); //perguntas_pf recebe o respondidas_certas_pf
respondidas_certas_pf.length = 0; //apagando o array respondidas_certas_pf
const num = Math.floor(Math.random() * perguntas_pf.length);
pergunta = perguntas_pf[num];
}
const enunciado = pergunta["enunciado"];
const el_pergunta = document.createElement('div');
el_pergunta.classList.add('el_pergunta_pf');
const enun = document.createElement('div');
enun.innerHTML = enunciado;
const titulo = document.createElement('h3');
const titulo_resp = document.createElement('h4');
titulo.textContent = "Pergunta";
titulo_resp.textContent = "Sua Resposta"
const divRespostaJogador = document.createElement('div');
divRespostaJogador.classList.add('el_resp_jogador_pf');
const divEspacoResposta = document.createElement("div");
const bt = document.createElement("button");
bt.classList.add("bt_responder_pf");
bt.onclick = function() {corrigir_pf(pergunta)};
bt.textContent = "Ok";
if(pergunta["fracao"]){
divEspacoResposta.style.cssText = "display: flex; justify-content: center; align-items: center;";
const html_conteudo = `<div style='display: flex; justify-content: center; align-items: center; flex-direction: column; font-size: small;'>
<div>Numerador</div>
<hr style='background-color: #777; width: 70px; height: 1px; border-radius: 5px; box-shadow: none;' />
<div>Denominador</div>
</div>
<div style='display: flex; justify-content: center; align-items: center; flex-direction: column;'>
<div class='numerador_pf' contenteditable='true'></div>
<hr style='background-color: #777; width: 70px; height: 1px; border-radius: 5px; box-shadow: none;' />
<div class='denominador_pf' contenteditable='true'></div>
</div>
`;
divEspacoResposta.innerHTML = html_conteudo;
divEspacoResposta.appendChild(bt);
} else {
divEspacoResposta.style.cssText = "display: flex; justify-content: center; align-items: center;";
const html_conteudo = `
<div class='el_resp_pf' contenteditable='true'></div>
`;
divEspacoResposta.innerHTML = html_conteudo;
divEspacoResposta.appendChild(bt);
}
divRespostaJogador.appendChild(titulo_resp);
divRespostaJogador.appendChild(divEspacoResposta);
el_pergunta.appendChild(titulo);
el_pergunta.appendChild(enun);
el_pergunta.appendChild(divRespostaJogador);
jan.appendChild(el_pergunta);
MathJax.typesetClear();
MathJax.typeset();
}
function corrigir_pf(pergunta) {
const divPergunta = document.querySelector(".el_pergunta_pf");
if(pergunta["fracao"]){
const n_jogador = deixarSoNumerosVirgula_pf(document.querySelector(".numerador_pf").textContent);
const d_jogador = deixarSoNumerosVirgula_pf(document.querySelector(".denominador_pf").textContent);
if(pergunta["multiplas_respostas"]){
if(pergunta["n"].includes(n_jogador)){
const index = pergunta["n"].indexOf(n_jogador);
const d_resp = pergunta["d"][index];
if(d_resp == d_jogador){
som_ativado_pf? som_acerto_pf.play(): null;
apresentar_resultado("Correto!");
respondidas_certas_pf.push(pergunta);
const x = perguntas_pf.indexOf(pergunta);
const y = respondidas_erradas_pf.indexOf(pergunta);
x !== -1 ? perguntas_pf.splice(x, 1) : null;
y !== -1 ? respondidas_erradas_pf.splice(y, 1) : null;
} else {
som_ativado_pf? som_erro_pf.play(): null;
apresentar_resultado("Errado!");
const y = respondidas_erradas_pf.indexOf(pergunta);
y == -1 ? respondidas_erradas_pf.push(pergunta): null;
const x = perguntas_pf.indexOf(pergunta);
x !== -1 ? perguntas_pf.splice(x, 1) : null;
}
} else {
som_ativado_pf? som_erro_pf.play(): null;
apresentar_resultado("Errado!");
const y = respondidas_erradas_pf.indexOf(pergunta);
y == -1 ? respondidas_erradas_pf.push(pergunta): null;
const x = perguntas_pf.indexOf(pergunta);
x !== -1 ? perguntas_pf.splice(x, 1) : null;
}
} else {//se nao tem múltiplas respostas
const n_sol = pergunta["n"];
const d_sol = pergunta["d"];
if(n_sol == n_jogador && d_sol == d_jogador) {
som_ativado_pf? som_acerto_pf.play(): null;
apresentar_resultado("Correto!");
respondidas_certas_pf.push(pergunta);
const x = perguntas_pf.indexOf(pergunta);
const y = respondidas_erradas_pf.indexOf(pergunta);
x !== -1 ? perguntas_pf.splice(x, 1) : null;
y !== -1 ? respondidas_erradas_pf.splice(y, 1) : null;
} else {
som_ativado_pf? som_erro_pf.play(): null;
apresentar_resultado("Errado!");
const y = respondidas_erradas_pf.indexOf(pergunta);
y == -1 ? respondidas_erradas_pf.push(pergunta): null;
const x = perguntas_pf.indexOf(pergunta);
x !== -1 ? perguntas_pf.splice(x, 1) : null;
}
}
} else {//se nao é fracao
const resp_jogador = deixarSoNumerosVirgula_pf(document.querySelector(".el_resp_pf").textContent);
const sol = pergunta["r"];
if(sol == resp_jogador) {
som_ativado_pf? som_acerto_pf.play(): null;
apresentar_resultado("Correto!");
respondidas_certas_pf.push(pergunta);
const x = perguntas_pf.indexOf(pergunta);
const y = respondidas_erradas_pf.indexOf(pergunta);
x !== -1 ? perguntas_pf.splice(x, 1) : null;
y !== -1 ? respondidas_erradas_pf.splice(y, 1) : null;
} else {
som_ativado_pf? som_erro_pf.play(): null;
apresentar_resultado("Errado!");
const y = respondidas_erradas_pf.indexOf(pergunta);
y == -1 ? respondidas_erradas_pf.push(pergunta): null;
const x = perguntas_pf.indexOf(pergunta);
x !== -1 ? perguntas_pf.splice(x, 1) : null;
}
}
function apresentar_resultado(valor){
const acertou = valor == "Correto!"? true: false;
const peca = pecas[jogadores_pf[vez_pf].id];
const classe_a_remover = "mostrar_face_"+dado_resultado_pf;
divPergunta.innerHTML = `<div style='font-size: x-large; font-weight: bold; text-align: center; width:100%;'>${valor}</div>`;
peca.classList.remove("pulsar_pf");
peca.style.cursor = "auto";
peca.removeEventListener("click", gerenciar_jogada_pf);
setTimeout(() => {
apagar_janela_de_jogadas_pf();
mover_peca(acertou);
setTimeout(() => {
dado_pf.classList.remove(classe_a_remover);
divPergunta.remove();
}, 2000);
}, 2000);
}
}
function mover_peca(acertou) {
if(acertou){
const peca = pecas[jogadores_pf[vez_pf].id];
let num_casa_destino = jogadores_pf[vez_pf].avancar_casas(dado_resultado_pf);
num_casa_destino > 34? num_casa_destino = 34: null;
let id_destino = "c_"+num_casa_destino+"_pf";
let casa_destino = document.getElementById(id_destino);
let bonus;
let passar_vez = false;
const is_casa_surpresa = casa_destino.classList.toString().includes('cs');
animar_movimento_pf(peca, casa_destino, num_casa_destino, is_casa_surpresa, passar_vez, bonus);
if(is_casa_surpresa){
let classes = casa_destino.classList;
for(i=0; i < classes.length; i++){
const classe = classes[i];
if(classe.startsWith("cs")){
bonus = parseInt(classe.split("_")[1]);
console.log("Bonus: "+bonus);
let novo_num_destino = jogadores_pf[vez_pf].avancar_casas(bonus);
novo_num_destino > 34? novo_num_destino = 34: null;
const novo_id_destino = "c_"+novo_num_destino+"_pf";
const novo_destino = document.getElementById(novo_id_destino);
passar_vez = true;
setTimeout(() => {
mostrar_casa_surpresa_pf(bonus);
animar_movimento_pf(peca, novo_destino, novo_num_destino, is_casa_surpresa, passar_vez, bonus);
}, duracao_movimento);
break;
}
}
}
} else {
if(vez_pf == jogadores_pf.length - 1){
vez_pf = 0;
ativar_vez();
} else {
vez_pf++;
ativar_vez();
}
}
}
function mostrar_casa_surpresa_pf(bonus) {
// Criar a div bonus_pf com o valor do bônus
const divBonus = document.createElement('div');
divBonus.classList.add('bonus_pf');
divBonus.textContent = bonus;
divBonus.style.cssText = "z-index: 90; border-radius: 5px; box-sizing: border-box; box-shadow: 0 6px 15px #444; padding: 10px; text-shadow: 0 6px 15px #222; color: #fff; font-size: 100px;";
if(bonus > 0){
divBonus.style.backgroundColor = "#22b902";
const txt = "+"+bonus;
divBonus.textContent = txt;
} else {divBonus.style.backgroundColor = "#ff2b2b"; som_ativado_pf? som_erro_pf.play(): null;}
// Definir a posição fixed e centralizar a div bonus_pf
divBonus.style.position = 'fixed';
divBonus.style.top = '55%';
divBonus.style.left = '50%';
divBonus.style.transform = 'translate(-50%, -50%)';
// Adicionar a div bonus_pf ao container_jogo_pf
const containerJogo = document.querySelector('.container_jogo_pf');
containerJogo.appendChild(divBonus);
// Animar a div bonus_pf
let tamanhoFinal = parseInt(getComputedStyle(divBonus).fontSize) * 2;
let duracao = 2500;
divBonus.animate([
{ transform: 'translate(-50%, -50%)', opacity: 1 },
{ transform: `translate(-50%, -50%) translateY(-${tamanhoFinal}px)`, opacity: 0 }
], {
duration: duracao,
easing: 'ease-in-out'
});
// Tocar som com base no valor do bônus
if (bonus > 0) {
// Tocar som de sucesso
som_ativado_pf? som_acerto_pf.play(): null;
} else {
// Tocar som de erro
som_ativado_pf? som_erro_pf.play(): null;
}
//Remover a div bonus_pf após a conclusão da animação
setTimeout(function() {
divBonus.remove();
}, duracao);
}
function sortearDado_pf(){
const IniTop = dado_pf.offsetTop;
const PosTop = Math.floor(Math.random() * (80 - 20 + 1)) + 20;
const IniLeft = dado_pf.offsetLeft;
const PosLeft = Math.floor(Math.random() * (90 - 5 + 1)) + 5;
dado_pf.style.cursor = "grabbing";
const numero_sorteado = Math.floor(Math.random() * 6) + 1;
console.log("Numero Sorteado: "+numero_sorteado);
let face_sorteada = "mostrar_face_"+numero_sorteado;
face_atual_pf? dado_pf.classList.remove(face_atual_pf):null;
dado_pf.classList.add(face_sorteada);
face_atual_pf = face_sorteada;
setTimeout(() => {
dado_pf.style.cursor = "grab";
}, 500);
let duracao = 1000;
function moverdado_pf(tempoAtual) {
let tempoDecorrido = tempoAtual - tempoInicio; // Tempo decorrido desde o início da animação
let PosicaoTopAtual = IniTop + ((PosTop - IniTop) * tempoDecorrido / duracao);
dado_pf.style.top = PosicaoTopAtual + 'px';
let PosicaoLeftAtual = IniLeft + ((PosLeft - IniLeft) * tempoDecorrido / duracao);
dado_pf.style.left = PosicaoLeftAtual + 'px';
if (tempoDecorrido < duracao) {
requestAnimationFrame(moverdado_pf);
}
}
let tempoInicio = null;
function iniciarAnimacao(tempoAtual) {
if (!tempoInicio) tempoInicio = tempoAtual; // Armazene o tempo inicial apenas na primeira chamada
moverdado_pf(tempoAtual);
}
if(num_sorteado_anterior_pf !== numero_sorteado) {
requestAnimationFrame(iniciarAnimacao);
num_sorteado_anterior_pf = numero_sorteado;
} else {
num_sorteado_anterior_pf = numero_sorteado;
}
som_ativado_pf? som_dado_pf.play(): null;
return numero_sorteado;
}
const dado_8_pf = document.querySelector('.dado_8_pf');
const dado_8_pfFaces = document.querySelectorAll('.dado_8_pf-face');
let face_atual_8_pf;
let num_sorteado_anterior_8_pf;
let numeros_a_sortear_8_pf = [1,2,3,4,5,6,7,8];
function sortearDado_8_pf(){
const IniTop = dado_8_pf.offsetTop;
const PosTop = Math.floor(Math.random() * (80 - 20 + 1)) + 20;
const IniLeft = dado_8_pf.offsetLeft;
const PosLeft = Math.floor(Math.random() * (90 - 5 + 1)) + 5;
dado_8_pf.style.cursor = "grabbing";
let numero_sorteado;
let indice = Math.floor(Math.random() * (numeros_a_sortear_8_pf.length));
if(numeros_a_sortear_8_pf.length > 0){
numero_sorteado = numeros_a_sortear_8_pf[indice];
numeros_a_sortear_8_pf.splice(indice,1);
console.log("Número Sorteado: "+numero_sorteado);
} else {return}
let face_sorteada = "mostrar_face_"+numero_sorteado+"_d8";
face_atual_8_pf? dado_8_pf.classList.remove(face_atual_8_pf):null;
dado_8_pf.classList.add(face_sorteada);
face_atual_8_pf = face_sorteada;
setTimeout(() => {
dado_8_pf.style.cursor = "grab";
}, 500);
let duracao = 1000;
function moverdado_8_pf(tempoAtual) {
let tempoDecorrido = tempoAtual - tempoInicio; // Tempo decorrido desde o início da animação
let PosicaoTopAtual = IniTop + ((PosTop - IniTop) * tempoDecorrido / duracao);
dado_8_pf.style.top = PosicaoTopAtual + 'px';
let PosicaoLeftAtual = IniLeft + ((PosLeft - IniLeft) * tempoDecorrido / duracao);
dado_8_pf.style.left = PosicaoLeftAtual + 'px';
if (tempoDecorrido < duracao) {
requestAnimationFrame(moverdado_8_pf);
}
}
let tempoInicio = null;
function iniciarAnimacao(tempoAtual) {
if (!tempoInicio) tempoInicio = tempoAtual; // Armazene o tempo inicial apenas na primeira chamada
moverdado_8_pf(tempoAtual);
}
if(num_sorteado_anterior_8_pf !== numero_sorteado) {
requestAnimationFrame(iniciarAnimacao);
num_sorteado_anterior_8_pf = numero_sorteado;
} else {
num_sorteado_anterior_8_pf = numero_sorteado;
}
som_ativado_pf? som_dado_pf.play(): null;
return numero_sorteado;
}
function removerInstanciasJogadorPF() {//zera tb o array jogadores_pf
jogadores_pf.forEach(function(instancia) {
delete instancia.nome;
delete instancia.casa;
delete instancia.id;
delete instancia.avancar_casas;
});
JogadorPF.id = 0;
jogadores_pf.length = 0;
}
function animar_movimento_pf(peca, destino, num_destino, casa_surpresa, passar_vez, bonus) {
const easeInOut = "cubic-bezier(0.42, 0, 0.58, 1)"; // Função de easing
const pecaClone = peca.cloneNode(true); // Clone da peça para a animação
const pecaPosicaoOriginal = peca.getBoundingClientRect(); // Posição original da peça
// Configuração de estilos para a animação
peca.style.opacity = "0"; // Oculta a peça original durante a animação
pecaClone.style.transform = "scale(4)"; // Define a escala da peça para 4
// Adiciona a peça clonada antes da peça original
peca.parentNode.insertBefore(pecaClone, peca);
// Calcula a posição do destino
const destinoPosicao = destino.getBoundingClientRect();
const destinoE = destinoPosicao.left + destinoPosicao.width/2;
const destinoTop = destino.offsetTop;
// Define uma função para executar a animação
requestAnimationFrame(() => {
pecaClone.style.transition = `transform ${duracao_movimento}ms ${easeInOut}`;
pecaClone.style.transform = `translate(${destinoE - pecaPosicaoOriginal.left}px, ${destinoPosicao.top - pecaPosicaoOriginal.top}px)`;
});
//Som do Movimento
if(!bonus){
som_ativado_pf? som_movimento_pf.play(): null;
} else if (bonus && bonus > 0){
som_ativado_pf? som_movimento_pf.play(): null;
} else {
som_ativado_pf? som_voltar_pf.play(): null;
}
// Atualiza o scroll da tela de forma suave
const posicao_scroll = parseInt(destinoTop) - (parseInt(window.innerHeight / 2));
window.scrollTo({
top: posicao_scroll,
behavior: "smooth"
});
// Define um timeout para remover a peça original e colocar a clonada dentro do destino e verificar se chegou ao final
setTimeout(() => {
if(num_destino == 34){
const concluinte = jogadores_pf[vez_pf].nome;
const peca = pecas[jogadores_pf[vez_pf].id];
const sua_peca = peca.cloneNode(true);
const jogadorRemovido = jogadores_pf.splice(vez_pf, 1)[0];
chegada_pf.push(jogadorRemovido);
mostrar_tela_chegada_pf(concluinte, sua_peca);
} else if(!casa_surpresa || (casa_surpresa && passar_vez)){
if(vez_pf == jogadores_pf.length - 1){
vez_pf = 0;
ativar_vez();
} else { vez_pf++; ativar_vez();}
}
peca.parentNode.removeChild(pecaClone);
destino.appendChild(peca);
peca.style.opacity = "1"; // Mostra a peça original após a animação
pecaClone.style.transform = "none"; // Anula o transform scale
}, duracao_movimento);
}
function mostrar_tela_chegada_pf(concluinte, sua_peca){
const container = document.createElement("div");
container.style.cssText = `position: fixed;
margin: 20px auto 35px auto;
box-sizing: border-box;
padding: 35px;
min-width: 275px;
width: 91%;
max-height: 90vh;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%), linear-gradient(-45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%);
background-size: 20px 20px;
background-color: #999;
color: #fff;
box-shadow: 2px 2px 5px #777;
z-index: 50;
overflow: auto;
border-radius: 10px;
transition: opacity 0.7s ease-in-out;`;
const divInterna = document.createElement("div");
divInterna.style.cssText = "margin: 0 auto; color: #fff; background-color: #777; position: relative; border-radius: 10px; box-sizing: border-box; height: 100%; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: space-between;"
const titulo = document.createElement("h3");
titulo.textContent = "Chegada";
sua_peca.style.color = "#fff";
sua_peca.style.opacity = "1";
sua_peca.style.transform = "scale(1.8)";
const txt = document.createElement("span");
txt.textContent = `Parabéns, ${concluinte}! Você conseguiu!`;
txt.style.margin = "15px auto 0 auto";
const bt = document.createElement("button");
bt.textContent = "Ok";
bt.classList.add("bt_responder_pf");
bt.style.cssText = "margin: 25px 0; width: 50%; box-shadow: 1px 1px 2px #fff;";
bt.onclick = function() {
container.remove();
if(jogadores_pf.length == 1){
mostrar_tela_final();
} else {
vez_pf == jogadores_pf.length? vez_pf = 0: null;
ativar_vez();
}
}
divInterna.appendChild(titulo);
divInterna.appendChild(sua_peca);
divInterna.appendChild(txt);
divInterna.appendChild(bt);
container.appendChild(divInterna);
som_ativado_pf? som_chegada_pf.play(): null;
const container_jogo = document.querySelector(".container_jogo_pf");
container_jogo.appendChild(container);
}
function mostrar_tela_final(){
console.log("O jogo acabou!");
vez_el_pf.textContent = "O jogo terminou!";
let ordem_chegada = "Ordem de chegada: ";
for(i=0; i < chegada_pf.length; i++){
if(chegada_pf.length == 1){
ordem_chegada += i+1+"° "+chegada_pf[i].nome+".";
} else if(chegada_pf.length > 1 && i != chegada_pf.length - 1) {
ordem_chegada += i+1+"° "+chegada_pf[i].nome+"; ";
} else {
ordem_chegada += i+1+"° "+chegada_pf[i].nome+".";
}
}
const container = document.createElement("div");
container.style.cssText = `position: fixed;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 20px auto 35px auto;
box-sizing: border-box;
padding: 15px;
min-width: 275px;
width: 91%;
max-height: 90vh;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgb(177,206,52);
background: linear-gradient(0deg, rgba(177,206,52,1) 1%, rgba(255,108,97,1) 50%);
color: #fff;
box-shadow: 6px 6px 7px #777;
z-index: 50;
overflow: auto;
border-radius: 10px;
opacity: 1;
transition: opacity 0.7s ease-in-out;`;
const titulo = document.createElement("h3");
titulo.textContent = "Fim de Jogo";
const div_1 = document.createElement("div");
div_1.textContent = ordem_chegada;
div_1.style.margin = "15px auto";
const div_2 = document.createElement("div");
div_2.textContent = jogadores_pf[0].nome+", não desista! Na próxima vez você terá mais sorte.";
div_2.style.margin = "15px auto";
const bt = document.createElement("button");
bt.textContent = "Ok";
bt.classList.add("bt_responder_pf");
bt.style.cssText = "margin: 25px 0; width: 50%; box-shadow: 1px 1px 2px #fff; background-color: rgb(46 211 124);";
bt.onmouseenter = function() {
this.style.backgroundColor = '#209557';
};
bt.onmouseleave = function() {
this.style.backgroundColor = "rgb(46 211 124)";
};
bt.onclick = function() {
container.remove();
}
container.appendChild(titulo);
container.appendChild(div_1);
container.appendChild(div_2);
container.appendChild(bt);
const container_jogo = document.querySelector(".container_jogo_pf");
container_jogo.appendChild(container);
som_ativado_pf? som_finale_pf.play(): null;
}
// ++++++++++++++++++++++++++++++++++++++ FIM Jogo Percurso das Frações +++++++++++++++++++++++++++++++++++++++++
/********************************************* Jogo Card das Frações *******************************************/
const botao = document.querySelector(".botao-jogo-cf");
const container = document.getElementById("container_jogo_cf");
let som_ativado_cf = true;
const cores_overlay_cf = ["aliceblue", "#ea3546", "#4ddb25", "#dbad25"];
let ultima_cor_overlay_cf = "";
let jogadores_cf = [
{"nome": "Grupo 1", "pontos":0},
{"nome": "Grupo 2", "pontos":0}
]
let questoes_cf = [
{
"enunciado":"Professora Helena comprou determinada quantidade de pizzas para 3 turmas. Sabendo que a turma A comeu \\(\\frac{6}{16}\\)(seis dezesseis avos) do total de pedaços, a turma B comeu \\(\\frac{2}{8}\\)(dois oitavos) e a turma C comeu \\(\\frac{5}{12}\\)(cinco doze avos), qual fração representa a turma que comeu mais?",
"fracao":true,
"ordenacao":false,
"n": ["5"],
"d":["12"]
},
{
"enunciado":"Comprei uma barra de chocolate que possui vinte pedaços (quadradinhos) de mesmo tamanho. No primeiro dia comi \\(\\frac{1}{5}\\)(um quinto) da barra. Já no segundo dia, comi o equivalente a \\(\\frac{4}{10}\\)(quatro décimos) da barra inicial. Em qual dia eu comi mais chocolate?",
"fracao":false,
"r": ["Segundo dia", "segundo", "2", "2°"]
},
{
"enunciado":"A fração \\(\\frac{2}{5}\\)(dois quintos) pode ser representada por qual ponto na reta numérica?",
"imagem":"r1.jpg",
"fracao":false,
"r": ["Ponto B", "B"]
},
{
"enunciado":"Indique quais pontos podem representar as frações \\(\\frac{7}{8}\\)(sete oitavos), \\(\\frac{35}{7}\\) e \\(\\frac{16}{6}\\)(dezesseis sextos) na reta numérica, respectivamente. Separe os pontos com o uso da vírgula",
"imagem":"r3.jpg",
"fracao":false,
"r": ["B, D, E"]
},
{
"enunciado":"Elisa possui uma coleção de 90 carrinhos colecionáveis que são réplicas de diversas marcas, sendo 12 da Volkswagen, 27 da Chevrolet, 16 da Ford e 35 Fiat. Quais frações representam a razão entre os carrinhos da marca Fiat e Chevrolet, e da marca Ford e Volkswagen.",
"fracao":true,
"ordenacao":true,
"n": ["35", "4"],
"d":["27", "3"]
},
{
"enunciado":"A fração \\(\\frac{17}{9}\\)(dezessete nonos) pode ser localizada entre quais pontos na reta numérica? Separe os pontos com a letra \"e\".",
"imagem":"r2.jpg",
"fracao":false,
"r": ["Entre os pontos B e C.", "B e C", "B e C"]
},
{
"enunciado":"Yara comprou um pote de sorvete que tinha as seguintes dimensões: 22 cm de comprimento, 8 cm de largura e 20 cm de altura. Beatriz também queria comprar um pote de sorvete, porém, não tinha dinheiro suficiente e então resolveu comprar um que tinha \\(\\frac{25}{88}\\)(vinte e cinco oitenta e oito avos) do volume do pote de Yara. Quantos mililitros têm o pote de Beatriz? Use somente números e vírgulas.",
"fracao":false,
"r": ["1.000 ml", "1000"]
},
{
"enunciado":"Ana quer comprar um celular no Paraguai e que custa 2.500,00 reais; ela já tem 2/5 do valor. Quantos reais faltam para ela conseguir comprar o celular? Use somente números e vírgulas.",
"fracao":false,
"r": ["R$ 1.500,00", "1500", "1500,00"]
},
{
"enunciado":"Sabe-se que uma caixa d'água, inicialmente, estava com \\(\\frac{1}{4}\\)(um quarto) da sua capacidade e foi completada com mais \\(\\frac{2}{5}\\)(dois quintos) da sua capacidade. Responda: a) Qual é a fração que representa a quantidade de água na caixa d'água? b) Qual é a fração que representa a parte vazia da caixa d'água? Responda em ordem.",
"fracao":true,
"ordenacao":true,
"n": ["13", "7"],
"d":["20", "20"]
},
{
"enunciado":"Calcule \\(\\frac{3}{8}\\)(três oitavos) mais \\(\\frac{75}{3}\\)(setenta e cinco terços). Responda em forma de fração irredutível.",
"fracao":true,
"ordenacao":false,
"n": ["203"],
"d":["8"]
},
{
"enunciado":"Calcule \\(\\frac{3}{4}\\)(três quartos) mais \\(\\frac{2}{8}\\)(dois oitavos). Responda em forma de fração irredutível.",
"fracao":true,
"ordenacao":false,
"n": ["1"],
"d":["1"]
},
{
"enunciado":"Calcule \\(\\frac{3}{8}\\)(três oitavos) menos \\(\\frac{4}{16}\\)(quatro dezesseis avos). Responda em forma de fração irredutível.",
"fracao":true,
"ordenacao":false,
"n": ["1"],
"d":["8"]
},
{
"enunciado":"Obtenha o resultado, em forma de fração irredutível, da operação \\(\\frac{3}{2} - \\frac{1}{4}\\)(três meios menos um quarto).",
"fracao":true,
"ordenacao":false,
"n": ["5"],
"d":["4"]
},
{
"enunciado":"Obtenha o resultado, em forma de fração irredutível, da operação \\(\\frac{3}{2} + \\frac{1}{4}\\)(três meios mais um quarto).",
"fracao":true,
"ordenacao":false,
"n": ["7"],
"d":["4"]
},
{
"enunciado":"Caio, Raquel e Douglas estavam apostando uma corrida, na qual eles deveriam correr o máximo possível dentro de um determinado tempo estipulado por eles. Quando acabou o tempo, Caio, Raquel e Douglas verificaram a distância que cada um tinha percorrido que era, respectivamente, \\(\\frac{6}{24}\\)(seis vinte e quatro avos), \\(\\frac{9}{24}\\)(nove vinte e quatro avos) e \\(\\frac{4}{30}\\)(quatro trinta avos) do percurso em linha reta. Qual deles ficou em último lugar? Responda com o nome do corredor.",
"fracao":false,
"r": ["Douglas"]
},
{
"enunciado":"A mãe de Lucas e Beatriz comprou uma pizza de 8 pedaços e resolveu dividi-la entre os três da seguinte maneira: Beatriz ficaria com \\(\\frac{1}{2}\\)(um meio) da pizza, Lucas com \\(\\frac{1}{8}\\)(um oitavo) e sua mãe com \\(\\frac{6}{16}\\)(seis dezesseis avos). Qual deles ficou com mais pedaços? Responda com o nome.",
"fracao":false,
"r": ["Beatriz"]
},
{
"enunciado":"Luana comprou 9 balões vermelhos e 15 amarelos. Qual é a fração que representa a razão entre o número de balões amarelos e vermelhos?",
"fracao":true,
"ordenacao":false,
"n": ["5"],
"d":["3"]
},
{
"enunciado":"Ao dividir um bolo, em partes iguais, para oito pessoas, a razão estabelecida a cada pedaço do bolo será?",
"fracao":true,
"ordenacao":false,
"n": ["1"],
"d":["8"]
},
{
"enunciado":"Considere que uma pizza tenha 4 sabores, possua ao total 12 pedaços do mesmo tamanho e que cada sabor possua a mesma quantidade de pedaços. Se uma pessoa comer um pedaço de cada sabor, qual será a razão do que ela comeu em relação ao total de pizza?",
"fracao":true,
"ordenacao":false,
"n": ["1"],
"d":["3"]
},
{
"enunciado":"Calcule \\(\\frac{2}{3}(\\frac{16}{7} + \\frac{\\frac{5}{9}}{\\frac{4}{8}})\\). Responda na forma de fração irredutível.",
"fracao":true,
"ordenacao":false,
"n": ["428"],
"d":["189"]
},
{
"enunciado":"Calcule \\( \\left( \\frac{9}{5} - \\frac{3}{16} \\right) \\div \\frac{5}{4} \\times \\frac{1}{3}\\). Responda na forma de fração irredutível.",
"fracao":true,
"ordenacao":false,
"n": ["43"],
"d":["100"]
},
{
"enunciado":"Calcule \\( \\frac{8}{9} \\times \\left( \\frac{9}{8} \\times \\frac{1}{5} \\right)\\). Responda na forma de fração irredutível.",
"fracao":true,
"ordenacao":false,
"n": ["1"],
"d":["5"]
},
{
"enunciado":"Calcule \\(\\frac{1}{5}(\\frac{0}{3} + \\frac{5}{4})\\). Responda na forma de fração irredutível.",
"fracao":true,
"ordenacao":false,
"n": ["1"],
"d":["4"]
},
{
"enunciado":"Calcule \\(\\frac{55}{9} + \\frac{8}{9}\\) (cinquenta e cinco nonos mais oito nonos). Responda na forma de fração irredutível.",
"fracao":true,
"ordenacao":false,
"n": ["7"],
"d":["1"]
},
{
"enunciado":"Calcule \\(\\frac{8}{33} \\times \\left( \\frac{66}{4} + \\frac{3}{4} \\right)\\). Responda na forma de fração irredutível.",
"fracao":true,
"ordenacao":false,
"n": ["46"],
"d":["11"]
},
{
"enunciado":"Calcule \\(\\frac{2}{3} \\times \\left( \\frac{14}{8} \\div \\frac{3}{2} \\right)\\). Responda na forma de fração irredutível.",
"fracao":true,
"ordenacao":false,
"n": ["7"],
"d":["9"]
},
{
"enunciado":"Um comerciante oferece 7% de desconto no pagamento à vista de um determinado produto. Sabe-se que esse produto custa R$ 120,00 para pagamento a prazo. No pagamento à vista, qual é o valor pago pelo produto? Responda somente com números e vírgulas.",
"fracao":false,
"r": ["R$ 111,60", "111,60", "111,6"]
},
{
"enunciado":"Sabrina entrou em uma loja que anunciava a seguinte promoção: “Não perca essa chance! Calças por apenas \\(\\text{R}\\$ \\thinspace 125,00\\) e na compra de duas pague apenas \\(\\text{R}\\$ \\thinspace 95,00\\) em cada!”. Qual porcentagem de desconto Sabrina ganhará no valor final caso compre duas calças? Responda na forma de fração irredutível.",
"fracao":false,
"ordenacao":false,
"r": ["24%"]
},
{
"enunciado":"Escreva três formas fracionárias que podem representar 88%.",
"fracao":true,
"ordenacao":false,
"n": ["88", "44", "22"],
"d":["100", "50", "25"]
},
{
"enunciado":"Qual é a fração geratriz da dizima periódica 0,4444...?",
"fracao":true,
"ordenacao":false,
"n": ["4"],
"d":["9"]
},
{
"enunciado":"Qual é a fração geratriz da dizima periódica 0,8888...?",
"fracao":true,
"ordenacao":false,
"n": ["8"],
"d":["9"]
},
{
"enunciado":"Qual é a fração geratriz da dízima periódica 2,6666...?",
"fracao":true,
"ordenacao":false,
"n": ["8"],
"d":["3"]
}
];
let erradas_cf = [];
let corretas_cf = [];
let i_cf = 0;
let vez_cf = 0;
botao.addEventListener("click", function() {
if (botao.innerText === "Abrir Jogo Card das Frações") {//Iniciando o jogo
botao.innerText = "Fechar Jogo Card das Frações";
botao.classList.add("btn_ativo_cf");
container.style.display = "block";
mostrar_tela_inicial_cf();
vez_cf = 0;
} else {//Encerrando o jogo
i_cf = 0;
ultima_cor_overlay_cf = "";
botao.innerText = "Abrir Jogo Card das Frações";
botao.classList.remove("btn_ativo_cf");
container.style.display = "none";
jogadores_cf[0].nome = "Grupo 1";
jogadores_cf[0].pontos = 0;
jogadores_cf[1].nome = "Grupo 2";
jogadores_cf[1].pontos = 0;
let combinado = questoes_cf.concat(erradas_cf, corretas_cf);
questoes_cf.splice(0, questoes_cf.length, ...combinado);
combinado.length = 0;
erradas_cf.length = 0;
corretas_cf.length = 0;
}
});
function toggle_som_cf() {
const som_el = document.querySelector(".som_el_cf");
if(som_ativado_cf){
som_el.classList.toggle("som_desativado_cf");
som_ativado_cf = false;
} else {
som_el.classList.toggle("som_desativado_cf");
som_ativado_cf = true;
}
}
function mostrar_tela_inicial_cf(){
function sanitizar(txt){
const regex = /[^\wÀ-ÿ,\s]/g;
const textoSanitizado = txt.replace(regex, '');
return textoSanitizado;
}
const container_jogo = document.getElementById("container_jogo_cf");
const trilha = document.createElement("div");
trilha.classList.add("trilha_dos_cards_cf");
container_jogo.replaceChildren(trilha);
const container = document.createElement("div");
const titulo = document.createElement("h3");
titulo.textContent = "Escolha o nome dos grupos";
container.classList.add("container_tela_inicial_cf");
const grupo_1 = document.createElement("div");
const grupo_2 = document.createElement("div");
grupo_1.classList.add("grupo_cf");
grupo_2.classList.add("grupo_cf");
const div_1 = document.createElement("div");
const div_2 = document.createElement("div");
const input_1 = document.createElement("input");
const input_2 = document.createElement("input");
input_1.type = "text";
input_2.type = "text";
input_1.placeholder = "Preenchimento opcional"
input_2.placeholder = "Preenchimento opcional"
div_1.textContent = "Grupo 1";
div_2.textContent = "Grupo 2";
const bt = document.createElement("button");
bt.classList.add("bt_iniciar_cf");
bt.textContent = "iniciar"
bt.onclick = function (){
questoes_cf = shuffleArray(questoes_cf);
let nome_1 = sanitizar(input_1.value);
let nome_2 = sanitizar(input_2.value);
nome_1? jogadores_cf[0].nome = nome_1: null;
nome_2? jogadores_cf[1].nome = nome_2: null;
const barra = montar_barra_superior(jogadores_cf[0].nome, jogadores_cf[1].nome);
const barra_inferior = montar_barra_inferior();
container.remove();
container_jogo.prepend(barra);
container_jogo.appendChild(barra_inferior);
const card_conteudo = montar_pergunta_cf();
mostrar_card_cf(card_conteudo[0].innerHTML, card_conteudo[1].innerHTML);
MathJax.typesetClear();
MathJax.typeset();
gerenciar_vez_visual_cf();
}
grupo_1.appendChild(div_1);
grupo_1.appendChild(input_1);
grupo_2.appendChild(div_2);
grupo_2.appendChild(input_2);
container.appendChild(titulo);
container.appendChild(grupo_1);
container.appendChild(grupo_2);
container.appendChild(bt);
container_jogo.prepend(container);
setTimeout(() => {
container.style.opacity = "1";
}, 150);
}
function montar_barra_superior(nome_1, nome_2){
const barra = document.createElement("div");
barra.classList.add("barra_superior_cf");
barra.style.cssText = "margin: 10px 0; padding: 2px 10px; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;";
const div_1 = document.createElement("div");
const div_2 = document.createElement("div");
div_1.style.cssText = "gap: 15px; color: #999; margin: 3px 0; display: flex; align-items: center; justify-content: center;";
div_2.style.cssText = "gap: 15px; color: #3366ff; margin: 13px 0 2px 0; display: flex; align-items: center; justify-content: center;";
const span_1 = document.createElement("span");
const span_2 = document.createElement("span");
const span_1_nome = document.createElement("span");
const span_2_nome = document.createElement("span");
span_1.classList.add("pts_cf");
span_2.classList.add("pts_cf");
span_1.style.cssText = "color: #ff335a; font-weight: bold;"
span_2.style.cssText = "color: #ff335a; font-weight: bold;"
span_1.textContent = "0";
span_2.textContent = "0";
const div_1_ = document.createElement("div");
const div_2_ = document.createElement("div");
div_1_.classList.add("placar_cf");
div_2_.classList.add("placar_cf");
span_1_nome.textContent = nome_1+" → ";
span_2_nome.textContent = nome_2+" → ";
div_1_.appendChild(span_1_nome);
div_2_.appendChild(span_2_nome);
div_1_.appendChild(span_1);
div_2_.appendChild(span_2);
div_1.appendChild(div_1_);
div_1.appendChild(div_2_);
const bt_som = document.createElement("button");
bt_som.title = som_ativado_cf == true? "Desativar som": "Ativar som";
bt_som.classList.add("som_el_cf");
bt_som.innerHTML = "♫";
bt_som.onclick = function(){
toggle_som_cf();
bt_som.title = som_ativado_cf == true? "Desativar som": "Ativar som";
}
div_2.appendChild(bt_som);
const bt_falar = document.createElement("button");
bt_falar.title = "Ouvir card"
bt_falar.classList.add("falar_el_cf");
bt_falar.innerHTML = "&#128266;";
bt_falar.onclick = function(){falar_cf();}
div_2.appendChild(bt_falar);
barra.appendChild(div_1);
barra.appendChild(div_2);
return barra;
}
function montar_barra_inferior() {
const barra = document.createElement("div");
barra.classList.add("barra_inferior_cf");
barra.style.cssText = "margin: 10px 0 60px 0; padding: 2px 10px; width: 100%; display: flex; align-items: center; justify-content: flex-start;";
const div_1 = document.createElement("div");
div_1.classList.add("qtde_cards_cf");
div_1.style.cssText = "font-size: 13px; color: #999; display: flex; align-items: center; justify-content: center; width: 50px;";
div_1.textContent = `${i_cf+1}/${questoes_cf.length+erradas_cf.length}`;
const div_2 = document.createElement("div");
const bt_corrigir = document.createElement("button");
const bt_pular = document.createElement("button");
bt_corrigir.classList.add("bt_corrigir_cf");
bt_corrigir.textContent = "➔";
bt_corrigir.title = "Girar e corrigir card";
bt_corrigir.onclick = function(){corrigir_btn_onclick_cf();}
bt_pular.classList.add("bt_pular_cf");
bt_pular.textContent = "✖";
bt_pular.title = "Pular card";
bt_pular.onclick = function(){pular_btn_onclick_cf()}
div_2.style.cssText = "margin-left: -50px; gap: 15px; font-size: 13px; color: #999; display: flex; align-items: center; justify-content: center; width: 100%;";
div_2.appendChild(bt_pular);
div_2.appendChild(bt_corrigir);
barra.appendChild(div_1);
barra.appendChild(div_2);
return barra;
}
function montar_pergunta_cf(){
const questao = questoes_cf[i_cf];
const DivEnunciado = document.createElement("div");
DivEnunciado.classList.add("enunciado_cf");
const DivEspacoResposta = document.createElement("div");
DivEspacoResposta.classList.add("espaco_resposta_cf");
const DivResposta = document.createElement("div");
DivResposta.classList.add("resposta_cf");
DivEnunciado.innerHTML = questao.enunciado;
const titulo = document.createElement("h3");
titulo.textContent = "Sua resposta:";
DivEspacoResposta.appendChild(titulo);
DivEnunciado.style.cssText = "margin: 5px 0; width: 100%; box-sizing: border-box;";
DivEspacoResposta.style.cssText = "margin: 15px 0; width: 100%; display: flex; align-items: center; justify-content: center; box-sizing: border-box;";
DivResposta.style.cssText = "margin: 15px 0; width: 100%; display: flex; align-items: center; justify-content: center; box-sizing: border-box;";
if(questao.imagem && questao.imagem != ""){
const arquivo = "img/"+questao.imagem;
const img = document.createElement("img");
img.src = arquivo;
img.style.cssText = "width: 100%; height: auto; max-width: 500px; text-align: center; border-radius: 5px; margin: 10px auto; display: block;";
img.alt = "Uma reta numérica com pontos dispostos nela.";
const pular_linha = document.createElement("br");
DivEnunciado.appendChild(pular_linha);
DivEnunciado.appendChild(img);
}
const titulo_resposta = document.createElement("span");
titulo_resposta.textContent = "Resposta:";
DivResposta.appendChild(titulo_resposta);
if(questao.fracao){
const qtde = questao.n.length;
for(let i = 0; i < qtde; i++){
const frac = `<div class='numerador_cf' contenteditable='true'></div>
<hr style='background-color: #777; width: 70px; height: 1px; border-radius: 5px; box-shadow: none;' />
<div class='denominador_cf' contenteditable='true'></div>`;
const div = document.createElement("div");
div.classList.add("fracao_cf");
div.innerHTML = frac;
div.style.cssText = "display: flex; justify-content: center; align-items: center; flex-direction: column;";
DivEspacoResposta.appendChild(div);
const virgula = i >= 0 && i != qtde-1 ? ", " : "";
const r = " "+questao.n[i]+"/"+questao.d[i]+" ("+questao.n[i]+" sobre "+questao.d[i]+")"+virgula;
const span = document.createElement("span");
span.innerHTML = r;
titulo_resposta.appendChild(span);
}
} else {
const input = document.createElement("div");
input.classList.add("resposta_jogador_cf");
input.style.cssText = "background-color: #fff; margin-left: 15px; width: 130px; height: 40px; box-sizing: border-box; border: 1px solid #999; border-radius: 5px; display: flex; align-items: center; justify-content: center;";
input.contentEditable = "true";
DivEspacoResposta.appendChild(input);
const r = " "+questao.r[0];
const span = document.createElement("span");
span.innerHTML = r;
titulo_resposta.appendChild(span);
}
const div = document.createElement("div");
const div_2 = document.createElement("div");
div.appendChild(DivEnunciado);
div.appendChild(DivEspacoResposta);
div_2.appendChild(DivResposta);
return [div, div_2];
}
function pular_cf(){
erradas_cf.push(questoes_cf[i_cf]);
questoes_cf.splice(i_cf,1);
i_cf >= questoes_cf.length ? i_cf = 0 : null;
vez_cf == 0? vez_cf = 1 : vez_cf = 0;
gerenciar_vez_visual_cf();
}
function pular_btn_onclick_cf(){
const barra_inferior = document.querySelector(".barra_inferior_cf");
const btns = barra_inferior.querySelectorAll("button");
const pular = document.getElementById("pular_cf");
btns[0].onclick = function(){}
btns[0].classList.toggle("bt_desativado_cf");
btns[1].onclick = function(){}
btns[1].classList.toggle("bt_desativado_cf");
pular_cf();
//Som de Pular
som_ativado_cf? pular.play() : null;
if(questoes_cf.length == 0){
questoes_cf = erradas_cf.slice();
erradas_cf.length = 0;
}
setTimeout(() => {
const card_conteudo = montar_pergunta_cf();
mostrar_card_cf(card_conteudo[0].innerHTML, card_conteudo[1].innerHTML, "depois");
MathJax.typesetClear();
MathJax.typeset();
btns[0].onclick = function(){ pular_btn_onclick_cf()}
btns[0].classList.toggle("bt_desativado_cf");
btns[1].onclick = function(){corrigir_btn_onclick_cf();}
btns[1].classList.toggle("bt_desativado_cf");
}, 1000);
}
function corrigir_cf(){
const questao = questoes_cf[i_cf];
const div = document.querySelector(".espaco_resposta_cf");
if(questao.fracao){
const fracoes = document.querySelectorAll(".fracao_cf");
const numeradores_r = questao.n;
const denominadores_r = questao.d;
if(questao.ordenacao){
let acertos_multiplas_respostas = 0;
for(let i = 0; i < fracoes.length; i++){
const numerador_jogador = fracoes[i].querySelector(".numerador_cf");
const denominador_jogador = fracoes[i].querySelector(".denominador_cf");
if(numeradores_r[i] == numerador_jogador.textContent && denominadores_r[i] == denominador_jogador.textContent){
acertos_multiplas_respostas++;
if(i == fracoes.length-1){//verificando se acertou
if(acertos_multiplas_respostas == fracoes.length){return true;} else {return false;}
}
}
} //fecha for
} else {
if(numeradores_r.length > 1){
let acertos = 0;
for(let i = 0; i < fracoes.length; i++){
const ns = fracoes[i].querySelector(".numerador_cf").textContent;
const ds = fracoes[i].querySelector(".denominador_cf").textContent;
if(numeradores_r.includes(ns)){
const index = numeradores_r.indexOf(ns);
denominadores_r[index] == ds? acertos++ : null;
}
}//fecha for
//verificando se acertou
if(acertos == fracoes.length){return true;} else {return false;}
} else {
const n = fracoes[0].querySelector(".numerador_cf").textContent;
const d = fracoes[0].querySelector(".denominador_cf").textContent;
if(numeradores_r[0] == n && denominadores_r[0] == d){
//ACERTOU
return true;
} else {
//ERROU
return false;
}
}
} //fecha if da verificacao se tem ordem para responder corretamente
} else {
let erros = 0;
let gabarito = questao.r;
let resposta = document.querySelector(".resposta_jogador_cf").textContent;
resposta = resposta.replace(/\s/g, "");
resposta = resposta.toLocaleLowerCase();
for(i = 0; i < gabarito.length; i++){
let gab = gabarito[i].replace(/\s/g, "");
gab = gab.toLocaleLowerCase();
if(resposta == gab){
return true;
} else {
erros++;
}
if(erros == gabarito.length){
return false;
}
}
} //fecha if da verificacao se é fracao
}//fecha corrigir_cf
function corrigir_btn_onclick_cf(){
const pontos_el = document.querySelectorAll(".pts_cf");
const verso = document.querySelector(".verso_cf");
const som = document.getElementById("virar_cf");
const acerto = document.getElementById("acerto_cf");
const erro = document.getElementById("erro_cf");
som_ativado_cf? som.play(): null;
virar_card_cf();
const barra_inferior = document.querySelector(".barra_inferior_cf");
const btns = barra_inferior.querySelectorAll("button");
btns[0].onclick = function(){}
btns[0].classList.toggle("bt_desativado_cf");
btns[1].onclick = function(){}
btns[1].classList.toggle("bt_desativado_cf");
const acertou = corrigir_cf();
const jogador = jogadores_cf[vez_cf];
const div = document.createElement("div");
if(acertou){//ACERTO
const tempo = setTimeout(() => {
gerenciar_vez_visual_cf();
}, 3000);
div.innerHTML = `<span style="color: green; font-weight: bold; text-shadow: 1px 1px black;">CORRETO! </span> ${jogador.nome}.`;
jogadores_cf[vez_cf].pontos++;
pontos_el[vez_cf].textContent = jogadores_cf[vez_cf].pontos;
verso.appendChild(div);
corretas_cf.push(questoes_cf[i_cf]);
questoes_cf.splice(i_cf, 1);
if(questoes_cf.length == 0 && erradas_cf.length > 0){
questoes_cf = erradas_cf.slice();
erradas_cf = [];
i_cf = 0;
setTimeout(() => {
const card_conteudo = montar_pergunta_cf();
mostrar_card_cf(card_conteudo[0].innerHTML, card_conteudo[1].innerHTML, "depois");
MathJax.typesetClear();
MathJax.typeset();
btns[0].onclick = function(){ pular_btn_onclick_cf()}
btns[0].classList.toggle("bt_desativado_cf");
btns[1].onclick = function(){corrigir_btn_onclick_cf();}
btns[1].classList.toggle("bt_desativado_cf");
}, 3000);
} else if(questoes_cf.length == 0 && erradas_cf.length == 0){
//fim do jogo
clearTimeout(tempo);
let msg;
const fim = document.getElementById("fim_cf");
if(jogadores_cf[0].pontos == jogadores_cf[1].pontos){
msg = "Fim de jogo! "+jogadores_cf[0].nome+" e "+jogadores_cf[1].nome+" <span style='color: yellow; font-weight: bold; text-shadow: 1px 1px black;'> empataram!</span>";
} else if(jogadores_cf[0].pontos > jogadores_cf[1].pontos){
msg = "Fim de jogo! "+jogadores_cf[0].nome+" <span style='color: green; font-weight: bold; text-shadow: 1px 1px black;'> ganhou!</span>";
} else {
msg = "Fim de jogo! "+jogadores_cf[1].nome+" <span style='color: green; font-weight: bold; text-shadow: 1px 1px black;'> ganhou!</span>";
}
verso.style.cssText = "display: flex; justify-content: center; align-items: center; flex-direction: row; gap: 10px";
verso.innerHTML = msg;
setTimeout(() => {
som_ativado_cf? fim.play(): null;
}, 700);
} else {
i_cf >= questoes_cf.length-1? i_cf = 0 : i_cf++;
setTimeout(() => {
const card_conteudo = montar_pergunta_cf();
mostrar_card_cf(card_conteudo[0].innerHTML, card_conteudo[1].innerHTML, "depois");
MathJax.typesetClear();
MathJax.typeset();
btns[0].onclick = function(){ pular_btn_onclick_cf()}
btns[0].classList.toggle("bt_desativado_cf");
btns[1].onclick = function(){corrigir_btn_onclick_cf();}
btns[1].classList.toggle("bt_desativado_cf");
}, 3000);
}
setTimeout(() => {
som_ativado_cf? acerto.play(): null;
}, 700);
} else {//ERRO
div.innerHTML = `<span style="color: red; font-weight: bold; text-shadow: 1px 1px black;">ERRADO! </span> ${jogador.nome}.`;
jogadores_cf[vez_cf].pontos--;
pontos_el[vez_cf].textContent = jogadores_cf[vez_cf].pontos;
verso.appendChild(div);
erradas_cf.push(questoes_cf[i_cf]);
questoes_cf.splice(i_cf, 1);
if(questoes_cf.length == 0){
questoes_cf = erradas_cf.slice();
erradas_cf = [];
i_cf = 0;
} else {
i_cf >= questoes_cf.length-1? i_cf = 0 : i_cf++;
}
setTimeout(() => {
som_ativado_cf? erro.play(): null;
}, 700);
setTimeout(() => {
const card_conteudo = montar_pergunta_cf();
mostrar_card_cf(card_conteudo[0].innerHTML, card_conteudo[1].innerHTML, "depois");
MathJax.typesetClear();
MathJax.typeset();
btns[0].onclick = function(){ pular_btn_onclick_cf()}
btns[0].classList.toggle("bt_desativado_cf");
btns[1].onclick = function(){corrigir_btn_onclick_cf();}
btns[1].classList.toggle("bt_desativado_cf");
gerenciar_vez_visual_cf();
}, 3000);
} //Fim if se acertou ou errou
vez_cf == 0? vez_cf = 1 : vez_cf = 0;
}
function falar_cf(){
const card = document.querySelector('.card_papel_cf');
const frente = document.querySelector('.frente_cf');
const verso = document.querySelector('.verso_cf');
let texto;
card.classList.contains("virado_cf")? texto = verso.innerText: texto = frente.innerText
// Verifica se a API de fala está disponível no navegador
if ('speechSynthesis' in window) {
let fala = new SpeechSynthesisUtterance(texto); console.log(texto)
window.speechSynthesis.speak(fala);
} else {
console.log('API de fala não suportada neste navegador.');
}
}
function virar_card_cf(){
const card = document.querySelector('.card_papel_cf');
card.classList.toggle('virado_cf');
}
function deslizandoParaEsquerda_cf(){
const card = document.querySelectorAll('.card_papel_cf');
const passar = document.getElementById("passar_cf");
som_ativado_cf? passar.play(): null;
for(i = 0; i < card.length; i++){
card[i].classList.toggle('deslizarParaEsquerda_cf');
}
}
function deslizandoParaDireita_cf(){
const card = document.querySelectorAll('.card_papel_cf');
const passar = document.getElementById("passar_cf");
som_ativado_cf? passar.play(): null;
for(i = 0; i < card.length; i++){
card[i].classList.toggle('deslizarParaDireita_cf');
}
}
function mostrar_card_cf(conteudo_frente, conteudo_verso, ordem){
const card_certos = corretas_cf.length + 1;
const total_cards = questoes_cf.length+corretas_cf.length+erradas_cf.length;
const numeros_cards = card_certos +"/"+ total_cards;
const el_numeros_cards = document.querySelector(".qtde_cards_cf");
let indice_cor = Math.floor(Math.random() * cores_overlay_cf.length);
cores_overlay_cf[indice_cor] == ultima_cor_overlay_cf? indice_cor++: null;
indice_cor >= cores_overlay_cf.length? indice_cor = 0: null;
const cor = cores_overlay_cf[indice_cor];
ultima_cor_overlay_cf = cor;
const trilha = document.querySelector(".trilha_dos_cards_cf");
const card_papel = document.createElement("div");
card_papel.classList.add("card_papel_cf");
const card_interior = document.createElement("div");
card_interior.classList.add("card_interior_cf");
const container_linhas = document.createElement("div");
container_linhas.classList.add("container_linhas_cf");
const primeira_linha = document.createElement("div");
primeira_linha.classList.add("linha_cf");
primeira_linha.classList.add("primeira-linha_cf");
container_linhas.appendChild(primeira_linha);
for(i = 0; i < 9; i++){
const linha = document.createElement("div");
linha.classList.add("linha_cf");
container_linhas.appendChild(linha);
}
const overlay = document.createElement("div");
overlay.classList.add("papel_overlay_cf");
overlay.style.backgroundColor = cor;
container_linhas.appendChild(overlay);
const frente = document.createElement("div");
frente.classList.add("frente_cf");
const verso = document.createElement("div");
verso.classList.add("verso_cf");
card_interior.appendChild(container_linhas);
card_interior.appendChild(frente);
card_interior.appendChild(verso);
card_papel.appendChild(card_interior);
conteudo_frente? frente.innerHTML = conteudo_frente: null;
conteudo_verso? verso.innerHTML = conteudo_verso: null;
if(ordem == "antes"){
trilha.prepend(card_papel);
deslizandoParaDireita_cf();
el_numeros_cards.textContent = numeros_cards;
setTimeout(() => {
const arr = document.querySelectorAll(".card_papel_cf");
const index = arr.length - 1;
arr[index].remove();
deslizandoParaDireita_cf();
}, 600); //ATENCAO o tempo tem que ser um pouco menor do que o da animacao de deslizar os cards
} else if (ordem == "depois") {
trilha.appendChild(card_papel);
deslizandoParaEsquerda_cf();
el_numeros_cards.textContent = numeros_cards;
setTimeout(() => {
const arr = document.querySelectorAll(".card_papel_cf");
arr[0].remove();
deslizandoParaEsquerda_cf();
}, 600); //ATENCAO o tempo tem que ser um pouco menor do que o da animacao de deslizar os cards
} else {
trilha.prepend(card_papel);
}
}
function gerenciar_vez_visual_cf(){//só gerencia a parte visual para os jogadores saberem de quem é a vez
const placar = document.querySelectorAll('.placar_cf');
const limpar = vez_cf == 1? 0: 1;
placar[vez_cf].style.borderBottom = "2px solid rgb(255, 51, 90)";
placar[limpar].style.borderBottom = "none";
}
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
/********************************************* FIM Jogo Card das Frações *******************************************/
Reference in New Issue View Git Blame Copy Permalink