Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Annes

Pegar conteúdo digitado e verificar, informando com Alert

Por , em Javascript

Recommended Posts

Annes    1

Annes
Postado

Olá! Sou nova em códigos, na verdade minha área é designer, mas agora meu chefe solicitou que eu fizesse o código de uma página. Até que o código está ficando bom, com as dicas que eu fui pegando nos foruns, apesar de só me cadastrar agora. O HTML já está pronto, e o CSS também. Uma parte do JavaScript também já consegui fazer. Mas agora resta uma dúvida:

 

- na página há alguns formulários, com atividades de matemática. No final de cada formulário, há um botão: VERIFICAR, um APAGAR e um PRÓXIMO. Quando clica no PRÓXIMO, já está com o script pra aparecer a atividade seguinte, e está funcionando certo. Mas no botão VERIFICAR, eu não sei nem como começar.

O botão PRÓXIMO deve estar oculto até que o usuário clique em VERIFICAR. Quando clicar, deve aparecer um ALERT:

* SE ainda não tiver sido preenchido nada, o botão PRÓXIMO deve permanecer oculto, e no Alert, aparecer que a pessoa deve preencher os campos vazios

* SE ja tiver sido preenchido e o resultado estiver incorreto, deve aparecer o ALERT dizendo que algo está errado, se o usuário não quer alterar suas respostas, mas mesmo assim, o botão PRÓXIMO deve aparecer

* SE o resultado estiver correto, o botão PRÓXIMO aparece e o Alert dá os parabéns.

 

 

Aqui vai uma parte do código:

 

[color="#8B0000"]// JavaScript Document[/color]

[indent]function atividade_3() {	
document.getElementById("3").style.display ="inline";
}[/indent]
	
	[indent]function atividade_4() {
	document.getElementById("4").style.display ="inline";
	}[/indent]



<[color="#8B0000"]HTML[/color]>
<script type="text/javascript" language="javascript" src="funcao.js"></script>

<body>
<div id="2" style="display:none">
[indent]	<h2> <a name="ativ2">   </a> Atividade 2 </h2>
   	<p> Preencha a tabela abaixo com o número de vértices, arestas e faces do caleidociclo hexagonal: </p>

	<form name="fmAtiv2" action="" method="post">
		[indent]<table width="85%" border="0" align="center" cellpadding="0" cellspacing="0">
       		    [indent]<tr>
               		[indent]<td> <label>Número de Vértices</label> <br /> <input type="text" name="dado01" class="frm"/> </td>             
			<td> <label>Número de Faces</label> <br /> <input type="text" name="dado02" class="frm"/> </td>
			<td> <label>Número de Arestas</label> <br /><input type="text" name="dado03" class="frm"/> </td>
			<td> <label>Característica de Euler</label> <br /><input type="text" name="dado04" class="frm"/> </td>[/indent]
    	            </tr>[/indent]
            	</table>
       		<p> <input type="submit" value="Verificar" class="bts" onClick="alert1()">
    	            <input type="reset" value="Apagar"> 
                    <input type="button" value="Próximo"  onclick="atividade_3()"></p>[/indent]
	</form>[/indent]
</div>

<div id="3" style="display:none">
[indent]	<h2> <a name="ativ3">   </a> Atividade 3 </h2>
       	<p> Preencha a tabela abaixo com o número de vértices, arestas e faces do caleidociclo quadrado: </p>
            
	<form name="fmAtiv3" action="" method="post">
		[indent]<table width="85%" border="0" align="center" cellpadding="0" cellspacing="0">
            	    	[indent]<tr>
               	    	    [indent]<td> <label>Número de Vértices</label> <br /> <input type="text" name="dado05" class="frm"/> </td>             
			    <td> <label>Número de Faces</label> <br /> <input type="text" name="dado06" class="frm"/> </td>
			    <td> <label>Número de Arestas</label> <br /><input type="text" name="dado07" class="frm"/> </td>
			    <td> <label>Característica de Euler</label> <br /><input type="text" name="dado08" class="frm"/> </td>[/indent]
		        </tr>[/indent]
       	        </table>
      	   	<p> <input type="submit" value="Verificar" class="bts" onClick="alert1()">
                <input type="reset" value="Apagar"> 
               	<input type="button" value="Próximo"  onclick="atividade_4()" ></p>
[/indent]
	</form>[/indent]
</div>
</body>
</html>

Agradeço desde já quem me ajudar...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

A lógica você já tem:

 

O botão PRÓXIMO deve estar oculto até que o usuário clique em VERIFICAR. Quando clicar, deve aparecer um alert:

* SE ainda não tiver sido preenchido nada, o botão PRÓXIMO deve permanecer oculto, e no alert, aparecer que a pessoa deve preencher os campos vazios

* SE ja tiver sido preenchido e o resultado estiver incorreto, deve aparecer o alert dizendo que algo está errado, se o usuário não quer alterar suas respostas, mas mesmo assim, o botão PRÓXIMO deve aparecer

* SE o resultado estiver correto, o botão PRÓXIMO aparece e o alert dá os parabéns.

Mas nesse caso, acho legal fazer a verificação no client e server side.

 

Para ver se o problema está correto você vai ter várias maneiras:

 

O que será analisado?

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Só o resultado? Então é só pegar o campo com resultado e verificar

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Ou a lógica será analisada? Se for isso, é um pouco mais complexo. Terá que fazer um para cada problema.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Annes    1

Annes
Postado

Sim... eu já tenho a lógica, mas não sei fazer o código, por isso entrei no forum...

 

Não faço nem ideia do que seja esse client e server side... mas se for algum outro tipo de Script, não posso usar. Nem se for um software pago, por questões institucionais.

 

Será analisado apenas os resultados, considerando que cada campo de preenchimento é um resultado diferente.

 

Eu preciso DO CÓDIGO... pelo amor de Deus... Rsrsrs...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Não faço nem ideia do que seja esse client e server side... mas se for algum outro tipo de Script, não posso usar. Nem se for um software pago, por questões institucionais.

Em miudos:

 

client side http://forum.imasters.com.br/public/style_emoticons/default/seta.gif lado cliente (HTML / CSS / JavaScript)

server side http://forum.imasters.com.br/public/style_emoticons/default/seta.gif lado servidor (PHP)

 

Crie uma variável para recuperar o campo com o resultado. Na função, faça a verificação de o resultado está correto. Se estiver, faça aquelas instruções que passou acima. Tente desenvolver algo aí para você aprender. Se dermos código pronto, não vai aprender.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

P.S.: Seria interessante ter uma linguagem rodando do lado servidor. Se o cara tiver o JavaScript desabilitado, seu site já era. ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Annes    1

Annes
Postado

 

 

Crie uma variável para recuperar o campo com o resultado. Na função, faça a verificação de o resultado está correto. Se estiver, faça aquelas instruções que passou acima. Tente desenvolver algo aí para você aprender. Se dermos código pronto, não vai aprender.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

P.S.: Seria interessante ter uma linguagem rodando do lado servidor. Se o cara tiver o JavaScript desabilitado, seu site já era. ;)

 

 

Thiago, as suas dicas são interessantes para quem entende da coisa... Mas eu sou TOTALMENTE leiga nesse assunto... Nunca fiz nenhum tipo de aula, nem nunca tive contato com códigos, desde 1993, quando eu estudava Visual Basic na escola, na 6ª série... Sou artista plástica e professora de artes... IMAGINE! Nada a ver, né... rsrs... Caí nos códigos de pára-quedas... aprendi algumas coisas pesquisando, mas não o suficiente...

 

Tudo oq você está dando de dicas, serve para quem sabe pelo menos um MÍNIMO. Eu não sei nem o mínimo... entende??? Por isso, estou solicitando o código pronto. Não sei fazer!! Estou desesperada, pois meu prazo está acabando, e não tenho outras fontes para pesquisar. Acredito eu que tenha que usar o IF, mas de que forma?

 

E essa linguagem rodando ao lado do servidor? Como é que faço? O que é? Como funciona? Que tipo de linguagem?

 

Sinto que você tem boa vontade em ajudar, mas acho que eu não tinha deixado claro o quão leiga sou nisso... você disse que não adianta dar o código pronto, mas eu entrei aqui justamente porque vi que em algumas respostas havia o código pronto, com a explicação do que foi feito. De que me adianta saber que eu preciso usar o IF, se eu não sei como usá-lo? Qualquer errinho que seja, mesmo que seja algo simples, o troço já não funciona. Além disso, eu não vou nem saber o que está errado! Não sei MEEEESMO construir o código, pois NUNCA tive contato com isso.

 

O que eu aprendi, fazendo este site, foi tudo assim... vendo pedaços de código prontos, e a explicação do lado, dizendo como funcionava e por que era daquele jeito. E eu realmente aprendi... Eu entendi a lógica das coisas, e fui aproveitando uma coisa com a outra, mudando, fazendo ajustes, e deu certo. Claro que não deve ser dos melhores códigos... mas ficou bom, bonito, funcional e leve...

 

Se mesmo assim, você continuar achando que não deve me dar o código pronto, pelo menos me diga como construir o código... LEMBRE-SE que eu não sei nada... Só sei que algumas funções precisam de () outras não... Não sei o porquê! Sei que tem funções que usam {}, mas não sei tbm o porquê. Sei que existe a função IF, mas não sei como configurá-la...

 

Ah, tem mais uma coisa: neste site, como é um site para professores, ele deve possibilitar que seja acessado, após o primeiro uso, off line, portanto, não sei se essas coisas aí que você está falando podem ser usadas... Me disseram que HTML, CSS e Javascript podem ser armazenados localmente, e por isso, eu poderia usar.

 

Grata,

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

A linguagem server side pode ser o PHP, por exemplo.

 

Essa semana eu realmente estou sem tempo para desenvolver o código pra você. No mínimo sexta-feira é que eu consigo botar a mão no meu editor.

 

Vamos ver se alguém consegue te ajudar nesse tempo, caso contrário na sexta te ajudo com um melhor suporte. ;)

 

Sorry...

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Tinha me esquecido do tópico.

 

Fiz aqui correndo, só para você estudar nesse final de semana, pois provavelmente não terei tempo no mesmo para auxiliar ninguém aqui. =/

 

Estude ele, é fácil de entender.

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="author" content="Thiago Retondar - t.retondar@gmail.com" />
	<meta http-equiv="content-language" content="pt-BR" />
	<title></title>
<style type="text/css">
.problema, #enviar{
	display: none;
}
</style>
<script type="text/javascript">
function id(element){ return document.getElementById(element); }
function validaResultado(alvo, resposta, problema){
	if(alvo.value == ''){
		alert("Prencha algo!");
	} else if(alvo.value == resposta){
		alert("Resposta certa! Parabéns!");
		id(problema).style.display = "block";
	} else if(alvo.value != resposta){
		if(confirm("Resposta errada! Deseja continuar?"))
			id(problema).style.display = "block";
		else
			id(problema).style.display = "none";			
	}
}

window.onload = function(){
	id('verificar1').onclick = function(){
		validaResultado(id('resultado1'), '15', 'problema2');
	};
	id('verificar2').onclick = function(){
		validaResultado(id('resultado2'), '20', 'problema3');
	};
	id('verificar3').onclick = function(){
		validaResultado(id('resultado3'), '25', 'problema4');
	};
	id('verificar4').onclick = function(){
		validaResultado(id('resultado4'), '30', 'enviar');
	};
};
</script>
</head> 
<body>
<form action="">
<fieldset id="problema1">
<input type="text" id="resultado1" />
<input type="button" value="Verificar" id="verificar1" />
</fieldset>
<fieldset id="problema2" class="problema">
<input type="text" id="resultado2" />
<input type="button" value="Verificar" id="verificar2" />
</fieldset>
<fieldset id="problema3" class="problema">
<input type="text" id="resultado3" />
<input type="button" value="Verificar" id="verificar3" />
</fieldset>
<fieldset id="problema4" class="problema">
<input type="text" id="resultado4" />
<input type="button" value="Verificar" id="verificar4" />
<input type="submit" value="Enviar respostas!" id="enviar" />
</fieldset>
</form>
</body>
</html>

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Annes    1

Annes
Postado

Bom dia... Com a sua ajuda e a de um amigo meu, consegui fazer alguma coisa... Só não sei a questão do PHP rodando ao lado, pois php trabalha com banco de dados, não é? Ou estou enganada? Bem, foi o que me disseram... rsrs. O problema é o mesmo do javascript... eu não sei nem como começar. Pior ainda, porque javascript, eu já tinha visto alguma coisa, em algum lugar, que não sei onde... hehehe

 

Bem, muito obrigada pela ajuda, e se puder continuar ajudando, agradeço mais ainda.

Boa semana

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito