csv-neue Zeile

judoe007 · 14.04.2023

Hallo zusammen,
ich möchte einmal in CSV Nutzername und Mailadresse speichern. Soweit klappt es.
Nur bei der Formatierung tritt das Problem auf: sie reihen sich hintereinander an, d.h. jeder neue Eintrag wird automatisch hinter den vorherigen geschrieben, anstatt in einer neue Zeile.
Was muss ich umprogrammieren, damit er nach für jeden neuen Nutzer eine neue Zeile im CSV nimmt?
Vorab vielen Dank

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

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

$file=fopen($filename,"a");
// schreiben des Inhaltes von email
fwrite ( $file, $_GET['email'] );

// Trennzeichen einfügen, damit Auswertung möglich wird
fwrite ( $file, "|" );

// schreiben des Inhalts von name
fwrite ( $file, $_GET['name'] );

// Datei schließen

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

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

<form action="emailerfassung.php" method="get">

<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 · 14.04.2023

Du musst am Zeilenende einen Zeilenumbruch in die Datei schreiben, den gibt es als Konstante PHP_EOL. Du kannst auch alles in einer Zeile schreiben:
fwrite ( $file, $_GET['email'] . "|" . $_GET['name'] . PHP_EOL);

judoe007 · 14.04.2023

Cool. Vielen Dank. Da stellt sich mir dazu noch eine zweite Frage: In html gibt es ja beliebige Vorlagen für Quizze, welche für anfänger wie mich recht verständlich sind.
Leider finde ich nichts eindeutiges, wie ich beispielsweise so eins über php protokollieren kann, d.h. es wird vermerkt, wer richtig lag bei welcher Frage:
https://codepen.io/Sulaimon-Olaniran/pen/zYKJLjK

Sempervivum · 14.04.2023

In dieses Quiz auf Codepen habe ich nur kurz hinein gesehen und dabei keinen Spielernamen gefunden. Egal, wenn das Skript clientseitig in Javascript läuft, musst Du das Ergebnis zum Server schicken, damit es dort gespeichert werden kann. Das geht zum Beispiel mit fetch. Hier eine Demo aus der Schublade, wo Du ablesen kannst, wie Du die Parameter zusammen stellst und an fetch übergibst:

Code:

    <!-- In den folgenden Container wird die Antwort vom Server eingetragen: -->
    <span id="out"></span>
    <script>
        // Neues FormData-Objekt erzeugen:
        const params = new FormData();
        // ... und die Parameter, die übertragen werden sollen, eintragen:
        params.append('param1', 'some-param');
        params.append('param2', 'some-other-param');
        params.append('numparam', '1.24');
        // Parameter mit der Methode POST an das Skript testpost.php schicken:
        fetch('testpost.php', {
            method: 'post',
            body: params
        }).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;
        });
    </script>

Dann stehen in testpost.php die Parameter als POST-Variablen zur Verfügung.

judoe007 · 14.04.2023

Danke, leider kenne ich mich damit gänzlich nicht aus.
Wäre es nicht möglich in der vorherigen Exeltabelle einfach zu protokollieren, was geklickt wurde für ein Button?
Sowas geht zumindest in Powerapps sehr einfach.

Sempervivum · 14.04.2023

Wenn Du von einer Exceltabelle schreibst, dann importierst Du offensichtlich die CSV-Datei dort hinein? Unabhängig davon ob diese Datei auf dem Server liegt oder lokal wirst Du nicht daran vorbei kommen, die Klicks oder Daten in die Datei hinein zu bekommen. Und das könnte, wenn Du sie mit Javascript in eine lokale Datei schreibst, komplizierter werden als auf dem Server mit PHP.

judoe007 · 15.04.2023

Guten Tag
An welche Stelle meines Codes oben baue ich den von dir genannten ein? Oder wie wird er eingebaut?

Sempervivum · 15.04.2023

Guten Morgen!
Meinst Du jetzt den Code in dem Codepen, den Du in #3 gepostet hast?

judoe007 · 15.04.2023

Nein, in den Code aus Beitrag eins, der ist recht einfach.

Ist das möglich? Falls ja, wo/wie?
Vielen lieben Dank vorab.

Sempervivum · 15.04.2023

Das müsste dann so aussehen:

Code:

    <!-- Jeweils ein Eingabefeld für Email und Name: -->
    <input type="email" name="email">
    <input type="name" name="name">
    <!-- Button zum Abschicken: -->
    <button type="button" id="send-it">Senden</button>

    <!-- In den folgenden Container wird die Antwort vom Server eingetragen: -->
    <span id="out"></span>
   
    <script>
        // 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);
            // Parameter mit der Methode POST an das Skript testpost.php schicken:
            fetch('testpost.php', {
                method: 'post',
                body: params
            }).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;
            });
        }
        // Eventlistener für Klick auf den Button registrieren,
        // beim Klick wird die Funktion für das Senden aufgerufen:
        document.querySelector('#send-it').addEventListener('click', sendIt);
    </script>

judoe007 · 17.04.2023

Hallo,
wenn ich den Text auf die Seite kopiere, so sieht man die zwei Textfelder und den Senden Button.
Nachdem ich den Text eingegeben habe und sender gedrückt habe öffnen sich daneben zwei Textfelder und ein weiterer Senden-Button, also insgesamt 4 Textfelder und 2 Senden-Buttons. Warum?
WO speichert er denn die Daten, die ich eingebe?

Sempervivum · 17.04.2023

WO speichert er denn die Daten, die ich eingebe?

Das Speichern muss durch das PHP-Skript erfolgen. Für den Anfang kannst Du den Code aus meinem Vorschlag in Posting #2 verwenden.

Nachdem ich den Text eingegeben habe und sender gedrückt habe öffnen sich daneben zwei Textfelder und ein weiterer Senden-Button, also insgesamt 4 Textfelder und 2 Senden-Buttons. Warum?

Um die Frage zu beantworten müsste man deinen vollständigen Code sehen, einschl. des PHP. Hast Du möglicher Weise die URL der selben Seite beim Aufruf von fetch angegeben?

judoe007 · 17.04.2023

Ich habe mir noch aus dem Internet eine andere Variation gesucht. Hierzu meine Frage: Wie kann man ganz einfach zählen, wie oft welche Frage falsch beantwortet wurde? Eingelesen werden diese über csv. Wie speichere ich aber, wie oft jeweils die falsche Antwort angeklickt wurde?
<?PHP
session_start();
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="style.css" type="text/css">
<title>Quiz</title>
</head>
<body>

<?PHP

$zeilen = file("fragen.csv");

if(!isset($_SESSION['cnt']) OR (isset($_GET['init'])))
{
$_SESSION['richtig'] = 0;
$_SESSION['falsch'] = 0;
$_SESSION['cnt'] = 0;
}

if(isset($_POST['auswahl']) && $_POST['auswahl'] == "Abschicken")
{
if(isset($_POST['val']) && $_POST['val'] == $_SESSION['korrekt'])
{
echo "Diese Antwort ist richtig.";
$_SESSION['cnt']++;
$_SESSION['richtig']++;
}

elseif(isset($_POST['val']))
{
echo "Diese Antwort ist leider falsch.";
$_SESSION['cnt']++;
$_SESSION['falsch']++;
}

else
{
echo "Bitte eine Antwort geben";
// wenn man ohne Antwort weiter kommen solle die REMS unten rausnehmen
// $_SESSION['cnt']++;
// $_SESSION['falsch']++;
}
}

if($_SESSION['cnt'] < count($zeilen))
{
$fragen = explode("\t",$zeilen[$_SESSION['cnt']]);
$_SESSION['korrekt'] = $fragen[1];

?>
<p><?PHP echo $fragen[0]; ?></p>
<form action="<?PHP echo $_SERVER['SCRIPT_NAME']; ?>" method="post">
<input type="radio" name="val" value="<?PHP echo $fragen[2]; ?>"> <?PHP echo $fragen[2]; ?><br>
<input type="radio" name="val" value="<?PHP echo $fragen[3]; ?>"> <?PHP echo $fragen[3]; ?><br>
<input type="radio" name="val" value="<?PHP echo $fragen[4]; ?>"> <?PHP echo $fragen[4]; ?><br>
<input type="submit" name="auswahl" value="Abschicken">
</form>
<?PHP
}
else
{
echo "<br><pre>";
echo "Richtige Antworten: ".$_SESSION['richtig']."<br>";
echo "Falsche Antworten : ".$_SESSION['falsch'];
echo "</pre>";
}
?>
</body>
</html>

Sempervivum · 17.04.2023

So kann man es auch aufziehen aber ich finde es weniger übersichtlich und schwerer zu verstehen durch das Vermengen von client- und serverseitigem Code und das ständige Neuladen.

judoe007 · 17.04.2023

Ja. Nochmal auf mein Kernproblem. Ich müssen zwei Anforderungen erfüllt werden.
1. Eingaben(Nutzer+Email) müssen in CSV gespeichert werden, jeweils eine neue Zeile. Klappt
2. Es müssen wie in dem Beispiel aus Beitrag #13 Fragen/Quiz sein, wo protokolliert wird, wer(aus Anforderung1) was klickt, und was richtig/falsch ist. Da komm ich seit Wochen nicht weiter.
Da komm ich nicht weiter.

Sempervivum · 17.04.2023

Wie schon geschrieben ist mir die Lösung aus dem Codepen sypatischer, auch weil sie weit gehend zeitgemäß erscheint.

Für die Erweiterung um das Speichern brauchst Du nur die vorhandenen Bausteine zusammen zu fügen. Ein Modal für den Start mit den Eingabefeldern für Name und Email:

Code:

<body>
    <main>
        <!-- !!! creating a modal for start of quiz -->
        <div class="modal-start">
            <!-- Jeweils ein Eingabefeld für Email und Name: -->
            <input type="email" name="email">
            <input type="name" name="name">
        </div>

        <!-- usw. wie vorhanden -->
        <!-- creating a modal for when quiz ends -->
        <div class="modal-container" id="score-modal">

Der richtige Ort um die Daten an den Server zu schicken ist die Funktion handleEndGame, die am Ende des Spiels aufgerufen wird:

Code:

        // 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('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;
                })*/;
            }

        }

Alles ungetestet. Verbesserungsmöglichkeiten:

Modal für den Start stylen wie die anderen und ausblenden wenn das Spiel gestartet wird.
Speichern erst wenn der Button für das Schließen des Schlussmodals gedrückt wird.

judoe007 · 17.04.2023

Ich habe die beiden Elemente 1:1 aus https://codepen.io/Sulaimon-Olaniran/pen/zYKJLjK eingearbeitet(dist/scipt.js unddist/index.html. Des weiteren erstellte ich saveit.php. Aber auser den neuen zwei Textfeldern tut sich nichts.

Sempervivum · 17.04.2023

Da habe ich leider etwas vergessen: Wir brauchen den Button, um das Quiz zu starten wenn der Benutzer seine Eingaben gemacht hat. Also im HTML hinzu fügen:

Code:

<!-- Das Quiz wird jetzt durch einen Button gestartet,
der Eventhandler für body ist damit überflüssig: -->
<body>
    <main>
        <!-- !!! creating a modal for start of quiz -->
        <div class="modal-start">
            <!-- Jeweils ein Eingabefeld für Email und Name: -->
            <input type="email" name="email">
            <input type="name" name="name">
            <!-- Button zum Starten des Quiz: -->
            <button type="button" id="send-it">Quiz beginnen</button>
        </div>

        <!-- creating a modal for when quiz ends -->
        <div class="modal-container" id="score-modal">

            <div class="modal-content-container">

                <h1>Congratulations, Quiz Completed.</h1>
                <!-- usw. -->

Und der Eventlistener dafür im Javascript:

Code:

        // Eventlistener für Klick auf den Button registrieren,
        // beim Klick wird das Quiz gestartet indem der Container
        // sichtbar gemacht und die der erste Frage angezeigt wird:
        document.querySelector('#send-it').addEventListener('click', event => {
            document.querySelector('.game-quiz-container').style.display = 'flex';
            NextQuestion(0);
        });

Sempervivum · 17.04.2023

Das ist sehr schön, dass Du es online hast. Im body-Tag musst Du den Eventlistener weg lassen, also statt:
<body onload="NextQuestion(0)">
einfach:
<body>

judoe007 · 17.04.2023

Wenn ich aber das body rausnehme oder auf body kürze, so ist kein Text mehr zu erkennen oder ähnliches: