Esta página pertence ao Templates By Wallace -> www.templatesbywallace.com

Faça testes para seu blog!

Você já fez muito testes por aí e esta com vontade de criar o seu? Com esse tutorial você cria seu teste em 10 passos!

1- Esse teste é para 6 perguntas com 4 alternativas cada com 4 opções de resultado final, a primeira coisa a fazer é sempre idealizar o TEMA do teste, e depois as perguntas e respostas. Use a criatividade!!!
Monte as perguntas e respostas antes de trabalhar o código
Ex: O tema vai ser "Que cor você é". Vou ter perguntar como, você prefere o dia (a pessoa vai ser amarelo), noite (preto) .... .

2 - Feito isso, pegue o código abaixo e cole no bloco de notas ou no editor de HTML que você usa (FrontPage, DreamWeaver...)

<html> <head> <title>O NOME DO TESTE VEM AQUI</title> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <STYLE type="text/css">      </style> </head> <body bgcolor="FFFFFF">  <form name="f"> <p><font color="black"><b>SUA PERGUNTA 1</b><br> <input type="radio" name="um" value="1"> RESPOSTA 1<br> <input type="radio" name="um" value="2"> RESPOSTA 2<br> <input type="radio" name="um" value="3"> RESPOSTA 3<br> <input type="radio" name="um" value="4"> RESPOSTA 4<br> <br> <br> </font> <font color="black"><b>SUA PERGUNTA 2</b><br> <input type="radio" name="dois" value="1"> RESPOSTA 1<br> <input type="radio" name="dois" value="2"> RESPOSTA 2<br> <input type="radio" name="dois" value="3"> RESPOSTA 3<br> <input type="radio" name="dois" value="4"> RESPOSTA 4<br> </font> <br> <br> <font color="black"><b>SUA PERGUNTA 3</b><br> <input type="radio" name="tres" value="1"> RESPOSTA 1<br> <input type="radio" name="tres" value="2"> RESPOSTA 2<br> <input type="radio" name="tres" value="3"> RESPOSTA 3<br> <input type="radio" name="tres" value="4"> RESPOSTA 4<br> </font><br> <br> <font color="black"><b>SUA PERGUNTA 4</b><br> <input type="radio" name="quatro" value="1"> RESPOSTA 1<br> <input type="radio" name="quatro" value="2"> RESPOSTA 2<br> <input type="radio" name="quatro" value="3"> RESPOSTA 3<br> <input type="radio" name="quatro" value="4"> RESPOSTA 4<br> </font> <br> <br> <font color="black"> <b>SUA PERGUNTA 5</b><br> <input type="radio" name="cinco" value="1"> RESPOSTA 1<br> <input type="radio" name="cinco" value="2"> RESPOSTA 2<br> <input type="radio" name="cinco" value="3"> RESPOSTA 3<br> <input type="radio" name="cinco" value="4"> </font> RESPOSTA 4<br> <font color="black"> <b>SUA PERGUNTA 6</b><br> <input type="radio" name="seis" value="1"> RESPOSTA 1<br> <input type="radio" name="seis" value="2"> RESPOSTA 2<br> <input type="radio" name="seis" value="3"> RESPOSTA 3<br> <input type="radio" name="seis" value="4"> RESPOSTA 4<br> <br> </font> <input type="button" value=" CLICK " onclick="process();" style="font-family:veranda; font-size=8pt; border:1; border-color:orange; border-style:solid; background-color:white"> </form> <br><br><br> <font color="#000000">Créditos <a href="http://www.peachie.nu" target="_blank">Peachie</a> /<a href="http://dreamit.kit.net" target="_blank">Dream It</a></font> </body> </html>

3- Agora veja o código e a primeira coisa a editar, coloque o título do teste onde diz "O NOME DO TESTE VEM AQUI".

4 - Agora vamos colocar no código quais são as 4 opções de resultado do teste
Ex: No meu exemplo de teste de cores, as opções serão: azul_marinho, verde, preto, roxo

No você deve substituir TODOS os locais onde diz OPÇÃO 1, OPÇÃO2, OPÇÂO3 ... .pela opção correspondente. Onde(no meu teste) azul_marinho será sempre na OPÇÃO 1, verde na OPÇÃO 2, etc
Ex:
if (value == "1") { azul_marinho++; }
if (value == "2") { verde++; }
if (value == "3") { preto++; }
if (value == "4") {roxo++; }

IMPORTANTE - As opções devem estar em letra minúscula e sem espaços, se preciso use o _*underline* como em azul_marinho

5- Depois de editar as OPÇÕES, de uma ou duas até três olhadas para ver se esta tudo certo mesmo e não ter erro de script no final. ^^

6 - Agora no vamos editar as PERGUNTAS...
Ex: a PERGUNTA 1 será "O que você prefere?"
O código vai ficar assim.

O que você prefere?

e também editar as respostas ..

A RESPOSTA 1,2,3... será sempre correspondente a OPÇÃO 1, 2, 3...
Ex: Como RESPOSTA 1, vou colocar "uma praia", que vai responder com a opção 1: azul_marinho
Em RESPOSTA 2, vou colocar "uma floresta", que vai corresponder a opção2: verde
Em RESPOTA 3, vou colocar "tudo, desde que seja noite", qie vai corresponder a opção 3:preto
...etc

o código fica assim:

<input type="radio" name="um" value="1"> uma praia<br>
<input type="radio" name="um" value="2"> <br>
<input type="radio" name="um" value="3"> uma floresta<br>
<input type="radio" name="um" value="4"> tudo, desde que seja a noite<br>
.. etc

7 - Agora salve a página do teste como o nome que você preferir (com letra minúscula e sem espaços);
Ex: que_cor.html

Para salvar no Bloco de Notas, vá em Salvar Como, mude "Salvar como Tipo" para "Todos os Tipos de Arquivo" depois digite o nome, exemplo: meu_teste.htm

8 - Agora é hora de criar as páginas do resultado do teste. Como são 4 opções, você deve criar 4 páginas ^^

IMPORTANTE! As páginas .html devem ter exatamente o nome das opções!
Ex: azul_marinho.html, verde.html, preto.html, roxo.html, amarelo.html

Na maioria dos testes, é feito uma imagem de acordo com cada resultado. Abaixo tem um modelo da página, você só precisa alterar onde é pedido. ^^
Não se esqueça de salvar o nome correto e na extensão .html.

<html> <head> <title>TITULO DA PAGINA</title> <style type="text/css">  </style> </head> <body bgcolor="#FFFFFF">   <p><img src="http://URL DA IMAGEM"> </p> <p> <textarea name="textfield" cols="20" rows="3"> <a href="http://SEU SITE OU BLOG" target=_blank><img src="http://URL DA IMAGEM" border=0></a>

Créditos

Peachie
Dream It

Tudo para Blogs

Para salvar no Bloco de Notas, vá em Salvar Como, mude "Salvar como Tipo" para "Todos os Tipos de Arquivo" depois digite o nome.
Ex: azul_marinho.html