Mostrar Valor De Radio Em Menu Flutuante
#1
Posted 21/03/2008, 16:04
Tenho um sistema de prova eletronica em que monto uma prova para um aluno com varias questões isso num while usando php + mysql e em cada questão tem cinco alternativas (Todas em Radio button) e o que eu quero apliar é o seguinte:
1 Quero mostrar num menu flutuante para cada questão qual foi a alternativa que o usuário selecionou.
ex..
Questão Resposta
1 => a
2 => b
3 =>
4 => a
5 => a
6 =>
7 => a
8 => b
9 => d
10 => e
e por ai vai.
Digo menu flutuante por causa de o usuário baixar a barra de rolagem ele sempre será visivél.
Como eu poderia fazer isso ? Pegar os valores selecionados do meu form e mostrar no menu flutuante na mesma pagina ?
Desde já agradeço a todos.
#2
Posted 23/03/2008, 11:38
#resposta { POSITION: fixed; BOTTOM: 30px; LEFT: 0px; } * html #resposta /* corrige no IE */ { POSITION: absolute; BOTTOM: expression(offsetParent.scrollTop +30); LEFT: expression(offsetParent.scrollLeft); }
Em função de problemas de funcionamento no IE, se faz necessária aquela regrinha a mais. Basicamente é trabalhar com POSITION. No exemplo, a Div sempre ficará com 30px de distância do fundo (bottom), que no caso é a barra de status dos navegadores, a parte inferior.
O lance de mostrar em tempo real na mesma página as opções marcadas, tu te utiliza de Javascript. Fiz algo basicão aqui pra ti mostrar. Para fazer com todos os campos do form, a lógica é a mesma, só vais ter que utilizar um laço For para pegar todos os campos, e ir somando dentro de uma variável os valores que estão marcados.
Exemplo com um campo (acrescenta o código que eu postei acima dentro de um <style></style> e salva na mesma página deste abaixo se tu quiser testar):
<script> function retorno(x) { document.getElementById('resposta').style.display = 'block'; document.getElementById('resposta').innerHTML = 'Resposta selecionada: ' + x; } </script> <form name="resposta_form"> Resposta:<br/><br/> <input type="radio" name="opcao" value="1" OnClick="retorno(this.value);" /> 1 <input type="radio" name="opcao" value="2" OnClick="retorno(this.value);" /> 2 <input type="radio" name="opcao" value="3" OnClick="retorno(this.value);" /> 3 <input type="radio" name="opcao" value="4" OnClick="retorno(this.value);" /> 4 </form> <div id="resposta" style="display:none;padding:20px;width:300px;border:1px solid #000;"></div>
A div fica oculta enquanto não tiver nenhum dado selecionado. Quando algum radio for marcado, ela muda seu display para block, tornando-se visível.
Procura entender o funcionamento que tu consegue desenvolver.
Qualquer dúvida nas etapas do desenvolvimento, só postar novamente.
Abraços
Edição feita por: Firehalk, 23/03/2008, 11:40.
// Links úteis: Busca || Regras
// Não respondo dúvidas via mensagem privada. Use o fórum para buscar ou perguntar.
#3
Posted 24/03/2008, 10:53
Para o menu flutuante, isso se faz com CSS. Um exemplo de menu flutuante:
#resposta { POSITION: fixed; BOTTOM: 30px; LEFT: 0px; } * html #resposta /* corrige no IE */ { POSITION: absolute; BOTTOM: expression(offsetParent.scrollTop +30); LEFT: expression(offsetParent.scrollLeft); }
Em função de problemas de funcionamento no IE, se faz necessária aquela regrinha a mais. Basicamente é trabalhar com POSITION. No exemplo, a Div sempre ficará com 30px de distância do fundo (bottom), que no caso é a barra de status dos navegadores, a parte inferior.
O lance de mostrar em tempo real na mesma página as opções marcadas, tu te utiliza de Javascript. Fiz algo basicão aqui pra ti mostrar. Para fazer com todos os campos do form, a lógica é a mesma, só vais ter que utilizar um laço For para pegar todos os campos, e ir somando dentro de uma variável os valores que estão marcados.
Exemplo com um campo (acrescenta o código que eu postei acima dentro de um <style></style> e salva na mesma página deste abaixo se tu quiser testar):<script> function retorno(x) { document.getElementById('resposta').style.display = 'block'; document.getElementById('resposta').innerHTML = 'Resposta selecionada: ' + x; } </script> <form name="resposta_form"> Resposta:<br/><br/> <input type="radio" name="opcao" value="1" OnClick="retorno(this.value);" /> 1 <input type="radio" name="opcao" value="2" OnClick="retorno(this.value);" /> 2 <input type="radio" name="opcao" value="3" OnClick="retorno(this.value);" /> 3 <input type="radio" name="opcao" value="4" OnClick="retorno(this.value);" /> 4 </form> <div id="resposta" style="display:none;padding:20px;width:300px;border:1px solid #000;"></div>
A div fica oculta enquanto não tiver nenhum dado selecionado. Quando algum radio for marcado, ela muda seu display para block, tornando-se visível.
Procura entender o funcionamento que tu consegue desenvolver.
Qualquer dúvida nas etapas do desenvolvimento, só postar novamente.
Abraços
Primeiramente Firehalk muito obrigado pela ajuda, porém fiz umas mudanças aqui e vo postar pra vc verificar e se possivél me ajudar a concluir isso.
Fiz um For pra testar com blocos de radio, agora minha bronca é mostrar a resposta do bloco em um menu apenas e não como está cada bloco respondido a resposta da div em um bloco separado pq coloquei a div no loop também.
Tem como vc me ajudar mostrar tudo jutinho ? um abaixo do outro e do lado direito.
Abraços
<form name="resposta_form">
Resposta:<br/><br/>
<?
for ($i=1; $i<=10; $i++){
?>
<script>
function retorno<?=$i?>(x) {
document.getElementById('resposta<?=$i?>').style.display = 'block';
document.getElementById('resposta<?=$i?>').innerHTML = x;
}
</script>
<input type="hidden" name="questao<?=$i?>" value="<?=$i?>">
<?echo $i." Item."; ?><br/><br/>
<input type="radio" name="opcao<?=$i?>" value="<?=$i?> => a" OnClick="retorno<?=$i?>(this.value);" /> a<br>
<input type="radio" name="opcao<?=$i?>" value="<?=$i?> => b" OnClick="retorno<?=$i?>(this.value);" /> b<br>
<input type="radio" name="opcao<?=$i?>" value="<?=$i?> => c" OnClick="retorno<?=$i?>(this.value);" /> c<br>
<input type="radio" name="opcao<?=$i?>" value="<?=$i?> => d" OnClick="retorno<?=$i?>(this.value);" /> d<br>
<br>
<div id="resposta<?=$i?>" style="display:none;padding:10px;width:150px;border:1px solid #000;"></div>
<?
}
?>
</form>
#4
Posted 24/03/2008, 12:31
O intuito é ajudar, e as dúvidas vão sendo esclarecidas aos poucos. Qualquer usuário pode chegar em outro fórum, ganhar a resposta pronta e dizer que é melhor que esse reduto aqui, mas aí eu pergunto: do que adianta? Vai passar a vida perguntando quando tiver que fazer algo? Melhor aprender então, e fazer com suas próprias mãos. (não é nenhuma crítica à ti! foi apenas um preâmbulo mesmo )
Enfim, para te ajudar vou postar um exemplo que fiz baseado no que tu quer. Quando eu disse For, me referia a um for no javascript e não no PHP. Não precisa colocar a função dentro do laço for do php. A função em javascript tu deixa uma só.
Segue:
[codebox]<style>
#resposta
{
POSITION: fixed;
BOTTOM: 30px;
LEFT: 0px;
}
* html #resposta /* corrige no IE */
{
POSITION: absolute;
BOTTOM: expression(offsetParent.scrollTop +30);
LEFT: expression(offsetParent.scrollLeft);
}
</style>
<script>
function retorno(x) {
var numero_questoes = 4; //Numero de questoes
var contador = 0;
var armazenar = "";
var form = document.forms['resposta_form'];
for (var x=0;x<form.elements.length;x++) {
if (form.elements[x].checked == true) {
contador++;
armazenar += "Questão "+contador+": "+form.elements[x].value+"<br/>";
if (contador == numero_questoes) {
document.getElementById('resposta').style.display = 'block';
document.getElementById('resposta').innerHTML = armazenar;
}
}
}
}
</script>
<form name="resposta_form" onSubmit="alert(armazenar);">
<p>
<span>Questão 1 ->></span>
<input type="radio" name="q1" value="1" OnClick="retorno(this.value);" /> 1
<input type="radio" name="q1" value="2" OnClick="retorno(this.value);" /> 2
<input type="radio" name="q1" value="3" OnClick="retorno(this.value);" /> 3
<input type="radio" name="q1" value="4" OnClick="retorno(this.value);" /> 4
</p>
<p>
<span>Questão 2 ->></span>
<input type="radio" name="q2" value="1" OnClick="retorno(this.value);" /> 1
<input type="radio" name="q2" value="2" OnClick="retorno(this.value);" /> 2
<input type="radio" name="q2" value="3" OnClick="retorno(this.value);" /> 3
<input type="radio" name="q2" value="4" OnClick="retorno(this.value);" /> 4
</p>
<p>
<span>Questão 3 ->></span>
<input type="radio" name="q3" value="1" OnClick="retorno(this.value);" /> 1
<input type="radio" name="q3" value="2" OnClick="retorno(this.value);" /> 2
<input type="radio" name="q3" value="3" OnClick="retorno(this.value);" /> 3
<input type="radio" name="q3" value="4" OnClick="retorno(this.value);" /> 4
</p>
<p>
<span>Questão 4 ->></span>
<input type="radio" name="q4" value="1" OnClick="retorno(this.value);" /> 1
<input type="radio" name="q4" value="2" OnClick="retorno(this.value);" /> 2
<input type="radio" name="q4" value="3" OnClick="retorno(this.value);" /> 3
<input type="radio" name="q4" value="4" OnClick="retorno(this.value);" /> 4
</p>
</form>
<div id="resposta" style="display:none;padding:20px;width:300px;border:1px solid #000;"></div>[/codebox]
Salva ele como .html e dá uma testada. A única coisa que tem que personalizar é a variável "numero_questoes", para o caso de você aumentar. Dá para adaptar legal ele, não tem nada de complexo. Procura dar uma pesquisada no google sobre funções/meios que tu desconhece, e nas tuas dúvidas posso te ajudar aqui.
Abraço
// Links úteis: Busca || Regras
// Não respondo dúvidas via mensagem privada. Use o fórum para buscar ou perguntar.
#5
Posted 24/03/2008, 16:15
Não é praxe do fórum dar "coisas prontas".
O intuito é ajudar, e as dúvidas vão sendo esclarecidas aos poucos. Qualquer usuário pode chegar em outro fórum, ganhar a resposta pronta e dizer que é melhor que esse reduto aqui, mas aí eu pergunto: do que adianta? Vai passar a vida perguntando quando tiver que fazer algo? Melhor aprender então, e fazer com suas próprias mãos. (não é nenhuma crítica à ti! foi apenas um preâmbulo mesmo )
Enfim, para te ajudar vou postar um exemplo que fiz baseado no que tu quer. Quando eu disse For, me referia a um for no javascript e não no PHP. Não precisa colocar a função dentro do laço for do php. A função em javascript tu deixa uma só.
Segue:<style>#resposta{POSITION: fixed;BOTTOM: 30px;LEFT: 0px;}* html #resposta /* corrige no IE */{POSITION: absolute;BOTTOM: expression(offsetParent.scrollTop +30);LEFT: expression(offsetParent.scrollLeft);}</style><script>function retorno(x) {var numero_questoes = 4; //Numero de questoesvar contador = 0;var armazenar = "";var form = document.forms['resposta_form'];for (var x=0;x<form.elements.length;x++) { if (form.elements[x].checked == true) { contador++; armazenar += "Questão "+contador+": "+form.elements[x].value+"<br/>"; if (contador == numero_questoes) { document.getElementById('resposta').style.display = 'block'; document.getElementById('resposta').innerHTML = armazenar; } }}}</script><form name="resposta_form" onSubmit="alert(armazenar);"><p><span>Questão 1 ->></span><input type="radio" name="q1" value="1" OnClick="retorno(this.value);" /> 1<input type="radio" name="q1" value="2" OnClick="retorno(this.value);" /> 2<input type="radio" name="q1" value="3" OnClick="retorno(this.value);" /> 3<input type="radio" name="q1" value="4" OnClick="retorno(this.value);" /> 4</p><p><span>Questão 2 ->></span><input type="radio" name="q2" value="1" OnClick="retorno(this.value);" /> 1<input type="radio" name="q2" value="2" OnClick="retorno(this.value);" /> 2<input type="radio" name="q2" value="3" OnClick="retorno(this.value);" /> 3<input type="radio" name="q2" value="4" OnClick="retorno(this.value);" /> 4</p><p><span>Questão 3 ->></span><input type="radio" name="q3" value="1" OnClick="retorno(this.value);" /> 1<input type="radio" name="q3" value="2" OnClick="retorno(this.value);" /> 2<input type="radio" name="q3" value="3" OnClick="retorno(this.value);" /> 3<input type="radio" name="q3" value="4" OnClick="retorno(this.value);" /> 4</p><p><span>Questão 4 ->></span><input type="radio" name="q4" value="1" OnClick="retorno(this.value);" /> 1<input type="radio" name="q4" value="2" OnClick="retorno(this.value);" /> 2<input type="radio" name="q4" value="3" OnClick="retorno(this.value);" /> 3<input type="radio" name="q4" value="4" OnClick="retorno(this.value);" /> 4</p></form><div id="resposta" style="display:none;padding:20px;width:300px;border:1px solid #000;"></div>
Salva ele como .html e dá uma testada. A única coisa que tem que personalizar é a variável "numero_questoes", para o caso de você aumentar. Dá para adaptar legal ele, não tem nada de complexo. Procura dar uma pesquisada no google sobre funções/meios que tu desconhece, e nas tuas dúvidas posso te ajudar aqui.
Abraço
Firehalk Mas uma vez obrigado.
Mais um pedido e Creio que é o ultimo.
Você colocou o numero de questões para ser utilizada no for. Porém esta rodando tudo perfeitamente mas a informação é exibida penas quando ele marca o ultimo radio no caso che no limite do contador, como seria a visualização de todos as questões logo na inicialização da pagina conforme o numero de questões, mesmo as respostas estando em branco. No caso colocaria na exibição todas as questões e ao clicar mostraria as respostas.
dar essa forcinha ai,
Abraços.
#6
Posted 24/03/2008, 17:22
Além do que tava testando aqui e me apareceu uma bizarrice do FF, ao fazer de outro método.
Se eu conseguir posto aqui depois.
// Links úteis: Busca || Regras
// Não respondo dúvidas via mensagem privada. Use o fórum para buscar ou perguntar.
#7
Posted 25/03/2008, 10:56
Tô meio na corrida aqui, e teria que alterar bastante coisa para deixar aparecendo sempre, e de forma que funcionasse corretamente. (fiz dessa forma porque na hora foi a mais simples que me apareceu, e dá para entender mais facilmente).
Além do que tava testando aqui e me apareceu uma bizarrice do FF, ao fazer de outro método.
Se eu conseguir posto aqui depois.
Ok vou ficar no aguardo,
Abraços.
#8
Posted 27/03/2008, 01:25
html #resposta /* corrige no IE */e dos expression
BOTTOM: expression(offsetParent.scrollTop +30); LEFT: expression(offsetParent.scrollLeft);
nunca vi o expression em CSS o.O como funciona?
/*DarkSign*/
#10
Posted 09/10/2017, 09:28
#11
Posted 24/10/2017, 22:11
Cialis 50 Ans Discovering Amoxil online pharmacy Lisinopril Purchase Online Que Es Cialis Tadalafil Is Alli Back On The Market Yet 2014
Viagra Generico Effetti Collaterali viagra Propecia Price In South Africa
#12
Posted 05/11/2017, 11:49
Cialis Wirkungsdauer viagra Amoxicillin High Dose Cialis Super Active Achat Avis Online Dostinex Fastest Shipping
Venlafaxine 150mg India 20mg levitra india Examples Of Side Effects Of Propecia Viagra Pills For Women Cialis El Pais
#13
Posted 05/11/2017, 12:27
#14
Posted 04/12/2017, 19:40
How Does Tadalis Sx Soft Work cialis Levitra 10mg Orodispersible Bayer Pharmacies Offer Free Amoxicillin
Alimenti Contenenti Dapoxetina viagra Cost Of Viagra Pills
#15
Posted 13/02/2023, 03:49
0 user(s) are reading this topic
0 membro(s), 0 visitante(s) e 0 membros anônimo(s)