Este Quiz simples serve para se ter uma noção de como criar um formulário HTML e lidar com os dados em outra página PHP

Simples Quiz

A imagem e os códigos deste post são todos de inteira propriedade do Chris Coyier e foram retirados do site css-tricks.com por isso não serão traduzidos.

As perguntas para o teste são adicionadas no formulário:

<form id="quiz" action="grade.php" method="post">
   ... questions here ...
</form>

Formulários normalmente tem um botão de submit, e esta não é uma exceção. Sempre que o botão (submit) é clicado, ele irá dar um “POST” dos dados de cada entrada no interior do formulário para a URL fornecida.
Quizes são essencialmente listas de perguntas, por isso vamos fazer uma lista ordenada, para isso uma questão individual será parecido com isto:

	<li>
<h3>CSS Stands for...</h3>
<div>
        <input id="question-1-answers-A" name="question-1-answers" type="radio" value="A" />
        <label for="question-1-answers-A">A) Computer Styled Sections </label></div>
<div>
        <input id="question-1-answers-B" name="question-1-answers" type="radio" value="B" />
        <label for="question-1-answers-B">B) Cascading Style Sheets</label></div>
<div>
        <input id="question-1-answers-C" name="question-1-answers" type="radio" value="C" />
        <label for="question-1-answers-C">C) Crazy Solid Shapes</label></div>
<div>
        <input id="question-1-answers-D" name="question-1-answers" type="radio" value="D" />
        <label for="question-1-answers-D">D) None of the above</label></div></li>

Aviso: Existem 4 inputs mais todos eles são do tipo “radio” e tem o mesmo “name”. Eles basicamente funcionam como um único input, uma vez que apenas um deles podem ser selecionado por vez e os dados são postados (POST) com um único valor.

No final, nosso botão de submit:

<input type="submit" value="Submit Quiz" />

Em nosso arquivo grade.php, temos que pegar os valores que foram postados (POST), em seguida, iremos verificar cada uma e um incrementar os números correto e, finalmente, vamos exibir uma div que mostra o número de respostas corretas:

<?php

    $answer1 = $_POST['question-1-answers'];
    $answer2 = $_POST['question-2-answers'];
    $answer3 = $_POST['question-3-answers'];
    $answer4 = $_POST['question-4-answers'];
    $answer5 = $_POST['question-5-answers'];

    $totalCorrect = 0;

    if ($answer1 == "B") { $totalCorrect++; }
    if ($answer2 == "A") { $totalCorrect++; }
    if ($answer3 == "C") { $totalCorrect++; }
    if ($answer4 == "D") { $totalCorrect++; }
    if ($answer5) { $totalCorrect++; }

    echo "
<div id="results">$totalCorrect / 5 correct";

?></div>

Post original | arquivos para download | Demo on line

Como funciona a internet

Simples assim (forma bruta):

1. O usuário através de um Browser (Internet explorer, Mozilla Firefox, Opera, etc) faz uma requisição a um servidor
2. O servidor processa esta requisição
3. O Browser recebe a resposta do servidor
4. Usuário vê a resposta através do Browser

Os elementos

• HTML – Hipertext Markup Language Linguagem de marcação de texto, usada para criar páginas de internet
• HTTP – Hipertext Transfer Protocol É o protocolo de transferência de arquivos de Hiper Texto
  • FTP – File Transfer Protocol É o protocolo de transferência de arquivo, vamos usar ele quando formos jogar nossas páginas na web
• BROWSER – ou navegador web. É o programa que interpreta o HTML

HTML – Linguagem de Marcação de Hipertexto

Esta linguagem foi criada a muito tempo atrás e ela é:

• Baseada em TAGS
• Desenvolvida por Tim Berners-Lee
• É um arquivo de texto com a extensão .HTML ou .HTM
• Tem seu desenvolvimento simples, basta o bloco de notas para fazer uma página
• O problema é que não existe apenas um Browser assim cada empresa criou seus elementos aonde dificulta a criação de documentos compatíveis com vários Browsers

XML – (eXtensible Markup Language)

Serve para descrever o conteúdo de um arquivo e não como deve ser exibido. Permite também a criação de marcação padronizada fazendo a separação entre marcação e exibição.

Terminamos por aqui.

Obrigado

Então vamos ao que nos interessa!!!

Assunto: Adicionar linhas dinamicamente em uma tabela;

Ferramentas: Editor html;

Tudo começa com o html.

<html>
    <head>
        <title>Criando linhas dinamicamente em tabelas</title>
    </head>
    <body>
    </body>
</html>

Agora iremos adicionar uma tabela entre as linhas 5 e 6 na nossa página, algo parecido com isso:

<table id='tabela' border='0' width='100%'>
        <tr style='background-color:#FBF6F7'>
            <td> &nbsp;</td>
            <td>Coluna um</td>
            <td>Coluna dois</td>
            <td>Coluna tres</td>
        </tr>
    </table>
<br />

A tabela tem uma linha e quatro colunas.

Agora entre as linhas 3 e 4 adicionamos as tags de script com o seguinte código:

<script LANGUAGE="JavaScript">
    totals =0;
    function adiciona(){
    totals++
        tbl = document.getElementById("tabela")

        var novaLinha = tbl.insertRow(-1);
        var novaCelula;

        if(totals%2==0) cl = "#F5E9EC";
        else cl = "#FBF6F7";

        novaCelula = novaLinha.insertCell(0);

        novaCelula.style.backgroundColor = cl

        novaCelula.innerHTML = "<input type='checkbox' name='chkt' />";

        novaCelula = novaLinha.insertCell(1);
        novaCelula.align = "left";
        novaCelula.style.backgroundColor = cl;
        novaCelula.innerHTML = "&nbsp; Linha"+totals+"";

        novaCelula = novaLinha.insertCell(2);
        novaCelula.align = "left";
        novaCelula.style.backgroundColor = cl;
        novaCelula.innerHTML = "&nbsp;ops3";

        novaCelula = novaLinha.insertCell(3);
        novaCelula.align = "left";
        novaCelula.style.backgroundColor =cl;
        novaCelula.innerHTML = "&nbsp;ops4";
    }

Explicando o código:

1. Variável totals; Serve apenas para função estética.
2. Função adicionar(): É a função que vai ser chamada para adicionar a nova linha.
3. Pego a tabela e insiro uma nova linha na posição especificada insertRow(-1);
4. Pego a linha e insiro uma célula na posição especificada insertCell(0) (X 4)
5. Pego a célula, coloco seu estilo e seu conteúdo através do innerHTML.

Agora só falta adicionar um botão chamando a função:

Meu código final ficou assim ;

<html>
<head>
    <title>Criando linhas dinamicamente em tabelas</title>
    <script LANGUAGE="JavaScript">
    totals =0;
    function adiciona(){
    totals++
        tbl = document.getElementById("tabela")

        var novaLinha = tbl.insertRow(-1);
        var novaCelula;

        if(totals%2==0) cl = "#F5E9EC";
        else cl = "#FBF6F7";

        novaCelula = novaLinha.insertCell(0);

        novaCelula.style.backgroundColor = cl

        novaCelula.innerHTML = "<input type='checkbox' name='chkt' />";

        novaCelula = novaLinha.insertCell(1);
        novaCelula.align = "left";
        novaCelula.style.backgroundColor = cl;
        novaCelula.innerHTML = "&nbsp; Linha"+totals+"";

        novaCelula = novaLinha.insertCell(2);
        novaCelula.align = "left";
        novaCelula.style.backgroundColor = cl;
        novaCelula.innerHTML = "&nbsp;ops3";

        novaCelula = novaLinha.insertCell(3);
        novaCelula.align = "left";
        novaCelula.style.backgroundColor =cl;
        novaCelula.innerHTML = "&nbsp;ops4";
    }
    </script>
</head>
<body>
    <table id='tabela' border='0' width='100%'>
        <tr style='background-color:#FBF6F7'>
            <td> &nbsp;</td>
            <td>Coluna um</td>
            <td>Coluna dois</td>
            <td>Coluna tres</td>
        </tr>
    </table>
<br />
<input type='button' id='incluir' value='incluir' onclick='adiciona()'/>
</body>
</html>

Testado em FF e IE 7.

Bom por hojé é só, agradeço a visita de todos.