Adicionar Animação No Resultado Da Enquete / Votação

Na primeira parte do tutorial sobre a criação de uma enquete você viu como arquitetar o código PHP: Criar Enquete / Votação Com PHP. Neste, veremos como adicionar efeitos na apresentação do resultado da enquete. Será um efeito em que a barra parte da largura zero e desliza para a direita.

Utilizaremos também um pequeno plugin jQuery para trabalhar com cookies e com isso verificar se o visitante já votou na enquete anteriormente.

Importação Dos Arquivos

No cabeçalho da página da enquete, importe os seguintes arquivos.

<link rel="stylesheet" type="text/css" href="estilo.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script type="text/javascript" src="jcookie.js"></script>

<script type="text/javascript" src="javascript.js"></script>

Pelo nome você já deve ter entendido o propósito de cada um. Quanto ao “jcookie.js” você encontra o arquivo para download neste endereço (http://plugins.jquery.com/project/jCookie). Ou ao final do tutorial juntamente com todos os arquivos.

A Estrutura

Todos os elementos usados para apresentar o resultado da enquete serão inseridos via javascript. Isso significa que você não verá nenhum deles clicando em Exibir – Código Fonte.

Para facilitar o entendimento e evitar um exercício de imaginação quando chegarmos na parte da estilização, veja a estrutura definida:

<div class=”resultado-enquete”>

  <h2>Resultado parcial da enquete</h2>



  <div><p>100%</p></div>

  <div><p>100%</p></div>

  <div><p>100%</p></div>

  

  <p>Total de votos: 100</p>

</div>

Uma estrutura sem dúvida simples, sendo que os valores são apenas demonstrativos. Veja que o resultado de cada opção será mostrado dentro da barra.

Estilização

Vamos definir a aparência e posicionamento dos elementos responsáveis pela apresentação do resultado.

.resultado-enquete{

width:300px; 

height:auto; 

background:#eaeaea; 

display:none;

position:absolute; 

float:none; 

left:50%; 

margin-left:-150px; }



.resultado-enquete div{

height:auto; 

width:0; 

background:#333; 

margin:10px; 

color:#fff; 

font-weight:bold;}



.resultado-enquete div p, h1{text-shadow:1px 1px 3px #333;}

A div que engloba todos os elementos do resultado é a primeira estilizada. Ela possue uma largura definida, mas ajusta a altura conforme o conteúdo. As últimas quatro propriedades servem para centralizar a div.

Em seguida definimos a aparência das divs que conterão os valores em porcentagem. O detalhe fica por conta da largura (width) zero. É preciso para que o efeito de aumento da largura parta da esquerda em direção á direita.

Por último é aplicada uma sombra no texto para melhorar o contraste.

As Primeiras Verificações

No arquivo javascript definimos que o código será iniciado quando o formulário for submetido.

$(function(){

  $('#form_enquete').submit(function(){

    var cookie = $.cookie("enquete_php");

    if (cookie==null)

    {

      //código

    } else {

      alert("Você já votou nesta enquete hoje.");

    }

  return false;    

})



})

O plugin que nós importamos para trabalhar com cookies é referenciado chamando “$.cookie()”. Então criamos uma variável de nome sugestivo e populamos com o conteúdo do cookie chamado “enquete_php”.

Você há de me perguntar onde diabos foi criado este cookie para estarmos trabalhando com ele. Ele é criado no arquivo PHP e populado com o ip do usuário. Como os cookies não são variáveis, mas arquivos, ele pode ser acessado por qualquer linguagem.

No arquivo PHP ele é definido para durar 24 horas. Sabendo disso, a única verificação que precisamos realizar é saber se ele contém algum valor. Pois se for desta maneira, ele ainda existe. Se este for o caso, é lançado na tela um alerta informando sobre a tentativa de votação e o código acaba.

Por outro lado, se o arquivo não possue conteúdo, então não existe, o código prossegue para que o voto seja computado.

Um Vai, Outro Vem

Mais uma verificação e iniciamos as animações.

var opcao = $("input[name='opcao']:checked").length;

if (opcao>0)

{

$('#enquete').fadeOut().before('<div class="resultado-enquete"><h2>Resultado parcial da enquete</h2></div>');

  $('.resultado-enquete').fadeIn();

} else {

  alert("Você precisa escolher uma das opções.");

}

Na primeira linha, criamos uma variável para receber o número de checkboxes com o nome “opção” que estão selecionadas.

Se o número armazenado é maior do que zero, significa que foi escolhida uma opção. Então a enquete desaparece e é inserido imediatamente antes desta enquete o código da div que contém os resultados da enquete. Mas até o momento a div não esta visível porque definimos que não seria no código CSS. Sendo assim, na linha de baixo ela é mostrada com um efeito.

Se o número da variável “opção” não for maior do que zero, sendo assim nenhuma das opções foi escolhida, é mostrado um alerta na tela e nada disso acontece.

Efeito No Resultado

Logo abaixo da linha que mostra a div com os resultados, entra este código:

$.post("grava-enquete.php", $(this).serialize(), function(retorno){



var total_votos = parseInt(retorno.op01_n) + parseInt(retorno.op02_n) + parseInt(retorno.op03_n);



var porcento1 = Math.round(retorno.op01_n / total_votos * 100);

var porcento2 = Math.round(retorno.op02_n / total_votos * 100);

var porcento3 = Math.round(retorno.op03_n / total_votos * 100);



var resultado = '<div><p>' + retorno.op01 + ' - ' + porcento1 +'%</p></div>';

resultado += '<div><p>' + retorno.op02 + ' - ' + porcento2 +'%</p></div>';

resultado += '<div><p>' + retorno.op03 + ' - ' + porcento3 +'%</p></div>';



$('.resultado-enquete').append(resultado);



$('.resultado-enquete div').eq(0).animate({width: retorno.op01_n +"px"}, 'slow'); 

$('.resultado-enquete div').eq(1).animate({width: retorno.op02_n +"px"}, 'slow'); 

$('.resultado-enquete div').eq(2).animate({width: retorno.op03_n +"px"}, 'slow'); 



$('.resultado-enquete').append("<p>Total de votos: " + total_votos + "</p>");

  

}, "json")

É feita uma requisição POST ao arquivo responsável pela gravação do voto. Antes de enviados, estes dados são serializados com a função serialize(), que simplesmente formata os dados para envio. Isto evita a necessidade de armazenar em uma variável o valor selecionado e passá-la para a função.

Pule para a última linha e veja que o formato dos dados a serem retornado é JSON. Se você ainda não conhece este formato, acesse a página do JSON( http://www.json.org/json-pt.html).

Voltando á primeira linha, a resposta desta submissão é armazenada na variável “retorno”. Simplificando, as variáveis retornadas são:

pergunta – a pergunta da enquete.
op01, op02, op03 – as opções da enquete.
op01_n, op02_n, op03_n – o número de votos das respectivas opções.

Para acessar os valores, basta colocar “retorno.nomedavariavel”. A primeira ação feita com a resposta é a soma dos votos de cada opção. O parseInt() transforma uma string de texto em um numeral inteiro. Sem esta função os números seriam apenas concatenados ao invés de somados.

Nas três linhas seguintes são feitos os cálculos para obter o valor percentual de cada opção e utilizado o Math.round() para arredondar o resultado.

A variável “resultado” recebe as porcentagens e a opção encapsuladas pelas divs e parágrafos e no final este código é anexado à div “resultado-enquete”. Neste momento já estão visíveis os dados de cada opção, mas as barras (formada pelas divs) ainda não, já que definimos na folha de estilo a largura delas como zero.

Para encontrar a div certa a ser animada, utilizamos como elemento chave o seletor eq(), que permite selecionar um elemento conforme sua posição no código. Acabaram de ser anexadas três divs com os valores. Lembra? Cada uma correspondendo a uma opção e valor. Então para selecionar a primeira div, o código fica:

$('.resultado-enquete div').eq(0); 

Isso mesmo, a contagem começa do zero.

Utilizando o método animate(), é feita a animação da largura (width) do elemento com o valor a ser alcançado definido pelo número de votos em pixels.

Para finalizar é anexado o total de votos.

Conclusão

Neste tutorial foi apresentado o código básico para uma apresentação mais interessante dos dados. Você pode adicionar novas funcionalidades e torná-lo ainda melhor. Que tal apresentar as barras na vertical?

Download do código usado neste tutorial: Adicionar Animação No Resultado Da Enquete / Votação

Download do código completo dos 2 tutoriais: Criar Enquete / Votação Com PHP