2

Tenho uma página que possui um formulário e uma imagem. Este formulário é composto por 3 botões que acessam "dicas", um campo para resposta, e botão para "Verificar Resposta" e "Próxima Pergunta", e um campo "Pontuação".

Bom, ao clicar nas dicas ele mostra corretamente, e também a função de verificar a resposta está OK. Porém isto só ocorre uma vez e para responder outra questão é necessário então atualizar a página (este é o meu problema).

Preciso que ao clicar em próxima pergunta o seja atualizada a imagem (volte para a original) e o formulário, de modo que o usuário possa novamente selecionar dicas e responder.

Tentei de duas maneiras:

  1. Atualizar as divs com uma função Javascript, mas neste caso volta "visivelmente" ao normal, porém ao clicar nos botões ele não chama mais as funções.
  2. Atualizar o formulário, porém assim não tem como verificar a resposta em Ajax que é enviada e a figura também não muda.

Códigos Javascript:

<script>

function loadXMLDoc(dicaSel)
{
//busca a mostra a dica
}

//função para verificar a resposta do usuário
function verificarResposta(){
//verifica a resposta 
}

function atualizarPontuacao(resultado){
//Atualiza a pontuação

}

//ir para a próxima questão sem atualizar a página (Não funciona)
function atualizarQuestao(){
    //Atualizar imagem
    var image = document.getElementById('myImage');
    image.src = "img/imagem1.jpg";
    //Atualizar dica 1
    document.getElementById("dica1").innerHTML="<label>Clique no botão para visualizar esta dica</label>";
    //Atualizar dica 2
    document.getElementById("dica2").innerHTML="<label>Clique no botão para visualizar esta dica</label>";
    //Atualizar dica 3
    document.getElementById("dica3").innerHTML="<label>Clique no botão para visualizar esta dica</label>";
    //Atualizar resposta
    //document.getElementById("divResposta").innerHTML="Resposta: <input type="text" size="30"  name="chute"/><";
}

function changeImage() {
//Muda a imagem
}

</script>

Trecho do HTML:

<div class="col-md-6">
  <center>
    <img id="myImage" class="img-responsive img-border-left" src="img/imagem1.jpg" alt="" width="220px" height="220px">
  </center>
  <!--<center><img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180"></center>-->
</div>
<div class="col-md-6">
  <form name="form" onsubmit="verificarResposta()" method="post" action="#">
    <table>
      <div id="divDaDica1">
        <tr>
          <td>
            <input onclick="loadXMLDoc('dica1')" type="button" value="Dica 1" onmouseover="style.color = '#FF0000'" onmouseout="style.color = ''" />&nbsp;&nbsp;
          </td>
          <td>
            <div id="dica1">
              <label>Clique no botão para visualizar esta dica</label>
            </div>
          </td>
        </tr>

      </div>
      <div id="divDaDica2">
        <tr>
          <td>
            <input onclick="loadXMLDoc('dica2')" type="button" value="Dica 2" onmouseover="style.color = '#FF0000'" onmouseout="style.color = ''" />&nbsp;&nbsp;
          </td>
          <td>
            <div id="dica2">
              <label>Clique no botão para visualizar esta dica</label>
            </div>
          </td>
        </tr>

      </div>
      <div id="divDaDica3">
        <tr>
          <td>
            <input onclick="loadXMLDoc('dica3')" type="button" value="Dica 3" onmouseover="style.color = '#FF0000'" onmouseout="style.color = ''" />&nbsp;&nbsp;
          </td>
          <td>
            <div id="dica3">
              <label>Clique no botão para visualizar esta dica</label>
            </div>
          </td>
        </tr>

      </div>
    </table>

A questão é: enviar o formulário sem atualizar a página!

<div id="divResposta">Resposta:
  <input type="text" size="30" name="chute" />
</div>
</br>
</br>
<input onclick="verificarResposta()" type="button" name="arriscar" value="Arriscar!" onmouseover="style.color = '#FF0000'" onmouseout="style.color = ''" />&nbsp;&nbsp;
<input type="button" value="Desistir!" onmouseover="style.color = '#FF0000'" onclick="alert('O número que eu escolhi foi: ' + numeroSecreto + '. Pena que você desistiu! Tente novamente, eu vou pensar em outro número, OK?'); Pensar()" />
<div id="divPontuacao">
  <align="right">Pontuação:
    <input type="text" size="10" name="pontuação" placeholder="100" readonly="readonly" />
</div>
</br>
</br>
  </align>
<input type="button" onclick="atualizarQuestao()" value="Próxima Questão">
</form>

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .