2
I have a page that has a form and an image. This form consists of 3 buttons that access "hints", a field for response, and button for "Check Answer" and "Next Question", and a field "Score".
Well, by clicking on the tips it shows correctly, and also the function of checking the answer is OK. But this only occurs once and to answer another question is then necessary to refresh the page (this is my problem).
I need to update the image when clicking on the next question (go back to the original) and the form, so that the user can again select hints and reply.
I tried two ways:
- Update the Divs with a Javascript function, but in this case it "visibly" returns to normal, but when clicking the buttons it no longer calls the functions.
- Update the form, but so you can’t check the answer in Ajax that is sent and the figure also does not change.
Javascript codes:
<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>
Excerpt from the 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 = ''" />
</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 = ''" />
</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 = ''" />
</td>
<td>
<div id="dica3">
<label>Clique no botão para visualizar esta dica</label>
</div>
</td>
</tr>
</div>
</table>
The question is: send the form without updating the page!
<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 = ''" />
<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>