[Bug] Problemas com as dicas e responsiveVoice

Olá, Paula!

Primeiramente gostaria de dizer que a sua ideia é muito legal, e parabéns pela iniciativa.

Você está enfrentando dois problemas principais, certo? As dicas não estão sendo exibidas corretamente e a janela de ativação do áudio para uso da função responsiveVoice não está sendo habilitada.

Vamos por partes. Primeiro, sobre as dicas, o problema parece estar na comparação que você está fazendo para determinar se o livro vem antes ou depois do chute. O método localeCompare que você está usando retorna um número que indica se a string vem antes, depois ou é a mesma que a string de comparação. No entanto, ele considera a ordem alfabética, e não a ordem dos livros na Bíblia. Para resolver isso, você pode usar o método indexOf para obter a posição do livro na lista e comparar essas posições. Veja como ficaria:

let posicaoChute = listaDeLivrosDaBiblia.indexOf(chute);
let posicaoPalavraSorteada = listaDeLivrosDaBiblia.indexOf(palavraSorteada);

if (posicaoChute > posicaoPalavraSorteada) {
    exibirTextoNaTela('p', 'O livro da Bíblia vem antes de seu chute');
} else {
    exibirTextoNaTela('p', 'O livro da Bíblia vem depois de seu chute');
}

Agora, sobre a função responsiveVoice, você precisa ter certeza de que o script do responsiveVoice está sendo carregado corretamente em sua página.

Como não tenho seu projeto por completo em mãos tive alguma dificuldades em algumas partes, que ficam em outros scripts por exemplo, sendo assim se o erro continuar, por favor, compartilhe o link do seu projeto no GitHub ou uma pasta com todos os arquivos que você usou através do Google Drive. Isso me permitirá fazer os testes necessários e ajudá-lo de maneira mais eficaz.

Lembre-se que, se enviar os arquivos por meio do Google Drive, é necessário conceder permissão para que eu possa ter acesso.

Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Olá Victor, boa noite!

Tudo bem? Muito obrigada pelo elogio e incentivo! Na verdade acho que descobri o que está acontecendo com as comparações, embora não saiba o que fazer para responder. Inseri as correções que você me orientou, mas mesmo assim as dicas ou informações de acertos com tantas tentativas não aparecem. Na verdade, o que acho que está ocorrendo é que, o texto inserido no campo chute é apagado logo após ser digitado... Ou seja, ao clicar no botão chute, não há nada a ser comparado pois o campo está limpo ou então apenas com uma letra inserida... VoDescukpe, mas não estou conseguindo subir os arquivos para o GitHub, mas vou enviar os blocos de códigos aqui abaixo, não sei se vai ficar confuso, mas acredito que possa ajudar...

//declaração das variáveis
    let listaDeLivrosDaBiblia = ['Gênesis', 'Êxodo', 'Levítico', 'Números', 'Deuteronômio', 'Josué', 'Juízes', 'Rute', '1 Samuel', '2 Samuel', '1 Reis', '2 Reis', '1 Crônicas', '2 Crônicas', 'Esdras', 'Neemias', 'Ester', 'Jó', 'Salmos', 'Provérbios', 'Eclesiastes', 'Cantares de Salomão', 'Isaías', 'Jeremias', 'Lamentações', 'Ezequiel', 'Daniel', 'Oséias', 'Joel', 'Amós', 'Obadias', 'Jonas', 'Miquéias', 'Naum', 'Habacuque', 'Sofonias', 'Ageu', 'Zacarias', 'Malaquias', 'Mateus', 'Marcos', 'Lucas', 'João', 'Atos dos Apóstolos', 'Romanos', '1 Coríntios', '2 Coríntios', 'Gálatas', 'Efésios', 'Filipenses', 'Colossenses', '1 Tessalonicenses', '2 Tessalonicenses', '1 Timóteo', '2 Timóteo', 'Tito', 'Filêmon', 'Hebreus', 'Tiago', '1 Pedro', '2 Pedro', '1 João', '2 João', '3 João', 'Judas', 'Apocalipse'];
let palavraSorteada = listaDeLivrosDaBiblia[Math.floor(Math.random() * listaDeLivrosDaBiblia.length)];
let tentativas = 1;
let chutesDoUsuario = [];

function exibirTextoNaTela(tag, texto) {
    let campo  = document.querySelector(tag);
    campo.innerHTML = texto;
responsiveVoice.speak(texto, 'Brazilian Portuguese Male', {rate: 1.5});
}

function exibirMensagemInicial() {
    exibirTextoNaTela('h1', 'Jogo do livro da Bíblia');
    exibirTextoNaTela('p', 'Escolha um entre os 66 livros da Bíblia');
}

exibirMensagemInicial();

function verificarChute() {
let chute = document.querySelector('input').value;
chutesDoUsuario.push(chute); //adiciona o chute do usuário ao array de chutes

if (chute ===  palavraSorteada) {
    exibirTextoNaTela('h1', 'Acertou!');
    let palavraTentativa = tentativas > 1 ? 'tentativas' : 'tentativa';
    let mensagemTentativas = `Você descobriu o livro da Bíblia com ${tentativas} ${palavraTentativa}`;
exibirTextoNaTela('p', mensagemTentativas);
document.getElementById('reiniciar').removeAttribute('disabled');
} else {
    let posicaoChute = listaDeLivrosDaBiblia.indexOf(chute);
    let posicaoPalavraSorteada = listaDeLivrosDaBiblia.indexOf(palavraSorteada);
    
    if (posicaoChute > posicaoPalavraSorteada) {
        exibirTextoNaTela('p', 'O livro da Bíblia vem antes de seu chute');
    } else {
        exibirTextoNaTela('p', 'O livro da Bíblia vem depois de seu chute');
    }
    tentativas++;
}
}

function gerarLivroAleatorio() {
    palavraSorteada = listaDeLivrosDaBiblia[Math.floor(Math.random() * listaDeLivrosDaBiblia.length)]
}
    
function limparCampo() {
    let campo = document.querySelector('input');
    campo.value = '';
}

function reiniciarJogo() {
    gerarLivroAleatorio();
    limparCampo();
    tentativas = 1;
    exibirMensagemInicial();
    document.getElementById('reiniciar').setAttribute('disabled', true);
    }

<div class="container">
    <div class="container__conteudo">
        <div class="container__informacoes">
            <div class="container__texto">
                <h1>Adivinhe o <span class="container__texto-azul">livro da Bíblia</span></h1>
                <p class="texto__paragrafo">Escolha um entre os 66 livros da Bíblia</p>
            </div>
            <input type="number" min="1" max="66" class="container__input">
            <div class="chute container__botoes">
                <button onclick="verificarChute()" class="container__botao">Chutar</button>
                <button onclick="reiniciarJogo()" id="reiniciar" class="container__botao" disabled>Novo jogo</button>
            </div>
        </div>
        <img src="./img/ia.png" alt="Uma pessoa olhando para a esquerda" class="container__imagem-pessoa" />
    </div>
</div>




<script src="app.js" defer></script>

<div class="container">
    <div class="container__conteudo">
        <div class="container__informacoes">
            <div class="container__texto">
                <h1>Adivinhe o <span class="container__texto-azul">livro da Bíblia</span></h1>
                <p class="texto__paragrafo">Escolha um entre os 66 livros da Bíblia</p>
            </div>
            <input type="number" min="1" max="66" class="container__input">
            <div class="chute container__botoes">
                <button onclick="verificarChute()" class="container__botao">Chutar</button>
                <button onclick="reiniciarJogo()" id="reiniciar" class="container__botao" disabled>Novo jogo</button>
            </div>
        </div>
        <img src="./img/ia.png" alt="Uma pessoa olhando para a esquerda" class="container__imagem-pessoa" />
    </div>
</div>




<script src="app.js" defer></script>

Olá Paula!

Peço perdão pela demora em obter um retorno, estava de férias e só consegui retornar ao atendimento recentemente.

Nesse caso o que pode ser feito é mudar a lógica do seu que código que verificar o chute, novamente:

function verificarChute() {
    let chute = document.querySelector('input').value;
    chutesDoUsuario.push(chute); 

    if (chute === palavraSorteada) {
        exibirTextoNaTela('h1', 'Acertou!');
        let palavraTentativa = tentativas > 1 ? 'tentativas' : 'tentativa';
        let mensagemTentativas = `Você descobriu o livro da Bíblia com ${tentativas} ${palavraTentativa}`;
        exibirTextoNaTela('p', mensagemTentativas);
        document.getElementById('reiniciar').removeAttribute('disabled');
    } else {
        let posicaoChute = listaDeLivrosDaBiblia.indexOf(chute);
        let posicaoPalavraSorteada = listaDeLivrosDaBiblia.indexOf(palavraSorteada);

        if (posicaoChute === -1) {
            exibirTextoNaTela('p', 'Por favor, escolha um livro válido da Bíblia.');
        } else if (posicaoChute > posicaoPalavraSorteada) {
            exibirTextoNaTela('p', 'O livro da Bíblia vem antes do seu chute.');
        } else {
            exibirTextoNaTela('p', 'O livro da Bíblia vem depois do seu chute.');
        }
        tentativas++;
    }
}

Mas de toda forma com o código que você elaborou e compartilhou, tive algumas dificuldades para realizar os testes devido às diferenças entre o seu projeto e alguns detalhes do curso, como a organização dos arquivos JS, sendo assim a minha proposta pode não ser assertiva para o seu caso. Acredito que você possa ter feito alguns avanços desde então, e minhas soluções propostas podem não ser tão necessárias agora. Por isso, peço o seu projeto completo, pois ele requer testes e, sendo diferente do apresentado em aula, não consigo testá-lo completamente. Por favor, envie-me o link do Github ou o link do Google Drive. Estou comprometido em ajudá-lo a concluir este projeto, que é muito interessante e tem um propósito louvável.

Nesse tópico, caso queira compartilhar via Google Drive, eu deixei os passos para o aluno que podem ajudá-la também.

Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!