Boa tarde
Tenho um problema em javascript que acredito que seja bem simples de resolver mas como sempre eu não faço a mínima ideia de como solucionar.
Então eu fiz um programinha básico, que verifica se as pronúncias das letras do alfabelto inglês estão corretas, o usuário digita o fonema num campo input e o programa verifica se está certo.
O problema é o seguinte : quando eu digito por exemplo o fonema da palavra A em inglês( ei) e dou um espaço no campo de texto , e depois aperto o botão para verifica se a pronuncia está certa o programa emiti um erro.
É como se o programa pegasse um espaço vazio do input, junto com o fonema ei, compreendes?, não sei se fui claro mas espero que alguém me entenda.
Meu código fonte :
Qual é a letra? <style>
body{
background-image:url("imagens/inglês.png");
}
h1{
text-align:center;
color:#0000ff;
background-color:#11ffff;
border-radius:15px;
margin-left:350px;
margin-right:350px;
}
h2{
text-align:center;
color:#ff0000;
background-color:#11ffff;
border-radius:15px;
margin-left:430px;
margin-right:430px;
}
p{
text-align:center;
cursor:default;
color:#00ff00;
}
input[type=text]:hover{
color:gray;
}
#tela{
border:solid 3px;
background-color:gray;
padding:100px;
padding-right:100px;
margin-left:250px;
margin-right:250px;
font-size:100px;
font-family:verdana;
color:blue;
cursor:default;
text-align:center;
}
#certo{
border:solid 1px;
border-radius:30px;
background-color:#ffffff;
padding:10px;
margin-left:900px;
margin-top:-250px;
text-align:center;
}
#errado{
border:solid 1px;
border-radius:30px;
background-color:#ffffff;
padding:10px;
margin-left:900px;
text-align:center;
}
#bt1{
padding:10px 28px;
cursor:pointer;
margin-top:50px;
margin-left:440px;
font-size:20px;
}
#bt1:hover{
background-color:#00BFFF;
color:#ffffff;
}
#resposta{
margin-top:50px;
margin-left:430px;
padding:10px;
}
</style>
</head>
<body onload="inserir()">
<h1> Qual é a letra?</h1>
<h2>Em inglês</h2>
<div id="tela">
</div><br>
<div id="certo">
Certo
</div><br><br>
<div id="errado">
Errado
</div><br><br><br>
<p id="texto">Digite a pronúncia da letra em inglês</p>
<input id="resposta" type="text" size="15" placeholder="Digite aqui"><br><br>
<button type="button" id="bt1">OK</button>
<script>
var cont = 0;//Serve para indicar a posição do vetor letras na função inserir
var controle = 0;//Serve para indicar a posição do vetor pronun
var certo = 0;//Serve para contabilizar os acertos do usuário, será usada também para calcular sua porcentagem
document.getElementById("bt1").addEventListener("click",teste);
//Função que insere as letras na tela //
function inserir(){
var letras = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
document.getElementById("tela").innerHTML = letras[cont];
cont++;
if(cont>25){
cont = 0;
}
}
//Função principal,verifica se as respostas do usuário estão corretas//
function teste(){
var pronun = ["ei","bí","cí","dí","i","éf","djí","eitch","ai","jei","kêi","él","em","en","ou","pí","quíu","ar","éss","tí","iu","ví","dâbliu","écs","uai","zí"];
var resposta = document.getElementById('resposta').value;//Recebe o valor digitado pelo usuário na caixa de texto
resposta = resposta.toLowerCase();
inserir();
if(resposta == pronun[controle]){
document.getElementById('certo').style.backgroundColor = "#00ff00";
setTimeout(branco,1000);
controle++;
certo++;
}
else{
document.getElementById('errado').style.backgroundColor = "#ff0000";
setTimeout(branco2,1000);
controle++;
}
if(controle>25){
controle = 0;
performance();
}
}
//Função que serve para deixar a tela de resposta certa branca denovo.
function branco(){
document.getElementById('certo').style.backgroundColor = "#ffffff";
}
//Função que serve para deixar a tela de resposta errada branca denovo.
function branco2(){
document.getElementById('errado').style.backgroundColor = "#ffffff";
}
//Retorna a performace do usuário no exercícico
function performance(){
var resultado = parseInt((certo/26)*100);//calcula a porcentagem de acertos
document.getElementById("tela").innerHTML = resultado+"%";
if(resultado == 100){
document.getElementById("texto").innerHTML = "Parabéns você acertou tudo";
document.getElementById("tela").style.color = "#00ff00";
document.getElementById("tela").style.border = "solid #0000ff";
}
else if((resultado<100)&&(resultado>=70)){
document.getElementById("texto").innerHTML = "Muito bom, está quase lá";
document.getElementById("tela").style.color = "#00ff00";
document.getElementById("tela").style.border = "solid #0000ff";
}
else if((resultado<70)&&(resultado>=30)){
document.getElementById("texto").innerHTML = "Regular, precisa estudar mais";
document.getElementById("tela").style.color = "#FF8C00";
document.getElementById("tela").style.border = "solid #0000ff";
}
else if((resultado<30)&&(resultado>0)){
document.getElementById("texto").innerHTML = "Ruim,se esforçe mais um pouco";
document.getElementById("tela").style.color = "#ff0000";
document.getElementById("tela").style.border = "solid #0000ff";
}
else{
document.getElementById("texto").innerHTML = "Péssimo,mas não desista e estude mais";
document.getElementById("tela").style.color = "#ff0000";
document.getElementById("tela").style.border = "solid #0000ff";
}
document.getElementById("bt1").removeEventListener("click",teste);//Remover o evento de click do botão.
setTimeout(TentarDenovo,3000);
}
//Essa função verifica se o usuário quer tentar mais uma vez, se sim reinicia o programa se não termina ele.
function TentarDenovo(){
var escolha = confirm("Deseja jogar outra vez?");
if(escolha == true){
/*Quando a função teste termina e chama performance, a função inserir também é chamada pela teste coloca a letra A na tela
*mas rápidamente esse valor é substituído pela porcentagem do usuário aplicado pela função performance
*então quando o programa é reiniciado,ele já inicia na letra B pois o A já tinha sido inserido e foi substituido pela
*porcentagem então para resolver isso eu zerei o valor da variavél cont nesse bloco de instruções.
*/
cont = 0;
certo = 0;
document.getElementById("tela").style.color = "#0000ff";
inserir();
document.getElementById("bt1").addEventListener("click",teste);
document.getElementById("texto").innerHTML = "Digite a pronúncia da letra em inglês";
}
else{
alert("Obrigado!");
document.getElementById("tela").innerHTML = "(:";
}
}
</script>
</body>