Bubble.io Tutorial - Komplettes Quiz in Bubble erstellen

In diesem Video erstellen wir gemeinsam ein Quiz in Bubble.

Video-Transkript:

Hallo, mein Name ist Chris Strobl, ich bin der Gründer von Nocode Germany und heute erstellen wir gemeinsam ein Quiz im Bubble. Wir gehen direkt mal in die Datenbank. Einige Sachen habe ich bereits vorbereitet. Der erste Custom Data type ist eine Frage. Diese Frage wiederum hat ein Feld, nämlich ein Textfeld und das heißt Frage. Dann haben wir die Antwort. Die Antwort hat zunächst mal eine Frage vom Typ Frage. Ihr könnt das. Wenn ihr auf Create Any field geht, könnte ich hier Frage auswählen und ihr nennt das Frage. Dann habt ihr eine Antwort, dass ein Textfeld und ein Boolean Ja nein mit richtig. Danach haben wir das Quiz. Das Quiz ist eine Liste an Fragen und hat den Namen, nämlich wiederum ein Textfeld. So heißt das Quickbook.

Und schließlich haben wir den Score. Das ist quasi eine Number Score und wir haben ein Quiz, wo wir wiederum den Datentyp Quiz nehmen. Wir gehen jetzt in die erste Seite und die heißt Frage erstellen. Hier habe ich bereits den Style fertig. Wir haben eine Gruppe mit verschiedenen Input Field. Das heißt einmal den Text, nämlich eine Frage, dann die richtige Antwort und die anderen Antwortmöglichkeiten.

Und ihr seht, alles wiederum ist ein Input Field. Wir gehen jetzt auf den Button Frage, erstellen Start/edit workflow und beginnen mit der Funktionalität. Wir stellen Data Create a new thing nämlich eine Frage und werden hier Frage und Input forms magis value. Anschließend erstellen wir die richtige Antwort Create a new thing und wir machen eine Antwort. Diese Antwort hat die Frage Result of Stepp 1 Frage hat die Antwort. Antwort. Richtige Antwort Value und richtig ist ja Anschließend erstellen wir wiederum Create a new thing. Antwort Wir nehmen jetzt die Frage Result of Stepp 1 Antwort ist Input, Antwort 2. Value und wie hier im Design gesehen ist das nicht die richtige Antwort. Und deswegen machen wir hier richtig. Nein, wir wiederholen nur den Stepp. Ich mache das gerne über Copy Paste, da muss man nur genau sein. Inputs Antwort 3 Value. Und noch mal. Input Antwort. Ihr verlief und schließlich Reset relevant inputs.

Wir gehen jetzt einmal auf Preview und testen diesen Workflow.

Wir nehmen die Frage, wer wohl Torschützenkönig in der Bundesliga-Saison 2020 21? Die richtige Antwort? Robert Lewandowski. Und wir machen noch einige falsche Antworten. Und gehen jetzt auch Frage erstellen. Wenn wir jetzt zurückgehen in die Datenbank App data Fragen, dann sehen wir, wie wir jetzt eine neue Frage hier erstellt haben. Anschließend gehen wir auf die Seite Quickbook erstellen. Hier habe ich bereits ebenso etwas vorbereitet, nämlich einmal ein Input Field mit dem Namen Quickbook Namen, wo er den Namen eingeben könnt. Und hier nun haben wir eine Repeating Group, die quasi eine Liste an Fragen ist.

Das heißt ich, wenn ich ein Quiz erstelle, entscheide mich. Welche Fragen möchte ich in diesem Quiz haben? Deswegen machen wir hier Type of content. Frage Wir machen durch Search vor Fragen und machen sort bei Kreidet Day Now und in der jeweils einzelnen Zelle fügen wir nun einen Text hinzu. Wir machen hier Current cell's Frage Frage. Und fügen daneben eine Checkbox ein. Die findet ihr unter input forms Checkbox. Wir löschen das Label und nennen das ganze Checkbox Frage Der Default ist, dass die Checkbox nicht ausgewählt ist.

Jetzt gehen wir aber in den Workflow und sagen. Wenn ein Element input A's value ist changed. Wir nehmen hier Checkbox Frage und sagen diese Workflows nur valide, wenn die Checkbox bereits ausgebildet ist Checkbox ist checkt und wir machen hier State of Element. Wir nehmen die Repeating Group. Wir stellen einen neuen State. Wir nennen diesen ausgewählte Fragen. Das ist eine Frage vom Typekit und eine Liste Anfragen. Dann machten wir Repeating Group. Fragen. Ausgewählte Fragen. Plus. Item Current cell's Frage und nun kopieren wir einmal diesen Workflow, fügen hinzu und sagen Wenn diese Checkbox nicht gecheckt ist auf der einzelnen Frage, dann machen wir statt plus ein Item minus item. Sei es dadurch, wenn wir hier nun reingehen, können wir eine Frage auswählen, dann wird diese hinzugefügt dem Staat. Und wenn wir sie wieder nicht auswählen, wird sie reduziert von dem Staat. Diesen Staat brauchen wir jetzt, wenn wir auf Start/edit workflow beim Button Quiz erstellen gehen und sagen.

Wir stellen jetzt ein neues Ding, nämlich ein Quickbook. Und wir sagen jetzt fragen, wenn ihm nicht echt, sondern echt ist und wir machen Repeating Group Fragen, ausgewählte Fragen, anschließend den Namen des Wissens. Ihr hier seht, nehmen wir hier das Input Field und sagen Name Input Field Quickbook namens Balu. Und anschließend gehen wir zu einer Seite, die wir bereits erstellt haben, nämlich Go to page Quickbook mit Data type Send Recall Stepp 1 Quickbook. Wir probieren jetzt einmal genau diesen Workflow aus. Wir wählen genau diese vier Fragen aus, können auch eine Frage wieder selektieren und klicken auf Quickbook erstellen. Und jetzt gehen wir zurück einmal in die Datenbank und schauen uns an unter App data Alk, Bitches. Und wir sehen hier, wir haben ein neues Quiz und dieses Quiz wiederum hat die verschiedenen. Fragen hinzugefügt.

Und wenn wir diese unter Fragen suchen, dann bekommen wir auch genau diese Fragen. Als nächstes gehen wir in die Seite Quickbook Übersicht, die ich ebenfalls bereits erstellt habe. Hier haben wir eine Repeating Group Quickbook und dort suchen wir nun Do Search for Quickbook. Nach dem Namen Die Sendung No sortieren wir das Ganze. Wie es sieht, haben wir eine Full List, das heißt, das Ganze erweitert sich dann und wir ändern nur noch die dynamischen Felder. Das heißt, der Name ist Current cell's Quickbook Name. Die Anzahl an Fragen ist current cell's quickbook Fragen und wir nutzen Count.

Und anschließend gehen wir auf Start/edit workflow bei Quickbook starten und nehmen Go to page Current cell's Quickbook Den Score fügen wir später gleich ein, wenn wir das Score Modell final haben. Wenn wir ein neues Quiz erstellen, dann gehen wir auf Start/edit workflow Go to Page Quiz erstellen, die wir vorhin schon hatten und auch bei Neu Frage erstellen gehen wir auf Start/edit workflow go to page Quiz Frage erstellen. Wir gehen jetzt einmal ins Preview und schauen uns an, ob auch hier die Workflows passen. Ihr seht, wir haben hier Eurokrise Anzahl Fragen Quickbook Staaten Neues Quiz erstellen, neue Frage erstellen Wenn wir auf neues Quiz erstellen aus der Übersicht, dann kommen wir hier in unser Quiz. Auch hier sind die Buttons quasi wieder als Navigation.

Wir machen neue Frage erstellen. Ich komme wieder zurück und wenn wir hier quickbook Staaten machen, kommen wir eben auf diese quickbook Seite, die wir als nächstes nun final fertig machen. Das heißt, wir gehen hier auf. Quickbook. Und als erstes seht ihr, dass der Page Titel Current page Quickbook Name ist und der Type of content ist ein Quickbook, weil wir hier Current page Quickbook Name haben und Type of content ein Quickbook, können wir auch den Text 1 als Titel nehmen wir in Search Dynamic data und machen Current page. Quickbook Name.

Wenn wir jetzt einmal in die Seite reingehen, was bereits vorbereitet ist, dann haben wir hier das große Quiz und darin haben wir die große Frage. Und diese wiederum besteht aus einem Text, nämlich der Frage dann eine Repeating Group mit Buttons. Und dies beinhaltet dann auch die Logik, wie wir das Ganze entwickeln und wenn wir hier nun in die Frage gehen.

Dann sehen wir, dass wir einen Custom State haben, der ein Kuhnt ist und das ist ein Number. Also welche Frage haben wir von unserem Quickbook? Und diesen Count setzen wir, wenn die Seite geladen wird, auf eins. Das heißt, count ist eins set state of group, frage count auf eins. Und diesen Counter brauchen wir jetzt wiederum, wenn wir in die Frage reingehen und sehen In der Gruppe haben wir eine Frage und die ist Peering Groups. Quizfrage Item und wir nehmen den Count dieser Frage. Das heißt, wenn wir die Frage 5 haben, haben wir fünf. Wenn wir die Frage 3 haben, haben wir drei. Und als nächstes nehmen wir den Titel der Frage Input Field Dynamic data Peering groups Frage, Frage. Anschließend haben wir nun eine Repeating Group Antwort in dieser Gruppe Frage.

Das heißt, wir suchen nach der Antwort, aber mit der Bedingung, dass sie parent groups Frage ist. Das heißt, wir zeigen nicht alle Antworten an, sondern nur Antworten, die die gleiche Frage haben. Weil das Ganze ein Christ sein soll.

Nehmen wir hier Random Setting, das heißt, wir sortieren das Ganze zufällig. Und schließlich in der Repeating Group Antwort haben wir den Button und dort zeigen wir Current cell's Antwort Antwort an. Das heißt, so werden die unterschiedlichen Antworten zufällig der Frage zugewiesen. Das Ganze ist ein Button, das heißt, darauf kann dann der Nutzer klicken. Wir haben noch zwei weitere Elemente, um dem User anzuzeigen, ob es richtig oder falsch ist. Einmal das Alert richtige Antwort und einmal das Alert. Falsche Antwort.

Und wir gehen jetzt in den Workflow, um hier auch die Logik darzustellen. Start/edit workflow Und wir sehen jetzt die verschiedenen Schritte. Erstens Der alert richtige Antwort wird nur angezeigt, wenn die current cell's Antwort Yes ist. Umgekehrt Wenn Current cell's Antwort no ist, dann wird die falsche Antwort gezeigt. Und weiterhin. Ist der Stepp 4 relevant? Das heißt, wenn. Der Button geklickt wurde, dann wird die große Frage dort Der Custom State Count wird Group Account +1, das heißt, wir gehen dann zur nächsten Frage und anschließend werden daher auch in diesem Feld die nächste Frage dargestellt.

Die anderen beiden Steps Stepp 3 und Stepp 5 sind später gleich relevant, wenn wir die Logik des Scores festlegen. Anschließend gehen wir zurück ins Design Tap und wir haben hier noch eine Gruppe die Gruppe Auswertung. Die grobe Auswertung ist nicht visible homepage load. Hat aber ein Conditional, wenn der Kaun Group Account größer ist als Peer Groups Quizfragen count, dann ist das Element visible. Das heißt zum Beispiel Wir haben vier Fragen und sobald der Kaun durch die letzte Antwort fünf ist, dann ist genau diese Grup Auswertung visible. Eine Alternative wäre, ein weiteres Feld abgeschlossen, nicht abgeschlossen hinzuzufügen.

Wir gehen auf den Button neustarten Start/edit workflow und wir Refresh an die Seite. Das heißt, der Staat wird dann auch resettet.

Schließlich wollen wir noch den Score ermitteln. Dafür gehen wir auf die Seite und erstellen einen neuen Bubble.io, nämlich Score. Und das ist eine Number. Wir gehen in den Workflow und wir nehmen den Button von vorhin und haben nun die Bedingung Sets State Score und machen Quickbook Score und fügen den Quickbook Score +1 aber nur hinzu, wenn Current cell's Antwort richtig ist Yes. Und schließlich erstellen wir einen neuen Score. Wie wir gesehen haben im Datenbank Modell ist ein Score ein Quickbook und eine Number.

Das heißt, wir gehen in den Workflow und sagen, wenn Current page Quizfragen count +1 ist groups images count. Das heißt, wenn wir quasi alle Fragen einmal haben, dann nehmen wir das Current Quickbook und sagen der Quickbook Score geteilt durch die Anzahl der Fragen. Das heißt, wenn ich alle Fragen richtig habe, dann habe ich eins und ansonsten bin ich unter eins.

Und wenn wir jetzt in das Designated gehen und in unsere Grube. Dann haben wir hier den Score und fügen folgendes hinzu. Wir nehmen die Quickbook Score. Current page Quizfragen kauend. Und Schreiben richtig beantwortet. Das heißt, wir haben so und so viel Fragen von allen Fragen richtig beantwortet.

Und schließlich gehen wir noch einmal in die quickbook Übersicht und sagen bei Text 3 Wir haben das Conditional wenn es keine Scores gibt, dann. Schreiben wir kein Score und wenn es ein Score gibt, dann machen wir. Do Search for Score. Each item score. Zum. Um mit der Bedingung Quickbook ist gleich current cell's quickbook. Geteilt durch. Do Search for Scores. Mit der Bedingung Quickbook ist gleich current cell's quickbook count. Und wir formatieren das Ganze. Als Prozentsatz mit null Dezimalstellen.

Wir gehen jetzt einmal in den Test und schauen uns das Ganze noch einmal an.. Wir haben die Übersicht kein Score quis starten. Wir haben hier nun die Frage falsche Antwort. Richtige Antwort. Falsche Antwort. Falsche Antwort. Das heißt, der Score ist eins von vier richtig beantwortet.

Und wir sehen nun in der Übersicht. Dass wir 25 prozent im Score haben, wenn wir noch einmal neu starten. Sehen wir noch mal. Wenn wir jetzt drei von vier richtig. Und wenn wir noch einmal in die Übersicht gehen, sehen wir, wie wir jetzt einen anderen Score haben. In diesem Video habt ihr gesehen, wie man ein gesamtes Quickbook mit Logik im Bubble erstellen kann.

Wenn euch dieses Video gefallen habt, klickt gerne auf den Like-Button und Subscribed unseren Channel bei Fragen. Schreibt uns in die Kommentare. Ich wünsche euch weiterhin viel Erfolg und auf bald.