Beiträge von Failix

Zitat von Sempervivum

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.)

Besten Dank für Eure Hinweise. Auch wenn meine Vorstellungen noch diffus sind, stelle ich doch fest, dass sich langsam ein Bild abzeichnet.

Wenn nummerierte Spalten nicht optimal sind, wie soll man die Spalten mit den vier Fragen dann bezeichnen? Oder trifft die Aussage nur auf die vier "isCorrect"-Spalten zu (von denen ich ahnte, dass sie unsinnig sind)?

Danke, das klingt einleuchtend. Ich denke, ich werde dieser einen Spalte "isCorrect" dann immer die Spaltennamen der jeweils korrekten Antwort mitgeben, also sowas wie "answer4".

Mittlerweile bin ich so weit, dass ich Fragen und mögliche Antworten selektiert per Javascript in einer HTML-Datei anzeigen kann. Ich forsche weiter ...

Ganz herzlichen Dank! Der Einstieg hat prima funktioniert, ich kann nun in meiner PHP-Datei gezielt Werte aus meiner Datenbank abfragen.

Natürlich habe ich bei weitem noch nicht alles durchgelesen, geschweige denn verstanden. Und natürlich habe ich nach wie vor keine Ahnung, wie ich das Ganze für mein Quiz einsetze, aber das macht nichts – irgendwann wird sich auch das ergeben, nehme ich doch an.

In diesem Zusammenhang hätte ich doch noch mal eine Frage zu meiner Tabellenstruktur:

html-seminar.de/woltlab/attachment/3234/

Ist es sinnvoll, die Struktur so anzulegen? Irgendwas sagt mir, dass es nicht gut ist, aber das ist nur so ein Bauchgefühl. Ich würde mich über Eure Meinung dazu freuen, vielen Dank!

Vielen Dank, damit bin ich heute wenigstens ein Stückchen weitergekommen. Und ja, ich arbeite mit phpMyAdmin unter MAMP.

Na klar hoffe ich das, ich bin nur nicht mit der allergrößten Geduld gesegnet.

Wie in #28 geschrieben, nehme ich ab nächstem Jahr Unterricht in dieser ganzen Problematik, dann sollte der Knoten spätestens platzen.

Nein, natürlich wird es dieses Tutorial nicht geben – aber vielleicht eins, das es mir ermöglicht, zumindest das Ende des Knäuels zu finden, um am Faden ziehen zu können.

Zurzeit stochere ich planlos herum, weil ich keinerlei Ansatz habe. Und ich denke, meine Grundkenntnisse sind einfach zu gering, um hier wirklich weiterzukommen. Wäre auch nicht schlimm, nichts drängt mich. Nachdem ich mit JavaScript relativ gut vorangekommen bin, hoffte ich, es würde so weitergehen. Ist aber nicht so, das Ganze wird offenbar zu komplex für mich. Ist zwar nicht schön, das einsehen zu müssen, aber ist halt die Realität.

Ich werde, sofern ich Zeit habe, weiter googeln, vielleicht will der Zufall, dass ich etwas finde.

Ja, ich verstehe, was zu tun ist, ich verstehe aber nicht, wie es getan wird. Mittlerweile habe ich mir mithilfe dieser Seite einen JSON-String erstellt. Aber das ist es ja nicht, was ich will ...

Ich stochere absolut im Dunkeln. Mir ist völlig unklar, wie ich nur einen Teil der Daten und später einen weiteren Teil der Daten aus der Datenbank hole. Die Tutorials, die ich bisher gesehen habe, holen zunächst alle Daten und verwenden JavaScript danach, um einzelne Teile davon anzuzeigen.

Kennt Ihr ein Tutorial, das eher auf mein Vorgehen zutrifft? Ich wüsste nicht einmal, mit welchen Begriffen ich googeln sollte ...

Mit JSON hatte ich schon zu tun, darunter kann ich mir etwas vorstellen. Aber: Wenn ich eine JSON-Datei erzeuge, liegt dann nicht wieder eine Quelle vor, aus der ein User die Antworten entnehmen könnte? Und das bringt mich zu der generellen Frage:

Muss ich die Daten aus der Datenbank erst komplett in meine PHP-Datei bzw. eine JSON-Datei einlesen, bevor mein Javascript darauf zugreifen kann? Ich merke, dass hier eine gewaltige Wissenslücke besteht.

---

Ansonsten bin ich aus Zeitgründen noch nicht weitergekommen. Heute hätte ich etwas Zeit und habe mir deshalb dieses Beispiel vorgenommen:

https://www.w3schools.com/php/php_ajax_database.asp

Um es besser zu verstehen, habe ich mir das Ganze lokal angelegt, also eine Datenbank und die beiden Dateien (HTML und PHP) angelegt. Rufe ich getuser.php auf, bekomme ich folgende Meldungen:

"Notice: Undefined index: q in D:\home\tests\php\DB\getuser.php on line 27"

Das ist diese Zeile:

$q = intval($_GET['q']);

Und:

"Warning: mysqli_fetch_array() expects parameter 1 to be mysqli_result, bool given in D:\home\tests\php\DB\getuser.php on line 46"

Das ist diese Zeile:

while ($row = mysqli_fetch_array($result)) {

Google ich nach diesen Meldungen, finde ich genau mein Beispiel von w3schools.com mit der Aussage, dass diese Anleitung völliger Müll sei. Und natürlich funktioniert mein lokales Beispiel nicht.

Also suche ich mal weiter ... irgendwo wird sich schon etwas finden, das funktioniert.

Ok, danke Dir! Ich werde erst mal ein primitives Beispiel suchen und nachvollziehen (z. B. auf w3schools.com). Wenn ich das Prinzip verinnerlicht habe, schaue ich weiter.

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?

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.

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.

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?

Das ist ja interessant und echtes Neuland für mich. Ich schaue es mir nicht nur an, sondern zerpflücke es und versuche es zu verstehen. Und vermutlich stelle ich dann hier die nächste Frage ...

Ganz herzlichen Dank für Deine Mühe!

Edit zehn Minuten später: Ich muss nix fragen, das erklärt sich alles von selbst. Prima, super, hervorragend!

Ich hab' mir gerade mal überlegt, wie ich vorgehen könnte, um jeden der drei Absätze abhängig von seiner Höhe zu identifizieren:

<!DOCTYPE html>
<html>

<body>

  <p>Aute tempor Lorem consequat sunt anim incididunt sit dolore pariatur. Adipisicing cillum laborum ipsum et ex non est aute in exercitation.</p>

  <p>Aute tempor Lorem consequat sunt anim incididunt sit dolore pariatur. Adipisicing cillum laborum ipsum et ex non est aute in exercitation. Aute tempor Lorem consequat sunt anim incididunt sit dolore pariatur. Adipisicing cillum laborum ipsum et ex non est aute in exercitation.</p>

  <p>Aute tempor Lorem consequat sunt anim incididunt sit dolore pariatur. Adipisicing cillum laborum ipsum et ex non est aute in exercitation. Aute tempor Lorem consequat sunt anim incididunt sit dolore pariatur. Adipisicing cillum laborum ipsum et ex non est aute in exercitation. Aute tempor Lorem consequat sunt anim incididunt sit dolore pariatur. Adipisicing cillum laborum ipsum et ex non est aute in exercitation. Aute tempor Lorem consequat sunt anim incididunt sit dolore pariatur. Adipisicing cillum laborum ipsum et ex non est aute in exercitation.</p>

  <script>

    let maxHeight = 0,
      elemMaxHeight = null;
    const elems = document.querySelectorAll('p');
    for (let i = 0; i < elems.length; i++) {
      if (elems[i].offsetHeight > maxHeight) {
        maxHeight = elems[i].offsetHeight;
        elemMaxHeight = elems[i];
      }
    }
    console.log(elemMaxHeight.offsetHeight);
    elemMaxHeight.style.color = 'red';

    elemMaxHeight = elemMaxHeight.offsetHeight;
    for (let i = 0; i < elems.length; i++) {
      if (elems[i].offsetHeight < elemMaxHeight) {
        medHeight = elems[i].offsetHeight;
        elemMedHeight = elems[i];
      }
    }
    console.log(elemMedHeight.offsetHeight);
    elemMedHeight.style.color = 'blue';

    elemMedHeight = elemMedHeight.offsetHeight;
    for (let i = 0; i < elems.length; i++) {
      if (elems[i].offsetHeight < elemMedHeight) {
        minHeight = elems[i].offsetHeight;
        elemMinHeight = elems[i];
      }
    }
    console.log(elemMinHeight.offsetHeight);
    elemMinHeight.style.color = 'green';

  </script>

</body>

</html>

Das funktioniert, aber irgendwie scheint es mir nicht die eleganteste Lösung zu sein. Vor allem müsste man das Script ändern, wenn ein weiterer Absatz dazu kommt, und das ist, nach allem, was ich bisher weiß, ein absolutes Tabu.

Gibt es bessere Lösungen als meine?

Herzlichen Dank! Jetzt, da ich "speichern wir die Höhe und das Element als (vorläufig) höchstes" lese, erinnere ich mich, diese Formulierung auch irgendwann in meinem Videokurs gehört zu haben, aber den Zusammenhang weiß ich nicht mehr.

So ist das halt leider. Man lernt eigentlich nur das, was man auch wirklich anwendet ...

Hallo zusammen,

ich habe ein simples HTML-Dokument mit drei Absätzen. Diese haben verschiedenen Inhalt und damit verschiedene Höhen. Mit JS lese ich die Werte aus:

<!DOCTYPE html>
<html>

<body>

  <p>Aute tempor Lorem consequat sunt anim incididunt sit dolore pariatur. Adipisicing cillum laborum ipsum et ex non
    est aute in exercitation.</p>

  <p>Aute tempor Lorem consequat sunt anim incididunt sit dolore pariatur. Adipisicing cillum laborum ipsum et ex non
    est aute in exercitation. Aute tempor Lorem consequat sunt anim incididunt sit dolore pariatur. Adipisicing cillum
    laborum ipsum et ex non est aute in exercitation.</p>

  <p>Aute tempor Lorem consequat sunt anim incididunt sit dolore pariatur. Adipisicing cillum laborum ipsum et ex non
    est aute in exercitation. Aute tempor Lorem consequat sunt anim incididunt sit dolore pariatur. Adipisicing cillum
    laborum ipsum et ex non est aute in exercitation. Aute tempor Lorem consequat sunt anim incididunt sit dolore
    pariatur. Adipisicing cillum laborum ipsum et ex non est aute in exercitation. Aute tempor Lorem consequat sunt anim
    incididunt sit dolore pariatur. Adipisicing cillum laborum ipsum et ex non est aute in exercitation.</p>

  <script>

    let x, z;
    x = document.getElementsByTagName('p');
    for (z = 0; z < x.length; z++) {
      console.log(x[z].offsetHeight)
    }

  </script>

</body>

</html>

Nun möchte ich gern eines dieser drei Elemente mit JS formatieren, z. B. das höchste. Allerdings habe ich keinen Ansatz, wie ich das Element mit dem höchsten Wert für offsetHeight anspreche, zumal der Wert durchaus veränderlich sein kann. Wie realisiert man so etwas üblicherweise in JS? Hättet Ihr bitte einen Tipp für mich?

Danke und Gruß

Felix

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.

Ich habe nun mein kleines Ratespiel fertiggestellt, habe eine Punktevergabe und einen Countdown zur Begrenzung der Antwortzeit eingebaut:

https://jsfiddle.net/y1jzrw09/

Gern lese ich Eure Kritik am bzw. Eure Hinweise zum JS-Code – vor allem, was Struktur, Ordnung und Straffung des Codes angeht. Vielen Dank!