Beiträge von Sempervivum

Danke, ich wünsche ebenfalls ein schönes Wochenende!

Zitat

ob ich mithilfe des Netzwerk-Tabs dieses Umlautproblem hätte feststellen können.

...

Hätte ich daraus auf die Umlaute schließen können bzw. müssen?

Wohl kaum, denn dort ist die Response vollkommen leer. Begegnet mir zum ersten Mal, dass ein Problem mit dem Zeichensatz zum Totalversagen führt, sonst immer nur Schmierzeichen.

"Unexpected end of JSON input" würde bedeuten, dass das JSON unvollständig ist. Habe ich noch nie erlebt. Da müsste man das JSON im Netzwerk-Tab sehen.

Das "<" weist darauf hin, dass sich in der Antwort vom Server HTML statt JSON befindet. Sieh dir die Antwort wieder im Netzwerk-Tab an.

Was Du da verbal beschreibst, liest sich vernünftig. Poste doch mal das HTML und CSS, damit wir sehen können, wo der Fehler liegt.

Zitat

Müsste das JavaScript für die Ermittlung der Lösung und Anzeige der gewonnenen Punkte dann ein weiteres PHP-Script ansprechen?

Genau so ist es, für das Holen der Lösung, nachdem der Benutzer sich für eine entschieden hat, brauchst Du ein weiteres PHP-Skript.

Zitat

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.

Eine Schleife ist genau genommen überflüssig, weil Du ja in deinem Fall den Datensatz für genau eine ID aus der Datenbank liest und dabei kann nur eine Zeile im Ergebnis sein. D. h. dies dürfte den Zweck erfüllen:

$pdo = new PDO('mysql:host=localhost;dbname=music-quiz', 'xxx', 'xxx');
if (isset($_POST['id'])) {
    $id = $_POST['id'];
} else {
    die("Bitte eine ?id übergeben");
}
$statement = $pdo->prepare("SELECT * FROM questionsanswers WHERE id = ?");
$statement->execute(array($id));
$row = fetch($statement);

// Ausgabe-Array vorbereiten mit der ID und der Frage
// sowie einem leeren Array für die Antworten:
$output = [
    'id' => $id,
    'question' => $row['question'],
    'answers' => [],
];
// Antworten hinzu fügen, das leere Klammernpaar bewirkt,
// dass der neue Eintrag am Ende des Arrays hinzu gefügt wird:
$output['answers'][] = $row['answer1'];
$output['answers'][] = $row['answer2'];
// usw.
// Array im JSON-Format ausgeben:
echo json_encode($output);

Von den ersten Zeilen ist dieses:

$id = $_POST['id'];

erforderlich, weil wir ja die ID für die DB-Abfrage brauchen. Die Fehlerbehandlung könnte man noch ausgefeilter machen, aber jetzt weißt Du ja, dass man die Ausgabe des Skripts im Netzwerk-Tab sehen kann und für das Debugging dürfte das genügen.

Zitat

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

Das fett formatierte ist genau der Kern der Sache und wir sind ja gerade dabei, das aufzubauen.

Dieses verstehe ich nicht: "Ich kann derzeit lokal einen JSON-String in eine PHP-Datei laden", jedenfalls wenn Du damit meinst, einen JSON-String aus einer Datei zu laden.

Auch mit PDO ist die Ausgabe in JSON kein Problem:

$pdo = new PDO('mysql:host=localhost;dbname=music-quiz', 'xxx', 'xxx');
if (isset($_POST['id'])) {
    $id = $_POST['id'];
} else {
    die("Bitte eine ?id übergeben");
}
$statement = $pdo->prepare("SELECT * FROM questionsanswers WHERE id = ?");
$statement->execute(array($id));

// Ausgabe-Array vorbereiten mit der ID und der Frage
// sowie einem leeren Array für die Antworten:
$output = [
    'id' => $id,
    'question' => $row['question'],
    'answers' => [],
];
// Antworten hinzu fügen, das leere Klammernpaar bewirkt,
// dass der neue Eintrag am Ende des Arrays hinzu gefügt wird:
$output['answers'][] = $row['answer1'];
$output['answers'][] = $row['answer2'];
// usw.

// Array im JSON-Format ausgeben:
echo json_encode($output);

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.

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:

ini_set('display_errors', '1');
error_reporting(E_ALL);

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:

        function buildQuestions() {
            document.getElementById('nrQuestion').innerHTML = i + 1;
            document.getElementById('question').innerHTML = questions[i].question;
            for (let j = 0; j < questions[i].answers.length; j++) {
                document.getElementById('answer' + (j + 1)).innerHTML = questions[i].answers[j];
            }
            answerRight.style.display = 'none';
            end.style.display = 'none';
        }

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.

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:

    const params = new FormData();
    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.

Noch etwas: Die Parameter übergibst Du ja so:

    const params = new FormData();
    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:

$questions =$_POST['questions'];

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

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:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  Bitte eine ?id übergeben

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/en-US/docs/Web…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:

        // Du wirst wahrscheinlich nur einen Parameter brauchen,
        // nämlich den Index bzw. die ID des Datensatzes        
        const params = new FormData();
        params.append('param1', 'some-param');
        params.append('param2', 'some-other-param');
        params.append('numparam', '1.24');
        fetch('dein-php-script.php', {
            method: 'post',
            body: params
        }).then(res => {
            return res.json();
        }).then(res => {
            console.log(res);
            // Hier steht dir das dekodierte JSON
            // als Javascript-Objekt zur Verfügung
        });

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:

     <div class="kasten">
        <div class="feld1" onclick="changeColor(this)">1</div>
        <div class="feld2" onclick="changeColor(this)">2</div>
        <div class="feld3" onclick="changeColor(this)">3</div>
        <div class="feld4" onclick="changeColor(this)">4</div>
      </div>

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

                <div class="card" onclick="changeColor(this)">
                    <div class="card-header">
                        <h3>
                            Sicherheit
                        </h3>
                    
                    </div>
                    <div class="card-content">
                        <div class="kasten">
                            <div class="feld1">1</div>
                            <div class="feld2">2</div>
                            <div class="feld3">3</div>
                            <div class="feld4">4</div>
                          </div>
                    </div>
                </div>

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

function changeColor(tile) {
    // tile ist die geklickte Kachel
}

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

https://developer.mozilla.org/de/docs/Web/Ja…l_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/en-US/docs/Lea…data_attributes