I have a page that has a form and an image. This form consists of 3 buttons that access "tips", a field for response, and button for "Check Answer" and "Next Question", and a "Score" field.
Well, clicking on the tips it shows correctly, and also the check function is OK. But this only happens once and to answer another issue then you need to refresh the page ( this is my problem ).
I need to update the image when I click next question (go back to the original) and the form, so that the user can again select tips and respond.
I tried two ways:
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>
HTML snippet:
<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: submit the form without refreshing 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>