iMasters | Por uma internet mais criativa e dinâmica

Segunda-feira, 26/07/2004 - 01:59 - Por Thiago Prado
Seções relacionadas:

• Javascript

• Imprimir
• Indicar
• Digg it
• Del.icio.us
• Twitter
• 5 comentários

Essa semana a matéria é muito interessante. Vou explicar o funcionamento de um Quizz desenvolvido em DHTML para rodar em Internet Explorer 4 ou superior e Netscape 4 ou superior, sendo que foram desenvolvidos códigos diferentes para cada browser e versões dos mesmos.

A Quizz tem 10 questões com 4 alternativas de resposta. O usuário escolhe uma e o programa mostra a próxima questão e assim sucessivamente até o final. Quando o usuário terminar de responder todas as questões, uma tela aparecerá mostrando o resultado final da Quizz.

As perguntas, alternativas e respostas estão dispostas em matrizes, sendo que as perguntas e alternativas estão em uma matriz bidimensional.

Para checar qual o navegador é do usuário, vamos usar o objeto browser criado em uma coluna anterior e criar uma instância do objeto com o nome de naveg.

Fazer o download do arquivo browser.js.

Para começar o nosso código, vamos carregar o arquivo browser.js que contém o código para definir o navegador utilizado pelo usuário:

Exemplo:

<script src="js/browser.js"></script>

Agora temos que criar as variáveis que usaremos para no nosso código. As perguntas, respostas, opções e alternativas estão dispostas em matrizes. Abaixo segue um explicativo do código, mas eu não preciso comentar tudo, porque muita coisa é básica para quem conhece de programação.

Exemplo:

1 <script language="JavaScript">
2         var naveg = new browser();
3         var ordem = 0;
4         var acertos = 0;
5         var i;
6         var resultado = "";
7         var opcoes = ["A","B","C","D"];
8         var resultados = ["C","B","A","C","B","C","C","D","C","D"];
9         var questao = [];
10       for (i=0; i<10; i++){
11               questao[i] = [];
12       }
13       questao[0][0] = "1 - Quem é o homem mais rico do mundo?";
14       questao[0][1] = " Silvio Santos | Donald Trump | Bill Gates | Tiririca";
15       questao[1][0] = "2 - Quantas vezes o Brasil foi campeão mundial de futebol?";
16       questao[1][1] = " 3 vez | 5 vezes | 1 vezes | 2 vezes";
17       questao[2][0] = "3 - Qual o maior pico do mundo?";
18       questao[2][1] = " Everest | Gale Gale | Tropina | Molucai";
19       questao[3][0] = "4 - Qual a capital do Brasil?";
20       questao[3][1] = " Salvador | Rio de Janeiro | Brasilia | Sao Paulo";
21       questao[4][0] = "5 - Quem é o melhor jogador de futebol do mundo?";
22       questao[4][1] = " Zidane | Ronaldo | Figo | Thiago";
23       questao[5][0] = "6 - Qual foi a profissão de Albert Einstein?";
24       questao[5][1] = " Arquiteto | Atleta | Cientista | Programador";
25       questao[6][0] = "7 - Quem inventou o telefone?";
26       questao[6][1] = " Paulo Paulada | Ze Carioca | Graham Bell | Gugu";
27       questao[7][0] = "8 - Qual esporte praticado por Popo?";
28       questao[7][1] = " Futebol | Golfe | Voleibol | Boxe";
29       questao[8][0] = "9 - Qual o maior pais católico do mundo?";
30       questao[8][1] = " USA | Italia | Brasil | Japao";
31       questao[9][0] = "10 - Qual o melhor site sobre programação?";
32       questao[9][1] = " Lala | Lele | Lili | iMasters";

Linha 2 - Declaração da variavel naveg responsável por recuperar o navegador que o usuário esta utilizando.

Linha 7 - Matriz com a relação de possíveis opções de resposta.

Linha 8 - Matriz com a relação das respostas das questões.

Linha 9 - Declaração da matriz questão responsável por gravar as perguntas e as alternativas de resposta.

Linha 10 a 12 - Loop responsável por criar uma nova matriz para cada elemento da matriz questão, tornando-a bidimensional.

Linha 13 a 32 - Preenchimento da matriz questão com as perguntas e alternativas, sendo que as quatros alternativas estão no mesmo elemento separadas por uma “|”.

Vamos agora à função init(), muito importante porque inicia o nosso objeto, que é a layer que contém a nossa Quizz. Há uma verificação de qual navegador que o usuário está utilizando e uma chamada para a função mostra_questao(), que é responsável por escrever as perguntas e alternativas na layer e mostrar na página.

Exemplo:

1 function init() {
2         if (naveg.ns4) quadro = document.layers["quizzDiv"];
3         if (naveg.ns6) quadro = document.getElementById("quizzDiv");
4         if (naveg.ie) {
5                 quadro = document.all["quizzDiv"];
6                 quadro.style.border = "1px solid black";
7         }
8         quantidade = questao.length;
9         resultado = "0% | 1/"+quantidade+" | Faltam: "+quantidade;
10       mostra_questao(ordem);
11 }

Linha 2 - Verificação se o Netscape 4 é o navegador do usuário e cria uma variável com o código da layer.

Linha 3 - Verificação se o Netscape 6 ou superior é o navegador do usuário e cria uma variável com o código da layer.

Linha 4 - Verificação se o Internet Explorer é o navegador do usuário e cria uma variável com o código da layer.

Linha 8 - Declaração da variável quantidade que contém a quantidade de questões na Quizz.

Linha 9 - Declaração da variável resultado, responsável por mostrar qual o percentual de acerto do desafiante.

Linha 10 - Uma chamada para a função mostra_questao(), que é responsável por escrever a questão na layer e mostra na página.

Depois de iniciado o nosso objeto, vamos desenvolver o código para escrever a questão na layer e mostrar na página. Para que possamos escrever na layer, vai ser criado um código diferente para cada navegador.

Os botões, com as alternativas de respostas, vêm a partir de dados da matriz opções, criada acima, e o evento onclick do botão chama a função corrigir() que vai ser criada posteriormente para conferir a margem de acerto do desafiante e mostrar na página.

1 function mostra_questao(x){
2         if (x >= 10) {
3                 texto = "Confira sua pontuação e sempre tenha dedicacao para <br>conseguir sempre os melhores resultados. <br><br>";
4                 texto += "Margem de acerto = " + total + "%" + " de " + quantidade + " questoes<br><br>";
5                 texto += "Desenvolvimento: <br> Thiago Prado <br> Coluna JS/DHTML <br> www.imasters.com.br";
6                 texto += "<br><br><br><br><center><a href='javascript:history.go(0)'>Recarregar Quizz</a></center>"
7         } else {
8                 texto = questao[x][0] + "<br><br>";
9                 divisao = questao[x][1].split("|");
10               for(c=0; c<divisao.length; c++){
11                       texto += '<form name="form">';
12                       texto += '<input type="button" value="'+opcoes[c]+'" onclick="corrigir(this.value)">' + divisao[c] + "<br><br>";
13                       texto += '</form>';
14               }
15               texto += "<hr noshade size=1 color=#000000><br>" + resultado;
16       }
17       if (naveg.ns4) {
18               quadro.document.open();
19               quadro.document.write(texto);
20               quadro.document.close();
21       } else if (naveg.ie) quadro.innerHTML = texto;
22       else if (naveg.ns6) quadro.innerHTML = texto;
23 }
24 </script>

Linha 2 - Verficação se o valor de x (ordem das questoes) é maior ou igual a 10. Se retornar true, será mostrado na página a margem de acerto do desafiante e mais algumas informações adicionais. Se retornar false, será mostrada uma questão com suas respectivas alternativas.

O código acima é muito simples, basicamente a variável texto coleta várias informações que serão mostradas posteriormente.

Linha 10 a 14 - Loop responsável por criar os botões com as alternativas de respostas. Os botões tem como value o valor da matriz opções indexado pela variável do loop. O evento onClick chama a função corrigir() enviando um paramentro que é o valor do próprio botao.

Linha 17 - Verificação se o Netscape 4 é o navegador do usuário. Desta forma será escrito na layer o conteúdo da variável texto, que contém todas as informações sobre as perguntas, respostas, margem de acerto e informações adicionais.

Linha 21 - Verificação se o Internet Explorer é o navegador do usuário. Desta forma será escrito na layer o conteúdo da variável texto, que contém todas as informações sobre as perguntas, respostas, margem de acerto e informações adicionais.

Linha 22 - Verificação se o Netscape 6 ou superior é o navegador do usuário. Desta forma será escrito na layer o conteúdo da variável texto, que contém todas as informações sobre as perguntas, respostas, margem de acerto e informações adicionais.

Com quase tudo criado vamos agora partir para a função que tem por objetivo corrigir a nossa Quizz. A mesma recebe um parâmetro com o valor das alternativas das respostas.

Exemplo:

1 function corrigir(x){
2         if (ordem >= 10) return false;
3         if (x == resultados[ordem]){
4                 acertos++;
5         }
6         ordem++;
7         total = parseInt((acertos)*100/ordem);
8         restantes = (questao.length-ordem);
9         resultado = " " + total + " % | " + (ordem >= 10 ? ordem : ordem+1) + " / " + quantidade + " | Faltam: " + restantes;
10       mostra_questao(ordem);
11 }

Linha 2 - Verificação se a ordem das questão chegou ao seu final. Se retornar true, a função é retornada como false para que o código não continue.

Linha 3 - Verificação se o parâmetro x é igual ao valor da matriz resultados indexado da variável ordem. Se retornar true a variável acertos vai ser acrescido de um em seu valor.

Linha 6 - A variável ordem vai ser acrescido de um em seu valor.

Linha 7 - A variável total retorna a parte inteira do cálculo da percentagem de acertos do desafiante.

Linha 8 - A variável restantes retorna o valor do número de questões que estão faltando para acabar a Quizz.

Linha 9 - A variável resultado engloba em seu valor um aglomerado de informações, com o objetivo de mostrar a margem de acertos do usuário e outras informações adicionais.

Linha 10 - Uma chamada da função mostra_questao() com um parâmentro que é a ordem das questões ate o fim da Quizz.

Por fim, na parte HTML, vamos criar a nossa layer que vai conter a Quizz:

Exemplo:

<DIV ID="quizzDiv" STYLE="position:absolute; left:10px; top:60px; width:360px; height:250px; clip:rect(0px 360px 250px 0px); background-color:#ffffff; layer-background-color:#ffffff; padding: 10px;">
</DIV>

Acesse o nosso exemplo da Quizz DHTML.

Valeu galera e até a próxima semana!

Todos os artigos de Thiago Prado

24/06/2005 - Open Cube DHTML Menu 13/05/2005 - Efeito Elástico 07/04/2005 - Menu Drop Down - Parte 02 15/03/2005 - Menu Drop Down 21/02/2005 - Janelas - Comunicação 25/01/2005 - Janelas 04/01/2005 - Ler dados de arquivo externo 07/12/2004 - Skyscraper animado 03/11/2004 - Calendário 18/10/2004 - Digita palavra 04/10/2004 - Mouse animation 17/09/2004 - Arrastare, soltar, minimizar e maximizar 01/09/2004 - Regular Expression 16/08/2004 - Algoritmo do CNPJ 06/08/2004 - Algoritmo do CPF 26/07/2004 - Quizz DHTML 21/07/2004 - Criando caixa de alerta customizável 12/07/2004 - Manipulação de string 05/07/2004 - Tabular Data Control - IE 22/06/2004 - Imagens - SlideShow 14/06/2004 - Cookies - Contador de visitas 07/06/2004 - Cookies 31/05/2004 - Validação de formulário 24/05/2004 - Animação cross-browser 17/05/2004 - Programação cross-browser - Parte 02 10/05/2004 - Programação cross-browser 29/04/2004 - Prototype e herança de objeto 22/04/2004 - Criando e manipulando objetos 15/04/2004 - Hierarquia de objetos 12/04/2004 - Arrays utilizando literal notation

5 comentários publicados

• 1. Só NS e IE?!?!?!

  Quarta-feira, 28/07/2004, por Andrey Santos Sanches

  Faltou fazer um código portavel a outros browsers como Opera..
  O padrão adotado pelos novos navegadores (a partir do IE 5 e NS 6) para DHTML acessar objetos da pagina é o GetElementById("IdElemento") ou GetElementsByName("NomeELemento").
  Fica aí a dica.

  Responder comentário

• 2. Adorei!

  Terça-feira, 10/08/2004, por Jéssica

  Muito bom!e não é dificil,alem de vc explica muito bem!

  Responder comentário

• 3. LINGUAGEM

  Segunda-feira, 29/11/2004, por JOAO ANTONIO VICENTE DE SOUZA

  GOSTEI DOS TOPICOS DE LINGUAGEM

  Responder comentário

• 4. tem como?

  Quinta-feira, 06/01/2005, por thiago miazaki

  Gostaria de saber se tem como elecionar 100 perguntas e o sistema automaticamente selecionar entre as 100 as 30 para o quizz não deixando repetir?

  Responder comentário

• 5. Gostei do código

  Terça-feira, 22/02/2005, por Rodrigo Pires Rattes

  Até que gostei do código, pena que as respostas aparecem quando se pede o código fonte.... ainda prefiro o PHP com BD... ;)

  Responder comentário

Poste um comentário

(clique se não for cadastrado)

Login: Senha: Titulo: digite aqui seu comentário Site/blog: Enviar Receber notificação de novos comentários

Sobre o autor

Thiago Prado Atua profissionalmente com desenvolvimento de projetos web em Flash, PHP e Java.

Indique para um amigo

Escreva aqui sua mensagem! ok

Tags relacionadas

youtube internet gerência windows mercado tecnologia lançamento ti php celular microsoft photoshop mobile desenvolvimento brasil publicidade yahoo google apple crescimento 3g web seguranca design linux iphone

TI SHOP Produtos iMasters

• Lançamento: CD-ROM Treinamento Aplicado de SQL - Lançamento! Treinamento Aplicado de SQL - Aprenda a trabalhar com SQL com bancos de dados Oracle e SQL Server. São mais de 100 tópicos explicados por Mauro Pichilliani, um articulistas mais lidos do iMasters. Aproveite! Apenas R$ 69,90 no TI SHOP.
• Lançamento: Livro iMasters "O Encontro de 2 Mundos"- Este livro conta com 56 crônicas de profissionais mais admirados e influentes do mercado brasileiro de Internet. Aproveite o preço especial para leitores do iMasters. Apenas R$ 40,00 e envio imediato!
• DVD Curso Completo de Photoshop - Do conceito à finalização Lançamento! Curso Completo de Photoshop, em DVD, com mais de 230 aulas dividas em 4 módulos: conceito, básico, avançado e finalização. Apenas R$ 69,50 no TI SHOP - Frete com 50% de desconto
• DVD Javascript Starter - Curso Completo Com mais de 9 horas de vídeo-aulas, é um curso completo sobre Javascript. Ideal para quem deseja aprender a linguagem. Apenas R$ 64,90 no TI SHOP - Frete com 50% de desconto!