Construire un quiz amusant ou vrai avec CSS

Je suis constamment surpris par ce que vous pouvez réaliser en utilisant uniquement le HTML, le CSS et un peu d'ingéniosité. J'aime sortir des sentiers battus et tenter des expériences créatives simplement pour voir si je peux y arriver.

Le défi aléatoire du jour consiste à créer un petit jeu-questionnaire amusant / vrai. Les questions seront présentées à l'utilisateur et les réponses ne seront révélées qu'au clic. Pour que la magie opère, nous allons nous tourner vers des méthodes assez folles et utiliser des fonctionnalités comme actif, focus et même tabindex! Vous allez sûrement apprendre des trucs bizarres, alors sautez et suivez le mouvement.

Lancer la démo - Télécharger des fichiers

HTML de base

La première chose à faire est de déterminer la structure de notre quiz. Il sera composé d’une série de questions (elles ne sont pas techniquement vous avez l’idée), chacune d’elles contenant une déclaration suivie de deux réponses possibles: vrai et faux.

Pour que l'instruction soit évaluée, nous utiliserons une balise h2. Pour true et false, nous utiliserons des balises de paragraphe. Enfin, nous allons emballer l’ensemble dans une belle question. Cette structure est très modulaire et pourra être facilement répétée à mesure que nous ajouterons plus de questions.

N'oubliez pas que l'utilisateur va cliquer sur la question pour voir la solution. Nous n'avons pas encore besoin de savoir exactement comment cela fonctionne, mais nous devons nous assurer de disposer d'une méthode pour indiquer la solution appropriée. Pour ce faire, nous pouvons utiliser un? Oui? classe et un? non? classe. Pour chaque question, le? Oui? La classe sera appliquée à la bonne solution. Est-ce que quelqu'un pourrait tricher et regarder la source des réponses? Vous pariez, mais nous ne cherchons pas à sécuriser quelque chose de hardcore afin que les tricheurs puissent en tirer parti.

Ici nous avons mis? Faux? à la bonne réponse. Maintenant que nous avons défini notre structure de base, établissons quelques exemples de questions. Pour l'expérience d'aujourd'hui, essayez de garder vos déclarations très courtes afin que tout puisse tenir sur une seule ligne.

Instructions

Pour faire bonne mesure, nous inclurons également certaines instructions de base. Cela garantira que l'utilisateur sait quoi faire lors du chargement de la page.

CSS de démarrage

Maintenant que nous avons compris notre contenu de base, nous pouvons sauter et commencer un style visuel. Nous allons ajouter la réinitialisation d’un homme paresseux pour s’assurer que tout se passe bien entre les navigateurs, puis passer au style des instructions. Ajoutez des marges et des marges intérieures, définissez une couleur d'arrière-plan, alignez le texte au centre et transformez-le en majuscule.

Ensuite, définissez simplement les styles de police pour le texte d’instruction. J'ai utilisé le sténo de police ici pour mettre le texte en gras, définir la taille / hauteur de ligne et créer une pile de polices.

Ce code devrait faire en sorte que les instructions en haut ressemblent au texte de la capture d'écran ci-dessous. Plutôt simple, passons aux styles de questions.

Question CSS

La première chose que nous devons coder ici est notre conteneur de questions. Définissez une hauteur de 100 px et une largeur de 100%. Définissez ensuite la couleur d’arrière-plan, la marge et le débordement comme indiqué ci-dessous.

Suivant sont les balises h2. Commencez par les faire flotter vers la gauche (vous verrez pourquoi plus tard), puis ajoutez une marge, définissez la couleur sur un gris foncé, mettez le texte en majuscule et utilisez à nouveau le raccourci de police pour rendre le texte gras, 80px Helvetica. En survol, changez la couleur en gris plus foncé et assurez-vous que le curseur est un pointeur.

Encore une fois, il n'y a rien de vraiment compliqué ici. Nous sommes en train de créer un style de texte de base pour rendre les choses plus jolies. Voici à quoi vos questions devraient ressembler maintenant:

Répondre CSS

Chaque déclaration est stylée, il est maintenant temps de s’assurer de la vérité. et? faux? l'air bien et convenable. Pour ce faire, faites-les flotter à gauche pour qu'ils soient bien alignés sur la déclaration. Ajoutez ensuite une petite marge, définissez la couleur et la police, puis mettez-les en majuscule. Notez que j'ai en fait défini la taille de la police sur 0px. Cela les aide à rester cachés jusqu'à ce que l'utilisateur clique sur la question. Nous les agrandirons plus tard. Enfin, nous finissons par inclure une transition de couleur de base afin que la solution apparaisse progressivement lorsque l'utilisateur clique dessus.

Using: active pour afficher la réponse

Tout est codé et en place, mais comment faire en sorte que le navigateur affiche la bonne réponse lorsque l'utilisateur clique? C’est là que les choses vont du côté expérimental. Nous allons détourner le :actif pseudo classe afin que nous puissions suivre un événement de clic sur nos balises h1.Notez que IE6 ne fonctionnera qu'avec les états actifs appliqués aux ancres, donc si vous êtes inquiet pour ce navigateur (ce n'est pas mon cas), revenez en arrière et enroulez vos titres dans une ancre.

Voici comment cela va fonctionner:

Mais qu'est ce qu'il se passe ici? C'est un extrait assez court mais cela peut être un peu compliqué à démêler. Fondamentalement, il indique au navigateur de changer la couleur et la taille de tout élément avec une classe de? Oui? cela se trouve être un frère d'un h2 actuellement actif (en train de cliquer). Cela signifie que lorsque vous cliquez sur une question, la réponse correcte est définie par le symbole? Oui? classe, apparaîtra en rouge.

Essaye le

Avec ce petit morceau de code, cette chose est maintenant parfaitement fonctionnelle. Essayez-le en suivant le lien ci-dessous.

Démo: Cliquez ici pour lancer

Une méthode alternative

Maintenant, disons que vous n'aimez pas le fait que vous devez cliquer et maintenir le bouton de la souris enfoncé pour voir la réponse. Ne pouvons-nous pas simplement garder la réponse sur un seul clic jusqu'à ce que l'utilisateur clique sur quelque chose d'autre? Avec un peu plus de ruse, nous pouvons.

Pour y parvenir, nous allons utiliser un autre truc étrange et expérimental. En jouant avec des tests comme ceux-ci, vous pourrez avoir une idée du code HTML et CSS que vous pourrez éventuellement utiliser un jour dans un projet réel.

La première chose que vous voulez faire est d'aller dans toutes vos balises H2 dans votre code HTML et de les ajouter onglet index -? - 1?. Cela vous permet de spécifier l'ordre dans lequel les éléments sont surlignés lorsque les onglets de l'utilisateur autour de la page. Si nous insérons la valeur -1, nous désactivons la possibilité pour l'utilisateur de passer à cet élément.

Maintenant, la chose intéressante est que lorsque nous combinons cela avec le :concentrer pseudo-classe, nous pouvons effectivement faire en sorte que la réponse reste en place une fois que l'utilisateur a cliqué. Ajoutons un autre élément à cet extrait CSS d’avant:

Nous avons ajouté un sélecteur identique au dernier, mais cette fois-ci nous avons utilisé concentrer au lieu de actif. Juste au cas où certains navigateurs ne supportent pas cette astuce, nous avons laissé l’ancienne fonctionnalité comme solution de secours.

Essaye le

Maintenant que nous avons modifié la situation, regardons une autre démo. Cette fois, cliquez simplement sur l’une des déclarations pour voir apparaître le vrai / faux. Il devrait rester là-bas jusqu'à ce que vous cliquiez ailleurs.

Démo: Cliquez ici pour lancer

Conclusion

Voilà, même si vous n’avez aucune utilité pour un quiz vrai / faux, vous devriez maintenant avoir quelques bonnes idées pour utiliser active, tabindex et focus d’une manière que vous n’avez peut-être jamais envisagée auparavant. Connaissez-vous d'autres astuces allant dans le même sens? Dites-nous avec un commentaire ci-dessous.