csv-neue Zeile

[Sempervivum]

In dem was online ist finde ich weder den Button noch das addEventlistener.

 

[judoe007]

das stimmt. Sorry, irgendwie rausgeflogen. Jetzt ist es drin.

 

[Sempervivum]

OK, den Eventlistener sehe ich noch nicht aber wir können ihn auch inline notieren, wird im übrigen Code auch so gemacht:

<button type="button" id="start-it" onclick="NextQuestion(0)">Quiz beginnen</button>

So habe ich es auf deiner Seite im HTML-Inspektor geändert und es funktioniert.

 

[judoe007]

Ok, das klappt jetzt mit den Fragen. Aber in welche Datei werden die Namen und Parameter gespeichert? Es soll ja festgehalten werden wer wie welche Frage beantwortet hat bzw. wieviele Versuche brauchte.
Die Datei testpost.php ist noch leer.

 

[Sempervivum]

Sieh dir noch mal meine Codezeile vom Anfang an:
fwrite ( $file, $_GET['email'] . "|" . $_GET['name'] . PHP_EOL);
Email und Name haben wir schon, Du brauchst nur noch die Anzahl der falschen und richtigen Antworten hinzu zu fügen:
fwrite ( $file, $_POST['email'] . "|" . $_POST['name'] . "|" . $_POST['wrong-answers'] . "|" . $_POST['right-answers'] . PHP_EOL);
Den Rest mit Öffnen und Schließen der Datei musst Du natürlich noch hinzu fügen.
Und wie Du siehst, habe ich die Zugriffe auf $_POST geändert, weil wir beim Aufruf von fetch angegeben habe, dass post verwendet werden soll.

 

[judoe007]

Ok. Ich habe es jetzt in die Datei testpost.php eingearbeitet. Aber über index.html tut sich trotzdem nichts,

 

[Sempervivum]

Die Dateinamen müssen natürlich übereinstimmen, im Javascript steht:
fetch('saveit.php', {
so musst Du deine PHP-Datei auch nennen.

Und jetzt wird mir auch klar, warum Du früher auf ein mal 4 Eingabefelder und 2 Buttons hattest: In der PHP-Datei ist das HTML ab form-Tag überflüssig.

Und Code besser in Codetags posten, das Menüsymbol rechts von dem kleinen Landschaftssymbol und dann </>

 

[judoe007]

Ok. Also die Dateinamen habe ich jetzt umbenannt. Zusätzlich habe ich noch file.csv erstellen, da er ja darein die Infos spielen soll.
Bei saveit.php meldet er Probleme bei wrong-answers und right-answers, dass sie nicht definiert sind.
Daten jetzt insgesamt:

Und was mir noch nicht klar ist: in der Datei index.html ist Zeile 109: ./script.js. Stimmt das da?

 

[Sempervivum]

Ich habe das gerade eben mit meinen lokalen Testdateien getestet und das PHP für die falschen und richtigen Antworten funktioniert. Poste doch mal dein PHP weil ich es nicht einsehen kann.

Und was mir noch nicht klar ist: in der Datei index.html ist Zeile 109: ./script.js. Stimmt das da?

Da ist ein </body> zu viel und index.js wird nicht gefunden, das solltest Du also löschen.

    </main>
    <script src="index.js"></script>
<!-- </body> muss raus -->
<!-- partial -->
  <script  src="./script.js"></script>

</body>
</html>

 

[judoe007]

Hier meine PHP, genannt saveit.php. PS.: Vielen Dank schonmal!!!!!!!!!!!!

<?php
$filename = "file.csv";

if ( isset($_POST['email']) and $_POST['email'] <> "" )
{

$file=fopen($filename,"a");
// schreiben des Inhaltes von email
fwrite ( $file, $_POST['email']  . "|"  . $_POST['name']  . "|"  . $_POST['wrong-answers']  . "|"  . $_POST['right-answers'] . PHP_EOL);

// Datei schließen

fclose($file);
echo "Danke - Ihre Daten wurden speichert";

// Datei wird nicht weiter ausgeführt
exit;
}
?>

<form action="saveit.php" method="post">

<p>Ihre E-Mail-Adresse<br>
<input type="Text" name="email"></p>

<p>Name:<br>
<input type="Text" name="name"></p>

<input type="Submit" name="" value="speichern">

</form>

 

[Sempervivum]

Ich habe mal die Prüfung der weiteren Parameter hinzu gefügt und damit funktioniert das Speichern. Das HTML am Schluss ist überflüssig und ich habe es gelöscht.

<?php
$filename = "thread1098-quiz-saveit.csv";

if (
    isset($_POST['email']) and $_POST['email'] <> "" and
    isset($_POST['email']) and $_POST['email'] <> "" and
    isset($_POST['wrong-answers']) and $_POST['wrong-answers'] <> "" and
    isset($_POST['right-answers']) and $_POST['right-answers'] <> ""
) {

    $file = fopen($filename, "a");
    // schreiben des Inhaltes von email
    fwrite($file, $_POST['email']  . "|"  . $_POST['name']  . "|"  . $_POST['wrong-answers']  . "|"  . $_POST['right-answers'] . PHP_EOL);

    // Datei schließen

    fclose($file);
    echo "Danke - Ihre Daten wurden gespeichert";
}

Den Dateinamen kannst Du natürlich wieder ändern.

In der Funktion für das Quizende fehlte der Aufruf der Funktion sentIt:

        // function for when all questions being answered
        function handleEndGame() {
            let remark = null
            let remarkColor = null

            // condition check for player remark and remark color
            if (playerScore <= 3) {
                remark = "Bad Grades, Keep Practicing."
                remarkColor = "red"
            }
            else if (playerScore >= 4 && playerScore < 7) {
                remark = "Average Grades, You can do better."
                remarkColor = "orange"
            }
            else if (playerScore >= 7) {
                remark = "Excellent, Keep the good work going."
                remarkColor = "green"
            }
            const playerGrade = (playerScore / 10) * 100

            //data to display to score board
            document.getElementById('remarks').innerHTML = remark
            document.getElementById('remarks').style.color = remarkColor
            document.getElementById('grade-percentage').innerHTML = playerGrade
            document.getElementById('wrong-answers').innerHTML = wrongAttempt
            document.getElementById('right-answers').innerHTML = playerScore
            document.getElementById('score-modal').style.display = "flex"

            // !!! Hier ist der richtige Ort, um das Ergebnis des Spiels
            // zum Server zu schicken.
            // Die DOM-Elemente der Eingabefelder bereit stellen:
            const
                inputEmail = document.querySelector('input[name="email"]'),
                inputName = document.querySelector('input[name="name"]');
            // Das Senden kapseln wir in einer Funktion:
            function sendIt() {
                // Neues FormData-Objekt erzeugen:
                const params = new FormData();
                // ... und die Werte aus den Eingabefeldern dort eintragen:
                params.append('email', inputEmail.value);
                params.append('name', inputName.value);
                // ... und das Ergebnis des Spiels:
                params.append('wrong-answers', wrongAttempt);
                params.append('right-answers', playerScore);
                // Parameter mit der Methode POST an das Skript saveit.php schicken:
                fetch('thread1098-quiz-saveit.php', {
                    method: 'post',
                    body: params
                })
                // !!! Die Antwort vom Server brauchen wir zunächst nicht
                /*.then(res => {
                    // Die Antwort vom Server wird als Text ausgewertet:
                    return res.text();
                }).then(res => {
                    // Antwort vom Server in der Console ausgeben:
                    console.log(res);
                    // ... und in HTML-Element eintragen:
                    document.getElementById('out').innerHTML = res;
                })*/;
            }
            sendIt(); // !!! Dies fehlte
        }

 

[judoe007]

Danke. Ich habe es nochmal versucht zu bearbeiten nach den Erläuterungen, inkl. neuen Titeln. Nichts passiert. Im Anhang habe ich nochmal die Orginale. Könnten Sie mir Ihre mal zukommen lassen?

 

[Sempervivum]

Das ist sicher besser, sich den Code komplett anzusehen, ich werde mir deinen gleich herunterladen und ansehen.

 

[scatello]

@Sempervivum
Schreibe ihm doch den kompletten Code zusammen, machst du doch sonst auch gerne.

Ich stelle mir sowieso die Frage, was das Gehampel mit einer CSV-Datei soll und warum keine Datenbank genommen wird.

 

[Sempervivum]

Fehler gefunden:
Weil es keine ID "send-it" im HTML gibt, schlägt diese Programmzeile fehl, das Skript bricht ab und das Senden unterbleibt.

    document.querySelector('#send-it').addEventListener('click', event => {
        document.querySelector('.game-quiz-container').style.display = 'flex';
        NextQuestion(0);
    });

Ich habe das im Javascript gelöscht und dann funktioniert es. Die Datei im Anhang mit Endung ".txt".

 

[Sempervivum]

Ups, falsche Datei angehängt, da war der Code noch drin, hier die richtige:

 

[judoe007]

Jo, cool. Viiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiielen Dank. Jetzt funktioniert es.
Es haben sich noch Fragen ergeben: KVP lässt grüßen

Gibt es die Möglichkeit, dass er erst beginnt, wenn Username und Mail eingetragen sind?

Gibt es die Möglichkeit, dass der Username und Mail temporär auf dem PC/Divece gespeichert werden für die ganze Website?
Bsp: Prüfungsraum mit mehreren Prüflingen, und mehreren PCs. Prüfungen: Segelschein, Führerschein, Schützenschein. Wie kann es einrichten, dass der User an einem PC sich nur einmal einloggen muss und dann alle drei Prüfungen(auf einer Domain) in Unterseiten machen kann?

Was ich bisher versucht habe: index.html, script.js und saveit.php dupliziert, jeweils Endung2. Nun schließt er die CSV erst im saveit2, also ist die Statistik der richtigen und falschen Fragen von dem Orginal und Dublikat in einer Zeile.
Soweit so gut.
Nur wenn dann ein anderer User gleichzeitig die Fragen beantwortet kommen alle in die eine Reihe.

Wie kann man einstellen, dass sich das Fenster am Ende der Fragen automatisch schließt?

 

[judoe007]

Hier das Beispiel

 

[Sempervivum]

Gibt es die Möglichkeit, dass er erst beginnt, wenn Username und Mail eingetragen sind?

Ja natürlich, wir müssen nur die Eingaben validieren. Ich zeige dir später wie es geht. Ebenso bei den anderen Fragen.
Werde aber wahrscheinlich erst im Laufe des Nachmittags Zeit finden.

 

[judoe007]

Cool. Vielen vielen Dank vorab!!