Quiz mit Javascript erstellt - bitte um Code-Beurteilung

  • Mit einem "was wäre wenn" kann man natürlich alles und jedes begründen. Ich denke, Failix hat zunächst Mal genug damit zu tun, sein Quiz mit den vier Antworten pro Frage mit der Datenbank zu verbinden. Nicht nur in der Softwareentwicklung ist es ein bewährtes Prinzip, Schritt-für-Schritt vorzugehen und dabei vom einfachen zum komplizierten.

  • Ich sehe da für die Variante mit zwei Tabellen keinen nennenswert höheren Aufwand als für die Variante mit einer Tabelle - der Aufwand das defekte Datenbankdesign mit der einen Tabelle später zu korrigieren ist auf jeden Fall deutlich höher.

  • Zitat

    das defekte Datenbankdesign mit der einen Tabelle

    Diese Wortwahl ist vollkommen verfehlt: Normalisieren ist ein Optimierungsvorgang und ein nicht normalisiertes Design ist keineswegs "defekt" sondern nur nicht optimal. Außerdem trifft das auf die Struktur von Failix alles gar nicht zu, weil seine Struktur frei von Redundanz ist und keiner Normalisierung bedarf. Auch das Beispiel bei Wikipedia mit CDs und Musiktiteln ist auf sein Layout gar nicht anwendbar.

  • Ich denke, Failix hat zunächst Mal genug damit zu tun, sein Quiz mit den vier Antworten pro Frage mit der Datenbank zu verbinden.


    Allerdings, und nicht zu knapp. Natürlich möchte ich in der Folge auch eine "vernünftige" Datenbank erstellen, aber im Augenblick muss ich noch ganz andere Knoten lösen.


    Also, ich weiß nun, wie man a) einen JSON-String aus den DB-Daten mittels PHP erzeugt und wie man b) gezielt einzelne Werte aus der DB mit PHP abfragt.


    Was ich bisher nicht wirklich verstanden habe: Wie kriege ich diese Daten in ein Javascript, um daraus wieder eine Interaktion zu erstellen? Ich weiß, wie gesagt, wie man mit PHP z. B. auf die Fragen und die Antworten zugreift, ohne die Lösung bereits irgendwo im Quellcode abgelegt zu haben, aber dann?


    Mein erster Versuch war der hier: http://music-quiz.bplaced.net/a01.html – Das ist völlige Grütze, denn es wird das komplette Dokument a01.php in den Quellcode der HTML-Seite geladen.


    Hier kann ich nur wieder um Eure Hilfe bitten, danke!


    (Falls jemand nebenbei noch sagen kann, warum meine Umlaute falsch kodiert sind, wäre ich auch dankbar.)

  • Falls jemand nebenbei noch sagen kann, warum meine Umlaute falsch kodiert sind, wäre ich auch dankbar.

    Das ist bestimmt das alt bekannte UTF-8 Problem. Datenbanktabellen, Datenbank-Verbindung und sämtliche Dateien müssen im UTF-8-Format sein.

  • Zitat

    Was ich bisher nicht wirklich verstanden habe: Wie kriege ich diese Daten in ein Javascript, um daraus wieder eine Interaktion zu erstellen?

    Das geht mit Ajax, damit kannst Du die Daten eines PHP-Skriptes holen ohne die Seite neu zu laden. Es gibt dabei mehrere Varianten, ich empfehle die fetch-API:

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

    Weil das ein wenig umfangreich ist und Du vieles, was dort diskutiert wird, zunächst nicht brauchst, hier ein einfaches Beispiel aus der Schublade:

  • Sempervivum Vielen Dank, aber ich komme absolut nicht klar, Ich habe Deinen Code kopiert, den Namen meiner PHP-Datei eingetragen und versucht, einen Parameter anzupassen. Dabei kommt nichts Brauchbares heraus, vermutlich habe ich das alles nicht wirklich verstanden:


    http://music-quiz.bplaced.net/a02.html


    Hier der Code der referenzierten PHP-Datei. Ich denke nicht, dass sie für o. g. Verfahren überhaupt verwendbar ist.



    m.scatello Vielen Dank für den Tipp! Es steht alles auf UTF-8 (Verbindung, Datenbank, Tabelle, Dokumente). Die Umlaute funktionieren online trotzdem nicht. Auf meinem lokalen Server gibt es das Problem nicht.

  • Sehr hilfreich sind immer die Entwicklerwerkzeuge, als erstes ein Blick in die Console:

    Zitat

    Unexpected token < in JSON at position 0

    Das bedeutet, dass die Antwort vom Server kein valides JSON enthält.

    Als nächstes ein Blick in das Netzwerk-Tab, dort kann man sich die Antwort vom Server ansehen wenn man auf die Zeile mit dem Skriptnamen klickt:

    D. h. er hat die ID nicht gefunden.

    Der PHP-Code liefert dann des Rätsels Lösung: Die ID wird aus den GET-Parametern ausgelesen, gesendet mit fetch wird jedoch ein POST-Parameter.

    Wenn Du das PHP auf POST änderst, dürften wir einen Schritt weiter sein.

  • Noch etwas: Die Parameter übergibst Du ja so:

    Code
    1. const params = new FormData();
    2. params.append('questions', '1');

    Unter dem Namen "questions" findest Du dann den betr. POST-Parameter, d. h. Du müsstest ihn im PHP so auslesen:

    Code
    1. $questions =$_POST['questions'];

    Wobei man als Name möglicher Weise besser "id" verwendet.

  • Danke Dir, aber ich komme echt nicht mehr klar. Habe GET auf POST geändert:


    Code
    1. if (isset($_POST['id'])) {
    2. $id = $_POST['id'];
    3. } else {
    4. die("Bitte eine ?id übergeben");
    5. }


    Es ändert sich nichts. Und den Hinweis in #69 kapiere ich überhaupt nicht.


    Ach ja, heute mache ich den Rechner mit echtem Frust aus. HTML, CSS und auch ein bisschen JavaScript konnte ich ja noch autodidaktisch lernen, aber jetzt gerade fühle ich mich wie in Blinder, der ziellos mit seinem Stock die Gegend abtastet ...

  • Um das mit #69 konkret zu machen: Da Du jetzt den POST-Parameter 'id' ausliest, musst Du ihn mit dem selben Namen an den Server schicken:

    Code
    1. const params = new FormData();
    2. params.append('id', '1');

    Das Ganze ist ein wenig undurchsichtig, weil man von der Serverantwort zunächst nichts zu sehen bekommt. Da ist jedoch das Network-Tab Gold wert, weil man sich dort sofort die Antwort ansehen kann, egal was im Browser alles fehl schlägt.

  • Ok, vielen Dank, ich bin ein Stück weiter. In den DevTools (Chrome/Windows) unter "Network" kann ich meine Frage 1 sehen.


    Hier der aktuelle Link: http://music-quiz.bplaced.net/o01.html


    Die Konsole meldet allerdings "Uncaught (in promise) SyntaxError: Unexpected token F in JSON at position 2". Und dieses "F" ist das "F" des Wortes "Frage" in meinem PHP-Code. Dieser sieht nun wie folgt aus:



    Die PHP-Datei enthält nur dieses Stück Code und keinerlei HTML-Elemente - ist das richtig? Und ohne es begründen zu können, habe ich das Gefühl, dass der PHP-Code für mein Vorhaben nicht korrekt ist. Ich hatte ihn mir ergoogelt, um überhaupt erst einmal etwas aus der DB zu bekommen, aber das scheint nicht das Richtige zu sein. Hier müsste ich wieder Eure Hilfe in Anspruch nehmen, vielen Dank!


    ---


    Nachtrag: Bis gestern war meine PHP-Datei noch ein komplettes HTML-Dokument mit dem PHP-Script im Body. Das erste unerwartete Zeichen, das von der Konsole gemeldet wurde, war ein "<", also vermutlich die öffnende Klammer von <!DOCTYPE html> – deswegen habe ich heute den gesamten HTML-Code entfernt, was hoffentlich nicht falsch war.

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von Failix ()

  • Zitat

    In den DevTools (Chrome/Windows) unter "Network" kann ich meine Frage 1 sehen.

    Das ist schon Mal sehr gut.

    Zitat

    Die Konsole meldet allerdings "Uncaught (in promise) SyntaxError: Unexpected token F in JSON at position 2". Und dieses "F" ist das "F" des Wortes "Frage" in meinem PHP-Code.

    Das liegt daran, dass das Skript JSON erwartet. Diese Zeile:

    return res.json();

    dekodiert den Text vom Server als JSON. Deine Ausgabe ist jedoch kein JSON, daher der Fehler.


    Jetzt gibt es eine grundsätzliche Entscheidung zwischen zwei Wegen, die Du einschlagen kannst:

    1. Das PHP-Skript das HTML generieren lassen, das der Browser direkt anzeigen kann. So ist es jetzt.
    2. Das PHP-Skript ein Array mit den Daten generieren lassen und dieses im JSON-Format an den Client bzw. den Browser übertragen. Das sieht auf den ersten Blick komplizierter aus, könnte dir aber unterm Strich Arbeit ersparen, weil dein früheres Skript die Daten auch aus einem Array gezogen hat und daraus das HTML generiert. Und möglicher Weise könntest Du diesen Code teilweise wieder verwenden.
  • PS: Ich habe einen kurzen Blick auf dein früheres Skript mit dem Quiz geworfen und dieses z. B. könntest Du gut wieder verwenden:

    Code
    1. function buildQuestions() {
    2. document.getElementById('nrQuestion').innerHTML = i + 1;
    3. document.getElementById('question').innerHTML = questions[i].question;
    4. for (let j = 0; j < questions[i].answers.length; j++) {
    5. document.getElementById('answer' + (j + 1)).innerHTML = questions[i].answers[j];
    6. }
    7. answerRight.style.display = 'none';
    8. end.style.display = 'none';
    9. }
  • Ich habe es doch tatsächlich hinbekommen, allerdings nur lokal. Ich erzeuge mit PHP einen JSON-String, das JavaScript in der HTML-Datei liest ihn aus. Hurra! 8)


    Warum dasselbe online nicht funktioniert, habe ich noch nicht herausbekommen. Die PHP-Datei (sie unterscheidet sich nur durch die Zugangsdaten von der lokalen Datei) bleibt leer, es gibt keinerlei Fehlermeldung: http://music-quiz.bplaced.net/o02.php


    In dieser Datei wird die Verbindung zur DB mit mysqli hergestellt und nicht, wie Sempervivum es empfohlen hat, mit PDO. Liegt daran, dass ich ein Tutorial aus dem Netz verwendet habe, um den JSON-String zu erzeugen und ihn noch nicht umbauen kann. Können die Online-Probleme damit etwas zu tun haben? Hier der Code:



    Wie gesagt, lokal unter MAMP funktioniert der Code.


    Sempervivum Aus o. g. Text ist ersichtlich, dass ich mich für Variante 2 entschieden habe. So langsam und mühevoll nähere ich mich einem ersten Teilziel. Und es ist an der Zeit, Dir wieder einmal zu sagen, wie sehr ich Deine Unterstützung zu schätzen weiß. Oder, profan ausgedrückt: Ohne Dich wäre ich aufgeschmissen. Danke, danke, danke! :)


    m.scatello Danke für den Link! Wenn ich mal wieder Daten zu sehen bekomme, kann ich mich um die Codierung kümmern, was natürlich ein Sekundärproblem ist.

  • Die Tabelle in der Datenbank ist online auch gefüllt, nicht wahr?


    Auf dem Server sind praktisch immer die Fehlerausgaben von PHP ausgeschaltet. Du kannst sie aktivieren mit diesem Code:

    Code
    1. ini_set('display_errors', '1');
    2. error_reporting(E_ALL);
  • Auch mit PDO ist die Ausgabe in JSON kein Problem:

    Dann hast Du das Array genau in dem Format, wie es vorher in dem Javascript-Quiz war.


    Edit: Das fetch vergessen, Du kannst es sicher hinzu fügen.

  • m.scatello Klingt einleuchtend, für den Praxisgebrauch (so es dann mal so weit ist) werde ich es vermeiden.


    Sempervivum Die DB ist online gefüllt, PHP spuckt keine Fehler aus. Ich würde das aber erst mal als sekundär betrachten und lieber lokal weitermachen, damit ich vorankomme.


    Zu Deinem Code in #78: Ist das nicht der alte Code, den ich ursprünglich mal verwendet habe und sind die oberen Zeilen, mit denen eine ID abgefragt wird, jetzt nicht überflüssig? Das fetch hatte ich dort in einer Schleife: while ($row = $statement->fetch()) ..., wo und wie ich es in den aktuellen Code einsetzen müsste, weiß ich nicht.


    Und eines frage ich mich auch noch: Ich kann derzeit lokal einen JSON-String in eine PHP-Datei laden, der von JavaScript weiterverarbeitet wird. Aber war nicht das eigentliche Ziel, die Inhalte des Quiz' nicht lokal abzulegen und immer nur die benötigten Teile aus der DB abzufragen? Irgendwie habe ich das immer noch nicht wirklich verstanden ...