Beiträge von Sempervivum

Sempervivum · 31. Oktober 2021

Javascript beachtet Groß- und Kleinschreibung. getElementsByID musst Du so schreiben: getElementById.

Wenn der erste Text gleich offen sein soll, brauchst Du dem betr. Element nur die Klasse "active" zu geben.

Oder möchtest Du, dass er immer offen bleibt?

Sempervivum · 31. Oktober 2021

Gern geschehen, ich wünsche ebenfalls einen schönen Sonntag!

Sempervivum · 30. Oktober 2021

Wenn man das vorige Element schließen will, wird es leider ein wenig komplizierter. Ich habe das folgende Javascript kommentiert, damit Du verstehst, was sich abspielt:

Code

<script>
const buttons = document.getElementsByClassName('flexbox-button2'),
contents = document.getElementsByClassName('flexbox-content');
// Weil sich der aktive bzw. offene Content von Klick zu Klick ändert
// müssen wir das aktive Element innerhalb des Eventlisteners ermitteln.
// contentActive = document.querySelector('.flexbox-content.active')
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', function () {
// Jetzt das aktive Element ermitteln:
const contentActive = document.querySelector('.flexbox-content.active');
// Es kann sein, dass
// 1. das aktive Element das gerade geklickte ist
// 2. es gerade kein aktives Element gibt
// Dies müssen wir prüfen bevor wir das Element schließen:
if (contentActive && contentActive != contents[i]) {
// Jetzt das aktive Element schließen:
contentActive.classList.remove('active');
}
// Jetzt können wir die Sichtbarkeit des aktuellen
// Elements umschalten:
contents[i].classList.toggle('active')
});
}
</script>

Alles anzeigen

Sempervivum · 30. Oktober 2021

Zitat

Wie genau kann ich denn den vorherig angeklickten Button mit diesem Code ansprechen?

Das kannst Du, indem Du querySelector verwendest und die Klasse "active" angibst:

const contentActive = document.querySelector('.flexbox-content.active');

Sempervivum · 30. Oktober 2021

Da gibt es jetzt zwei Probleme:

1. Im HTML und CSS verwendest Du für die Buttons die Klasse "flexbox-button2", im Javascript jedoch "flexbox-button", d. h. Du musst das Javascript so ändern:

Code

<script>
const buttons = document.getElementsByClassName('flexbox-button2'),
contents = document.getElementsByClassName('flexbox-content');
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', function () {
contents[i].classList.toggle('active')
});
}
</script>

Und im CSS musst Du die den Content zunächst unsichtbar machen, indem Du die Höhe auf 0 setzt:

Code

/* Content zunächst unsichtbar machen: */
.flexbox-content .flexbox-text {
height: 0;
overflow: hidden;
}
/* Ist die Klasse "active" gesetzt, den Content sichtbar machen: */
.flexbox-content.active .flexbox-text {
height: 100%;
}

Sempervivum · 30. Oktober 2021

Danke, so wird das Ganze klar. Ohne es ein wenig umzuorganisieren, wird sich dein gewünschtes Layout wohl nicht realisieren lassen. Also links ein Container mit den Buttons und rechts einer mit den Inhalten. Und dann muss man eine Beziehung zwischen den Buttons links und den Inhalten rechts herstellen. Ich dachte zunächst daran, das mit einem data-Attribut bei den Buttons zu machen, aber mit diesem HTML und Javascript dürfte das gar nicht notwendig sein:

Code

<section class="left-buttons">
</section>
<section class="right-content">
</section>
<script>
const buttons = document.getElementsByClassName('flexbox-button'),
contents = document.getElementsByClassName('flexbox-content');
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', function () {
contents[i].classList.toggle('active')
});
}
</script>

Alles anzeigen

(ungetestet)

Das HTML musst Du selber noch vervollständigen.

Sempervivum · 30. Oktober 2021

Leider kann ich aus dem HTML und CSS nicht erkennen, wie dieses Accordion funktioniert. Weder finde ich Check- oder Radiobuttons noch ein Javascript, das es macht. Irgend wie mit diesem kit.fontawesome? Oder der CSS-Datei, die Du einbindest? Kannst Du das erklären?

Sempervivum · 30. Oktober 2021

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

Sempervivum · 30. Oktober 2021

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.

Sempervivum · 29. Oktober 2021

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

Sempervivum · 29. Oktober 2021

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

Sempervivum · 29. Oktober 2021

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.

Sempervivum · 29. Oktober 2021

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.

Sempervivum · 29. Oktober 2021

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:

Code

$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);

Alles anzeigen

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.

Sempervivum · 29. Oktober 2021

Auch mit PDO ist die Ausgabe in JSON kein Problem:

Code

$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);

Alles anzeigen

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.

Sempervivum · 29. Oktober 2021

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

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

Sempervivum · 29. Oktober 2021

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

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';
}

Sempervivum · 29. Oktober 2021

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:

Das PHP-Skript das HTML generieren lassen, das der Browser direkt anzeigen kann. So ist es jetzt.
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.

Sempervivum · 28. Oktober 2021

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

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.

Sempervivum · 28. Oktober 2021

Noch etwas: Die Parameter übergibst Du ja so:

Code

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:

Code

$questions =$_POST['questions'];

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

Beiträge von Sempervivum

Elemente richtig floaten

Elemente richtig floaten

Elemente richtig floaten

Elemente richtig floaten

Elemente richtig floaten

Elemente richtig floaten

Elemente richtig floaten

Quiz mit Javascript erstellt - bitte um Code-Beurteilung

Quiz mit Javascript erstellt - bitte um Code-Beurteilung

Quiz mit Javascript erstellt - bitte um Code-Beurteilung

Quiz mit Javascript erstellt - bitte um Code-Beurteilung

Elemente richtig floaten

Quiz mit Javascript erstellt - bitte um Code-Beurteilung

Quiz mit Javascript erstellt - bitte um Code-Beurteilung

Quiz mit Javascript erstellt - bitte um Code-Beurteilung

Quiz mit Javascript erstellt - bitte um Code-Beurteilung

Quiz mit Javascript erstellt - bitte um Code-Beurteilung

Quiz mit Javascript erstellt - bitte um Code-Beurteilung

Quiz mit Javascript erstellt - bitte um Code-Beurteilung

Quiz mit Javascript erstellt - bitte um Code-Beurteilung