Jump to content


Photo

Mostrar Valor De Radio Em Menu Flutuante


  • Faça o login para participar
13 replies to this topic

#1 mmngea

mmngea

    Turista

  • Usuários
  • 35 posts
  • Sexo:Masculino

Posted 21/03/2008, 16:04

Boa Tarde Pessoal,

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 Nicholas Pufal

Nicholas Pufal

    Impossível: só existe até alguém duvidar e provar o contrário.

  • Usuários
  • 1655 posts
  • Sexo:Masculino
  • Localidade:Porto Alegre

Posted 23/03/2008, 11:38

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);" />&nbsp;1
<input type="radio" name="opcao" value="2" OnClick="retorno(this.value);" />&nbsp;2
<input type="radio" name="opcao" value="3" OnClick="retorno(this.value);" />&nbsp;3
<input type="radio" name="opcao" value="4" OnClick="retorno(this.value);" />&nbsp;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.

BLOG Touché Criação - Vamos trocar idéias? -> http://blog.touchecriacao.com.br/
// Links úteis: Busca || Regras
// Não respondo dúvidas via mensagem privada. Use o fórum para buscar ou perguntar.

#3 mmngea

mmngea

    Turista

  • Usuários
  • 35 posts
  • Sexo:Masculino

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):

&lt;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);" />&nbsp;1
<input type="radio" name="opcao" value="2" OnClick="retorno(this.value);" />&nbsp;2
<input type="radio" name="opcao" value="3" OnClick="retorno(this.value);" />&nbsp;3
<input type="radio" name="opcao" value="4" OnClick="retorno(this.value);" />&nbsp;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);" />&nbsp;a<br>
<input type="radio" name="opcao<?=$i?>" value="<?=$i?> => b" OnClick="retorno<?=$i?>(this.value);" />&nbsp;b<br>
<input type="radio" name="opcao<?=$i?>" value="<?=$i?> => c" OnClick="retorno<?=$i?>(this.value);" />&nbsp;c<br>
<input type="radio" name="opcao<?=$i?>" value="<?=$i?> => d" OnClick="retorno<?=$i?>(this.value);" />&nbsp;d<br>
<br>


<div id="resposta<?=$i?>" style="display:none;padding:10px;width:150px;border:1px solid #000;"></div>


<?
}

?>

</form>

#4 Nicholas Pufal

Nicholas Pufal

    Impossível: só existe até alguém duvidar e provar o contrário.

  • Usuários
  • 1655 posts
  • Sexo:Masculino
  • Localidade:Porto Alegre

Posted 24/03/2008, 12:31

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 :P)

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);" />&nbsp;1
<input type="radio" name="q1" value="2" OnClick="retorno(this.value);" />&nbsp;2
<input type="radio" name="q1" value="3" OnClick="retorno(this.value);" />&nbsp;3
<input type="radio" name="q1" value="4" OnClick="retorno(this.value);" />&nbsp;4
</p>

<p>
<span>Questão 2 ->></span>
<input type="radio" name="q2" value="1" OnClick="retorno(this.value);" />&nbsp;1
<input type="radio" name="q2" value="2" OnClick="retorno(this.value);" />&nbsp;2
<input type="radio" name="q2" value="3" OnClick="retorno(this.value);" />&nbsp;3
<input type="radio" name="q2" value="4" OnClick="retorno(this.value);" />&nbsp;4
</p>

<p>
<span>Questão 3 ->></span>
<input type="radio" name="q3" value="1" OnClick="retorno(this.value);" />&nbsp;1
<input type="radio" name="q3" value="2" OnClick="retorno(this.value);" />&nbsp;2
<input type="radio" name="q3" value="3" OnClick="retorno(this.value);" />&nbsp;3
<input type="radio" name="q3" value="4" OnClick="retorno(this.value);" />&nbsp;4
</p>

<p>
<span>Questão 4 ->></span>
<input type="radio" name="q4" value="1" OnClick="retorno(this.value);" />&nbsp;1
<input type="radio" name="q4" value="2" OnClick="retorno(this.value);" />&nbsp;2
<input type="radio" name="q4" value="3" OnClick="retorno(this.value);" />&nbsp;3
<input type="radio" name="q4" value="4" OnClick="retorno(this.value);" />&nbsp;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
BLOG Touché Criação - Vamos trocar idéias? -> http://blog.touchecriacao.com.br/
// Links úteis: Busca || Regras
// Não respondo dúvidas via mensagem privada. Use o fórum para buscar ou perguntar.

#5 mmngea

mmngea

    Turista

  • Usuários
  • 35 posts
  • Sexo:Masculino

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 :P)

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>&lt;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);" />&nbsp;1<input type="radio" name="q1" value="2" OnClick="retorno(this.value);" />&nbsp;2<input type="radio" name="q1" value="3" OnClick="retorno(this.value);" />&nbsp;3<input type="radio" name="q1" value="4" OnClick="retorno(this.value);" />&nbsp;4</p><p><span>Questão 2 ->></span><input type="radio" name="q2" value="1" OnClick="retorno(this.value);" />&nbsp;1<input type="radio" name="q2" value="2" OnClick="retorno(this.value);" />&nbsp;2<input type="radio" name="q2" value="3" OnClick="retorno(this.value);" />&nbsp;3<input type="radio" name="q2" value="4" OnClick="retorno(this.value);" />&nbsp;4</p><p><span>Questão 3 ->></span><input type="radio" name="q3" value="1" OnClick="retorno(this.value);" />&nbsp;1<input type="radio" name="q3" value="2" OnClick="retorno(this.value);" />&nbsp;2<input type="radio" name="q3" value="3" OnClick="retorno(this.value);" />&nbsp;3<input type="radio" name="q3" value="4" OnClick="retorno(this.value);" />&nbsp;4</p><p><span>Questão 4 ->></span><input type="radio" name="q4" value="1" OnClick="retorno(this.value);" />&nbsp;1<input type="radio" name="q4" value="2" OnClick="retorno(this.value);" />&nbsp;2<input type="radio" name="q4" value="3" OnClick="retorno(this.value);" />&nbsp;3<input type="radio" name="q4" value="4" OnClick="retorno(this.value);" />&nbsp;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 Nicholas Pufal

Nicholas Pufal

    Impossível: só existe até alguém duvidar e provar o contrário.

  • Usuários
  • 1655 posts
  • Sexo:Masculino
  • Localidade:Porto Alegre

Posted 24/03/2008, 17:22

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.
BLOG Touché Criação - Vamos trocar idéias? -> http://blog.touchecriacao.com.br/
// Links úteis: Busca || Regras
// Não respondo dúvidas via mensagem privada. Use o fórum para buscar ou perguntar.

#7 mmngea

mmngea

    Turista

  • Usuários
  • 35 posts
  • Sexo:Masculino

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 DarkSign

DarkSign

    Doutor

  • Usuários
  • 868 posts
  • Sexo:Masculino
  • Localidade:Brasil
  • Interesses:Tecnologias na área WEB em geral e desenvolvimento.

Posted 27/03/2008, 01:25

Ei, Firehalk, pode dar uma explicação detalhada do hack

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*/
Não sabe por onde começar? Que tal pelas Regras ?

#9 HaroNism

HaroNism

    Super Veterano

  • Usuários
  • 13822 posts
  • Sexo:Masculino
  • Localidade:San Miguel de Tucuman

Posted 27/09/2017, 06:11

Cialis Lagerung cialis Dapoxetina Menarini Propecia Effects On Women Interactions

#10 HaroNism

HaroNism

    Super Veterano

  • Usuários
  • 13822 posts
  • Sexo:Masculino
  • Localidade:San Miguel de Tucuman

Posted 09/10/2017, 09:28

Propecia Low Cost Female Kamagra Tablets Precio Cialis Farmacia Espanola cialis buy online Propecia Mcg Discount Online Real Hydrochlorothiazide Hypertension Get Drugs Overseas Viagra Bestellen Express

#11 HaroNism

HaroNism

    Super Veterano

  • Usuários
  • 13822 posts
  • Sexo:Masculino
  • Localidade:San Miguel de Tucuman

Posted 24/10/2017, 22:11

Alcool Levitra 10 Mg Proscar Euros Propecia online pharmacy Salbutamol Nebules Buy
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 HaroNism

HaroNism

    Super Veterano

  • Usuários
  • 13822 posts
  • Sexo:Masculino
  • Localidade:San Miguel de Tucuman

Posted 05/11/2017, 11:49

Cialis Viagra Fr Viagra Herzinfarkt generic viagra Amoxicillin Causes Rapid Heartbeat Elidel Cephalexin Severe Side Effects
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 LarPhozyHah

LarPhozyHah

    Super Veterano

  • Usuários
  • 14515 posts
  • Sexo:Masculino
  • Localidade:San Miguel de Tucuman

Posted 05/11/2017, 12:27

Propecia Diabetes 5 Htp Viagra Bestellen Anoniem Cialis Viagra Efficacite generic levitra 40 mg Buy Orlistat No Prescription

#14 HaroNism

HaroNism

    Super Veterano

  • Usuários
  • 13822 posts
  • Sexo:Masculino
  • Localidade:San Miguel de Tucuman

Posted 04/12/2017, 19:40

Acheter Xenical Orlistat En Ligne My Secure Tabs Pharmacy Buy Viagara cialis buy online Worldwide Bentyl Cyclominol Shipped Ups
How Does Tadalis Sx Soft Work cialis Levitra 10mg Orodispersible Bayer Pharmacies Offer Free Amoxicillin
Alimenti Contenenti Dapoxetina viagra Cost Of Viagra Pills




1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq