Ich bin ständig überrascht, was Sie nur mit HTML, CSS und etwas Einfallsreichtum erreichen können. Ich denke gerne über den Tellerrand und versuche kreative Experimente, nur um zu sehen, ob ich es schaffen kann.
Die heutige Zufallsherausforderung besteht darin, ein unterhaltsames kleines wahres / falsches Quiz zu erstellen. Fragen werden dem Benutzer präsentiert und die Antworten werden nur durch Klicken angezeigt. Um die Magie zu verwirklichen, wenden wir uns einigen verrückten Methoden zu und verwenden Funktionen wie Active, Focus und sogar Tabindex! Du wirst bestimmt ein paar schrullige Sachen lernen, also schieße den Sprung und folge ihm.
Demo starten - Dateien herunterladen
Grundlegendes HTML
Als Erstes müssen wir die Struktur unseres Quiz herausfinden. Es wird aus einer Reihe von Fragen bestehen (sie sind es nicht technisch Fragen, aber Sie bekommen die Idee), von denen jede eine Aussage enthält, gefolgt von zwei möglichen Antworten: wahr und falsch.
Für die auszuwertende Anweisung verwenden wir ein h2-Tag. Für wahr und falsch verwenden wir Absatzmarken. Zum Schluss packen wir die gesamte Einheit in ein schönes Frage-Div. Diese Struktur ist sehr modular und kann leicht wiederholt werden, wenn weitere Fragen hinzugefügt werden.
Denken Sie daran, dass der Benutzer auf die Frage klicken muss, um die Lösung zu sehen. Wir müssen uns noch nicht genau damit auskennen, wie dies funktioniert, aber wir müssen sicherstellen, dass wir eine Methode haben, um die richtige Lösung anzugeben. Um dies zu tun, können wir ein? Ja? Verwenden. Klasse und ein? Nein? Klasse. Für jede Frage das? Ja? Klasse wird auf die richtige Lösung angewendet. Könnte jemand denkbar betrügen und nach der Quelle für die Antworten suchen? Sie wetten, aber wir wollen nicht etwas schaffen, das Hardcore sicher macht, damit Betrüger es schaffen können.
Hier haben wir gesetzt? False? auf die richtige Antwort Nachdem wir unsere grundlegende Struktur herausgefunden haben, wollen wir ein paar Beispielfragen stellen. Versuchen Sie für das heutige Experiment, Ihre Aussagen extrem kurz zu halten, damit alles in eine einzige Zeile passt.
Anleitung
Für eine gute Maßnahme geben wir auch einige grundlegende Anweisungen an. Dadurch wird sichergestellt, dass der Benutzer beim Laden der Seite weiß, was zu tun ist.
Starter-CSS
Nachdem wir nun unsere grundlegenden Inhalte herausgefunden haben, können wir hinüber springen und mit dem visuellen Styling beginnen. Wir werden einen einfachen Lazy-Man-Reset durchführen, um sicherzustellen, dass die Dinge in den Browsern korrekt aneinandergereiht sind, und fahren dann mit der Gestaltung der Anweisungen fort. Fügen Sie Rand und Abstand hinzu, setzen Sie eine Hintergrundfarbe, zentrieren Sie den Text und transformieren Sie ihn in Großbuchstaben.
Als Nächstes legen Sie einfach die Schriftarten für den Anweisungstext fest. Ich habe die verwendet Schriftkürzel Um den Text fett zu machen, stellen Sie die Größe / Zeilenhöhe ein und erstellen Sie einen Schriftstapel.
Dieser Code sollte Anweisungen am oberen Rand wie der Text in der Abbildung unten ausmachen. Ziemlich unkompliziert, lassen Sie uns auf die Stile für die Fragen eingehen.
Frage CSS
Das erste, was wir hier kodieren müssen, ist unser Fragencontainer. Legen Sie eine Höhe von 100 Pixel und eine Breite von 100% fest. Stellen Sie dann die Hintergrundfarbe, den Rand und den Überlauf wie unten gezeigt ein.
Als nächstes sind die h2-Tags. Bewegen Sie diese zuerst nach links (Sie werden später sehen, warum), fügen Sie dann einen Rand hinzu, setzen Sie die Farbe auf ein dunkles Grau, setzen Sie den Text in Großbuchstaben und verwenden Sie erneut die Schriftartkürzel, um den Text fett zu machen, 80px Helvetica. Ändern Sie im Hover-Modus die Farbe in ein dunkleres Grau und stellen Sie sicher, dass der Cursor ein Zeiger ist.
Auch hier gibt es nichts wirklich kompliziertes. Wir machen nur ein paar grundlegende Textstile, damit die Dinge schön aussehen. So sollten Ihre Fragen jetzt aussehen:
Antworten Sie auf CSS
Wir haben jede Aussage überarbeitet, also ist es jetzt an der Zeit, sicherzustellen, dass das? Wahr? und? false? siehst gut aus. Um dies zu tun, gleiten Sie sie nach links, damit sie mit der Anweisung übereinstimmen. Fügen Sie dann einen kleinen Rand hinzu, legen Sie Farbe und Schriftart fest und schreiben Sie sie in Großbuchstaben. Beachten Sie, dass ich die Schriftgröße auf 0px gesetzt habe. Dies hilft ihnen, versteckt zu bleiben, bis der Benutzer auf die Frage klickt. Wir werden sie später vergrößern. Abschließend fügen wir einen grundlegenden Farbübergang hinzu, damit die Lösung beim Klicken des Benutzers allmählich sichtbar wird.
Mit: Aktiv zum Anzeigen der Antwort
Alles ist verschlüsselt und an Ort und Stelle, aber wie kann der Browser die richtige Antwort anzeigen, wenn der Benutzer klickt? Hier springen die Dinge auf die experimentelle Seite. Wir werden die entführen :aktiv Pseudo-Klasse, damit wir ein Klickereignis auf unseren H1-Tags verfolgen können.Beachten Sie, dass IE6 nur mit aktiven Zuständen funktioniert, die auf Anker angewendet werden. Wenn Sie sich also Sorgen um diesen Browser machen (ich bin es nicht), gehen Sie zurück und wickeln Sie die Überschriften in einen Anker.
So funktioniert das:
Was zum Teufel ist hier los? Es ist ein kurzes Snippet, aber es kann etwas kompliziert sein, es zu entwirren. Grundsätzlich wird der Browser angewiesen, die Farbe und Größe eines Elements mit der Klasse "Ja" zu ändern. das ist zufällig ein Geschwister eines gerade aktiven (geklickt) h2. Was bedeutet dies, wenn Sie auf eine Frage klicken, die richtige Antwort, wie durch "Ja" definiert? Klasse, wird rot angezeigt.
Versuch es
Mit diesem einen kleinen Code ist dieses Ding jetzt perfekt funktionsfähig. Probieren Sie es aus, indem Sie dem Link unten folgen.
Demo: Klicken Sie hier, um zu starten
Eine alternative Methode
Nehmen wir an, Sie mögen die Tatsache nicht, dass Sie die Maustaste gedrückt halten müssen, um die Antwort zu sehen. Können wir die Antwort nicht einfach mit einem einzigen Klick aufrechterhalten, bis der Benutzer auf etwas anderes klickt? Mit etwas mehr Trickerei können wir.
Um dies zu erreichen, verwenden wir einen weiteren, verrückten, experimentellen Trick. Wenn Sie mit solchen Tests herumspielen, erhalten Sie ein Gefühl für HTML- und CSS-Code, das Sie möglicherweise eines Tages in einem echten Projekt verwenden müssen.
Das erste, was Sie tun möchten, ist, alle Ihre h2-Tags in Ihrem HTML-Code aufzurufen und hinzuzufügen Registerindex -? - 1?. Auf diese Weise können Sie die Reihenfolge festlegen, in der die Registerkarten der Benutzer auf der Seite hervorgehoben werden. Wenn wir den Wert -1 einfügen, deaktivieren wir die Möglichkeit des Benutzers, zu diesem Element zu wechseln.
Das Interessante ist, dass wir dies mit dem kombinieren :Fokus Pseudo-Klasse, können wir die Antwort tatsächlich aufrecht erhalten, nachdem der Benutzer geklickt hat. Fügen wir dem CSS-Snippet ein weiteres Stück von vor:
Wir haben einen Selektor hinzugefügt, der mit dem letzten identisch ist, nur diesmal haben wir verwendet Fokus anstatt aktiv. Für den Fall, dass einige Browser diesen kleinen Trick nicht unterstützen, haben wir die alte Funktionalität als Fallback verwendet.
Versuch es
Nachdem wir dies geändert haben, sehen wir uns eine weitere Demo an. Klicken Sie diesmal einfach auf eine der Anweisungen, um die wahr / falsch anzuzeigen. Es sollte dort bleiben, bis Sie anderswo klicken.
Demo: Klicken Sie hier, um zu starten
Fazit
Da haben Sie es, auch wenn Sie kein wahres / falsches Quiz brauchen, sollten Sie jetzt einige großartige Ideen für die Verwendung von active, tabindex und focus auf eine Weise haben, die Sie vielleicht nie zuvor in Betracht gezogen haben. Kennen Sie andere Tricks in der gleichen Richtung? Sagen Sie uns unten einen Kommentar.