Crea una prueba divertida o verdadera con CSS

Me sorprende constantemente lo que puedes lograr usando solo HTML, CSS y un poco de ingenio. Me encanta pensar fuera de la caja e intentar experimentos creativos solo para ver si puedo lograrlo.

El desafío aleatorio de hoy es crear una pequeña y divertida prueba verdadera / falsa. Las preguntas se presentarán al usuario y las respuestas solo se revelarán al hacer clic. Para hacer que la magia suceda, recurriremos a algunos métodos bastante locos y usaremos características como activo, enfoque e incluso tabindex. Estás obligado a aprender algunas cosas extravagantes, así que salta y sigue.

Launch Demo - Descargar archivos

HTML básico

Lo primero que debemos hacer es averiguar la estructura de nuestro cuestionario. Estará compuesto por una serie de preguntas (no son técnicamente preguntas, pero obtienes la idea), cada una de las cuales contiene una declaración seguida de dos respuestas posibles: verdadera y falsa.

Para que la declaración sea evaluada, usaremos una etiqueta h2. Para verdadero y falso, usaremos etiquetas de párrafo. Finalmente, envolveremos toda la unidad en una bonita pregunta div. Esta estructura es muy modular y se repetirá fácilmente a medida que agreguemos más preguntas.

Recuerde, vamos a hacer que el usuario haga clic en la pregunta para ver la solución. Todavía no necesitamos saber exactamente cómo funciona esto, pero sí debemos asegurarnos de que tenemos un método para indicar la solución adecuada. Para hacer esto, podemos usar un? Si? clase y un? no? clase. Para cada pregunta, el? Si? La clase se aplicará a la solución correcta. ¿Podría alguien posiblemente engañar y mirar la fuente de las respuestas? Puedes apostar, pero no nos proponemos hacer algo que sea seguro para que los tramposos lo tengan.

Aquí hemos establecido? Falso? a la respuesta correcta. Ahora que hemos resuelto nuestra estructura básica, configuremos algunas preguntas de muestra. Para el experimento de hoy, intente que sus declaraciones sean súper cortas para que todo encaje en una sola línea.

Instrucciones

Para una buena medida, también incluiremos algunas instrucciones básicas. Esto asegurará que el usuario sepa qué hacer al cargar la página.

CSS de inicio

Ahora que hemos resuelto nuestro contenido básico, podemos saltar y comenzar un estilo visual. Haremos un reinicio básico de un hombre vago para asegurarnos de que las cosas se estén alineando correctamente en los navegadores, y luego seguiremos las instrucciones de estilo. Agregue un poco de margen y relleno, establezca un color de fondo, alinee el texto en el centro y transforme en mayúsculas.

A continuación, simplemente configure los estilos de fuente para el texto instructivo. He usado el taquigrafía aquí para poner el texto en negrita, establezca el tamaño / altura de línea y cree una pila de fuentes.

Este código debe hacer que las instrucciones en la parte superior se vean como el texto en la captura de pantalla a continuación. Bastante sencillo, pasemos a los estilos para las preguntas.

Pregunta CSS

Lo primero que debemos codificar aquí es nuestro contenedor de preguntas. Establecer una altura de 100px y un ancho de 100%. Luego configure el color de fondo, el margen y el desbordamiento como se ve a continuación.

Lo siguiente son las etiquetas h2. Primero, colóquelos a la izquierda (verá por qué más adelante), luego agregue un margen, configure el color a gris oscuro, haga que el texto esté en mayúsculas y use la fuente de nuevo para hacer el texto en negrita, 80px Helvetica. Al pasar el mouse, cambia el color a un gris más oscuro y asegúrate de que el cursor sea un puntero.

Una vez más, no hay nada realmente complicado aquí. Solo estamos haciendo un estilo de texto básico para hacer que las cosas se vean bonitas. Aquí es cómo deberían verse tus preguntas ahora mismo:

Respuesta CSS

Tenemos cada declaración estilizada, así que ahora es el momento de asegurarnos de que? ¿Verdad? y? falso? ven bien y bien Para hacer esto, colóquelos a la izquierda para que estén en línea con la declaración. Luego, agregue un poco de margen, configure el color y la fuente, y hágalos en mayúsculas. Tenga en cuenta que realmente he establecido el tamaño de fuente a 0px. Esto les ayuda a permanecer ocultos hasta que el usuario haga clic en la pregunta, los haremos más grandes más adelante. Finalmente, terminamos incluyendo una transición de color básica para que la solución se difunda gradualmente cuando el usuario haga clic.

Usando: activo para mostrar la respuesta

Todo está codificado y en su lugar, pero ¿cómo conseguimos que el navegador muestre la respuesta correcta cuando el usuario hace clic? Aquí es donde las cosas saltan al lado experimental. Vamos a secuestrar el :activo pseudo clase para que podamos rastrear un evento de clic en nuestras etiquetas h1.Tenga en cuenta que IE6 solo funcionará con los estados activos aplicados a los anclajes, por lo que si está preocupado por ese navegador (no lo estoy), regrese y envuelva sus encabezados en un ancla.

Así es como esto va a funcionar:

¿Qué diablos está pasando aquí? Es un fragmento bastante corto, pero puede ser un poco complicado de desentrañar. Básicamente, le dice al navegador que cambie el color y el tamaño de cualquier elemento con una clase de? Sí? que pasa a ser un hermano de un h2 activo actualmente (se hace clic). Lo que esto significa es que, al hacer clic en una pregunta, la respuesta correcta, tal como se define en "sí". Clase, aparecerá en rojo.

Pruébalo

Con ese pequeño trozo de código, esta cosa ahora es perfectamente funcional. Pruébalo siguiendo el enlace de abajo.

Manifestación: Haga clic aquí para lanzar

Un método alternativo

Ahora, digamos que no le gusta el hecho de que tiene que hacer clic y mantener presionado el botón del mouse para ver la respuesta. ¿No podemos simplemente mantener la respuesta en un solo clic hasta que el usuario haga clic en otra cosa? Con un poco más de engaño, podemos.

Para lograr esto, usaremos otro truco extraño y experimental. Al jugar con pruebas como estas, podrá familiarizarse con el código HTML y CSS que puede necesitar algún día en un proyecto real.

Lo primero que debes hacer es ir a todas tus etiquetas h2 en tu HTML y agregarlas índice de la pestaña -? - 1?. Esto le permite especificar el orden en que se resaltan las cosas como las pestañas de usuario en la página. Si insertamos el valor -1, inhabilitamos la capacidad del usuario para tabular este elemento.

Ahora, lo interesante es que cuando combinamos esto con el :atención pseudo clase, podemos hacer que la respuesta permanezca despierta después de que el usuario haga clic. Agreguemos otra pieza a ese fragmento de CSS de antes:

Añadimos en un selector que es idéntico al anterior, solo que esta vez usamos atención en lugar de activo. Sin embargo, en caso de que algunos navegadores no admitan este pequeño truco, dejamos la antigua funcionalidad como alternativa.

Pruébalo

Ahora que hemos cambiado esto, veamos otra demo. Esta vez, simplemente haga clic en una de las declaraciones para ver aparecer el verdadero / falso. Debe permanecer allí hasta que haga clic en otro lugar.

Manifestación: Haga clic aquí para lanzar

Conclusión

Ahí lo tiene, incluso si no tiene uso para un cuestionario verdadero / falso, ahora debería tener algunas ideas geniales para usar el índice activo, el índice y el enfoque en formas que nunca antes haya considerado. ¿Conoces algún otro truco en la misma línea? Cuéntanos con un comentario abajo.