Beiträge von Sempervivum

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.

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:

OK, dann ist ja alles in Ordnung.

Super, dass es so funktioniert. Aber bist Du sicher, dass es das ist, was Du vor hattest? Ich hatte es so verstanden, dass sich die Farbe der Kacheln unabhängig einstellt, d. h. 2. Kachel ist grün und wechselt beim Klick auf orange, 3. Kachel ist purple und wechselt beim Klick auf grey?

Bei mir funktioniert das, was Du bisher programmiert hast, schon: Bei Klick auf die erste Kachel ändert sich die Hintergrundfarbe auf blau.

Was jetzt noch fehlt: Wenn Du den Eventlistener auf diese Weise inline notierst, musst Du das bei allen Elementen tun, so wie in deinem ersten Posting mit den Buttons:

(Man kann das auch anders mit addEventListener und Eventbubbling machen, aber wir wollen es für den Anfang nicht zu kompliziert machen )

Der nächste Schritt wäre dann, ein Array mit den Farben anzulegen, versuche es.

Guten Morgen und willkommen im Forum!

Du postest zwar keinerlei Code aber ich habe da schon eine Ahnung, was das Problem ist.

Sieh dir mal dieses Muster von einem Onepager an, da wird nichts verdeckt:

https://webentwicklung.ulrichbangert.de/onepager-flex.html

BTW: Umschalttaste defekt?

Du schriebst am Anfang:

Zitat

dass pro onclick auf die Kachel die background Farbe sich in einer bestimmten Reihenfolge ändert.

Wenn das so ist, brauchst Du keinen Button sondern kannst den Eventlistener direkt für die Kachel registrieren.

Zitat

Habe aktuell die Schwierigkeit, dass ich das nur für ein Feld machen kann.

Diese Schwierigkeit kannst Du lösen, indem Du der Funktion das geklickte Element übergibst.

Es steht dann als Parameter in der Funktion zur Verfügung:

Weitere Hinweise: Lege die Farben in einem Array ab, siehe hier:

https://developer.mozilla.org/…ence/Global_Objects/Array

Damit Du die Farben in der richtigen Reihenfolge umschalten kannst, musst Du die aktuelle Farbe bzw. den Index in dem Array speichern. Ich empfehle, das in einem data-Attribut zu tun, dann hast Du es gleich der jeweiligen Kachel zugeordnet:

https://developer.mozilla.org/…Howto/Use_data_attributes

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.

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.

Wikipedia schrieb:

Unter Normalisierung eines relationalen Datenschemas (Tabellenstruktur) versteht man die Aufteilung von Attributen (Tabellenspalten) in mehrere Relationen (Tabellen) gemäß den Normalisierungsregeln (s. u.), so dass eine Form entsteht, die keine Redundanzen mehr enthält.

So what - inwiefern enthält die Struktur von Failix Redundanzen?

Zitat

Allerdings findet sich die Nagation dann immer am Boden der ganzen Seite und nicht unten im Kopfbereich.

Das entspricht aber genau deiner CSS-Anweisung: bottom: 0; nimmt das Element aus dem Fluss heraus und positioniert es ganz unten. Was Du brauchst ist Flexlayout und align-self: flex-end; statt float. Informiere dich z. B. hier:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Der nächste Schritt wäre dann, das Ganze von PHP aus zu machen. Am besten gar nicht erst mit mysqli anfangen sondern gleich mit PDO einsteigen, z. B. hier:

https://www.php-einfach.de/mysql-tutorial/crashkurs-pdo/

Zitat

Mir ist völlig unklar, wie ich nur einen Teil der Daten und später einen weiteren Teil der Daten aus der Datenbank hole.

Mit diesem Punkt würde ich auch empfehlen zu beginnen. Hier findest Du wie es geht:

https://www.php-kurs.com/mysql-select-anweisung.htm

Am besten austesten mit deinem DB-Management-Tool (phpmyadmin?).

Zitat

Wenn ich eine JSON-Datei erzeuge, liegt dann nicht wieder eine Quelle vor, aus der ein User die Antworten entnehmen könnte?

...

Muss ich die Daten aus der Datenbank erst komplett in meine PHP-Datei bzw. eine JSON-Datei einlesen, bevor mein Javascript darauf zugreifen kann?

In deinem Fall brauchst Du gar keine JSON-Datei sondern Du brauchst JSON nur, um die Daten aus dem PHP-Skript an den Client bzw. das Javascript im Browser zu übergeben. Also im PHP die Daten nach JSON kodieren und mit echo ausgeben. Dann im Javascript wieder dekodieren.

Damit der Benutzer jetzt nicht wie zuvor die Antworten ablesen kann, musst Du so vorgehen, wie ich es früher beschrieben hatte: Im ersten Schritt nur die 1. Frage und die Antworten darauf vom Server holen. Hat der Benutzer sich dann für eine Antwort entschieden, dann erst die richtige Antwort vom Server holen.

Hast Du das Skript denn schon für sich durch Direktaufruf im Browser getestet?

Mich wundert das nicht, da ist ja schließlich ein Bild als base64 kodiert im HTML-Text und nicht nur die URL.

Zitat

Weil er beim Aufrufen der Datei "verbindung.php" (Über Cronjob) Dann immer als ":seite" verbindung.php nutzt.

Mir scheint da liegt ein Missverständnis vor: Wenn diese verbindung.php per Cronjob aufgerufen wird, besteht keine Verbindung zu einer anderen PHP-Datei und es würde keinen Sinn machen, einen anderen Namen als "verbindung.php" einzutragen, weil die Störung/in-Ordnung-Meldung ja genau durch diese Datei erkannt wird.

tk1234 Mal alles nicht so verkrampft sehen, soll doch auch Spaß machen

MitchX Sei unbesorgt, Barrierefreiheit ist wichtig für Behörden, Ämter etc. die dazu verpflichtet sind. Für eine private Homepage ist dieses Thema von untergeordneter Bedeutung.

Ich habe mal einen Blick in die Doku geworfen:

https://www.php.net/manual/de/function.ssh2-sftp.php

U. U. könnten diese Zeilen schon ausreichen um die Verbindung zu testen:

Zitat

This method returns an SSH2 SFTP resource for use with all other ssh2_sftp_*() methods and the ssh2.sftp:// fopen wrapper, Bei einem Fehler wird false zurückgegeben..

Prüfe ob $sftp auf false geht, wenn der PI nicht erreichbar ist.

Der Name dieser PHP-Datei liest sich doch viel versprechend: verbindungsTest.php Poste doch mal den Code darin, damit wir prüfen können, ob er geeignet ist.