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 *******************************************/