JavaScript Quiz Anwendung von Scratch JSON AJAX | Laurence Svekis | Skillshare

Playback-Geschwindigkeit


  • 0.5x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 2x

JavaScript Quiz Anwendung von Scratch JSON AJAX

teacher avatar Laurence Svekis, Best Selling Course Instructor

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

19 Einheiten (2 Std. 2 Min.)
    • 1. Jsquiznew

      2:22
    • 2. 1 Einführung in das Erstellen einer dynamischen Webanwendung von Grund auf

      3:06
    • 3. 2 Kursressourcen Einrichtung und Tools

      5:59
    • 4. 3 JavaScript Objekte

      4:12
    • 5. 4 Objekt Array JSON Datei erstellen

      6:31
    • 6. 5 JSON Parse Daten in Objekt JavaScript

      5:00
    • 7. 7 Verwende AJAX, um JSON-Daten in JavaScript Objekt zu erhalten

      10:06
    • 8. 9 Questions in HTML erstellen

      8:54
    • 9. 10 Bootstrap Styling von Quiz

      10:46
    • 10. 11 Zwischen den Fragen

      8:28
    • 11. 12 JavaScript addEventListener

      5:06
    • 12. 13 innerText Wertscheck

      3:49
    • 13. 14 Auswahl von Klassen zum Auswerfen von Klassen in Elementen

      8:06
    • 14. 15 Auswahl speichern

      4:33
    • 15. 16 Bewegung zwischen Fragen zum Abschluss des Quiz

      8:17
    • 16. 17 Dynamisches Quiz neue Fragen hinzufügen

      5:43
    • 17. 18 Verstecken zeigen nächste und vorige Tasten

      6:04
    • 18. 19 Partitur für Quiz erstellen

      10:29
    • 19. 20 Abschließen Project JavaScript Dynamisches Quiz von Grund auf

      4:45
  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Alle Niveaus

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

326

Teilnehmer:innen

1

Projekt

Über diesen Kurs

Schritt für Schritt Anleitung zum Erstellen eines Dynamic Web basierten JavaScript mit einer Quiz zum Erzeugen eines Quizes

Lerne, dein eigenes dynamisches JavaScript von Grund auf zu erstellen.

Dieser Kurs deckt einen Schritt für Schritt ab, um ein interaktives online zu erstellen. Das abgeschlossene Projekt ist ein Webquiz das aus einer Datendatei erzeugt wird. Der Quellcode ist enthalten, damit du den Code selbst ausprobieren kannst, deine eigene Version anpassen und erstellen kannst.

Online sind ein nützliches Werkzeug für Websites, um Interaktionen zu erstellen, Engagement hinzuzufügen und Informationen von Benutzern zu sammeln. Du wirst erstaunt sein, wie einfach es sein kann, solche Anwendungen von Grund auf neu zu erstellen. Fügen Sie ganz einfach eigene Fragen hinzu. Die quiz stammen aus einer JSON-Datei, die über AJAX in das JavaScript gezogen wird. Der JavaScript-Code erzeugt dann die visuelle Ausgabe in dem HTML.

Der Kurs deckt alles ab, was du wissen musst, mit Quellcode inbegriffen. Schritt für Schritt Prozess deckt alles ab, was du wissen musst, um all diese erstaunlichen JavaScript-Funktionen nutzen zu können.

  • Erfahren Sie mehr über JavaScript-Objekte und wie sie zum Speichern von Daten verwendet werden können
  • Erfahren Sie mehr über JSON und wie es auf JavaScript-Objekte bezieht
  • Verwenden Sie AJAX, um Daten aus einer web zu erhalten und diese dann in ein benutzbares Objektformat in Ihrem JavaScript zu parken.
  • So fügen Sie Bootstrap für das schnelle Styling auf deine Seite

So erstellen Sie ein Projekt von Grund auf Schritt für Schritt erläutert. Was diesen Kurs anders macht, ist, dass es einen projektbasierten Ansatz zum Unterrichten von JavaScript angeht. Sehen Sie, wie und warum Code in JavaScript verwendet wird, um ECHTE WELTPROJEKTE zu erstellen.

  • So erstellen Sie die question
  • Navigation zwischen Fragen mit JavaScript
  • Hinzufügen von event zum Auslösen von Benutzerinitiierten Funktionen
  • Arbeiten mit dem DOM - Document
  • Dynamische Kurse
  • Neue Frage hinzufügen
  • Erstellen Sie eine endgültige Punktzahl für den Benutzer, um seine Ergebnisse anzuzeigen
  • und noch viel mehr...

Beginnen Sie mit dem Erkunden was du mit JavaScript tun kannst

Am Ende des Kurses hast du die Fähigkeiten und wissen wie du JavaScript-Code erstellen kannst, um online Quizze zu machen.

Ich stehe hier, um dir zu helfen, wie du deine eigenen Web-Projekte erstellen und bereit bist, alle Fragen zu beantworten, die du vielleicht hast.

Willst du mehr wissen, worauf wartest du auf den ersten Schritt gehen. Beginnen Sie jetzt, um zu lernen, wie du auch heute dynamische und interaktive Webprojekte erstellen kannst.

Triff deine:n Kursleiter:in

Teacher Profile Image

Laurence Svekis

Best Selling Course Instructor

Kursleiter:in

Web Design and Web Development Course Author - Teaching over 1,000,000 students Globally both in person and online.    Google Developer Expert since 2020 GDE

I'm here to help you learn, achieve your dreams, come join me on this amazing adventure today
Google Developers Expert - GSuite

Providing Web development courses and digital marketing strategy courses since 2002.

Innovative technology expert with a wide range of real world experience. Providing Smart digital solutions online for both small and enterprise level businesses.

"I have a passion for anything digital technology related, enjoy programming and the challenge of developing successful digital experiences. As an experienced developer, I create... Vollständiges Profil ansehen

Kursbewertungen

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%
Bewertungsarchiv

Im Oktober 2018 haben wir unser Bewertungssystem aktualisiert, um das Verfahren unserer Feedback-Erhebung zu verbessern. Nachfolgend die Bewertungen, die vor diesem Update verfasst wurden.

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen bei Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Jsquiznew: Dieser Kurs behandelt einen Schritt für Schritt Ansatz, um ein interaktives Online-Quiz zu erstellen. Das abgeschlossene Projekt ist ein Web-Quiz, das aus einer Datendatei generiert wird. Quellcode ist enthalten, so dass Sie auch den Code auchselbst ausprobieren können. Anpassen und erstellen Sie Ihre eigene Version auf meinen Quiz sind nützliche Tools für Websites, um Interaktion zu schaffen , Anzeigeninteraktion und sammeln Informationen von Nutzern. Sie werden erstaunt sein, wie einfach es ist, Anwendungen wie diese von Grund auf neu zu erstellen. Fügen Sie Ihre eigenen Fragen wirklich leicht Quiz. Dynamische Quizdaten stammen aus einer Jason-Datei, die über Ajax-JavaScript-Code in Ihren JavaScript-Code gezogen wird , der die visuelle Ausgabe innerhalb des HTML-Kurses generiert, deckt alles ab, was Sie wissen müssen, mit Quellcode enthalten einen Schritt für Schritt Prozess alle grundlegenden Konzepte. Um dieses Quiz von Grund auf neu zu erstellen, werden wir erstaunliche JavaScript-Funktionen nutzen. Erfahren Sie mehr über JavaScript-Objekte und wie sie zum Speichern von Daten verwendet werden können. Erfahren Sie mehr über Jason und wie Sie Jason verwenden und wie es sich auf JavaScript bezieht. Objekte verwenden Ajax, um diese Daten aus einer linken Datei zu erhalten und dann in ein nützliches Objektformat in JavaScript zu parson . Außerdem werden wir uns ansehen, wie Zehenstiefel fallen wirklich schnelles Styling innerhalb Ihrer Webseite. Wie man ein Projekt von Grund auf neu zu bauen erklärt Schritt für Schritt. Was diesen Kurs unterscheidet, ist, dass es einen projektbasierten Lernansatz benötigt, der JavaScript lehrt, wie und warum die Cordon JavaScript-Probleme ein reales Projekt ist. Erstellen einer Fragendatendatei Navigieren Sie mit JavaScript zwischen Fragen und fügen Sie Ereignis-Listener zu vom Benutzer initiierten Triggern hinzu, um zusätzliche dynamische Funktionen zu erhalten. Arbeiten mit der Morgendämmerung, die ein Dokumentobjektmodell dynamische Klassen Hinzufügen neuer Fragen, Erstellen einer endgültigen Scorecard für Benutzer in der Lage sein, ihre Ergebnisse zu sehen und vieles mehr. Beginnen Sie heute mit der Erkundung, was Sie mit JavaScript tun können. Am Ende des Kurses haben Sie die Fähigkeiten und wissen, wie Sie JavaScript-Code erstellen können, um Quiz online zu machen. Ich bin hier, um Ihnen zu helfen, Ihre eigenen Webprojekte zu erstellen und bereit, alle Fragen zu beantworten , die Sie mehr wissen möchten. Worauf wartest du? Machen Sie den ersten Schritt, schließen Sie sich jetzt an und lernen Sie, wie Sie dynamische interaktive Webprojekte heute vermitteln 2. 1 Einführung in das Erstellen einer dynamischen Webanwendung von Grund auf: Hallo, und willkommen, eine dynamische JavaScript-Anwendung von Grund auf neu zu erstellen. In diesem Kurs werde ich Ihnen zeigen, wie Sie auch Ihre eigene Webanwendung aufbauen können. Und in diesem Fall werden wir ein dynamisches Web-Quiz erstellen. Und ich werde Ihnen zeigen, wie Sie das von Grund auf neu erstellen können, Schritt für Schritt mit einem einfach zu verfolgendem Prozess und Lektionen. Mein Name ist Lawrence, und ich werde dein Lehrer für diesen Kurs sein. Und ich bin so aufgeregt, die Möglichkeit zu haben, all diese erstaunlichen Javascript-Funktionalitäten zu präsentieren . Ich werde Ihnen zeigen, wie sie alle zusammenarbeiten und wie Sie sie alle zusammenbringen können um Ihre eigenen Anwendungen genau so zu erstellen. Also werden wir durch, wie wir unsere HTML-Vorlage stylen und erstellen können, indem wir hinzufügen, hinzufügen, in einigen Styling, werden wir auch Bootstrap für ein zusätzliches Styling verwenden. Dies gibt uns also die Möglichkeit, unsere Anwendung schneller auszubauen. Und wie Sie hier sehen können, gibt es wirklich nicht viel Inhalt innerhalb des HTML. Und natürlich gibt es ein bisschen Styling, nur um es ein bisschen besser aussehen zu lassen. Und innerhalb des JavaScript, natürlich , wo alle schweren Heben wird für den Aufbau dieser Anwendung durchgeführt werden , und der Kurs wird sich auf das Erstellen einer JavaScript-Anwendung konzentrieren . Die Idee hier ist also, dass wir eine Datendatei verwenden werden. Dies ist also eine Web-zugängliche Datendatei. Hier ist ein Beispiel für eine der Dateien, mit denen wir verknüpfen können, und sie ist formatiert, damit wir sie in unserem Quiz verwenden können. Also habe ich das Quiz hier drüben auch auf Codestift. Und wir können sehen, dass jedes Mal, wenn ich den Code oder die Datenquelle aktualisiere, solange das Format der Daten innerhalb des gleichen Formats ist, wir sehen, dass sich die Quizfragen ändern können. Und natürlich können wir die Antworten ändern und so weiter. Alles, was wir tun müssen, um das Quiz an diesem Punkt aufzubauen, ist eine kompatible Datendatei mit einem Jason dafür bereitzustellen , dann wird in unsere JavaScript-Anwendung gezogen und in Javascript verwendet, um dynamisch aufzubauen was Sie hier als das Quiz sehen, das dem Benutzer vorgestellt wird und die Sache über diese JavaScript-Anwendung. Wir werden das hier reinziehen. Wir ziehen den Inhalt mit Ajax. Wir werden auch eine Website namens Jason dot com verwenden, um unsere Jason Files zu hosten , um Ihnen wirklich die dynamischen Fähigkeiten zu zeigen, diese Arten von Anwendungen aufzubauen und all dies wird von Grund auf getan. Also während der Unterrichtsstunden durch, werde ich Sie während der Unterrichtsstunden durch,wie wir verschiedene Variationen des Mantels erstellen können und nur die verschiedenen Dinge, die mit diesem Mantel gemacht werden können. Also ermutige ich Sie auch, es selbst auszuprobieren, den Quellcode zu überprüfen und es selbst auszuprobieren und zu sehen, was Sie mit JavaScript geschehen können . Also, wenn Sie bereit sind, beginnen wir mit der Erstellung unserer dynamischen Webanwendung. 3. 2 Kursressourcen Einrichtung und Tools: Herzlich willkommen zu unserem JavaScript-Quiz-Baukurs. In diesem Kurs werden einige der Ressourcen, die ich in diesem Kurs verwenden und verwenden werde Bootstrap sein. Also, was bootstrapped tut, ist es ah, Front-End-Framework. Es ist einer der beliebtesten da draußen. Es ermöglicht Ihnen, schnell und einfach responsive Websites zu erstellen. Und ich werde es eigentlich einfach das CDN hier kopieren, damit du das beim Booten rüber kriegen kannst Bootstrap loslegen kannst. Und was der Cdn tut, ist es mir erlaubt, Teoh lebendige CSS-Datei zu verknüpfen, was diese Version von Bootstrap sein wird. Und dann kann ich jetzt schnell und einfach einige der Stiefel wirklich aufrufen, Klassen in mein Webprojekt fallen lassen und sie verwenden, so dass es mir wirklich ermöglicht, schnelles Styling in mein Projekt zu haben . Also noch eine, die ich benutze, die ich gerade geöffnet hatte. Das wird also Lehmklammern sein. Dies ist ein Open-Source-Texteditor. Es ist von Adobe. Es ist kostenlos zu benutzen. Wenn Sie also Ihren Lieblings-Editor bereits nicht eingerichtet haben, könnten Sie Klammern auschecken und es selbst ausprobieren. Einige andere Ressource ist, dass ich in diesem Kurs verwende, werden Code-Stift sein. Ich werde und dies ermöglicht es mir, Code hier auf der linken Seite zu schreiben und ihn sofort auf der rechten Seite im Anzeigebereich angezeigt werden zu lassen. Und auch wenn ich Styling anwende. Also, wenn ich etwas wirklich schnell hier, wo ich nur aktualisieren Sie die Farbe auf rot, sehen wir sofort, ohne gehen zu müssen und speichern, dass es aktualisiert den Anzeigebereich. Dies ist also ein wirklich nützliches Werkzeug, um zu demonstrieren, wie das Gericht funktioniert und auch Code praktizieren zu können . Also werde ich auch einen Teil des Kursinhalts innerhalb des Code-Stifts machen, und eine andere Ressource, die anfängt zu verwenden. Also werde ich meine Jason Dot Com benutzen. Und was mir das erlaubt, ist State Store Jason Daten auf einer Website. Also, wenn ich sage, dass es mir die Möglichkeit gibt, einfach auf diese Jason Data-Datei zuzugreifen und diese in meine Anwendung zu bringen . Und die Vorteile davon sind, dass ich sagen kann, dass Jason File und Jason eine JavaScript-Objekt-Notation Dateien ist . Das ist eine JavaScript-Objektdatei und aus dem Plan dieser Anwendung. Was ich tun möchte, ist, dass ich die gesamte Anwendung fahren möchte. Ich möchte es erstellen, indem ich eine Jason-Datei als Basis verwende, damit die Anwendung selbst dynamisch sein kann . Und JavaScript wird das durchlaufen und mit den Jason-Daten aufbauen, die im tatsächlichen HTML-Quiz Onley den Inhalt von Jason aufbauen. Das wird also das Web-Projekt sein, das wir bauen werden, und ein letztes Werkzeug in der Ressource, die ich verwenden werde. Und Sie müssen dies nicht unbedingt auf Ihrem Computer installieren. Aber das ist für den Fall, dass Sie dies auf Ihrem Computer ausführen wollen, so dass es Zampa so gibt mir die Möglichkeit, über zu lokalen Host gehen. Also habe ich mit diesem speziellen Ordner verlinkt. Ich habe eine Indexdatei, und jetzt kann ich zum lokalen Host gehen und ich kann tatsächlich die Ausgabe der Datei sehen. Also habe ich das im Hintergrund laufen. Dies ist mein Prüfungskontrollpanel, und es gibt mir einen Apache-Server, der auf meinem lokalen Computer läuft. Es ist also ein virtueller Server, den ich nutzen und darauf zugreifen kann, so dass es mir gibt, erspart mir die Mühe, auf die Seite zu laden, und es macht es tatsächlich wie eine echte Website aussehen. Also, wenn Gott, ich habe alle Links innerhalb der Website, kann ich einfach durch sie verlinken und es wird nicht so aussehen, als wäre es nur eine Datei, und es wird simulieren, wie es aussehen wird online. Das ist also einer der Vorteile, das zu verwenden. Also, das ist ein Samp. Das sind also die Werkzeuge und Ressourcen, die ich während des Kurses nutzen werde und auch auch meine Stirn. Mein Browser, den ich verwenden werde, wird chrom eso sein. Ich habe mein Chrom hier offen. Und das wirklich nette an Chrom ist, dass es taube Werkzeuge hat. Schwächung. Überprüfen Sie hier, und wir können öffnen, und wir können eine ganze Menge Informationen darüber, was auf der Webseite verfügbar ist sehen. Die Idee ist also, wenn Ihre Website geladen wird, wenn der Browser all Ihren HTML-CSS- und JavaScript-Code durchliest , baut er ein Dom auf, und dies ist alles innerhalb Ihrer tauben Tools-Konsole zugänglich. Es sind eine Menge wirklich guter Informationen hier. Wir können das ganze Styling sehen. Wir haben hier das Box-Modell. Wir haben Event-Listener, die wir noch keinen Satz haben. Wir haben unsere Morgendämmerungspunkte, Eigenschaften. Das ist also der ganze Dom, der uns zur Verfügung steht. Und natürlich, wenn Sie mit JavaScript vertraut sind, dann wissen Sie, dass das Dom das Dokumentobjektmodell ist, das all diesen HTML-Inhalt enthält , und wir werden Verbindungen verwenden. Was zwischen dem Dom und JavaScript Um Teoh, machen einige Manipulationen unseres HTML-Codes. Obwohl das Verständnis der Morgendämmerung in diesem Kurs nicht 100% notwendig ist, weil ich über alle Konzepte über die Morgendämmerung, den Quellcode, was es tut Schritt für Schritt, während wir dieses wirklich coole Quiz Anwendung und dann auch natürlich, und sind taube Werkzeuge, wir haben die Konsole und die Konsole ermöglicht es uns, hin und her zu kommunizieren und auch einige Probleme zu beheben und Fehler beheben Eso. Dies ist wieder ein wirklich nützliches Tool, wenn das Erstellen von Anwendungen und manchmal Dinge schief gehen und wir einen schnellen Weg brauchen, um es zu debuggen, oder wenn wir sehen wollen, welche Daten gespeichert wurden, könnten wir es einfach in der Konsole abmelden und sehen Sie es hier. Das sind also die Tools, und in der nächsten Lektion beginnen wir mit dem Aufbau unserer Webanwendung. 4. 3 JavaScript Objekte: in dieser Lektion. Ich möchte schnell durchlaufen, was ein Javascript-Objekt ist. Und das wird ein Vorläufer dessen sein, was Jason ist. Und dann werden wir die Fragen aufbauen, die wir im Kurs mit Jason benutzen werden. Also lassen Sie uns in unseren Editor springen und ich habe bereits verlinkt eso eine grundlegende Vorlage hier erstellt. Quiz-Baumeister. Ich habe Stiefel mitgebracht, hier fallen lassen und kreativ hier. Dies ist also, wo der Inhalt unseres Quiz sie gehen und haben über eine JavaScript-Datei verlinkt . Also werde ich einfach die Ansicht hier teilen, und ich werde diesen Teil hier verstecken, weil wir das nicht kaputt brauchen, dass vorhandene Inhalte es etwas kleiner machen und öffnen. Es gibt eine Funktion in Klammern, in der Sie eine Live-Bearbeitungsversion durchführen können. Also mal sehen, was hier passiert. Aber vielleicht müssen Sie das sehen und speichern Sie dies und machen Sie eine Live-Vorschau. Ich musste gerade Klammern dort neu starten, und jetzt scheint es, als ob es funktioniert, also sollte ich in der Lage sein, etwas hier einzugeben und es tatsächlich hier im Vorschaubereich angezeigt zu sehen . Das ist alles, was ich mit Klammern einrichten möchte. Also, jetzt sind wir bereit zu gehen, und eines der Dinge, mit denen ich arbeiten möchte, ist zu veranschaulichen, was Javascript-Objekte sind. Wenn Sie also mit JavaScript vertraut sind, Sie möglicherweise bereits Variablen bekannt. Hey, Zustimmungsvariablen und Variablen geben eine Stabilität, um Daten zu enthalten. Also, wenn wir auf Objekt in JavaScript So sieht es die gleiche Weise, wo wir beginnen mit etwas namens Who Set einen Variablennamen s Es funktioniert auf die gleiche Weise wie Variablen, und wir verwenden, was eine gepaarte Werte genannt wird. Das bedeutet also, dass jeder Wert einen Namen und einen Wert haben wird, durch einen Doppelpunkt getrennt ist. Also, wenn wir etwas wie Vorname hatten, und dann würden wir durch den Doppelpunkt getrennt und dann hier ist, wo wir den Wert haben mit diesem Namen verbunden ist und wir Komma trennen sie und wir könnten so viele hinzufügen, wie wir wollen, damit wir könnten Führen Sie einen Nachnamen aus. Also nur ein wirklich gebräuchlicher Nachname hier von Smith. Und vielleicht können wir sogar das Alter machen, um zu veranschaulichen, wie Ganzzahlen funktionieren. Also mach John Smith 40 Und dann kann ich jetzt diese Daten durchlaufen und ich kann auf diese Daten zugreifen und sie ausgeben, indem sie Verbündete in meinem JavaScript verwenden. Also werde ich ein Dokument zu tun, Recht, ein paar der Objektinformationen zu schreiben. Also bewerten Sie mein Objekt. Und jetzt kann ich über den Namen des gepaarten Wertes auswählen. Ich kann diesen assoziativen Wert bekommen. Also, wenn ich den Vornamen ausgeben möchte, könnte ich es so machen. Wenn ich sage, dass wir das sofort in unserem Ausstellungsbereich sehen, taucht John auf. So in der Lage zu sehen, dass, wenn ich dies in den Nachnamen ändern und speichern, wir sehen, dass der Nachname kommt, wir könnten Verbinden von Vor- und Nachnamen tun. Ich werde das nur aktualisieren. Und wir sehen, wie im Wesentlichen das ist, wie die Objekte funktionieren und das wird dasselbe sein . Und das ist die Grundlage für die Quizanwendung. Wir werden aufbauen, vielleicht ein Objekt verwenden, Inhalte einziehen und dann darauf zugreifen und es in unserem Anzeigebereich platzieren. Also die nächste Lektion, mit der wir anfangen werden, zu arbeiten und tatsächlich einzurichten. - Was? Unser Quiz wird wie eso aussehen. Wir werden anfangen, dieses Jason-Objekt einzurichten und dann von ah JavaScript innerhalb des Skriptcodes zu übertragen . Und wir werden das in mein Jace bringen und es hier einfügen und dann als Web zugängliches Jason-Objekt verwenden und dann diese Informationen mit Ajax in unsere Anwendung zurückziehen und diese innere Anwendung laden. Also, das kommt alles in der nächsten Adoleszenz. 5. 4 Objekt Array JSON Datei erstellen: In dieser Lektion möchte ich also dieses Jason-Objekt aufbauen und sich nur auf dieses JavaScript-Objekt vorbereiten , um unser Quiz wie erwähnt auszubauen, wird unser Quiz vollständig auf dem Inhalt dieses Datenobjekts basieren. Und dieser Datenhund kann wirklich auf verschiedene Arten produziert werden, so dass Sie ihn sogar über eine Datenbank produzieren können und so weiter, und solange Sie ihn innerhalb derselben Art von Format formatieren. Also lassen Sie uns wieder in das gehen. Mein Objekt, das wir in der letzten hören produziert und beginnen, einige Fragen zu erstellen. Also das erste, was wir tun wollen, fragen und wieder daran erinnern, diese gepaarten Werte. Also wollen wir eine Frage haben und wir wollen ihm geben, welche Farbe auf Apple ist. Das wird unsere erste Frage sein, die wir den Benutzern, die wir hier sehen, stellen werden, dass es sofort dort auf der rechten Seite als die Frage erscheint, weil wir gerade diesen ersten Punkt dort innerhalb dieses Objekts durchlaufen und den Grund, dass, wenn sehen sich das jetzt an, Sie sind einfach gut zuvor. Ich habe das nicht zitiert, und jetzt habe ich Zitate um diesen Namenswert eso, wenn wir ein za JavaScript-Objekt verwenden , es wird in beide Richtungen funktionieren. Aber wenn wir es in Jason bringen, wollen wir die Zitate dort haben, denn sonst werden wir uns nicht als richtiges Jason-Objekt ausbilden . Also mache ich mich gerade bereit, mit unserem nächsten Schritt fortzufahren und das wirklich als ein tatsächliches JavaScript-Objekt auszubauen . Das nächste, was wir tun möchten, ist, dass wir einige Antworten auf diese Frage hinzufügen möchten und mit den Antworten die Art und Weise, wie ich dies ausbauen möchte, ist, hier mehrere Optionen für Antworten und mit Objekten zu haben . Wir haben die Fähigkeit, eine Erhöhung in diese Objekte einzubeziehen. Dies wird nur ein Standard-JavaScript-Array sein, in dem wir einige Antworten geben werden. Also werden wir Miss trennen sie nennen. Also lasst uns einfach blaue Calma tun, rot getrennt und wird grün zu tun. Und dann könnten Äpfel rot oder grün sein. Versuchen wir also eine Farbe, die ein Apfel normalerweise nicht lila sein würde. Es gibt drei mögliche Antworten auf die Fragen und sie werden innerhalb dieser Art von Format gestellt. Und nun schließlich wollen wir auch sagen, ah, ah, wir wollen in der Lage sein, angeben, welche richtig ist, so dass wir genügend Informationen in unsere Anwendung geben , um die Benutzer richtig beurteilen zu können, Antwort und Antwort auf unsere Frage und richtig beurteilen und feststellen, ob wir richtig oder falsch sein werden. Also lasst uns gehen und wir werden es so tun, dass der richtige eins sein wird, obwohl das typischerweise mit den Strahlen, die wir mit 012 beginnen würden, damit wir es in beiden Fällen tun können . Vielleicht machen zwei vielleicht mehr Sinn aus einer visuellen Perspektive, wo wir uns das ansehen und auch einen Brunnen gesunken haben. Und das ist die 2. 1 in den Artikeln. So oder so können wir es tun. Ich denke nur, vielleicht der beste Weg, derjenige, der am wenigsten Sinn macht, der Sinn der Verwendungen, um innerhalb dieser eine Wieder Formate anzuzeigen, werden wir bei einem beginnen 01 012 wie möglich Antworten. Obwohl wir drei haben, sind dies die möglichen Antworten, und dann werden wir eine Anpassung vornehmen, wenn wir es lesbarer machen wollen, wenn wir den Kurs voranschreiten . Also lasst uns das retten. Und wir werden nur trösten, mein Objekt ausloggen, das speichern und auf unsere Webseite gehen. Da ist nichts anderes. Hier wird es einen Unterschied geben. Wann immer wir in die Konsole gehen, öffnen wir uns auf die Konsole und wir sehen Frage, welche Farbe ist ein reichlicher Apfel? Wir haben drei mögliche Antworten dort, und wir haben, welche richtig ist? Also jetzt können wir dies nutzen und darauf zugreifen und es in unserem JavaScript verwenden. Also glaube ich, ich habe da einen Rechtschreibfehler. Lass uns zurückgehen und das einfach auffrischen. Also, jetzt ist das richtig. Und wir haben die Grundlagen, wie wir anfangen können, unser Quiz auszubauen. Und, natürlich, mit ihren Quiz waren wahrscheinlich nicht nur wollen Zehe Antwort, stellen Sie eine Frage. Möglicherweise haben wir mehrere Fragen, die wir stellen werden und mit den JavaScript-Objekten . Es gibt also verschiedene Möglichkeiten, dies in Jason zu tun. Die Art und Weise, wie wir das tun, ist, dass wir diese eckigen Klammern haben, die so als Objekt-Array behandelt werden. Wenn ich hier rausgehe,können wir sehen, dass wir unser Objekt haben, und wir haben hier einen Strahl möglicher Optionen. Wenn ich hier rausgehe, Also haben wir ihre Antworten. Also ist alles nur wenige Stunden vorher, aber wir haben dieses Array von Objekten und jetzt könnten wir eine zweite Frage hinzufügen. Also vielleicht, welche Farbe ist Gras und Anil zu grün dort. Die richtige Antwort wird also Null sein. Und lasst uns das auffrischen. Und jetzt haben wir zwei Gegenstände in unserem Objekt, Torri. Und wir haben alle unsere Fragen und alles scheint bereit zu sein, also können wir das tatsächlich übertragen und einen echten Jace auf Akte erstellen. Also lasst uns all diese Informationen nehmen, Klopp noch hinübergehen zu My Jason und speichern sie. Und jetzt haben wir unsere Jason-Datei Web zugänglich. Jason, Akte, wo wir hingehen können, wir können ausladen und wir können all unsere ausgearbeiteten Fragen sehen. So wird unsere Datendatei für unser Quiz aussehen. Und dann natürlich auch werden wir natürlich auchdie Möglichkeit haben, weitere Fragen nach Bedarf hinzuzufügen. Also in der nächsten Reihe von Lektionen, wo ich angefangen habe, das auszubauen und unsere Daten wirklich zu nutzen und ein wirklich gepflegtes Web-Quiz aufzubauen, und das wird alles von Grund auf neu gemacht und von diesem Jason auf Datei angetrieben werden. Es kommt also in der nächsten Adoleszenz auf. 6. 5 JSON Parse Daten in Objekt JavaScript: der vorherigen Lektion haben wir Ihnen gezeigt, wie wir ein JavaScript-Objekt erstellen können. Also werden wir das in Jason verwandeln. Wenn wir zu meiner Jason-Akte gehen, sehen wir aus, als könnten wir sehen. Es ist etwas anders formatiert, und die Ausgabe davon ist im Wesentlichen eine Stärke. Und das ist nicht das, was wir hier haben. Also, wenn wir dies in eine Zeichenfolge verwandeln, so haben wir zu entfernen. Zuallererst müssen wir all diese Zeilenumbrüche und diesen weißen Abstand herausziehen und ihn wirklich in ein String-Format umwandeln . Mal sehen, ob das jetzt spart. Immer wenn wir das Objekt herausziehen, haben wir keinen Zugriff mehr, da dies alles eine eigenständige Zeichenfolge ist, so dass wir diesen gesamten String-Wert erhalten können. Aber das ist nicht sehr nutzbar für uns in unserem JavaScript. Also hier haben wir eine eingebaute Funktion namens Jason Parts und ermöglicht es uns, durch diesen String-Wert zu analysieren , was offensichtlich ist, was wir hier zurückkehren werden, wenn wir unser Web betrachten. Sie sind L R Jason Datei, und wir werden dieses mein Objekt zurückgeben, das nicht wirklich ein Objekt mehr ist. Es ist eigentlich eine Zeichenfolge und wir werden das zurückgeben und das in ein Jason-Objekt analysieren . Also lasst uns ein wenig Dinge umschalten, also nennen wir das vielleicht meine Daten oder so etwas. Eso mein Objekt. Jetzt werden wir eine Marke aufbauen. Du widersprechst hier und wir werden es durchmachen. Wir werden einen Jason analysieren meine Daten und so magisch, wenn wir das aktualisieren, sind wir wieder da, wo wir angefangen haben. Aber wir haben die Fähigkeit, so etwas wie diesen Inhalt heranziehen. Und das ist unser Es sollte wirklich so ziemlich das Gleiche sein. Ziehen Sie das rein und wir können sehen, dass wir Stopp in unserem Objekt verwenden können. Nun, der nächste Schritt ist, hier oder Toe-Schleife durch hier alle variablen Objekte zu analysieren und vielleicht sogar etwas in unseren HTML zu setzen. Also lassen Sie uns versuchen, das einzurichten, so dass wir es einfach nennen, hat Ausgabe, und ich werde sehr gut einrichten. Ausgabe ist Dokumente, und wir werden Element für Idee bekommen, weil jetzt, wo wir Ausgabe benannt haben und wir werden dieses Element in das Ausgabe-Objekt enthalten und jetzt können wir etwas wie Ausgabe tun. Inneres HTML entspricht meinem Objekt. Und natürlich machen wir uns noch nicht ganz durch, aber mal sehen, wie das funktioniert. Und wenn wir tatsächlich etwas in unseren sichtbaren Bereich hier setzen, also was auch immer, wir können das aktualisieren, und wenn wir nicht zur nächsten Frage gehen, können wir sehen, dass wir das speichern können. Und so funktioniert nicht gerade. Nun, lassen Sie uns einen Blick auf den anderen Browser werfen. Aktualisieren Sie diese. Und so haben wir ein Problem dort mit dem inneren HTML kann die Eigenschaft von Inter HTML stattdessen nicht setzen. Ein schnelles Update dort. Also hatte ich nicht wirklich in der nächsten Datei gespeichert. Also jetzt, wenn ich sage, dass ich durch diese Objekte blättern kann und ich diese Ausgaben von den Fragen aus den Daten sehen kann Also das ist gut. Das ist unser guter Anfang, Teoh baut es weiter. Unsere Anwendung war in der Lage, Zugang zu den Fragen zu erhalten. Und jetzt können wir sogar etwas tun, wo wir hier eine Vier-Schleife machen können, damit es eine Variable setzen könnte . Ich Also, das ist mein Gegenstand, auf dem sich enthalten sein wird. Wir ziehen das aus meinem Objekt und schleifen es durch, und wir werden diese Ausgabe hier machen. So seltsam Zeilenumbruch und gemacht, was so etwas ist und dies ändern, um ich sehe, wie das funktioniert. Ich rette nur das. Und jetzt sehen wir, dass dort beide Fragen gestellt werden. Also das ist eigentlich genau das, was sie bei dieser Frage wollen Mark dort. Also, jetzt haben wir unsere zwei Fragen. Wir müssen auch eine Schleife durch all die verschiedenen Antworten aufbauen . Aber wir werden das in der nächsten Lektion ausbauen. Wir werden diese Anwendung weiter ausbauen, weil wir einige zusätzliche Funktionen aufbauen müssen , in denen wir diese Dateninformationen herausziehen und sie verwenden , um unser Quiz eso auszubauen. Es ist nicht genau so, wie wir es jetzt wollen. Und natürlich natürlich wollen wir immer noch eine Ajax-Anfrage an die Jason File s stellen Oh, das kommt alles in den nächsten Lektionen 7. 7 Verwende AJAX, um JSON-Daten in JavaScript Objekt zu erhalten: in dieser Lektion. Wir werden herausfinden, wie wir einen Ajax-Aufruf ableiten und genau diese Daten in unsere JavaScript-Anwendung ziehen und sie nutzen. Also lasst uns einige dieser Inhalte hier kommentieren, denn natürlich werden wir diese Daten nicht in unserer Datei haben und all die Schleifen und alles, was innerhalb dieser einen Funktion erledigt wird. Wir machen unseren Ajax-Anruf. Also werden wir damit beginnen, eine Funktion einzurichten, um es vielleicht so etwas wie Funktion nennen zu können und Lord Fragen oder so etwas zu tun. Und wenn wir das ausführen, machen wir einen Ajax-Aufruf an eine JavaScript-Datei, und dann laden wir alle Fragen auf. Dann füge ich das einfach hier hinzu. Wenn wir also die Anwendung initiieren, werden wir standardmäßig Fragen laden. Also lassen Sie uns diesen Ajax-Aufruf einrichten, und wir laden alle unsere Objektinformationen in einen Container und nennen es vielleicht mein Objekt oder so etwas oder meine Daten. Das wird also das eigentliche Laden der Fragen in das Datenobjekt sein. Also zuerst müssen wir einen Container aus meinem Objekt erstellen, und wir werden ihn vorerst leer lassen. Dies ermöglicht es uns, es als globalen Wert zu halten. Und wenn wir uns durchmachen, werden wir all diese Fragen durchladen und darauf zugreifen. Konsul, da. Und gerade jetzt werden meine Objekte nichts enthalten. Eso Lassen Sie uns unseren Ajax-Anruf hier einrichten, und wir werden es innerhalb dieser Funktion tun. Das erste, was wir tun wollen, ist, unsere Anfrage einzurichten. Also unser Anforderungscontainer, der ihm den Namen eines geben wird und natürlich können Sie das nennen, was auch immer Sie das nennen wollen. Wir machen eine HTTP-Anfrage. Also, was das tut, ist es ein Javascript-Objekt, und im Wesentlichen erlaubt es uns, die Verbindung Teoh eine andere Webseite zu öffnen und um diese Öffnung zu initiieren Also würden wir einen Content-Kontakt, dieses Objekt, und wir werden nur eine Get Anfrage machen. Und dann haben wir hier die U. R der Adresse, wo wir versuchen, diese Anfrage zu bekommen. Also haben wir das in diesem Jason-Objekt, das wir erstellt haben, und natürlich, wenn wir müssen, können wir das immer aktualisieren. Hier stellen wir die Anfrage, und dann werden wir sie einfach als wahr halten. Das wird also diese Verbindung öffnen, und wir werden warten, um zu sehen, was „ready State eso“ genannt wird, wann immer es eine Verbindung öffnet . Also vielleicht zuerst, ich werde einfach Ascend hier drüben machen und ich werde mich in die Konsole einloggen. Ich würde, Ass, wir können einen Blick werfen und wir können sehen, was in A enthalten ist, bevor wir weiter gehen. Also alles, was wir hier getan haben, haben wir einen Container für die http-Anfrage eingerichtet. Wir haben die angeforderte Adresse geöffnet und die Methode gesendet, wie wir die Anfrage stellen. Das ist, dass sie eine Anfrage bekommen, und dann initiieren wir tatsächlich die Anfrage, die Ellis gesendet hat. Mal sehen, was jetzt passiert. Wir sehen also, dass wir, wenn wir das laden, innerhalb dieses bestimmten Objekts sind. Jetzt sind wir alle bereit zu gehen. So sind bereit. Status vier, wir haben einen Antworttext, und das kommt alles von dieser Live-Anwendung. Also genau das, was wir brauchen, ist der Status 200 wir wollen nur sicherstellen, dass, wenn wir tatsächlich versuchen, auf diese Daten zuzugreifen, diese Verbindung tatsächlich offen ist. Und wir haben einige Inhalte erhalten. Es s Also dies ist, wo wir bereit Zustand für Sie verwenden könnte auch überprüfen Status 200 diese Zahl verschiedene Werte hier, die Sie verwenden können, um diese Prüfungen zu machen, nur um sicherzustellen, dass alles in Ordnung ist toe und bereit zu gehen. Also hier wende ich eine bedingte Anweisung an und ich werde den A, äh, den Wert eines verwenden , damit ich einen Bereitschaftszustand verwenden könnte, oder ich könnte diesen Bereitschaftszustand verwenden. Also lasst uns, äh, machen wir schnell einen Vergleich zwischen einem Ende und zeigen Ihnen einfach, was der Unterschied hier ist, wird eso wir haben, das wird das ganze Fenster dort sein, und dann ist der Bereitschaftszustand unter einem Also vielleicht, Lassen Sie uns einfach bei der Verwendung eines anstelle dieses bleiben, anstatt es in ein aktives Objekt zu laden. Eso, wir werden unsere Bedingung machen, wenn ein Bereitschaftszustand gleich vier ist, dann wissen wir, dass wir dort einige Daten haben und wir bereit sind zu gehen, damit wir die Daten, die zurückgegeben werden, Schleife und nutzen können . Und wie wir in unserem Objekt gesehen haben, wenn wir in der Konsole ausgeben. Wir erhalten alle diese Daten zurück und wir erhalten sie zurück in einem Container namens Antworttext. Also bekam ich eine Antwort. Wir haben einen Antworttext, so dass wir eines der beiden verwenden können, um diese Informationen herauszuholen. Eso Lass es uns einfach so machen. Und ich leihe mir etwas von dem Code, den wir hier unten hatten, weil es tatsächlich dasselbe sein wird . Speichern Sie das. Und wenn der Bereitschaftsstatus gleich vier ist, sollten wir das meine Objekte nicht benutzen. Also vielleicht verwende ich einfach Daten und wir werden den Antworttext analysieren, den wir tun könnten. Die Antwort ist gut, und so werden variable Daten alle diese Objektinformationen oder diesen Zeichenfolgenwert enthalten , ähnlich wie wir es in den meinen Daten getan haben. Oder eigentlich, um der Konsistenz willen, nennen wir das einfach meine Daten. Jetzt haben wir das Gleiche, was wir hier unten hatten, wo es in meinen Daten enthalten ist, und jetzt müssen wir nur durchlaufen. Eigentlich ist das da, wo es anders ist, weil es meine Daten sein werden. Aber so oder so, so der gleiche Polizistentyp, die gleiche Idee. Lassen Sie uns also einen Blick darauf werfen und sehen, was ausgegeben wird, wenn wir die Seite aktualisieren. Also sehen Sie, wir haben diesen Antworttext, der ihn geladen hat, aber etwas läuft schief. Wir sind nicht wirklich draussen, es zu setzen. Da ist Oh, es gibt eine Art von Problem hier. Wir sind nicht draussen, dass meine Daten da rein. Also werfen wir einen Blick und öffnen Sie Konsolenprotokoll und sehen, was dort passiert. Also, wenn wir tatsächlich etwas in das bekommen, meine Daten Also werfen wir einen Blick auf mein Datenobjekt und sehen, was hier passiert ist. Also stellen Sie sicher, dass ich spare und spare. Manchmal ist das ein Problem dort. Wir sehen also, dass wir innerhalb der Konsole nicht wirklich durchlaufen und sicherstellen, dass der Bereitschaftszustand verfügbar ist. Eso Dies ist eines der Dinge, die hier passiert, die nicht aufgegriffen werden. Also müssen wir hier eine andere Funktion aufbauen. Hören Sie auf die Änderung des Bereitschaftszustands. Das ist also auf Bereitschaftszustandsänderung, und hier haben wir diese Funktion und wir durchlaufen alles. Wenn es eine Änderung des Bereitschaftsstatus gibt, dass wir diese Informationen protokollieren können, versuchen wir es jetzt und sehen, was passiert. Wir sehen also, dass es genau so funktioniert, wie wir es wollten. Sie würden sehen, dass sich der Bereitschaftszustand auf zwei ändert. Also wollen wir unseren Aufruf nicht einleiten Ready Status ändert sich auf drei, damit wir nicht durchlaufen . Und wenn wir den Bereitschaftszustand für treffen und das ist, wo wir anfangen, unser Objekt aufzubauen Also das ist genau das, was wir passieren wollen. Wir wollen nicht alle diese Bereitschaftszustände löschen, bis wir Ready State für getroffen haben, damit ich auch Brief an die Konsole bekommen kann . Und nun schauen wir uns an und es sollte dort etwas sauberer sein. Also jetzt im Wesentlichen, wir bekommen, dass Objektinformationen die gleiche Sache, die wir in diesem Leben Web-Anwendung haben . Und im Wesentlichen sind wir alle bereit zu beginnen, die restlichen Fragen innerhalb unserer Anwendung auszuarbeiten . Und so, nur um im Einklang mit dem zu sein, was wir hier haben, vielleicht wollen wir einfach so etwas tun und wir werden nicht wirklich durchlaufen und sehen, was jetzt passiert. Wenn wir also aktualisieren, haben wir unsere Objektinformationen noch nicht ganz drin. Also der mein Objekt-Container, Wie ist dieser Antworttext? Also müssen wir noch analysieren, angefangen hier drüben, vielleicht wollen wir eine andere Funktion aufbauen, und diese Funktion wird Build mit genannt werden. Und das ist eine Funktion, die wir aufgerufen werden, nachdem der Bereitschaftszustand durchläuft und wir unser Objekt aufbauen, also erstellen Sie es einfach ein Quiz. Und von hier für jetzt, was wird nur tun Konsole meinen Objektwert protokollieren. So stellt sicher, dass wir nur mit dem my Objekt arbeiten. Sobald dort einige Inhalte geladen sind. Schauen wir uns das noch einmal an und sehen, dass wir jetzt sind Wir sind bereit zu gehen. Das wird also durchlaufen und wir sind bereit, unser Quiz in unserer HTML-Datei auszubauen . Und all das kommt in der nächsten Reihe von Lektionen 8. 9 Questions in HTML erstellen: in den vorherigen Lektionen zeigte Ihnen, wie Sie Dada Kuchen bekommen kann ein JavaScript-Objekt erstellen . Wie Sie Ajax-Anforderung erstellen können Ziehen Sie diese Javascript-Datei, die Jason Datei in und verwenden Sie sie in Ihrem JavaScript. Also, diese Lektion werden wir uns die Erstellung des Quiz ansehen. Eso Zunächst einmal wollen wir damit beginnen, alle Objekte innerhalb des Mein Objekt durchschleifen zu lassen. Und ich wollte das überschreiben. Und jetzt durchlaufen wir alle Objekte dort. Also haben wir mein Objekt und wirklich cool, weil wir die Fragen dort bekommen können und so weiter. Mal sehen, was jetzt passiert. Also haben wir zwei Fragen, die so schön auftauchen, genau das, was wir brauchen. Ich kann loswerden, dass man dort etwas Platz eingenommen hat, und wir können die Fragen weiter ausbauen. Wir wollen also alle Fragen genau nach Bedarf aufbauen und das Quiz aufbauen. Eso Eines der Dinge hier mit dem Quiz selbst ist, dass wir mehrere Seiten haben wollen, werden diese Fragen nicht auf mehreren Seiten haben. Hier müssen wir verschiedene Seitenwerte haben . Eso vielleicht. Gehen wir zurück nach oben und wo wir das meine Objekte eingerichtet haben. Ich werde hier einen anderen Wert einrichten, also nennen wir es Page, und wir werden zunächst mit Seite Null beginnen und dann, wenn wir durchziehen, werden wir das Quiz erstellen und je nachdem, was der Seitenwert sein wird eso Sobald wir bereit, das Quiz zu starten, können wir vielleicht das Laden der Fragen abfeuern und dann bauen wir das Quiz und wir können automatisch beginnen, Teoh senden auf Seite eins und dann überhört wir den Seitenwert abholen oder ich werde einfach Nennen Sie es P Um Verwirrung zu vermeiden, gibt es O, dass wir einen vorhandenen Seitenwert haben. Hier ist oh, vielleicht können wir sogar Seite machen und es bis eins gleich machen. Das ist also unsere erste Seite oder erste Frage. Also, nur um Verwirrung mit Fragen zu vermeiden, weil wir das bereits hier verwenden werde ich es einfach Seiten nennen und wir können hier zum Seitenwert übergeben, und wir bauen auch global einen Seitenwert auf. Also können wir oder nicht brauchen, um dies zu nutzen, Also lasst uns einfach sehen, wie das geht und angefangen hat, dies auszubauen. Also wollen wir Fragen für Seite 1 erstellen, und wir wollen die Möglichkeit haben, alle diese Daten von meinem Objekt zu laden, weil erinnern Sie sich zuvor gezeigt haben, wie Sie diesen Inhalt in das my -Objekt laden können. Also jetzt werfen wir einen Blick auf das und wir sehen, dass wir nicht unbedingt einmal diese Schleife machen müssen , weil wir haben wir Seitenwerte haben, eso vielleicht sogar zurück zu diesem und wir können es automatisch auf Seite Null setzen und es so tun wir können mit jeder Frage beginnen, die wir wollen. Wenn wir nicht mit Frage eins anfangen, dann machen wir es vielleicht so. Also mache ich es einfach so, damit wir auf das richtige Objekt zugreifen können. Also lassen Sie uns einfach Konsole, ausloggen und sehen, ob wir die richtige Frage bekommen können. Also Seite eins und das wird unser erster Gegenstand in dem Objekt zu Rennen sein. Also werden wir genau das tun und wir werden diese Seite minus eins nennen. Sehen wir uns an, was hier passiert. Also bekommen wir, welche Farbe ein Apfel ist. Das ist also die richtige Frage. Also jetzt können wir tatsächlich unseren Ausgabebereich hier aufbauen, also wollen wir das vielleicht tun, aber wir haben es gesagt. Ich werde diese Mike-Fragen stellen. Das wird also der eigentliche Fragecontainer für die Frage sein. Und jetzt müssen wir eine Schleife durch die möglichen Antworten erstellen. Eso Werfen wir einen Blick darauf und bauen eine Schleife durch alle möglichen Antworten dort. Und auch werde ich ein Boot bauen. Meine Richtige. Und so wird das tatsächlich den richtigen Wert zurückziehen und was ich glaube, wir haben es gerade richtig genannt. Also müssen wir den gefundenen Schwung speichern. Und jetzt sind wir bereit, Zehenschleife durch und stellen einige Fragen, also können wir vielleicht eine Variable für Fragenhalter aufbauen . Und wir werden das einfach damit beginnen, einfach leer zu sein, weil wir vielleicht etwas formatieren wollen. Wir haben ein paar Fragen. Eso wieder, je nachdem, wie wir das machen wollen. Vielleicht kümmern wir uns darum später und erstellen unsere Schleife hier für jede Schleife. Das gleiche, was wir hier unten gemacht haben, wo wir alle verfügbaren Elemente im Objekt durchlaufen werden, aber wir werden nicht das my Objekt verwenden. Wir werden mein Objekt benutzen, und wir werden die Antworten überprüfen. Und hier werden wir den Fragenhalter ausbauen. Also, jeder dieser Fragen, die Inhaber, werde ich eine Art Wert haben. Hier ist also lasst uns das hier ausbauen. Also Frage Halter und erinnern Sie sich noch einmal, dass wir Bootstraps verwenden. Das wird es uns also leicht machen, etwas schnelles Styling damit zu machen. Also werde ich klein anrufen. Es wird sechs sein. Das ist eine Klasse, die ich benutzen werde, und lasst uns hier Hyperlink erstellen. Also werden wir hier unsere klickbaren Informationen haben. Also bauen wir unsere Frage auf. Eso was? Geben Sie dem Benutzer die Möglichkeit, auf diese Fragen klicken zu können. Wir könnten sie auch als Knöpfe machen, und dann bin ich merkwürdig. Also werde ich merkwürdig in dieser Antwort. Also, ja, das wird ziemlich lang hier, aber wir hätten auch meine Objektseite minus eins in einen Container legen können. Das wird also Antworten sein, und so beantwortet ich und dann das fertig machen und das Div Cervical beenden. Also, jetzt bauen wir den Fragenhalter aus und vielleicht wollen wir, nachdem wir hier durchlaufen , vielleicht wollen wir diesen Ausgabebereich aufbauen. Also werden wir Ausgabe machen und das inter html setzen. Also habe ich diesen Wert dort. Also richten Sie es so ein Diff dort. Also fügen Sie in meiner Frage vielleicht sogar wollen Wir werden danach etwas Formatierung damit machen, also lasst uns das einfach starten. Und wir können hier auch eine andere Zeile hinzufügen. Es war also ein dummer Fragenhalter. Und mal sehen, wie das jetzt aussieht. Bisher. Also haben wir alle unsere Fragen hier oben und wir haben unsere möglichen Antworten . Das ist also ein guter Anfang, um unser Quiz auszubauen. Und natürlich werden wir auch ein bisschen mehr Formatierung einführen. In der nächsten Lektion gehen wir zurück in unser HTML und stylen dies ein bisschen besser, so dass wir unsere Fragen präsentieren, die in ein wenig benutzerfreundlicher Erfahrung. Aber das ist der grundlegende Sand, wo gesetzt und bereit, mit dem Aufbau unserer Anwendungfortzusetzen Anwendung 9. 10 Bootstrap Styling von Quiz: diese Lektion, Wir werden in ein wenig Stiefel fallen springen, um dies benutzerfreundlicher zu machen. Also lasst uns in unsere HTML-Seite springen und wir haben wirklich nicht viel gemacht. Also erstellen Sie ein div und ich werde ihm eine Klasse aus Container geben. Dies wird also unser Gesamtcontainer für all unsere Inhalte für diese Webanwendung und wir haben unsere Ausgabe hier. Hier sind die Fragen, die sie sein werden. Und vielleicht wollen wir dort auch einige zusätzliche Schaltflächen einbauen. Also lassen Sie uns es auf diese Weise machen, wo wir ein anderes div erstellen werden und wir geben ihm ein Tuch und gleich es zu Zeile. Und vielleicht erstellen wir auch einen Stil für das Quiz, damit wir uns identifizieren können. Was sind die Quizinhalte für den Fall, dass wir einige zusätzliche Kant-Container einpacken oder hinzufügen möchten , deren Inhalt und es gibt keine, dass wir ein Seil haben, und diese Rolle wird alle Informationen für das Quiz enthalten. Und dann, direkt darunter, möchte ich auch einige Schaltflächen hinzufügen. Also wieder, sie werden Klassenrolle verwenden, weil dies eine wirklich einfache mit Bootstrap toe ist. Fügen Sie diese verschiedenen Klassen hinzu. Und so werden wir hier ein paar Knöpfe erstellen. Also vielleicht ein i d der Schaltfläche vorherigen gegeben und vielleicht das ganze div aufnehmen, machen es klickbar. Äh, also gib es eine Rufspanne von X oder Essam und also werde ich dieses hier einfach rausziehen und ein anderes Div machen. Also, was tun, um auf dibs? Und dann werden wir eine andere für tatsächliche Tasten s zu tun, so dass es nicht tut Es macht nicht herum mit, wie wir es präsentieren wollen. Also Klasse und diese Klasse wird ein Knopf sein. Machen wir einfach primäre Tasten. Dies sind alle Bull-Bootstrap-Klassen. Zieh das nach links. Und, natürlich, wenn Sie ein Quiz ohne die Fähigkeit machen wollen, Teoh, Teoh, gehen Sie zurück zu den vorherigen Fragen, die Sie alle tun müssen, ist einfach entfernen Sie diese Option hier. Also, jetzt, wo wir eine vorherige haben, also brauchen wir vielleicht noch einen. Also Knopf weiter und und wird dieses nach rechts ziehen. Dann natürlich müssen wir diese natürlichimmer noch verstecken und zeigen, wie nötig. Mal sehen, wie das aussieht. Es sieht also ein bisschen besser aus. Ähm, vielleicht müssen wir auch für die Klasse, und ich werde Styling auf der Seite machen, damit wir dort nicht mehrere Stile haben. Also Klassenquiz und vielleicht eine Grenze, und Sie werden wahrscheinlich wollen, um es so aussehen zu lassen, wie Sie es präsentieren wollen . Das ist also nur ein schnelles Styling, das ich dort hinzufüge. Mal sehen. Also, jetzt haben wir mehr von einem Quiz-Typ Aussehen, wir haben eine Frage da drin. Also springen wir zurück in das Java-Skript und fügen hier einige Klassen hinzu? Das wird also sein, dass ich es nur Mike nannte, du musst das einfach halten, und ich werde nur etwas Styling für meinen Farbton anwenden. Ich dachte, Größe unterbreitet, macht es groß. Lassen Sie uns noch sagen, ich dachte, warte, wir machen einen mutigen, damit Sie dieses Aussehen haben. Und lassen Sie uns auch ein paar Eintopfen dort hinzufügen, Also hebt sich ein wenig mehr von den Fragen, da gehen wir. Jetzt haben wir einige Fragen, und natürlich müssen wir auch einige Klassen zu unserem Auswahlbereich hinzufügen und wir werden diese Klassen auch verwenden , um sie klickbar zu machen. Also lasst uns das auch tun, dass wir sie einfach anrufen werden. Sie bauen es hier für Knopfkrebs oder so etwas und machen eine Grenze. So lange pflücken solide. Und war etwas Schwarzes, etwas zu tun, nur ein bisschen aus schwarz und hatte einige Eintopfen dort. Und auch, lassen Sie uns im Text die Zeile hinzufügen, Also zentrieren Sie diesen Text und lassen Sie uns einfach sehen, wie das aussieht. Etwas in dieser Klasse drüben in die Knöpfe ist, dass wir diese ausbauen. Hoppla. Ich muss die Double Courts benutzen, weil ich die einzelnen Gerichte für das JavaScript benutze. Schauen wir uns das an. Also, jetzt muss ich noch hinzufügen, vielleicht machen Sie sie in ein Display. Es nimmt also den gesamten zugewiesenen Raum Anzeigeblock ein, also sehen Sie, ob das einen Unterschied macht. Das tut es auch. Es beginnt ein wenig besser aussehen dort, wo wir haben, welche Farbe ist ein Apfel, und dann haben wir unsere Möglichkeiten. Hier s, so dass wir vielleicht sogar das Styling anhängen wollen, so dass vielleicht nicht einmal Hyperlinks dort haben wollen . Vielleicht wollen wir das rausziehen. Und vielleicht wurde ich dies in ein div verwandelt, so dass ich nicht all das Hyperlinks-Zeug dort habe und dann den Stil schwäche, der def, um es so aussehen zu lassen, wie wir es präsentieren wollten. Also lassen Sie uns hier auch etwas mehr Styling hinzufügen. Also auf der Schaltfläche antworten Sie Klassen und lassen Sie uns den Mauszeiger über sie hinzufügen. Also, um Pseudo-Klasse schweben und lassen Sie uns einen Hintergrund so Hintergrundfarbe machen. Welche Farbe sollen sie sehen, wenn sie über schwebten? Also vielleicht diese blaue Art von Farbe und vielleicht ändern wir die Schriftfarbe, um dies zu sein, und wir wollen die Schriftgröße auch ein wenig größer machen. Schauen wir uns das jetzt an. Jetzt haben wir hier mögliche Antworten. Wir können mit dem Mauszeiger über sie fahren. Wir können die nächsten und vorherigen Fragen beantworten, und wir haben unsere Frage da oben, so dass es aussieht, als wäre unser Styling ziemlich gut, und in der nächsten Lektion, lassen Sie es einige dieser Funktionen erstellen. Also wissen wir bereits, welches die richtige Antwort ist. Eso Wir können das tatsächlich anzeigen, wenn wir wollen, und das werden wir später entfernen. Also lass es uns einfach so machen, wo wir unsere Antwort haben. Also die Frage und ich werden dann seltsam und so die richtige Antwort. So werden wir in der Lage sein zu sehen, welcher richtig ist. Wir wissen, dass die Artikelnummer in diesem re, dass dieser die richtige 1012 ist, um es ein wenig interessanter zu machen . Anstatt es dort oben zu stellen, schleifen sich hier die richtige Werbung durch. können wir sehen. Wenn ja, habe ich einen Wert. Vielleicht ist es Konsul, der es abgemeldet hat, nur um eine bessere Vorstellung davon zu bekommen, was in mir enthalten ist und dann werde ich diese Bedingung dort anwenden. Also ist es zurück zu springen hier vorbei ist nur wieder zurück. Die Indexnummern eso können wir durch die Indexnummern überprüfen, die wir sehen können, ob ich gleich meinem korrekten ist . Dann lassen Sie uns sehen, was wir tun sollten, wenn es gleich ist, dass meine richtige dann, aber richten Sie eine weitere Variable. Also ja, richtig. Und lassen Sie das leer für jetzt. Und wenn es der richtige ist, dann lässt es in einem Asterix. Und so meine Frage, wie wir hier durchschleifen und die Antworten durchlaufen. Und jetzt, wenn wir uns das noch einmal ansehen, sollten wir sehen, dass wir einen Asterix in der Nähe des richtigen haben. So und eines der Dinge. Also müssen wir das tatsächlich ändern, um nichts zu sein, weil wir diesen Wert nicht wirklich klären, was wir auch tun könnten. Also jetzt wissen wir, welcher der richtige ist. Wir haben es dort oben geschrieben, so dass wir jetzt den richtigen Wert aus der Frage entfernen können . Und es gibt einen Grund, warum ich das tue. Und der Grund wird sein, dass wir hier eine geschnittene Art von Abfall irgendeiner Art von Unterscheidungsmerkmal zum richtigen hinzufügen wollen , damit wir das leicht aufnehmen und prüfen können, ob sie tatsächlich den richtigen angeklickt haben. Also das kommt alles in der nächsten Reihe von Lektionen 10. 11 Zwischen den Fragen: in dieser Lektion werden wir einige dieser Zuhörer Teoh unser Quiz hinzufügen. Also werden wir in der Lage sein, tatsächlich zu sagen, auf welches Element der Benutzer geklickt hat. Und dann können wir dort auch etwas JavaScript machen und Fortschritte durch das Quiz machen, ihnen erlauben, die nächste Frage zu machen und so weiter. Lassen Sie uns also einen Blick darauf werfen, dies in hinzuzufügen. Und vielleicht zuerst können wir es mit dem Hinzufügen von nächsten und vorherigen beginnen und diejenigen dieser Zuhörer aktualisieren weil sie ein wenig einfacher sein werden und im Gegensatz zu den Ereignis-Listern , die wir für unser Quiz selbst. Also diejenigen, die einfach sind, weil sie sich nicht wirklich ändern, werden sie nicht dynamisch sein . Alles, was ich tun muss, ist hier in meinen Quellcode zu schauen, zu sehen, was ich diese Werte benannt habe, und dann kann ich meine Ereignis-Listener hier einrichten. Also habe ich das hier und ich habe das hier. Also hier drüben können wir auf Klick einrichten. Also mit der Morgendämmerung noch einmal und hier können wir eine Funktion haben und diese Funktion laufen lassen. Also haben wir bereits eine Funktion eingerichtet, die wir tatsächlich initialisieren wollen, und das wird das bekommene gebaute Quiz hier s O sein. Vielleicht wollten wir den Seitenwert erhöhen und ein Quiz von dort erstellen. Und hier ist vielleicht die beste Idee, dass wir hier einen Seitenwert durchlaufen haben. So Seite und wird Seite gleich Seite einrichten. Das erspart uns also die Mühe, tatsächlich mehrere Seiten produzieren zu müssen. Eso wird dies nur durch die Seite schleifen und wir können alles innerhalb einer Funktion einstellen. Also lass es uns einfach so machen, wo wir Quiz bauen werden und wir werden Seite plus eine einfach Das ist Seite plus eins nehmen . Und das ist vorangegangen. Das wäre also minus eins so minus eins. Also gehen wir hin. Also, jetzt haben wir die tatsächlichen Seiten schwächen erhöhen die Seiten in dieser Art von Mode. Mal sehen, ob das tatsächlich funktioniert. Also haben wir hier ein Problem, bei dem wir den Fragenwert nicht lesen können, weil wir keinen Wert für die Seite erhalten, weil sie auf einer Seite plus eins saßen. Also ist hier etwas schief gelaufen. Schauen wir uns das ein bisschen genauer an und sehen genau, was hier passiert ist . Also melde ich mich den Wert für Paige ab. Wir können tatsächlich sehen, was der Wert für Seiten, bevor es den Fehler auslöst. Wir sehen, dass der Wert für Seite negativ ist. Sie haben also Page auf Null gesetzt. Wir übergeben einen Wert von PG toe eins, und aus irgendeinem Grund nimmt es dieses PG nicht auf, und es setzt tatsächlich Seite zwei auf Null. Das ist nicht genau das, was wir hier hüpfen wollen. Also sehen Sie, das ist die Übergabe eines Wertes von negativem. Also nochmal, wir sind uns nicht wirklich sicher, warum. Es übergibt es als negative. Wenn wir das genauer betrachten, sehen wir, dass diese Werte hier drüben tatsächlich durchlaufen, wenn es durch das Build-Quiz läuft . Es wird also Build-Quiz ausgeführt, ohne zu warten, bis es tatsächlich geladen ist. Dies ist also eines der Probleme hier, dass wir es nicht wirklich laden, und es führt das Build-Quiz aus. Also das Problem, wirklich ist, dass wir es müssen. Jetzt, da wir die 's-on-Click-Ereignis-Listener hinzugefügt haben, sind sie beide, wenn die Seite geladen wird, sie werden tatsächlich abgefeuert, und sie gehen durch und laden die Seiten. Inzwischen sind wir immer noch nicht an den Punkt gekommen, an dem tatsächlich die Seite geladen wird, die wir verwenden möchten , damit wir dies sehen können, wenn wir eine von ihnen auskommentieren. Schauen wir uns das jetzt an, und wir können sehen, dass wir immer noch diese negativen bekommen, weil die 1. 1 dort ein echtes Problem gibt, das ein negatives lädt, so dass wir dies als Anzeigen-Event-Listener hinzufügen können . Oder wir können hier etwas tun, wo wir sehen können, dass, wenn die Seite weniger als Null ist. Oder vielleicht halten wir es einfach heraus, wenn Page größer als Null ist und wickeln Sie dies alles in eine Funktion ein , so dass wir keines dieser fehlenden Auslöser dieser Ereignis-Listener haben. Jetzt, wenn wir es laden, können wir sehen, dass es dort etwas besser funktioniert, und wir feuern das immer noch nicht ab. Also lassen Sie uns sehen, was jetzt passiert, wenn wir klicken, das scheint nicht, dass es tatsächlich diese Funktion abfeuert. Die Antwort hier wird also zu schnell und eine tatsächliche Funktion sein, und dies wird uns erlauben, diese Funktion tatsächlich auszulösen, wenn sie gesammelt wird. Also lasst uns das Gleiche für beide tun. Retten Sie das. Und nun mal sehen, ob wir mit dem Quiz wirklich Fortschritte machen können. Also haben wir die nächste Frage gestellt. Wir bekommen neue Fragen. Hier haben wir den vorherigen getroffen. Wir sehen, dass wir in der Lage sind, durch das Quiz zu gehen, und wenn wir mehr Fragen hätten, würden wir sehen, dass noch mehr Fragen angezeigt werden. Jetzt haben wir die Möglichkeit eingerichtet, sich durch das Quiz zu bewegen. Und natürlich gibt es verschiedene Möglichkeiten, Ereignis-Listener zu verfolgen. Wenn wir Ereignis-Listener hinzufügen möchten, wenn wir sie über diese dynamischen Ereignisse hinzufügen, funktionieren diese Klickfunktionen möglicherweise nicht, und vor allem, weil ich die s tatsächlich hinzufügen möchte, klickbar machen und Ereignis-Listener sie, eso Hinzufügen im Hören über die Klasse. Also, vielleicht durchlaufen alle diese Klassenobjekte und angehängte Ereignis-Listener an sie. Eso können wir das auch tun. Während wir die Fragen aufbauen, können wir jeden einzelnen dieser Ereignis-Listener aufbauen und auf unserer Seite anhängen. Werfen wir einen Blick darauf, wie das aussehen wird und fügen Sie einen anderen Ereignis-Listener hinzu. Vielleicht wird dies eine brandneue Funktion sein. Also denke ich nur, dass wir das vielleicht meine Antwort nennen können. Ich bin mir nicht sicher, ob Sie einige davon schon benutzt haben, also versuche ich nur, schnell einen Blick zu werfen und zu sehen, ob ich sicherstelle, dass sie nicht benutzt wurden . Also, was hat der Konsul protokolliert und geklickt? Vielleicht reicht das jetzt aus, da wir den Ereignis-Listener anhängen , damit meine Antwort abfeuert. Und das wird eine Schleife durch alle diese Tasten gehen und diese Funktionalität bieten, die wir diese Tasten anklickbar machen können. Also lassen Sie uns diese Ereignis-Listener auch jetzt hinzufügen, also zu springen, um zu überprüfen, was Klassennamen sind, die sie sein werden, und gehen einfach dorthin. Also werden wir einen Haufen Klassennamen mit Bt und Antwort haben. Also werde ich Ihnen zeigen, wie Sie das in der kommenden Lektion tun, denn diese Lektion beginnt bereits ein wenig lang zu laufen. Und ich möchte wirklich in der Lage sein, das in wirklich gutem Detail darüber zu durchgehen, wie wir die Tierzuhörer an diese spezielle Klasse anbringen und alle unsere Knöpfe anklickbar machen werden. Es kommt also in der nächsten Lektion auf. 11. 12 JavaScript addEventListener: In dieser Lektion möchte ich Ihnen zeigen, wie wir alle unsere Schaltflächen anklickbar machen und dann vielleicht sogar die Werte zurückziehen können , die in diesen Schaltflächen enthalten sind. Also lassen Sie uns dieses jetzt ausprobieren und sehen, wie wir diese erstellen können, öffnen Sie unseren Editor. Und das erste, was ich tun möchte, ist, dass ich ein Objekt erstellen möchte, das alle diese Klassen enthält . Also haben wir eine Reihe von Klassen oder Aufruf von Knopfantworten. Also werden wir Container für diese erstellen. Also, Button, oder vielleicht kann ich es einfach als Antwort nennen. Das wird also der Container sein, der alle Klassen aufnehmen wird, an denen diese bestimmte Klasse angeschlossen ist. Und wir werden Dokument Get verwenden, damit Sie keine Elemente nach Klassennamen erhalten, um Elemente zu erhalten . So erhalten Sie Elemente nach Klassennamen. Und dann werden wir hier alle diese Schaltflächen-Antwortklassen angeben. Und nur um dir zu zeigen, dass wir die durch ein Konsolenprotokoll ziehen werden, und ich werde dieses Konzertprotokoll loswerden. Also gehen Sie zurück und aktualisieren Sie es, und wir können sehen, dass wir jetzt tatsächlich alle diese Schaltflächen bekommen, die diese Informationen mit dem Wert dort s enthalten . Also haben wir hier ein paar Möglichkeiten, was wir tun können. Also, wenn wir nur vielleicht einen Vergleich der Antwort auf die Frage machen und das in die richtige Antwort setzen wollen. Vielleicht ist dies ein besserer Weg, dies zu tun, wo wir mein korrektes haben, aber ich möchte zurückziehen, damit wir nichts in diesem tatsächlichen Javascript platzieren müssen, das der Benutzer erkennen kann. Also lasst uns ausziehen. Richtig. Also setzen Sie eine andere Variable hier, eine andere globale Variable hier , so richtig und Sir, und wir werden es einfach auf den Standard Null setzen und dann hier runter gehen und ich werde das als Containerspitze verwenden, halten Sie den Wert der tatsächlichen richtigen Antwort, und so wird das ziemlich lang sein. Aber es wird eine Stabilität geben, um einen Vergleich zwischen dem Wert zu machen, der auf diesem inneren HTML von diesem geklickten Wert gesendet wird, um zu sehen, ob das, was in dieser richtigen Antwort enthalten ist, also könnte ich vielleicht einfach die richtige Antwort setzen, wenn es geklickt. Das wird also die gleiche Sache sein, die in diesem inneren Text der richtigen Antwort enthalten ist . Also lassen Sie uns jetzt unsere Ereignis-Listener dazu hinzufügen und normalerweise würden wir alle verschiedenen, die diesen Klassennamen halten, durchlaufen . Aber weil wir sie dynamisch erstellen, sollten wir in der Lage sein, dies in dieser Art von Format abzuziehen, wo wir im Gehirn hinzufügen, du eins. Nein, wir müssen es nachher hier tun, weil wir den Ereignis-Listener dort nicht richtig hinzugefügt haben. Also müssen wir hier eine andere Schleife erstellen. Das Einrichten der Variablen X gleich Null, während X kleiner ist als die Länge der Antwortlänge und wir werden X um eins erhöhen. Also, um diese Schleife zu erstellen, und dann ist dies, wo wir diese Ereignis-Listener hinzufügen können. Also, zu jeder Antwort werden wir seltsam X auswählen. Wir werden Ereignis-Listener hinzufügen, und der Ereignis-Listener wird ein Klick sein, und wir werden sie an die meine Antwortfunktion senden. Falsch eso Dies richtet das Ereignis ein, Listener. Also lasst uns dasselbe versuchen und sehen, ob das wirklich funktionieren wird. Eso Jetzt, wenn wir auf eines dieser klicken, können wir sehen, dass wir tatsächlich bekommen, was der richtige Wert ist. Jetzt müssen wir also nur den Wert der angeklickten Elemente aufnehmen und mit dem tatsächlichen Wert vergleichen , den wir suchen. Also werde ich Ihnen zeigen, wie Sie das in der nächsten Lektion machen. 12. 13 innerText Wertscheck: Also die vorherige Lektion, die wir uns angesehen haben, wie wir Ereignis-Listener hinzufügen können Und das wirklich nette an Dom und JavaScript ist , dass es alle Elementinformationen übergibt. Also, was ich damit meine ist, dass ich jetzt zur Konsole gehen kann und wir ein Verzeichnis machen, und wir werden das benutzen. Dies enthält also alle Informationen, die dieses bestimmte Objekt hat, die diesen Klick initiiert oder ausgelöst hat. Also, was ich damit meine, ist jetzt, wenn ich dies klicke, so dass wir dieses Div sehen. Bt eine Antwort. Und wir haben all diese wirklich nützlichen Informationen und ich möchte inneren Text verwenden. Also, wenn ich das da drin mache, also in ihremText, Text, dann gehen wir wieder raus und probieren es jetzt aus. Also, wenn wir darauf klicken, sehe ich tatsächlich diesen inneren Text, so dass ich jetzt einen Vergleich durchführen kann, um zu sehen, ob Rot gleich der tatsächlichen richtigen Antwort ist , nach der wir suchen. Also, wenn in ihrem Text gleich dem ist, dann richten Sie die Variable Nun, vielleicht nennen Sie es mein Ergebnis. Und für jetzt, lassen Sie es leer. Also, wenn es richtig ist. Dann wird mein Ergebnis korrekt sein, sonst wird es falsch sein. Und natürlich werden wir das später aktualisieren. Aber jetzt können wir tatsächlich herausfinden, ob der Benutzer etwas richtig hat oder ob er es falsch gemacht hat und wir können anfangen, eine Bewertung unserer Twist zu erstellen. Lasst uns dasselbe versuchen. So falsch, Falsch. Und dieser sollte eigentlich abfeuern, um zu korrigieren. Also nicht sicher, was hier passiert ist. Werfen wir einen Blick und sehen, was hier in unseren Ergebnissen vor sich geht. Es ist also nicht in der Lage, die richtigen Antworten tatsächlich zu vergleichen. Und so ist das Problem hier, dass wir hinzugefügt haben. Also gehen wir in den zweiten Punkt hier, würden zum inneren Text gehen, und wir sehen, dass wir diesen Asterix rot haben. Unser eigener Code hier aus einer der vorherigen Lektionen verursacht tatsächlich dieses Problem. Also vielleicht würde das einfach vollständig loswerden und es aktualisieren. Also jetzt sind wir vorbei und rot, und jetzt können wir sehen, dass es richtig zurückkommt. Das war also das Problem dort, wo sich der innere HTML-Code und ihr Text geändert hatten. Wir hätten auch die Zehe aktualisieren können. Achten Sie darauf, dass dieser innere acht innere Textwert mit diesem Asterix oder wir könnten entfernen, dass ass Tricks eso alle je nachdem, wie wir unseren Vergleich für die Fragen machen wollen. Also, jetzt haben wir die Arbeit so richtig, dass wir durchgehen können, und wir können sogar zum nächsten gehen und wir können sehen, welche richtig sind. Welche sind falsch? Also in der nächsten Lektion können wir anfangen, Scoring all dieser Fragen innerhalb unseres Quiz zu bauen und vielleicht sogar wollen wir einige Speichern auf diese Werte anwenden eso eine re zu erstellen, um alle unsere Ergebnisse zu speichern und dann in der Lage zu sein, wenn wir gehen zu vorherige haben es bereits ausgefüllt. Also, das kommt in den nächsten Lektionen. 13. 14 Auswahl von Klassen zum Auswerfen von Klassen in Elementen: in dieser Lektion. Ich möchte Ihnen zeigen, wie wir Informationen, die ausgewählt wurden, tatsächlich speichern können. Also, wenn wir rot wählen, bewegen wir uns zum nächsten und wir haben wie grün verwendet. Wir wollen zurückgehen und sehen, dass Red bereits ausgewählt ist. Wir wollen nicht Blue Purple, also möchten wir eine Klasse hinzufügen. Teoh zeigt an, dass dieser bereits ausgewählt wurde, und vielleicht möchten wir sogar eine Klasse hinzufügen, wenn wir diese Auswahl treffen. Lassen Sie uns also eine Klassenzellenantwort erstellen. Und wann immer diese bestimmte angeklickt wird, lassen Sie uns eine Art Hintergrundfarbe für so vielleicht wollen wir diese Art von Hintergrundfarbe und Gewicht Text haben . Also, was auch immer wir eine Antwort ausgewählt haben, möchte ich in dieser Klasse hinzufügen. Also gehen wir zurück in unser JavaScript und sehen, wo wir das aktualisieren. anfangs tun möchte, Was ichanfangs tun möchte,ist, wenn die Antwort ausgewählt ist, möchte ich dem Element, das wir gerade ausgewählt haben, eine Klasse hinzufügen. Und so lassen Sie uns hier rüber gehen und wir wissen, dass wir dieses Element bereits ausgewählt haben. Wir können sehen, dass wir in der Morgendämmerung eine Klassenliste haben. Und wir haben auch eine eingebaute Funktion in Javascript, wo wir das umschalten können. Also, wann immer wir diese Auswahl treffen, wir Kantate ggl und Update und ADOT Klasse. Aber das andere Problem hier ist auch, auch, dass wir diese Klassen tatsächlich von denjenigen entfernen möchten, die diese Auswahl nicht haben . Also wollen wir tatsächlich alle durchlaufen und nur die Klasse zu diesem ausgewählten Element hinzufügen , und wir möchten es von den anderen entfernen. Also zuerst einmal, lassen Sie uns einfach versuchen, dies wo Toggle ing und wir fügen in dieser Klasse hinzu und zeigen Ihnen, wie das funktioniert. Also, wenn wir hier unsere Auswahl treffen, bekommen wir all diese Fragen. Und jetzt können wir natürlich natürlich auf sie klicken und ungerade sie umschalten. Was wir also brauchen, ist eine Möglichkeit, jede einzelne dieser Fragen tatsächlich zu identifizieren und vielleicht durch sie zu schleifen. Also werde ich einige zusätzliche Informationen in die Frage hier hinzufügen, wo ich ein Attribut hinzufügen werde , also gehen sie einfach zu Wir fügen in dieser Schaltflächenklasse hinzu und ich werde eine Daten machen hinzu und ich werde eine Daten machen, die ich d Zehe halten den Wert, dass dieses bestimmte Element in welcher Reihenfolge ist? Es ist Prion vorgestellt. Dies könnte wahrscheinlich der einfachste Weg sein, diesen Wert zu übergeben. Also wird der Indexwert mit dem Wert übereinstimmen, den ich hier drüben präsentiere. Also meine Daten, die ich für diesen hier habe, werden alles sein, was ich in Jirsa Lissa eingebaute Funktion und JavaScript verwenden werde , um sicherzustellen, dass der Wert, der dann hier übergibt, der Indexwert tatsächlich ein Interviewer sein wird. Value eso Nun, da ich diesen hinzugefügt habe, kann ich das immer wieder aufheben, wenn ich auf die Antwort klicke. Also wird es in diesem enthalten sein, also werde ich nicht Toggle verwenden, aber ich werde durch all die verschiedenen schauen, die ich werde die i d bekommen. Also, zuerst, ich werde abholen, dass i d So Index, i d oder so etwas. Also behalte es einfach. Ich ich d und werde dieses bekommen verwenden, damit ich eine Hommage bekommen werde, und dann könnte ich hier einfach die Attribute angeben, die ich auswählen möchte, also müssen wir sicherstellen, dass wir dort zitieren. Also, jetzt wird der Wert dafür derselbe sein, der hier geschaffen hat. Also werde ich wissen, in welcher Reihenfolge das auftaucht. Und jetzt kann ich eine Schleife durch alle verfügbaren machen. Also lassen Sie uns eine Schleife machen und wir beginnen einfach mit einem Wert von Q gleich Null, und wir werden alle Elemente durchlaufen und die gesamte Länge dieser Elemente durchlaufen. Eso wahrscheinlich müssen wir mit den Eltern anfangen und wir werden Kinder machen. Wir könnten vielleicht etwas mit Geschwistern machen und zurück zu den Eltern s gehen also versuchen wir das zuerst. Aber wir haben mehrere verschiedene Elemente tief. Vielleicht ist der beste Weg, von den Eltern zu beginnen, gehen und Kinder zu tun. Also werden wir einfach die Länge der Kinder machen. Also denken Sie noch einmal daran, dass wir die Ausgabe verwenden, ist unser Hauptcontainer für das Quiz. Die Kinder werden alle Elemente sein, die in ihren enthalten sind und dann wird dies die Länge der Kinder sein, die dort verfügbar sind, und wir durchlaufen einfach die Fragen hier und stellen diejenigen innerhalb dieser -Elemente. Das werden also alle diese Dibs sein, die sich in diesem Hauptcontainer befinden. So tun que inkrement. Q Und sieh dir das an. Und jetzt wollen wir eigentlich wissen, welche Informationen wir haben. Also lassen Sie uns eine schnelle Konsole machen, sich abmelden und sehen, ob wir tatsächlich alle Knoteninformationen ausgeben können. Also haben wir Ausgang und das wird wirklich tief in das Wohnheim. Also Kinder und wie wir sie durchschauten und wir wollen die Kinder der Kinder auf dies tun , sollten uns hoffentlich jedes dieser Elemente zeigen, die die BT und A N haben hier. Aktualisieren Sie die Seite. Und jetzt, wenn wir darauf klicken, sehen wir, dass wir die Kinder bekommen. Also haben wir hier eine zusätzliche, aber wir bekommen die Kinder, die verfügbar sind, weil wir tatsächlich diesen Titel bekommen und dann hat dieser Titel keine Kinder. So kommen wir näher, um jedes einzelne Element auf unserer Seite identifizieren zu können. Und dann können wir natürlich natürlich durch diese Elemente gehen. Überprüfen Sie die verfügbaren Klassen hier und entfernen Sie entfernen und entfernen Sie entfernen Klassen nach Bedarf. So ähnlich wie das, was wir mit dem Kleinkind gemacht haben. Also eine andere Möglichkeit, dies zu tun, daran zu erinnern, dass wir diese Antwort bereits in ein Objekt-Array platziert haben. Also müssen wir es vielleicht nicht unbedingt in dieser Mork tun, das ist komplexer Weg, und wir können tatsächlich alle Elemente durchlaufen, wie wir hier zuvor getan haben , und dann einfach das klassenlose ausgeben. Schauen wir uns an, um zu sehen, ob das tatsächlich funktioniert. Also haben wir unser Konsul Log hier und so Konsole und werden Konsulat Verzeichnis machen, damit wir tatsächlich sehen können , was innerhalb des Morgendämmerungsobjekts verfügbar ist und Antwort ist. Und dieses Mal benutzen wir X also werde ich das Gleiche hier machen. Und lassen Sie uns dies überprüfen, um zu sehen, welche Ergebnisse wir hier in diesem Verzeichnis erhalten. Also, wenn ich jetzt auf klicke, sehen wir, dass wir auch Zugriff auf diesen Klassennamen erhalten können. Also hatten sie dort eine Reihe von Klassennamen. Möglicherweise können wir Klassenteams nach Bedarf hinzufügen und entfernen. In der nächsten Lektion werde ich Ihnen zeigen, wie wir Aktualisierungen an diesen Klassennamen vornehmen und sogar aufzeichnen können, während wir auf diese Antworten klicken, zeichnen Sie sie auf, während wir hin und her gehen, also kommt das in den nächsten Lektionen. 14. 15 Auswahl speichern: Also in dieser Lektion kann ich diese hier wirklich entfernen Armee, aber ich könnte es einfach zuversichtlich, damit wir es in der Zukunft referenzieren können, wenn wir jemals auf unsere Klassen in dieser Art von Format zugreifen wollen , aber es sieht wahrscheinlich so aus, als ob wir muss es möglicherweise nicht auf diese Art von Art und Weise tun. Also, wie wir alle verfügbaren Antworten durchlaufen, haben wir eine Liste aus der Klassenliste, so dass wir das auch tun können, wo wir Klassenliste und diese Liste tun können. Also es alle verfügbaren Klassen dort und was ich tun möchte, ist, dass ich in dieser Klassenliste hinzufügen möchte , wenn wir gleich I i d sind. Also, wenn X gleich I ist, ich d. Ich möchte in dieser Klasse hinzufügen Wenn ex i d gleich X ist, Ich möchte eine Klasse zum Klassenlosen hinzufügen und andernfalls möchte ich sie entfernen. Also Kloss Liste und seltsam, ich vergesse, was die Klasse war, die wir hinzufügen. Aber lassen Sie uns einen Blick in unser HTML werfen. Also fügen wir diese Klasse hinzu, also wählen Sie Antwort und das Gegenteil dort, dass wir sie entfernen möchten, wenn sie nicht gleich sind. Also lassen Sie uns den Anzug ausprobieren und sehen, ob das wirklich funktioniert. Wenn wir also unsere Auswahl treffen, fügen wir diese Klassenliste hinzu, und auf diese Weise können wir tatsächlich sehen, dass diese Auswahlen verarbeitet werden. Und jetzt als nächstes müssen wir hinzufügen, in einer Weise, um sich an diese Auswahl und diese Anzahl von verschiedenen Möglichkeiten zu erinnern, dies zu tun . Eso Ich denke nur, wenn wir ihren Editor öffnen können, können wir tatsächlich sogar das innerhalb des Objekts enthalten, so dass wir erstellen können, weil wir wissen, dass mein Objekt und wir haben Seite minus einmal leider, Connell auf. Wir können ein neues Element in diesem Objekt erstellen und wir könnten so etwas tun, wie meine Auswahl gleich ist , was auch immer der Wert hier ist. Und dann, wenn wir hier durchschleifen, könnten wir vielleicht einen Blick werfen und in einer bestimmten Klasse hinzufügen sehen, so dass eine Klasse Geweih gleich ist, sagte es zu nichts, und wir werden dies in der Schleife halten, und der Grund ist, dass Seite es immer zurücksetzen und diese else-Anweisung so wieder hinzufügen muss, wahrscheinlich ziemlich lang, und wir könnten dies wahrscheinlich irgendwann kürzen. Aber mein Objekt lobte minus eins mein S C l. Und wenn es gleich I ist, dann wird es einen brandneuen Wert für eine Klasse setzen. Und dieser Wert wird sein, was auch immer die Klasse, die wir benutzen wollen und jetzt zu hier gehen . Während wir uns präsentieren und während wir uns durchmachen, möchte ich das einfach hinzufügen, damit es nichts hinzufügen wird, wenn es leer ist, wenn das nicht wahr ist, aber wenn es wahr ist, dann wird es diesen das nicht wahr ist, aber wenn es wahr ist, Klassiker hinzufügen. Also lasst uns den Anzug ausprobieren und sehen, ob es passiert. Eso Auswahl blau Wir werden nächste lila und jetzt gehen wir zurück und wir sehen Blau ist bereits ausgewählt. Dasselbe für Purple. Wir sehen, dass bereits ausgewählt Red und Salon. nächste Lektion, die wir brauchen , um Hafer aufzuzeichnen. Vielleicht müssen wir alle Auswahlen in einem Array aufzeichnen und einfach überprüfen , ob sie richtig sind, oder wir können etwas tun. Da gab es ein Problem, also gab es keinen Wert dafür. Rufen Sie Attribute aus irgendeinem Grund ab. Wir werden also auch einen Blick auf das bevorstehende werfen, um zu sehen, was diesen Fehler auslöst und alle notwendigen Updates vorzunehmen. Also schauen wir uns das in der kommenden Zeit an. 15. 16 Bewegung zwischen Fragen zum Abschluss des Quiz: den vorherigen Bereich, den wir gesehen haben. Das war, weil ich in der Lage war, auf diese nächste Schaltfläche klicken und wir sind eigentlich nicht. Wir sind abseits der Bahn. Wir sehen, dass unsere Seitenwerte weit weg sind und wir gehen zurück, tatsächlich zu unseren bestehenden Seiten, dann geht es uns gut. Also haben wir hier ein echtes Problem damit, als nächstes zu bewegen, vorher zu bewegen und tatsächlich keine Daten zu haben, die damit in Zusammenhang stehen. Kontakt eso Es gibt ein paar Dinge, die wir dagegen tun können, und lassen Sie uns ausprobieren, was wir mit den Werten tun können. Mit den Seitenwerten möchten wir also sicherstellen, dass die Seiten innerhalb der tatsächlich verfügbaren Seiten enthalten sind. Eso Wir wollen nicht die Fähigkeit Teoh als nächstes bewegen oder Quiz zu bauen, bewegen Sie sich auf die verschiedenen Seiten. Wenn welche Seite nicht so idealerweise verfügbar ist, wenn sie zur nächsten Seite weitergehen, als , äh, wenn wir nichts über das haben, dann sollten wir einfach haben, dass das Quiz abgeschlossen ist und vielleicht etwas anderes schreiben. Also sollten wir nicht versuchen, Fragen zu schreiben und Daten zu bekommen. Wenn wir eine Seite von diesem verfügbaren Wert verschoben haben und wir haben, wenn Seite größer als Null eso ist . müssen wir auch einbeziehen. Wenn die Seite ist, ähm, müssen wir sehen, ob das Quiz abgeschlossen ist. Also müssen wir hier eine Überprüfung durchführen, um zu sehen, ob das Quiz abgeschlossen ist. Und wenn es Zitat abgeschlossen ist, dass wir etwas tun werden. Und wenn es nicht abgeschlossen ist, dann können wir mit der Logik fortfahren, die wir zuvor gesehen haben. Also wollte es das retten. Und jetzt haben wir hier einen Platzhalter. Woher wissen wir also, wo wir im Quiz sind? Woher wissen wir, wie viele Seiten innerhalb des Quiz sind und so weiter? Lassen Sie uns also einen Blick darauf werfen und sehen, dass wir dort einen Seitenwert haben, und jedes Mal, wenn wir darauf klicken, klicken wir auf diesen Seitenwert. Aber wir haben auch einige Informationen im Objekt. Wir wissen, dass das Objekt eine Länge hat. Also, wenn ich so etwas mache, so wenn wir können, können wir überprüfen, ob die Länge des Objekts, vielleicht eine Konsole, loggen Sie sich aus für jetzt und dann gelten wir bedingte Aussage. Also wird es etwas sein, wo wir die Länge verwenden. Vielleicht machen wir gerade gleich für jetzt, Page, denn wir werden beide Werte setzen und Sie können einen besseren Blick darauf werfen was hier passiert. Also, wenn ich darauf klicke, habe ich hier meinen ersten Wert. Das wird ausgegeben. Dies ist also die Seite, und dann als nächstes ist die Länge, so dass die Länge gleich bleibt. Wir wissen also, dass wir zwei Elemente in diesem Objekt haben, aber wir beginnen mit Seiten von Null und dann Seiten von einem. Und hier ist, wo, was? Was ich vorhin erwähnt hatte. Wenn wir uns die Seiten ansehen, sind sie nicht genau mit den Objekten verbunden, da die Objekte, die wir zwei Objekte in ihrer Länge haben . Eso Wir haben hier zwei Möglichkeiten, wo wir entweder subtrahieren oder wir könnten die Seite erhöhen . Und dann müssen wir vielleicht nicht einmal diese Seite abzüglich eins machen. Also versuchen wir es vielleicht so zu tun. Wo werden wir diese Seite abzüglich derer loswerden, wo wir diese Objekte aussuchen? Weil wir eine ganze Menge von denen machen, und es ist eigentlich ist es ziemlich chaotisch, Also musste ich alle Seite minus diejenigen entfernen. Speichern Sie das. Und jetzt können wir sehen, dass die Seite unserer Objektlänge entspricht. Sehen wir uns das an und sehen Sie, was wir damit machen können. Also, welche Farbe ist? Gras ist grün und wir beginnen automatisch mit der falschen Frage und wir sind nicht in der Lage, sich zusammenzuschließen . Nehmen wir also an, wir müssen diese auch aktualisieren. Dieser Ort ein Gleichheitszeichen hier und bauen Quiz. Mabel begann bei Null, so dass wir auf unserer ersten Seite angefangen haben, und jetzt beginnen wir bei Seite Null. Wir setzen es auf blau. Welche Farbe ist ein Apfel? Welche Farben? Gras. Siehst du, alles funktioniert einwandfrei. Das war also nur eine kleine Schicht. Und das war nur, um zu aktualisieren, was wir mit unseren Seiten machen. Also eines der Dinge hier, die wir bemerkt haben, dass unsere Seitenlänge auch sein wird . Aber unsere Seite kann nur Null und eins gehen. Also haben wir hier zwei Möglichkeiten, wo wir sehen können, ob die Seitenlänge größer ist als die Seite. Oder vielleicht könnten wir etwas tun, wie wenn die Seite minus eins ist, weil wir das subtrahieren müssen . Ich denke, eigentlich, nein, es wäre plus eins. Das ist also, wo wir das plus eins behalten müssen. Also, wenn Page plus eins weniger ist als das, dann wissen wir, dass wir etwas anderes ausführen wollen. Vielleicht wollen wir vorerst einen Platz im Konsul. Nur ein Platzhalter, der besagt, dass Consul Log abgeschlossen, abgeschlossen und lassen Sie uns dasselbe versuchen. Also jetzt gibt es einen Fehler. Lass uns da reinspringen und sehen, was dort passiert ist. Da fehlt also eine Klammer. Versuchen Sie das noch mal. Siehst du, wir haben keine zwei Jahre in der Konsole, also ist das gut. Also, welche Farbe ist Graphen? Und jetzt sehen wir, dass wir fertig sind und wir tatsächlich vorbeikommen können. Das ist also gut, und wir sollten es auch nicht implementieren. Sobald wir das bestanden haben, sollten wir diese Fähigkeit deaktivieren, auch die Seiten zu erhöhen. Also vielleicht könnten wir den tatsächlichen Wert der Seite so einstellen, dass Seitenlänge plus eins ist, so dass egal was passiert, was passiert, mal sehen, was jetzt passiert. Wir können auch nicht über diese Seite hinausgehen, auch nicht über diese Seite hinausgehen, so dass Sie so oft klicken können, wie wir wollen. Aber wenn wir versuchen, zu drei zu gehen, können wir das nicht überstehen. Und wir können auch entweder eso dies wieder nach unten gehen, je nachdem, wie wir dieses Quiz darstellen wollen, möchten wir vielleicht die Möglichkeit haben, dass Benutzer sich bewegen und etwas ausgeben können, oder wir möchten, dass sie in der Lage sind, zurück zu gehen . Eso wieder, je nachdem, wie wir das jetzt darstellen wollen, die Art und Weise, wie dies eingerichtet ist, dass wir diese Seitenlänge einstellen und wir werden nicht zulassen, dass der Benutzer Pasta verschieben. Also könnte ich so etwas tun, und ich glaube, das würde mir wahrscheinlich erlauben, zurückzuziehen. Das funktioniert also. Und wenn ich mich bewege, um es zu vervollständigen, kann ich auch zurückziehen. Also etwas da, um einen kleinen Unterschied zu machen, wie wir Inhalte darstellen und wieder zurückbewegen, und wir sind wieder in die Werte, die wir betrachten. Also in der nächsten Lektion, fügen wir einige Punkte hinzu, und dann werden wir hier darstellen, was ausgewählt wurde und wie die Ausgabe aussehen wird . Also, das kommt alles in der nächsten Besiedlung. Essenz 16. 17 Dynamisches Quiz neue Fragen hinzufügen: Also lasst uns ein anderes Array innerhalb unseres Objekts einbauen, und dieses Array wird die Antworten enthalten. Also oder die Antworten. Also meine Antwort. Wer ist für meine Frage oder vielleicht so etwas wie meine Frage Antwort? Und dieser hier wird eigentlich ein Array sein, weil ich all diese Werte halten möchte. Also, wenn es richtig ist, wenn die Frage richtig ist, dann möchte ich einen Wert von eins senden. Andernfalls habe ich keinen Wert von Null. Also möchte ich das hier tun, wo wir hier die Antworten setzen können und nur um sicherzustellen, dass die Dinge richtig oder falsch sind, und dann können wir unsere Bewertung machen. Es gibt eine Reihe von verschiedenen Möglichkeiten, wie wir die Scoring schwächen, tun die Scoring Hals, die Seite oder Kehle das Quiz, aber vielleicht ist ein einfacherer Weg, tatsächlich alles bis am Ende des Quiz zu vergleichen. An diesem Punkt wissen wir, ob die Person fragt und ich korrekt oder falsch antworte, aber wir müssen dies möglicherweise nicht einmal verwenden, weil wir diese Antwort einfach aufzeichnen und in unser Array hinzufügen können . Also lasst uns das einfach tun, wo wir dieses Array haben und wir werden nur die ausgewählte Antwort hinzufügen , die sie ausgewählt haben und das wird wieder verwenden. So ist es auch. Es ist wichtig, diesen Wert zu erhalten, da wir ihn mehrmals hier innerhalb dieser Anwendung wiederverwenden . Eso Jetzt müssen wir nur noch die aktuelle Seite identifizieren. Also, ich glaube, wir könnten es wahrscheinlich einfach so machen und wie Boot wir es in den Konsul stecken . Also Konsolenprotokoll, und ich werde dieses Array mit all seinen Informationen ausgeben. Also springt es hier raus und seht, was wir tun können. Also, jetzt haben wir, dass ein Rennen, das bei Null geantwortet haben, haben wir jetzt beantwortet, dass eine aus um es zu schwächen aktualisieren. Jetzt sind wir wahnsinnig. Nicht wollte, dass ein, das eine und so weiter. Und das ist eigentlich wirklich ordentlich, weil wir tatsächlich entfernen können, dass einige der Dinge, die wir früher hier gemacht haben, wo wir auswählen und wir dieses Objekt für mein S C l erstellen und wir können einfach überprüfen , ob diese Array-Antwort äquivalent zu diesem Element dort. Und wenn es so ist, dann werden wir in der Klasse hinzufügen. Also könnten wir das auch tun, und das Ergebnis wäre die Szene. Es gibt also eine Reihe von verschiedenen Möglichkeiten, offensichtlich, diese Arten von Anwendungen zu bauen. Und je nachdem, welche Werte Sie verwenden und welche Logik Sie anwenden, würden Sie das verwenden, um zu erstellen. Es waren Bewerbungen. Also, das ist, was ich tun möchte, ist eigentlich im Array mit einer Reihe von möglichen Antworten hier zu erstellen . Und lassen Sie uns diesen einen Schritt weiter gehen und es einige zusätzliche Fragen aufbauen, denn mit wirklich nur zwei Fragen ist es nicht wirklich so praktisch. Und es demonstriert nicht wirklich den ganzen Wert, der innerhalb dieser Art von Anwendung liegt. Also lasst uns etwas tun wie wahr oder falsch, wahr oder falsch. Und die Antworten werden entweder wahr sein, oder sie werden falsch sein. Sie haben nur zwei Möglichkeiten. Es gibt oh, das wird eine wahre oder falsche Frage sein. Der Himmel ist blau und die richtige Antwort wird Null sein. Fügen wir hier eine andere Frage hinzu, wie buchstabiert man fünf und diese? Ich werde einen haben. Ich muss, und von mehreren Optionen hier, also wird es einige Platzhalter dort und drei für fünf setzen. Und die richtige Antwort dafür wird der vierte Gegenstand in ihrem Weg sein, beginnend bei Null. Lasst uns retten. Und jetzt gehen wir wieder in unsere Daten zurück und ich werde den Aufruf zu diesem neuen Jason-Wert nutzen und wieder in unser Quiz gehen. Und hoffentlich haben wir jetzt noch weitere Fragen in „Wir haben wahr“ oder „falsch“ hinzugefügt. Wir werden sehen, wie Mason ordentlich es ist möglich, mehrere Optionen hier zu behandeln, mehrere Werte, und wir sehen, dass alles noch richtig funktioniert. Also traf als nächstes sollten wir fertig sehen. Und das ist der letzte Schritt des Aufbaus dieser Nähe, denn dies ist der Teil, in dem wir zusammenfassen können, die Antworten in diesem Saree mit den Werten vergleichen, die wir innerhalb unseres Objekts erhalten haben und sehen, was richtig ist. Denken Sie also noch einmal daran, dass wir innerhalb dieses Datenobjekts, das zurückgegeben wird , bereits alle Antworten haben, und wir wissen, was die Antworten sein sollen. Also jetzt alles, was wir auf der fertigen Seite zu tun haben, durchlaufen beide, machen Sie einen Vergleich und sehen, ob der Benutzer, wie viele von ihnen sie haben, oder? Also lasst uns das in der kommenden Lektion tun 17. 18 Verstecken zeigen nächste und vorige Tasten: Also in diesem hier will ich durchmachen und was auch immer, wir sind fertig und wir sind fertig mit dem Quiz. Ich wollte durchlaufen und ein Vervollständigungsskript ausführen, unseren Editor, und wir werden hier eine weitere Funktion erstellen. In dieser Funktion wird alles, was es tun wird, ist, die Summen zusammenzufassen. Möglicherweise müssen wir nicht unbedingt eine Funktion ausführen. Wir könnten es wahrscheinlich in hier tun und das Quiz beenden und dass wir beide Tasten verstecken könnten , um vorwärts und weiter zu gehen. Also schauen wir uns das an. Und eso haben wir diese Knöpfe hier und wir haben eine I d. Nächste und eine I d. Vorherige. Also lasst uns. zunächst Lassen Sie unszunächstdiese Schaltflächen ausblenden, diese Schaltflächen durchlaufen und ausblenden, damit wir dem Benutzer nicht die Option geben möchten, als nächstes zu gehen , wenn es abgeschlossen ist, denn das wirft und Fehler und lasst uns einfach entfernen Sie es diese Option. Also, um das zu identifizieren, können wir es von D. bekommen Also lass es uns einfach so machen, wo wir Element von i d bekommen und wir werden etwas Styling hinzufügen. Oder vielleicht ist es wahrscheinlich noch besser, eine Funktion zu erstellen, um dies zu tun, damit wir diese Funktion durchlaufen können , und es würde wahrscheinlich die Schaltflächen nach Bedarf verstecken und anzeigen. Also lassen Sie uns eine Funktion erstellen, die Show ausblenden wird. Und wir werden nur durchlaufen und die Werte von Page überprüfen. Und von dort können wir die Elemente nach Bedarf ausblenden und anzeigen. Also habe ich ein paar Bedingungen hier reingelegt, und wir brauchen auch noch einen Schwung. Also lassen Sie uns die Anzahl der verschiedenen Möglichkeiten, dies zu tun. Aber machen wir es einfach das lange Format hier, wo wir für den Button als nächstes tun und wir werden Stil und dieses Filet machen. Und so wird die 1. 1, die wir tun werden, keine anzeigen. Und dann bekam ich eine Kopie, diese ganze große Schnur. Vielleicht ist es ein Veteran, der es noch in einem Objekt steckt. Aber jetzt machen wir es einfach auf diese Weise. Eso Gerade jetzt müssen wir einen Vergleich machen, um zu sehen, ob wir tatsächlich den Quizwert abgeschlossen haben und zurückgehen. Und hier wissen wir, dass, wenn wir fertig sind, sehen wir, dass dies ein Wert von drei ist, und das war wieder dieser Wert für die Seite, und dann ist unsere Objektlänge drei. Wir müssen also sicherstellen, ob die Objektlänge meiner Objektlänge entspricht. Also werden wir diese Objektlänge verwenden und wenn die Objektlänge kleiner oder gleich ist, und wir werden die gleiche Formel verwenden, die wir hier hatten. Also, wenn die Objektlänge kleiner oder gleich Seite plus eins ist, dann werden wir keines auf der nächsten anzeigen. Andernfalls werden wir es anzeigen. Arten Block. Mal sehen, ob das funktioniert. Also ist alles gut so weit, und wenn wir dann getroffen haben abgeschlossen, so dass unsere Werte dort äquivalent sind, also nicht genau richtig funktionieren. Also lassen Sie uns einen Blick werfen und es tatsächlich entfernen. Dachte es so. Wir wollen sicherstellen, dass wir hier eine korrekte Berechnung vornehmen. Ist das nicht, dass das nicht läuft, weil ich diese Funktion nicht tatsächlich ausführe. Also lassen Sie uns diese Funktion dort hinzufügen. So war das wahrscheinlich das Problem dort. Also haben Sie die nächste Schaltfläche und dann sehen wir, dass es verschwindet, wenn wir gehen, um es zu vervollständigen, und wenn wir gehen zurück und sollte wieder auftauchen. Also gibt es immer noch einen Knish. Sie da, aber wir führen diese Versteckshow nicht richtig durch. Also vielleicht müssen wir das sogar rausbringen, oder vielleicht sogar zwei hier, damit jedes Mal, wenn eine dieser Tasten angeklickt wird, wir sicherstellen können, dass wir die Kontrolle der Schaltflächen haben, die sich verstecken und zeigen und grob, wir müssen eine machen, wo, wenn wir Null treffen und die Seitenlänge Null ist, als wenn die Seitenlänge kleiner oder gleich Null ist. Plötzlich sind wir wahrscheinlich genug, um ein Update darüber zu machen. Aber lassen Sie uns das einfach überprüfen und sehen, wie das funktioniert. Also, dass man in Ordnung ist, also verstecken wir uns jetzt und zeigen die Schaltflächen nach Bedarf an. Das ist genau das, was wir tun wollten. Und jetzt die finanziellen Berührungen. Fügen Sie einfach diese Abschlussberechnung hinzu, anstatt hier auf Weiter klicken zu müssen. Wir werden diesen Inhalt hier entfernen und etwas für den fertigen Teil zeigen. So können wir das ziemlich einfach mit inter html auf tun. Ich habe gerade abgeschlossen. Und natürlich können wir das auch umschalten. Wenn wir nicht möchten, dass die Leute in der Lage sein, zurück zu gehen und auf eine dieser beiden nächsten vorherigen Schaltflächen klicken . Wir können diese auch entfernen. Also gehen wir hin. Wir haben alle Schaltflächen abgeschlossen eingerichtet, und jetzt sind wir bereit, unsere endgültigen Berechnungen zu machen. Es kommt also die nächste Lektion. 18. 19 Partitur für Quiz erstellen: , wenn der Benutzer das Quiz abgeschlossen hat. Jetzt wollen wir den ganzen Inhalt hier ausgeben. Lassen Sie uns also etwas Raum hier in dieser Bedingung öffnen und etwas für die Quizergebnisse tun , Twist Ergebnisse. Und zuallererst werden wir wahrscheinlich eine Zehenschleife durch einige unserer Inhalte hier brauchen. Also lassen Sie uns hier eine Schleife erstellen. Und wir können wahrscheinlich eine sehr ähnliche Schleife machen, um das, was wir hier getan haben, weil alles, was wir tun müssen , ist alle Fragen zu bekommen. Also werden wir eine Schleife machen, vielleicht eine andere Variable dort auswählen. Ich habe W versucht, oder wir könnten so etwas wie Gegenstand im Objekt machen. Und das ist, wo wir so Elemente und Objekt erhöhen müssen, und wir tun keine Seitenantworten . Eso mal sehen, was jetzt passiert. Also, wenn ich es tue, würde ich hier setzen, Lasst uns es erhöhen. Und denken Sie noch einmal daran, dass wir nach der richtigen Antwort suchen. Also das ist Element oder der Indexwert und korrekt. Also wir sind nicht wirklich Schleifen dieses Array, also haben wir 01004 Also ist dies eine Liste aller richtigen Elemente innerhalb dieses Objekts zu sehen Wir haben richtig. 1004 Das sind also alle richtigen Antworten. Jetzt müssen wir also nur einen Vergleich zwischen den Antworten machen, die innerhalb des Arrays gehalten werden . Und wenn sie übereinstimmen, dann wissen wir, dass der Benutzer die richtige Antwort hat. Und wenn sie nicht mit ihm übereinstimmen und etwas füllen, dann wissen wir, dass sie die falsche Antwort bekommen haben. Also lasst uns das ein wenig aktualisieren. Erstellen Sie dort einige Abstände. Ich werde seltsam in das war ein Platzhalter. Und dann werde ich in einem Zeilenumbruch Eso hinzufügen Was wir tun wollen, ist dieses Äquivalent mit dem Artikel so tatsächlich indiziert zu halten . Aber wenn wir das beantworten, diesen Rasen, diesen hier, sehen wir mal, was wir hier haben. Also haben wir die Ergebnisse eins und Null bekommen. Hier haben wir 0000 und 40 Also haben wir wahrscheinlich ein paar von ihnen bekommen, richtig. Wir können es aktualisieren. Der Himmel ist blau. Das ist also wahr. Gras ist grün und Apfel ist rot. Mal sehen, was wir jetzt haben. Also, jetzt haben wir alle Antworten, richtig. Solange diese Luftmatching nach oben, wir wissen, dass wir die Antwort richtig haben, und wir wollen, wenn wir eine Variable für die Punktzahl erstellen wollen oder so etwas startet bei Null. Und jetzt müssen wir nur noch eine Bedingung machen. Also habe ich ihn gebeten, dort einen Zeilenumbruch zu machen, und ich werde hier einen Zustand machen. Wenn dies gleich ist, dann ist die Punktzahl gleich Punktzahl plus eins. Und lassen Sie uns auch einen Glitch con hinzufügen. Mit Bootstrap haben wir die Fähigkeit, Todd, in diesen Klippen Wider, wo wir einen Kreis oder eine Spanne machen können. Lassen Sie uns diese hinzufügen. Und etwas wurde aufgestellt, also Klippe oder so etwas, also und lassen Sie das jetzt leer. Und so hier drüben war ich seltsam im Wert für die Klippe, die wir hier darstellen wollen, um sicherzustellen, ob die Person die richtigen oder falschen Schlitze hat. Öffne das und füge die Klippen für Bootstrap hinzu. Also müssen wir dort und dann sonst einen Wert schaffen. Also, wenn es falsch ist, dann wird die Klippe es anstelle eines O K-Kreises sein, wir werden den Kreis entfernen, also streiche dich durch auf den Kreis, also lass uns jetzt einen Blick darauf werfen und sehen, wie das hier ist. Natürlich brauchen wir das. Wahrscheinlich noch stylen es ein bisschen besser und Stiefel fallen. Aber jetzt sehen wir mal, wie sich das ergibt. Wir sehen also, dass wir die Ergebnisse haben. Sehen wir, welche wir richtig haben? Richtig, Richtig und falsch eso Wir können sogar in Farben hinzufügen, wenn wir brauchen. Und lassen Sie uns etwas hier oben hinzufügen. Es könnte also eine bessere Idee sein, HTML oder so etwas zu halten und dann einfach leer zu lassen . Und anstatt in den inneren HTML-Code hinzuzufügen, können wir diesen Halter einfach tun. Und dann können wir hier 0.1 hinzufügen. Und das gibt uns die Möglichkeit, Sie erzielt zu tun. Punktzahl. Richtig. Und vielleicht, wenn Sie dies wie in jedem tun wollen, so aktualisieren, dass niedrigere Fall s jetzt haben wir Sie richtig bewertet. Und vielleicht wollen Sie das in ein Bad stellen. Ein Schwung. Es sieht ein bisschen besser aus. Vielleicht, ähm, schauen wir uns das an und fügen Sie etwas Styling hinzu, und ich werde das den ganzen Weg über machen. Lassen Sie uns das jetzt ausprobieren. Das war also nur ein zusätzliches Styling. Eso lasst uns Brot lesen. Falsch sagen es Wahrscheinlich drei dort. Also hast du einen erzielt. Richtig. Eso hat einen zusätzlichen Chevron da draußen versteckt. Das war also von dort. Da gehst du. So ist es, wie auf können wir diese Quiz on the fly erstellen. Es könnte sogar diese Werte präsentieren wollen. Diese Rückgabewerte auch ein wenig größer. Eso kann ich etwas tun, wo ich ein div in einer Klasse behandeln kann, also End Score auf, dann sind verdammt. Ein weiteres def hier am Ende davon, und dann nehmen Sie diese Endnote und wenden Sie etwas Styling an. Also, Klasse und hier wollen wir vielleicht die Schriftgröße machen es größer. So groß da, um und so weiter. Es gibt also einige Optionen dort. Also lasst uns diese Acht ausprobieren und schauen, dass unser Quiz funktionieren wird. Und so gehen wir hin. Wir wurden getroffen, um zu korrigieren. Wir sehen, wo wir erzielten, korrigieren, und wir wurden falsch. Und um dies noch interessanter zu machen, anstatt diese Werte zu tun, könnten wir so etwas wie Frage machen und hier könnten wir es auswählen. Antwort so Punkt im Blau, es unter Antworten und dann Rappe, dass innerhalb dieses Wertes und hoffentlich das in Ordnung ist, also versuche einfach, dass es schnell nach oben. Es gab also definitiv ein Problem mit der Art und Weise, die formatiert wurde. Also werfen Sie einen weiteren kurzen Blick auf das. Und so war das, äh, das war die Artikelnummer, die dargestellt wurde. Da s O Dies war der Wert der Antworten. Ich schaue nur nach unten und sehe Vielleicht müssen wir das als Ganzzahl parsen. Und das Problem ist eigentlich, weil ich da eine Frage habe. Also brauche ich das nicht, weil ich nach Antworten suche, damit ich diese Teile auch als Ganzzahl entfernen kann . Probieren Sie die acht aus. Und lassen Sie uns den Safe überprüfen, um zu sehen, ob es funktioniert. So erfrischen. Also jetzt haben wir, welche Farbe eine Apfelantwort ist. Und wenn es richtig oder falsch ist, welche Farbe ist grasgrün, richtig oder falsch und so weiter. Dies gibt dem Benutzer also eine tatsächliche Scorecard, um zu sehen, wie er innerhalb des Quiz 19. 20 Abschließen Project JavaScript Dynamisches Quiz von Grund auf: Also diese Lektion. Ich möchte Ihnen nur zeigen, wie wir mit dem Quellcode, den wir gerade in dieser Lektion erstellt haben, ein wenig herumspielen können und wie übertragbar das ist. So können Sie Websites wie meine Jason dot com verwenden, um Ihre eigenen Fragen zu erstellen. Oder Sie können Ihre eigenen Fragen auf Ihrem Server dynamisch erstellen und als Jason formatiert. Also, um das Quiz für die Montage funktioniert zu bekommen. Lassen Sie uns also einen Blick werfen und das alles in ein nutzbares Format auf Code-Stift übertragen. Und das ist natürlich ein großartiger Ort, um den Mantel auch zu üben. Also nehme ich nur diesen ganzen Code hier auf, und wir müssen zu Bootstrap verlinken, diesen Container-Inhalt herausnehmen. Und die Art und Weise, dass Code-Stift funktioniert, ist es tatsächlich aufteilt, dass HTML CSS und JavaScript, so es automatisch Links zu einem JavaScript-Dateien. Deshalb schließe ich nicht all das ein und die Überschrifteninformationen für den HTML ist bereits vorhanden. Das müssen wir also nicht unbedingt einschließen. Ich kann es auch entfernen. Einige von diesem kommentierten Zeug hier, aber ich werde es im Codestift-Repository aufbewahren. Also, falls Sie einen Blick darauf werfen wollen, weil wir es auch durch den Kurs referenziert haben . Also lasst uns das vorüber retten. Und schließlich brauche ich den Link zu einem externen CSS, das Bootstrap ist, um zu empfangen und zu kleiden. Und da gehen wir hin. Also jetzt haben wir mehr Bootstraping-formatiertes Format eso. Jetzt können wir sehen, welche Farbe Gras, wahr ein und so weiter. Und dann haben wir hier die Ergebnisse, also möchten wir vielleicht etwas tun, wo wir diese Ergebnisse setzen sie den Benutzern anders präsentieren. Also alles abhängig davon, wie wir wollen, wie wir sie ausgeben wollen. Also vielleicht wollen wir hier eine neue Zeile erstellen. Also, wenn wir draußen sind, durchlaufen die Antworten alle verfügbaren Antworten. Wir könnten wollen, dass Zehe einfach das richtig machen, Alec, Alec, oder ändern Sie andere Schriftart oder so etwas, um anzuzeigen, dass dies die Frage ist , also könnte ich so etwas wie ich und ich machen und vielleicht auch einen Zeilenumbruch dort machen. Also wieder, es gibt steife verschiedene Möglichkeiten, das darzustellen. Und lassen Sie es uns ausprobieren. Also, welche Farbe ist ein Apfelrot. Das ist richtig. Welche Farbe ist Gras rot Falsche Himmelblau So I Der Himmel ist blau Ich setze falsch Und so sehen wir , dass wir haben, wo wir haben die Korrekturen können zurück gehen und sehen, dass es automatisch anpassen und Updates nach Bedarf S So ist dies im Wesentlichen, wie Sie Erstellen Sie eine Anwendung von Grund auf mit JavaScript, Jason-Datei, die einen Ajax-Aufruf macht, um diese Daten zu erhalten und den dom-Inhalt zu verwenden und am Ende nutzbare Anwendung aufzubauen. Und die ganze Idee hier ist, wenn wir diese Anwendungen aufbauen, wollen wir sie so vielseitig und nutzbar wie möglich machen. Also, das ist, wo wir früher im Quiz gesehen haben, wo wir früher im Kurs eine Jace on Datei erstellt haben und ich konnte aktualisieren und wirklich einfach eine andere Jason-Datei erstellen und stattdessen einfach mit dieser verknüpfen und wir sahen, wie einfach es war, diese Quiz on the fly und in der Lage zu sein, die Ergebnisse zu punkten und zeigen, präsentieren die Ergebnisse dem Benutzer eso wieder, Ich ermutige Sie, den Quellcode für sich selbst zu überprüfen. Es wird innerhalb des Kurses versucht, es für sich selbst zur Verfügung gestellt. Probieren Sie eine andere Variation aus. Und als wir die verschiedenen Lektionen durchgingen, habe ich versucht, nur verschiedene Wege zu zeigen, Dinge zu tun. Eso Deshalb haben wir einiges von dem Zeug, das ich gebaut habe, dann haben wir auf einige davon zurückverfolgt. Also habe ich das auch eingeschlossen. Also, weil natürlich Sie natürlichvielleicht ein paar Variationen wollen. Ich habe das hier gelassen, um zu sehen, dass, wenn das Ergebnis korrekt ist, oder wenn es falsch ist, so dass Sie ein Pop-up-Fenster haben können, Sie eine ganze Reihe von Sachen jetzt nur innerhalb des Codes machen können, der hier bereitgestellt wird und auch ihre eigene Logik und Erstellen Sie Ihre eigenen Versionen dieses Codes. Eso Ich hoffe wirklich, dass Sie Spaß daran haben, es selbst auszuprobieren und fühlen sich frei, Links zu Ihren Versionen des Codes zu posten und zu sehen, was Sie passieren können. Erstellen eines JavaScript-basierten Quiz