Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript
Code

Erstellen Sie eine Spiffy Quiz Engine

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Das erste offizielle Nettuts+ Quiz war ein großer Erfolg, bei dem sich eine beeindruckende Anzahl von Entwicklern beteiligt und ihr Wissen ausgewertet hat. Es gab eine nicht-triviale Anzahl von Kommentaren, in denen gefragt wurde, wie die Mini-Quiz-Engine aufgebaut wurde. Und siehe da! Das werden wir heute lernen.


Ein Wort vom Autor

Quizzes sind eine große Möglichkeit, die Community zu involvieren - werfe einen Blick auf unser aktuelles Quiz. Das Problem ist, dass die Leute heute erwarten, dass Quizzes ziemlich interaktiv sind und mein Google-Fu bei der Suche nach einem System, das den Prozess erleichtert, stark gescheitert ist. Dann habe ich beschlossen, mich selbst zu bauen, und Nettuts, eine super einfache Quiz-Engine, eine, die ich spielerisch Kroggy nenne.

Ich glaube, eine Demo sagt mehr als tausend Worte. Schlage die Demo und probiere es selbst aus.

Heute werden wir uns ansehen, wie wir dies umsetzen können, Sie haben es richtig eingeschätzt, unsere Lieblings-JavaScript-Bibliothek, jQuery. Interessiert? Fangen wir gleich an!


Design Ziele

Das Design-Ziel für diese Version ist unglaublich einfach. Ich werde dich durch die Punkte führen, die ich mir vorgestellt habe.

  • Wir werden etwas sehen, das glatt und elegant aussieht - eines, das den Benutzer zum Quiz einlädt.
  • Dies ist kein Platz für eine lange Liste von Fragen mit Optionsfeldern und Labels. Wir müssen einen einfachen Schieberegler implementieren, um jede Frage einzeln anzuzeigen.
  • Fragen werden am Ende des Quiz anstatt sofort ausgewertet. Auf diese Weise kann sich der Leser auf den Quiz-Aufnahmeprozess konzentrieren, anstatt jedes Mal pausieren zu müssen, um das Ergebnis zu bewerten.
  • Ein einfacher Fortschrittsbalken unten, um den Fortschritt des Benutzers anzuzeigen.
  • Die richtigen Antworten können entweder im JavaScript oder im HTML leben. Dies sind nicht die SATs - keine Notwendigkeit, mehr Komplexität in unsere noch junge Codebasis einzuführen.

Einige bemerkenswerte Funktionen, denen ich mich entschließe:

  • Keine Bewertungen nach dem Quiz. Dadurch würden wir unseren eigenen HTML-Code für Daten scrapen und ihn dann erneut rendern. Kein Spaß! Und definitiv nicht im Rahmen des heutigen Tutorials.
  • Wir werden das nicht in ein Plugin einfügen. Wir konzentrieren uns besser auf den eigentlichen Entwicklungsteil der Funktionalität. Es gibt viele Inhalte darüber, wie Code in ein jQuery-Plugin umgestaltet werden kann.
  • Als Erweiterung des obigen Punktes bedeutet es auch, dass der HTML-Code für die Tests von uns vorab geschrieben wird - er wird nicht generiert und dynamisch eingefügt.

Das ist es, denke ich. Lass uns weiter machen, wie wir das erreichen werden.


Aktionsplan

Wir müssen nun festlegen, was in einer bestimmten Reihenfolge zu tun ist.

  • Schritt 1: Erstellen Sie das HTML-Markup für die Basisquiz-Engine und formatieren Sie es entsprechend.
  • Schritt 2: Wenn ein Benutzer eine Option ausgewählt und auf die nächste Schaltfläche geklickt hat, fahren Sie einfach mit der nächsten Frage fort. Wenn keine Option ausgewählt ist, wird ein Fehler ausgegeben.
  • Schritt 3: Wenn der Benutzer an der letzten Frage ist und auf den nächsten Knopf klickt, hebe die Hölle auf und werte die Ergebnisse wie folgt aus.
  • Schritt 4: Finden Sie heraus, welche Option der Benutzer ausgewählt hat, und passen Sie ihn der Liste der vordefinierten Antworten an. Geben Sie ein einfaches Array zurück, damit wir die Ergebnisse später auswerten und einige Daten auf dem letzten Bildschirm darstellen können.

Ok, das hört sich ziemlich einfach an. Dies sind die grundlegenden Schritte zur Erstellung dieser Funktionalität. Natürlich gibt es ein paar andere kleine Dinge, aber ich erkläre sie im weiteren Verlauf.

Lassen Sie uns nun in einen Code eintauchen und uns die Hände schmutzig machen. Zuerst das HTML.


Kernmarkierung

Das Markup ist eine der Säulen, die diesen Motor halten, so dass wir jeden Teil einzeln durchlaufen werden, wobei der gesamte Code am Ende gezeigt wird, um das Gesamtbild zu zeigen.

Ein div-Element mit einer ID des main-quiz-holder wird der Hauptcontainer sein, in dem wir unseren gesamten HTML-Code platzieren werden - der gesamte Code darunter wird in dieses div-Element eingefügt.

Als nächstes erstellen wir eine Beispielfolie des Quiz. Denken Sie daran, dass wir einen super einfachen Slider erstellen werden, um unsere individuellen Fragen zu beantworten. Jede Folie wird mit einem div-Element mit einer Klasse von questionContainer aufgenommen.

Bevor wir uns dem Markup einer Quizfolie zuwenden, lassen Sie uns ein paar Formalitäten behandeln.

Der obige Code ist für den Intro-Container, der angezeigt wird, der den Benutzer auffordert, das Quiz zu nehmen. Wir fügen nur eine ID des intro-container hinzu, um es später besser zu gestalten.

Innerhalb des div haben wir nur ein einzelnes Splash-Bild, das von einem Ankerelement umschlossen wird.

Und die Ergebnisse gleiten. Nichts besonderes hier: Wir vergeben eine spezielle ID und legen ein leeres Div hinein, um unsere Ergebnisse zu halten. Wir werden dieses Element auf den Weg bringen, wenn wir die Ergebnisse bewerten.

Wenn Sie die Klasse von questionContainer für diese und die Folie oben bemerkt haben, Goldstern für Sie! Wir fügen diese Klasse hinzu, da beide Container Teil des Sliders sind.

Und schließlich ein bisschen Hauswirtschaft. Wir erstellen div-Elemente für den Fortschrittsbalken-Container, die eigentliche Leiste selbst und die Benachrichtigung, die angezeigt wird, wenn der Benutzer keine Option auswählt.

Damit ist unser Skelett-Markup beendet.


Markup für jede Frage

Ahh, der fleischige Teil des Markups steht vor der Tür. Diese Abschnitte mögen kompliziert aussehen, aber wie immer werde ich sie in kleinere Teile zerlegen und Sie durch den Code führen.

Wie bereits erwähnt, werden wir jede unserer Quiz-Folien mit einem div-Element mit einer Klasse von questionContainer umhüllen. Im Inneren haben wir ein div-Element mit einer question klasse, die jede unserer Fragen enthält.

Wir folgen ihm mit einer ungeordneten Liste, die die möglichen Antworten auf die Frage enthält, und einem div, der als Container für die Navigationselemente dient [vorheriges / nächstes]. Notieren Sie sich den Klassennamen jedes dieser Abschnitte.

Bei Erweiterung auf unsere ungeordnete Liste hat jedes li Element ein label-Element, das einen einzelnen Radio-Button enthält. Beachten Sie, dass wir jedem Funkgerät ein data-key attribut zuweisen. Wir werden es uns später ansehen.

Und schließlich der Navigationscontainer. Nichts Besonderes hier. Wir haben ein Hauptdiv mit einer Klasse von btnContainer, die als Container fungiert. Im Inneren haben wir einen Anker, der von einem div-Element umwickelt ist. Das div ist nur für Styling-Zwecke, also zögern Sie nicht, das in Ihrer Implementierung zu verwerfen.

Beachten Sie, dass die vorherigen und nächsten Schaltflächen logisch eingefügt werden müssen. Sie möchten keine vorherige Schaltfläche auf der ersten tatsächlichen Quizfolie, während die letzte Folie die Schaltfläche zum Auslösen des Auswertungsprozesses haben muss.

Anstelle der nächsten Schaltfläche muss die letzte Folie Folgendes enthalten:

Und das schließt den HTML-Teil unserer Quiz-Folien ein. Sie werden feststellen, dass wir den HTML-Code für die Quizergebnisse nicht bearbeitet haben. Wir werden das während der JavaScript-Phase angehen. Lasst uns jetzt zur Präsentation übergehen.


Endgültiges HTML

Am Ende dieser Phase sieht unsere Seite so aus:



Kern CSS

Beginnen wir damit, unser Quiz elegant und attraktiv aussehen zu lassen. Zuerst der Hauptbehälter.

Im Grunde zentrieren wir es, geben ihm einen Hintergrund und eine Grenze, um es hervorzuheben. Die CSS3-Eigenschaften sehen vielleicht etwas verwirrend aus, aber hauptsächlich aufgrund der browserspezifischen Eigenschaften. Wir definieren hier einfach einen Box-Schatten für den Container - nichts Kompliziertes, wenn Sie erst einmal die Syntax gelernt haben.

Definieren wir eine Breite und zentrieren den Inhalt der Intro- und Final-Folie. Auf diese Weise müssen wir nicht jeden individuell gestalten, da beide Inhalte ohnehin zentriert sein müssen.

Lassen Sie uns jetzt unsere Titel und Fragen gestalten. Da wir wollen, dass sie sich unter den anderen Elementen herausheben, stossen wir die Schriftgrößen auf und geben ihnen auf beiden Seiten beträchtliche Ränder. Denken Sie daran, dass Unmengen von Leerräumen dazu beigetragen haben, den Inhalt besser zu gestalten.

Jetzt zum Fortschrittsbalken-Container. Das erste, was Sie notieren müssen, ist die position: absolute Deklaration. Wir fügen dies hinzu, da dieses Element im übergeordneten Container fixiert bleiben muss

Die Eigenschaften bottom and left geben an, dass sie am unteren Rand des Containers fixiert werden soll. Der Rest des CSS dient lediglich dem Styling.

Und jetzt der eigentliche Fortschrittsbalken. Wir wollen, dass es untertrieben und doch prominent genug ist, so dass ich einen leichten grauen Farbverlauf habe. Wie bereits erwähnt, sieht das vielleicht kompliziert aus, aber es liegt an der relativ komplexen Syntax der CSS3-Gradienteneigenschaft.

notice ist das div-Element, das die Fehlermeldung enthält, wenn der Benutzer z. B. eine Option nicht ausgewählt hat. Um die Dinge zu vereinfachen, habe ich entschieden, es absolut zu positionieren, direkt über dem Fortschrittsbalken.


Frage Slide CSS

Auf den Foliencontainer, questionContainer, zuerst. Wir definieren eine feste Breite, damit wir sie richtig zentrieren können. Wir definieren auch eine Mindestbreite, damit es nicht mit weniger Optionen bricht. Schließlich fügen wir ein wenig Padding hinzu, um die Darstellung zu verbessern und einen Überlauf overflow: auto Deklaration, um floated-Kindelemente zu behandeln.

Lassen Sie uns als nächstes die Antwortenliste behandeln. Wir entfernen lediglich das Styling für die Liste, indem wir list-style: none und ein wenig Abstand und Abstand für eine bessere Darstellung.

Das obige ist das Styling für die einzelnen Listenelemente. Das CSS kann in 3 Abschnitte unterteilt werden.

  • Die ersten paar Zeilen sind sehr einfach - wir fügen einen kleinen Rand und Abstand hinzu, geben eine Farbe für den darin enthaltenen Text an und fügen einen kleinen Randradius hinzu.
  • Als Nächstes verwenden wir die Boxschatteneigenschaft CSS3, um sie besser aussehen zu lassen. Beachten Sie die verschiedenen Präfixe für verschiedene Browser.
  • Schließlich behandeln wir den Hintergrund des Elements. Wir geben einen Grauverlauf an, der angezeigt werden soll.

Auf das Styling für das li-Element, wenn es vom Benutzer ausgewählt wurde. Wir müssen es wirklich hervorheben, um dem Benutzer zu helfen. In diesem Sinne wähle ich einen hellblauen Hintergrund für die Anwendung.


CSS für die Navigationselemente

Gehen wir voran und stylen Sie die div-Elemente, die die Navigationselemente enthalten. Der Großteil des obigen Codes sollte ziemlich erklärend sein. Wir definieren etwas Padding, um den Text besser zu umrahmen, ihm eine Farbe zuzuweisen, die Schriftgröße ein wenig zu erhöhen und ein paar abgerundete Ecken hinzuzufügen. Und schließlich fügen wir einige CSS3-Box-Schatten hinzu, um es schick aussehen zu lassen.

Da wir möchten, dass der nächste Button anders aussieht, überschreiben wir einige der Stile von oben. Hier bewege ich den Hauptschirm von blau nach grün.

Dies kümmert sich um die Position für jeden der Knöpfe. Wir möchten, dass die vorhergehende Schaltfläche nach links verschoben wird, während die nächste und die letzte Schaltfläche nach rechts verschoben werden muss. Genau das macht der obige Code.

Während der HTML-Phase müssen Sie bemerkt haben, dass die Schaltflächen selbst ein Eltern-Div-Element mit einem Child-Link-Element haben. Wir haben die Elternelemente im vorherigen Codeblock gestaltet. Das obige behandelt die untergeordneten Verknüpfungen.

Grundsätzlich fügt der obige Code die kleine Grafik in die Schaltflächen ein. Wir fügen eine kleine Füllung hinzu, so dass der Text gut versetzt ist. Beachten Sie, wie wir zwischen padding-left and padding-right wechseln, um jedes Element genau zu stylen.

Der btnContainer selbst bekommt einen kleinen Rand und Abstand, um ihn dort zu positionieren, wo wir ihn haben wollen.


Styling der Ergebnisse

Puh! Die meisten CSS-Arbeiten liegen jetzt hinter uns. Lassen Sie uns das letzte Stück CSS angehen - die letzte Folie, auf der die Ergebnisse angezeigt werden. Da Sie den HTML-Code noch nicht gesehen haben, kann es etwas verwirrend sein, aber die CSS-Ausgabe ist ziemlich generisch und leicht zu analysieren.

Fangen wir klein an. Wir werden jeder "Zelle" der Ergebnisse die Klasse von resultRow zuweisen. Da wir wollen, dass es sauber präsentiert wird, werden wir alles nach links schweben, so dass es einen ordentlichen dreispaltigen Stapel von Ergebnissen bildet. Dieser Abschnitt sollte so aussehen, nachdem wir fertig sind:


Definieren wir die Basis dieser Blöcke. Wie immer verwende ich ein wenig CSS3, um die Abschnitte hervorzuheben. Abgesehen davon ist das CSS ziemlich einfach - ein wenig Polsterung, abgerundete Ecken und so.

Wir müssen die richtigen und falschen Antworten visuell hervorheben, also geht es hier. Mit CSS3 wenden wir einen grünstichigen Farbverlauf auf alle richtigen Antworten an, während die falschen die rote Behandlung erhalten. Hier läuft nichts Besonderes. Meistere die Syntax und du solltest alles haben.

Fügen wir ein paar Bilder hinzu, um das Ganze zusammenhängender erscheinen zu lassen. Wir fügen einige einfache Symbole in die Schaltflächen ein, wie oben gezeigt.

Lassen Sie uns schließlich den Antwortschlüssel-Container formatieren. Ein wenig Polsterung und Ränder helfen uns, es besser aussehen zu lassen. Wir stellen auch sicher, dass es zentriert ist und die Schriftgröße auf einen geeigneten Wert setzt.


Das abschließende CSS

Ich habe ein paar generische Teile des CSS auf dem Weg übersprungen, also hier ist das komplette CSS an dieser Stelle:

Mit allem außer dem JavaScript sollte unsere Engine wie folgt aussehen:



Die JavaScript-Interaktion

Das JavaScript ist zwar kürzer als erwartet, aber es ist das Herzstück der Mini-Engine. Wie ich bereits erwähnt habe, ist dies ein hübscher Alpha-Code, also putze die Dinge vor dem Deployment.

Wie immer gehen wir den Code Abschnitt für Abschnitt an.


Zuerst die Grundlagen

Wir werden zuerst einige der Boilerplate-Elemente behandeln.

Lassen Sie uns all unseren Code in den obigen Block setzen - eine selbstausführende anonyme Funktion. Auf diese Weise werden unsere Variablen schön namespaced, so dass zukünftige Kollisionen vermieden werden.

Und das sind die Variablen, die wir heute verwenden werden. Die Namen sollten ihren Zweck völlig offensichtlich machen. Wir speichern auch einige wichtige Elemente für den späteren Gebrauch. Ein wichtiger zu beachtender Punkt ist, wie wir den answers den Wert von kroggy.answers zuweisen. Ich werde es gleich erklären.

Wenn Sie sich die Demo angesehen haben, werden Sie ein kleines Skript-Tag bemerken, das den obigen Code enthält. Was wir hier tun, ist ein Objekt namens kroggy zu erstellen und den Antwortschlüssel in ein Quiz in einem Array namens answers zu setzen. Dies ist der Wert, den wir den Variablen answers zuvor zugewiesen haben.


Erstellen der Hilfsfunktionen

Bevor wir in den eigentlichen Code springen, wollen wir uns zunächst mit ein paar kleinen Hilfsmethoden befassen. In aufsteigender Reihenfolge der Wichtigkeit.

Ich konnte keine anständige genug Rundungsmethode finden, die in JavaScript vordefiniert ist, also ging ich voran und stellte etwas zusammen.

Sie müssen einen Wert und die Anzahl der signifikanten Ziffern auch abrunden und die Funktion erledigt den Rest. Da die Logik unglaublich einfach ist, lasse ich Sie den Rest analysieren.

Die Kommentare auf dem Ergebnisbildschirm brachten eine Menge witziger Kommentare und Belustigung unter den Quizteilnehmern mit sich, und hier findet die Magie statt.

Noch einmal, ziemlich grundlegende Programmierung, die hier vor sich geht. Die Funktion nimmt den Score als Parameter und gibt einen Kommentar zurück.

Hier sind die Bedingungen willkürlich, aber ich denke, dass sie einen ziemlich guten Job machen. Fühlen Sie sich frei, mit den Bedingungen in Ihrem Projekt herumzuspielen.

Dies ist die primäre Funktion, die den Überprüfungsprozess auswertet. Im Grunde vergleichen wir ein Array mit einem anderen Array und schieben das boolesche Ergebnis auf ein anderes Array. So einfach ist das.

Im obigen Code sind answers und userAnswers die globalen Variablen, die wir früher deklariert haben. Während ersteres initialisiert wird und früh einen Wert zugewiesen wird, wird letzteres nicht bis zur letzten Minute modifiziert, d. H. Wenn die letzte Quizfrage beantwortet wurde.

Wir durchlaufen lediglich das Array und prüfen für jedes Element die erwartete Antwort anhand der Antwort des Benutzers. Wenn alles auscheckt, schiebe einen Wert von true auf unser Ergebnis-Array. Andernfalls drücken Sie false.

Wenn die Auswertung abgeschlossen ist, geben wir das Ergebnis-Array zurück, damit es später analysiert werden kann.


Anschließen der Event-Handler

Lasst uns zuerst den ersten Intro-Slide machen. Denken Sie daran, dass wir nur ein Bild anzeigen, das von einem Anker umgeben ist? Das ist der Anker, an dem wir das obige Ereignis ausrichten.

Im Wesentlichen verstecken wir das übergeordnete Element des angeklickten Linkelements und blenden dann das unmittelbare Geschwister des übergeordneten Elements ein.

Wenn Sie bemerkt haben, dass wir nicht jede dieser Zeilen einzeln hinzufügen, gut. Du passt auf. In der obigen Methode übergeben wir den nächsten Schritt des Prozesses als Rückruf an die Animationsfunktion. Auf diese Weise passiert jede dieser Animationen nacheinander und nicht gleichzeitig, was das Standardverhalten ist. Dadurch können wir einen reibungslosen Schnittstelleneffekt erzeugen.

Der obige Code behandelt die vorherige Schaltfläche. Die Slider-Funktionalität ist ziemlich ähnlich. Blenden Sie den übergeordneten Container aus und blenden Sie das next Element in der Struktur ein. Grundsätzlich der gleiche Code wie im vorherigen Abschnitt, jedoch mit umgekehrter Richtung.

Nachdem wir damit fertig sind, nehmen wir als nächstes den Fortschrittsbalken. Was wir hier machen, ist lediglich die Breite des Fortschrittsbalkens zu animieren. Keine große Berechnung hier - dividiere die Breite des Fortschrittsbalkens durch die Anzahl der Fragen.

Da dies die vorherige Schaltfläche ist, müssen wir den Bruch von der aktuellen Gesamtbreite des Balkens subtrahieren, was wir hier tun. Sieht ein bisschen kompliziert aus, aber vertrau mir, es ist ziemlich einfach.

Wir haben noch ein paar Dinge hier, also pass auf.

Zunächst erstellen wir eine schnelle Variable und weisen ihr ein Array aller aktivierten Optionsfelder zu. Die input[type=radio]:checked selector hilft uns dies mit minimalem Aufwand.

Wir können nun die Länge dieses Arrays überprüfen. Wenn es Null ist, bedeutet dies, dass der Benutzer keine Option ausgewählt hat, und so können wir eine Fehlermeldung anzeigen, die den Benutzer dafür schirmt. Was passiert in der if-Anweisung? Wir verlassen die Funktion sofort mit return false.

Wenn wir den vorherigen Schritt hinter uns haben, ist es an der Zeit fortzufahren. Wir können jetzt die Notiz ausblenden, wenn sie vorher angezeigt wurde.

Die Slider-Logik kommt wieder ins Spiel - den aktuellen Container ausblenden und in den nächsten Container einblenden. Wir haben es schon einige Zeit gesehen und ich denke nicht, dass ich es noch einmal aufspielen muss.

Schließlich behandeln wir den Fortschrittsbalken. Ähnlich wie im letzten Block berechnen wir die zusätzliche Breite und fügen sie dann zur aktuellen Breite der Fortschrittsanzeige hinzu. Beachten Sie, dass wir sie im vorherigen Block von der aktuellen Breite abgezogen haben. In diesem Block fügen wir es hinzu, weil wir zur nächsten Frage übergehen und somit den Fortschrittsbalken vorantreiben.


Die Antworten des Benutzers sammeln

Ahh, der verschwenderische Event-Handler, der im Mittelpunkt von allem steht. Wir teilen den Prozess in zwei Teile auf:

  • Daten sammeln
  • Auswertung und Anzeige der Ergebnisse

Wir werden das erste in diesem Abschnitt angehen. Denken Sie daran, dass das gesamte JavaScript unten im obigen Handler enthalten ist.

Die ersten Zeilen sollten sich sehr ähnlich sehen. Das liegt daran, dass diese Zeilen direkt vom Handler der nächsten Schaltfläche ausgeliehen werden. Wir prüfen, ob eine Option ausgewählt wurde und zeigen andernfalls eine Fehlermeldung an.

Sobald wir auf Monkey Business geprüft haben, erstellen wir im Grunde ein Array aller markierten Checkboxen. Wir durchlaufen dann das Array und erfassen das data-key attribut jedes Elements. Erinnerst du dich daran? Wir haben diese während der HTML-Phase zu den Optionsschaltflächen hinzugefügt und zeigen die Position des Kontrollkästchens aus einer alphabetischen Perspektive an. Das heißt, die erste Option ist a, die zweite ist b und so weiter.

Was wir hier machen, ist einfach die ausgewählten Antworten zu sammeln. Das Auslesen des ausgewählten Kontrollkästchens mithilfe der Index methode ist im Nachhinein ein einfacherer Weg, aber das ist die Art und Weise, wie ich sie in der ursprünglichen Codebasis verwendet habe und mit der ich heute zusammenarbeite.

Wir schieben diese Werte auf die globale Variable userAnswers [in unserem Bereich], die später ausgewertet werden soll.


Bewertung der Ergebnisse

Nachdem wir unsere Daten gesammelt haben, können wir die Ergebnisse jetzt schnell analysieren und anzeigen. Lassen Sie uns das in kleineren Brocken behandeln.

Da wir am geschäftlichen Ende der Dinge sind, verstecken wir den Fortschrittsbalken. Keine Notwendigkeit für jetzt.

Wir erstellen auch eine Reihe von Variablen, die uns helfen, die Dinge intern zu verfolgen. Die Variablen results enthält das Ergebnis-Array, das checkAnswers zurückgibt. Wir werden es verwenden, um den endgültigen Bildschirm zu rendern. Der Zweck des Restes von ihnen sollte in Kürze offensichtlich sein.

Jetzt, da wir die Daten haben, machen wir ein paar nette Sachen damit. Zuerst durchlaufen wir die Ergebnisse, um herauszufinden, wie viele Fragen der Benutzer richtig gestellt hat. Wir werden diese Nummer verwenden, um die Punktzahl später zu berechnen.

Als nächstes werden wir es auf uns nehmen, um die schicklichen Ergebnisse zu erzielen. Da wir bereits in der Schleife sind, werden wir es verwenden, um alles andere zu rendern. Wir zeigen die Frage Nummer und je nachdem, ob der Benutzer diese bestimmte Frage richtig gemacht hat, legen Sie verschiedene HTML-Code hinein. Denken Sie daran, das CSS für die correct and wrong Klassen? Sie werden hier benutzt.

Da wir den Antwortschlüssel anzeigen müssen, verwenden wir die gleiche Schleife, um durch das Antworten-Array zu gehen und die richtige answers anzuzeigen.

Und schließlich erhalten wir die aufgerundete Punktzahl mit der Funktion roundReloaded, die wir zuvor erstellt haben, und speichern den Wert in der Variablen score.


Anzeigen der Ergebnisse

Das Fleisch unserer Arbeit ist fertig. Wir müssen nur ein paar Dinge einpacken und die Ergebnisse anzeigen.

Sehr einfache Dinge, die hier vor sich gehen. Zuerst wickeln wir den Wert von answerKey mit einem div mit einer ID des answer-key ein, um es besser zu formatieren.

Als nächstes erstellen wir den Titel des Ergebnisbildschirms. Wir verwenden die judgeSkills-Methode, um einen geeigneten Kommentar zu erstellen, gefolgt von einigen Textbausteinen, um den Punktestand zu erwähnen. Wir fügen diese Werte resultSet voran und fügen der letzten Zeichenfolge den answerKey hinzu

Dies schließt den endgültigen HTML-Code ab, der im Ergebnisbildschirm platziert werden muss. Wir ersetzen lediglich den HTML-Code mit unserem vorgenerierten HTML. Wenn alles vorhanden ist, blenden wir den vorletzten Schieberegler aus und blenden den Ergebnisbildschirm ein.


Letzte Teile der Hauswirtschaft

Wir haben ein paar einfache Dinge, die wir erledigen müssen.

Während der Initialisierung benötigen wir im Begrüßungsbildschirm keine Fortschrittsanzeige oder Fehlermeldung. Gehen wir voran und verstecken es zunächst. Außerdem tendiert Firefox aus irgendeinem Grund dazu, sich an Antworten zu erinnern, also lasst uns das vollständig löschen - jedes Kontrollkästchen ist deaktiviert, wenn eine Seite aktualisiert wird.

Hier ist etwas, um die ausgewählte Option zu beleuchten. Achte ein wenig darauf, denn hier ist es etwas heikel.

Wenn ein Kontrollkästchen ausgewählt ist, werden wir zum übergeordneten Listenelement und entfernen die selected Klasse aus allen untergeordneten li-Elementen. Danach geben wir dem Elternobjekt des angeklickten Kontrollkästchens eine selected Klasse, so dass sie hell und blau leuchtet.

Und schließlich, um die Slider-Funktionalität zu vervollständigen, müssen Sie alle außer der ersten Folie ausblenden. Sie können JavaScript verwenden, um dies zu tun oder die einfachere CSS-Methode - Fügen Sie eine display: none-Deklaration zu allen außer der ersten Folie hinzu. Das ist genau das, was die hide klasse in der Demo macht.


Was wir gebaut haben





Einwickeln und ein Freundlicher Stecker

Puh! Das war ziemlich lang, oder? Ich sehe da einen lächerlichen Witz, aber ich unterlasse es!

Wenn Ihnen die Quiz-Engine, die wir heute gebaut haben, gefallen hat, habe ich eine noch fortschrittlichere Version entwickelt. Eins mit Antwortbewertungen auf der Ergebnisseite, Social Sharing, Fragenzähler und vieles mehr. Es ist so gut, dass sogar die Tuts+ Seiten es benutzen werden!

Werfen Sie einen Blick auf jQuizzy, meine neue Quiz-Engine. Du wirst es lieben, ich verspreche es!

Anywho, wir sind hier fertig. Wir haben das Erstellen einer Quiz-Engine von Grund auf betrachtet, die alle Aspekte von HTML über CSS bis hin zu JavaScript abdeckt. Wir haben uns raffinierte Techniken angeschaut, um Elemente zu stylen und die Interaktion mit JavaScript zu programmieren. Hoffentlich fanden Sie das interessant und nützlich.

Wenn Sie Probleme haben, hinterlassen Sie mir einen Kommentar. Vielen Dank fürs Lesen!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.