Quiz mit Javascript erstellt - bitte um Code-Beurteilung

  • Wiederum herzlichen Dank! Den querySelector hatte ich heute morgen schon beim Wickel, muss ihn aber wohl falsch angewendet haben.


    Und was span und p angeht: Guter Tipp! Ich brauche dieses Konstrukt gar nicht mehr, ich brauche nicht mal mehr Radiobuttons, da man ja bei einem falschen Klick das Spiel verlässt. Es muss nur der Button, hinter dem sich die richtige Antwort verbirgt, eingefärbt werden, was ich mit querySelector('#divAnswers p:active') erreiche. Jetzt muss ich die Farbe vor der nächsten Spielrunde nur wieder loswerden - daran bastle ich gerade und melde mich dann wieder ...


    ---


    Kurze Zeit später: Zu früh gefreut, das mit querySelector('#divAnswers p:active') hat nur funktioniert, weil ich im Chrome die DevTools geöffnet hatte. Im Normalzustand ist es wirkungslos, auch andere Pseudoklassen funktionieren hier nicht.


    Also muss ich konkret den Button identifizieren, dem der Wert true zugewiesen wurde, und diesem Button eine andere Hintergrundfarbe geben. Die Position des Wertes true entspricht der Ziffer in der ID des Buttons. Daraus muss sich doch was machen lassen ...

  • So, für heute ist es geschafft:


    https://jsfiddle.net/m9826yvo/1/


    Sicherlich gibt es noch den einen oder anderen Verbesserungsvorschlag, aber ich bin wieder ein Stück weiter gekommen und konnte den HTML-Code deutlich entschlacken.


    Sempervivum Gut, dass Dir dieses HTML-Konstrukt für die Radiobuttons aufgefallen ist. Ich hatte mir das mal ergoogelt, weil ich für Mobilgeräte komplette Paragraphen oder Divs als Touchelemente haben wollte statt der schwer zu treffenden Radiobuttons. Aber, wie schon geschrieben, waren diese bereits obsolet.


    Als Nächstes möchte ich einen Punktezähler einbauen, mit einer Gewinnstaffelung wie bei "Wer wird Millionär": 15 Fragen und zwei Sicherheitsstufen. Vermutlich wird es auch da kleinere oder gar größere Problemchen geben ...


    basti1012 Du kannst jetzt gern Deinen Vorschlag posten, mein Kopf ist erst mal wieder frei. ^^

  • Jo.

    Großen unterschied, gibt es nicht.

    Ich habe es ohne Radiobuttons gemacht und sonst noch kleine Änderungen.

    Aber ich sagte ja , es gibt viele Wege, die zum Ziel führen.


    Den wichtigsten finde ich aber das du den HTML Code aus dem Array entfernt hast , ich finde das er da nicht nichts zu suchen hat.( zumindest nicht in diesen fall)


    Mein versuch

    https://basti1012.bplaced.net/…rdner=html-seminar&id=265

  • Ich hab' mir Deinen Code angeschaut. Und ich würde lügen, wenn ich schriebe, ich hätte ihn sofort verstanden. Es ist halt ein anderer Stil, und mir fehlt noch die Erfahrung, schnell auch in fremden Code einzusteigen. Aber ich weiß ja, worum es geht ...


    Ich lerne Javascript in einem Videokurs, bei dem ich seit Mitte August noch nicht mal die Hälfte geschafft habe. Und natürlich übernehme ich den Stil des Dozenten. Neulich hab' ich mal geschaut, was am Ende des Kurses auf mich zukommt, und bin blass geworden: Ich habe so gut wie nichts verstanden. Da liegt noch ein ganzes Stück des Weges vor mir.


    Was ich an Deinem Entwurf witzig finde, ist die Funktion am Ende. Und das bringt mich auf Ideen: Man könnte ja auch die Zeit zur Beantwortung einer einzelnen Frage begrenzen. Und wenn ich noch mehr gelernt habe, könnte ich eine Anmeldefunktion schreiben, mit der man seine persönlichen Highscores speichern und gegen andere Spieler antreten könnte. Ach ja, Möglichkeiten gibt es viele ... leider viel mehr, als ich Zeit zur Verfügung habe.


    Übrigens: Den hübschen Transition-Effekt auf den Antwortbuttons bei 469 Pixeln bekommen nur Leute mit, die mit den DevTools die Responsivität einer Seite testen. Aber wer macht das schon ... ;)


    Heute werde ich mal meinen Videokurs fortsetzen, statt an meinem Spiel weiterzubasteln. Im Kurs geht es jetzt um eine To-do-Liste, also auch um das Speichern von Werten aus einem Text-Input. Das wird spannend ...


    Euch noch einmal ganz herzlichen Dank für Eure Hilfe! Und ich verspreche, ich werde Euch wieder nerven. :)

  • Heute werde ich mal meinen Videokurs fortsetzen, statt an meinem Spiel weiterzubasteln. Im Kurs geht es jetzt um eine To-do-Liste, also auch um das Speichern von Werten aus einem Text-Input. Das wird spannend ...

    Das könnte wahrscheinlich mit localStorage gespeichert werden.

    Auch ein nettes Thema und auch gar nicht so schwer.

    Das solltest du schon hinbekommen.

    Falls nicht , bekommt du ja hier hilfe.


    Mit den verschiedenen Programmier Wegen ist es nicht immer einfach.

    Du siehst das ja bei sempervivum und mir , das in einigen Fälle andere Wege gegangen werden.

    Warum ist das so ?

    Jede hat es anders gelernt und kommt mit seinen eigenen Wegen besser klar.


    Das du bei meinen Code nicht sofort durchblickst ist kein problem , das muß man auch nicht sofort können.

    Das macht dann irgendwann die erfahrung.

    Wenn sempervivum darein schauen würde , hätte er nach kurze Zeit den durchblick. Das liegt halt an der erfahrung und auch etwas daran , wie gut man den schreiber kennt.

    Er kennt meine Wege auch und deshalb blickt er da noch schneller durch.


    Du mußt und wirst irgendwann deinen eigenen Weg finden.

    Schau dir die verschiedene möglichkeiten an , teste sie und dann läuft das von alleine.

  • Was ich an Deinem Entwurf witzig finde, ist die Funktion am Ende. Und das bringt mich auf Ideen: Man könnte ja auch die Zeit zur Beantwortung einer einzelnen Frage begrenzen. Und wenn ich noch mehr gelernt habe, könnte ich eine Anmeldefunktion schreiben, mit der man seine persönlichen Highscores speichern und gegen andere Spieler antreten könnte. Ach ja, Möglichkeiten gibt es viele ... leider viel mehr, als ich Zeit zur Verfügung habe.

    Sowas hatte ich letztens im anderen Forum mit einen anderen Spiel

    https://basti1012.bplaced.net/andere/memoy/index.php

    Du mußt aber bedenken das dafür auch Php gebraucht wird, oder andere Serverseitigen Scripte.


    Man könnte deine Idee da einfach erweitern.

    Anmeldefunktion erstellen .

    Eigene Statistiken usw...

    Ich bin gespannt wie dein Weg weiter geht.

    Selten einer hier der lernen will und es auch konsequent weiter macht

  • Ich hab' mich in den letzten Jahren immer mal wieder an JavaScript versucht, aber hatte nie eine wirklich gute Lerngrundlage. Jetzt, seit einem reichlichen Monat, habe ich diesen Videokurs und merke, wie er zu wirken beginnt. Anfang August wusste ich noch nicht mal, wie man die Klammern in JavaScript setzt, und hätte jemand gesagt, ich solle eine Funktion erstellen, hätte ich bloß dumm geguckt. Und wenn ich mir mal einen JavaScript-Schnipsel ergoogelt hatte, um ihn in eine eigene Website einzubauen, konnte ich ihn nicht mal richtig interpretieren. Damit soll es nun vorbei sein.


    Nachteil des Videokurses: Er ist teils sehr trocken, und wenn man etwas nicht versteht, kann man niemanden fragen. Deswegen bin ich echt froh, dass Ihr mir so prima helft. Denn ohne Hilfe bleibt man schnell hängen – gerade wenn man, wie ich, kein Naturtalent in Programmierung ist – und verliert den Spaß. Aber ohne den geht es nicht; Freude am Lernen ist das Wichtigste, denke ich.


    Ich werde meinen Weg ab Januar noch konsequenter gehen, denn dann sitze ich für ein Jahr wieder auf der Schulbank und tauche ein in die Welt von Linux, Servern, Datenbanken und – worauf ich mich besonders freue – PHP. Auch hier habe ich nur rudimentäre Kenntnisse, weiß aber, was damit alles machbar ist. Und mit anderen gemeinsam zu lernen, macht natürlich noch mehr Spaß als allein vorm Video ... :)

  • Läuft doch gut.

    Auf den ersten Blick kann ich auch keinen unnötigen Code Kram sehen usw.

    Hast du das zum Üben gebaut?

    Dann könntest du jetzt versuchen das mit PHP und Ajax zu erstellen und ggf noch eine Bestenliste erstellen.

    Dann holst du die Fragen aus der DB.

    Dann kann auch keine die Antworten vorher sehen , nicht wie jetzt in JS Code.


    In diesen Script und auch in PHP Code könnte man noch eine Zufall-Ausgabe der Fragen und Antwort Positionen machen.


    Ansonsten finde ich es gut was du bisher gemacht hast:thumbup:

  • Danke für Dein Lob! :)


    Ja, das war mein erstes JS-Übungsprojekt, bei dem Ihr mir ja so prima geholfen habt. Die Countdown-Funktion habe ich mir ergoogelt und angepasst, und mit meinen jetzigen Kenntnissen war das gar nicht schwer.


    PHP, Ajax, Datenbanken ... das ist alles nahe Zukunftsmusik, siehe #28. Man kann noch so viel machen ...


    Gerade habe ich einen Bug in meinem Code entdeckt: Wenn #countPlayTime einmal gelb geworden ist (Zeit unter 10 Sekunden), dann bleibt es gelb, was natürlich nicht so sein sollte.


    Behoben ist das schnell, aber ich ärgere mich, dass ich es nur zufällig mitbekommen habe.

  • Wie basti1012 in #30 schreibt, wäre es schön, wenn man die Antworten nicht im Quelltext sehen könnte. Natürlich wissen die wenigsten Menschen, dass es überhaupt einen Quelltext gibt, aber wenn es bei meinem Spiel nicht um Punkte, sondern um Euro gehen würde, wäre meine jetzige Methode absolut ungeeignet. ;)


    Was wäre denn der erste Schritt, um die Fragen und Antworten so auszulagern, dass man sie nicht im Browser einsehen kann? Ich vermute, mit Javascript allein ist das nicht machbar, richtig?

  • Der erste Schritt wäre, die Fragen und Antworten auf dem Server abzulegen und das ginge durchaus auch ohne PHP und nur mit Javascript und Ajax bzw. fetch. Du müsstest dann, wenn Du auf PHP verzichten willst, die Fragen und Antworten in unterschiedlichen Dateien ablegen:

    Erste Datei: Erste Frage und die Antworten dazu.

    Zweite Datei: Lösung für die erste Frage sowie zweite Frage und Antworten dazu.

    Dritte Datei: Lösung für die zweite Frage und ...

    Wenn es jetzt jemand darauf anlegt, zu schummeln, könnte er immer noch die URL der nächsten Datei ablesen und die Datei mit der Lösung laden aber Du wärst immerhin einen Schritt weiter und es ginge nicht direkt durch Auslesen des Quelltextes.

  • Ich habe mich entschlossen, mich jetzt von Grund auf mit PHP und MySQL zu beschäftigen, das scheint mir am sinnvollsten. Natürlich erwarte ich dabei keine schnellen Ergebnisse für mein Quiz, sondern erst einmal ein generelles Verständnis. Über Datenbanken weiß ich gar nichts, PHP kenne ich rudimentär. Aber ich nehme an, dass sich das mithilfe von Online-Tutorials ändern lässt.


    Ziel ist es, zunächst irgendeine Datenbank zu erstellen, mit Inhalten zu füllen und diese Inhalte auf einer Website anzuzeigen, das wird schon spannend genug, ggf. werde ich an anderer Stelle dieses Forums Fragen dazu stellen. Ist das geschafft, kann ich mir Gedanken machen, wie ich das Ganze für mein Quiz nutze. Und es wird auch nichts schaden, wenn ich nächstes Jahr in der Schulung bereits auf vorhandenes Wissen zurückgreifen kann. :)

  • Nun ist es mir in der Tat gelungen, mit MAMP (unter Windows) eine MySQL-Datenbank zu erstellen und diese mit einem PHP-Script anzusprechen. Ergebnis ist eine HTML-Tabelle. Das ist prima, aber die Tabelle nutzt mir natürlich nichts für mein Quiz.


    1. Frage: Ist die Struktur der Tabelle überhaupt brauchbar? Ich habe sie als Anhang eingefügt. * Irgendwie habe ich das Gefühl, sie könnte zu primitiv sein. Aber ... siehe 2.


    2. Ich stochere völlig im Dunkeln, wie ich den Inhalt der Datenbank und mein Javascript zusammenbringe. Es gelingt mir nicht, irgendetwas zu ergoogeln, das mich weiterbringt, da ich nicht mal weiß, wonach ich googeln sollte. Mir fehlt jede Vorstellung dessen, was passieren muss, nachdem PHP die Daten aus der Datenbank bekommen hat. Für Eure Hilfe wäre ich wieder einmal sehr dankbar.


    * Ich konnte die Datei nicht mit der Endung sql hochladen und habe ihr deswegen die Endung txt gegeben.

  • Zitat

    Ich stochere völlig im Dunkeln, wie ich den Inhalt der Datenbank und mein Javascript zusammenbringe. Es gelingt mir nicht, irgendetwas zu ergoogeln, das mich weiterbringt, da ich nicht mal weiß, wonach ich googeln sollte. Mir fehlt jede Vorstellung dessen, was passieren muss, nachdem PHP die Daten aus der Datenbank bekommen hat.

    Der Begriff, der dir fehlt, lautet "ajax". Das ist ein Verfahren um Informationen, die auf dem Server vorhanden sind, ohne Neuladen der Seite, in den Client bzw. in den Browser zu bekommen:

    https://developer.mozilla.org/…uide/AJAX/Getting_Started

    Statt des XMLHttpRequest, der hier angegeben wird, bevorzuge ich jedoch das modernere und einfachere fetch:

    https://developer.mozilla.org/…API/Fetch_API/Using_Fetch

  • AJAX hatte basti1012 hier schon erwähnt, stimmt. Wenn ich es richtig verstehe, passiert Folgendes:

    1. Mit einer PHP-Datei spreche ich die Datenbank an und hole die Daten.
    2. In der PHP-Datei baue ich ein multidimensionales Array auf (wie ich es ursprünglich hatte).
    3. Mit AJAX spreche ich das Array in der PHP-Datei an und hole die Daten für mein Javascript.

    Ist das so richtig ausgedrückt?

  • Ja, im wesentlichen richtig, nur dass die Reihenfolge etwas anders ist: Auslöser der ganzen Sache ist das Javascript. Das schickt eine Anfrage an den Server, die PHP-Datei auszuführen, diese liest die Datenbank aus und liefert die Daten zurück an den Client bzw. Javascript.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!