Micaela 12 de abril de 2009 a las 09.27
   Imprimir artículo
elWebmaster.com

Crea una encuesta en 3 pasos con HTML y PHP


phpMuchas veces es necesario incluir alguna encuesta en nuestro blog o sitio web. Algo básico, con algunas preguntas multiple choice, un botón para enviar y un sistema que gradúe las respuestas y te diga cuáles son los resultados.

Esto es un trabajo sencillo de realizar con PHP, por lo que es un buen comienzo para aquellas personas que están incursionando en la teoría básica de construir formularios en HTML y el manejo de información de otros sitios con PHP.

Las preguntas de la encuesta se encuentran envueltas en un formulario:

<form action=”grade.php” method=”post” id=”quiz”>

… las preguntas van aquí …

</form>

Los formularios, por lo general, poseen botones para enviar la información, y éste no es la excepción. Al hacer clic en el botón de “Enviar“, posteará la información de cada entrada del formulario en la URL que hayamos colocado en el campo “action“.

Los cuestionarios son esencialmente listas de preguntas, por lo que una lista ordenada funcionará. Cada pregunta individual luciría algo así:

<li>

<h3>CSS Stands for…</h3>

<div>

<input type=”radio” name=”question-1-answers” id=”question-1-answers-A” value=”A” />

<label for=”question-1-answers-A”>A) Computer Styled Sections </label>

</div>

<div>

<input type=”radio” name=”question-1-answers” id=”question-1-answers-B” value=”B” />

<label for=”question-1-answers-B”>B) Cascading Style Sheets</label>

</div>

<div>

<input type=”radio” name=”question-1-answers” id=”question-1-answers-C” value=”C” />

<label for=”question-1-answers-C”>C) Crazy Solid Shapes</label>

</div>

<div>

<input type=”radio” name=”question-1-answers” id=”question-1-answers-D” value=”D” />

<label for=”question-1-answers-D”>D) None of the above</label>

</div>

</li>

Noten que aquí hace cuatro entradas, pero todas tienen “radio” en el campo de “type“, y en “name“, el mismo nombre, idéntico.

Básicamente actúan como una entrada singular, porque sólo una de ellas puede ser seleccionada a la vez y la información se postea como un valor singular.

Al final de todo, nuestro botón de “enviar“:

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

En nuestro archivo grade.php, necesitamos tomar los valores que han sido posteados, luego chequearemos cada uno de ellos e incrementaremos el número correcto, y finalmente mostraremos un div con el número de respuestas correctas.

<?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>”;

?>

Fuente: CSS Tricks


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (3)

  1. Prisciliano Huerta dice:

    Es una gran ayuda para todos los que no sabemos tanto de computacion

  2. Daniel dice:

    hola amigo, el ejemplo esta muy bien, pero si quisieramos utilizar mysql para almacenar los resultados, ¿habria que modificar mucho el codigo? Gracias

  3. Pedro dice:

    Muchas gracias por el post, esto es muy útil para que aumente la participación en las web, voy a intentar ponerlo en práctica.

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder