24/02/10

Crear test simples para tu blog en minutos!

¿Si te gustan los mini-tests o quieres crear uno para tu blog de Blogger? Entonces en estos anuncios te enseñare de una forma muy fácil como con un simple código HTML podemos crear un mini-test en solo minutos..

Para empezar con esto solo debemos tener en cuenta que el mini-test que aparecerá en nuestro blog es el siguiente, si les gusta procedemos a que vean como se realiza:


¿Qué significa W.W.W.?

What we want!
Baño en inglés
World wide web
No significa nada

Si les gusto y lo quieren realizar deben nada mas tener en cuenta el siguiente código HTML y pegarlo en un Elemento HTML/Javascript o bien en el mismo articulo en la parte de Edición HTML:


<center><div style="background-"&gt;<span >¿Qué significa W.W.W.?</span></div></center><div style="background-">

<input name="b1" onclick="alert('Ni un poquito cerca');b1.checked;" type="radio">What we want!

<input name="b2" onclick="alert('¿En qué estás pensando?');b2.checked;" type="radio">Baño en inglés

<input name="b3" onclick="alert('¡Correcto!');b3.checked;" type="radio">World wide web

<input name="b4" onclick="alert('Hay que leer más');b4.checked;" type="radio">No significa nada</div>


Ya ese serie el código de la encuentra en si, pero podemos personalizarlo.. como ven en el código marque muchos lugares con colores distintivos, esto lo hice para poder explicarle que códigos modificar y para que sirve cada uno. El código que marque de color Rojo es para cambiar las respuestas que encontraran en el test, lo que marque en color Azul es para cambiar el resultado o alerta que se mostrara cuando el usuario toque la opción correcta o incorrecta, el código marcado en color Naranja indica que deben sustituirlo por 'background-color: #c27ba0;' [esto es fundamental para el funcionamiento del mini-test] y por ultimo el titulo o la pregunta clave del mini-test lo podemos cambiar modificando el texto que marque en Violeta por la pregunta que queremos formular en el mini-test.

  • rss
  • Del.icio.us
  • Digg
  • Twitter
  • StumbleUpon
  • Reddit
  • Share this on Technorati
  • Post this to Myspace
  • Share this on Blinklist
  • Submit this to DesignFloat
 
Design by pedro el escamoso