Auf Thema antworten

Beitrag

[QUOTE="Sempervivum, post: 13766, member: 3917"]
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>
        
        <div class="modal-start">
            
            <input type="email" name="email">
            <input type="name" name="name">
        </div>

<div class="modal-container" id="score-modal">[/CODE]
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;
                })*/;
            }

}
[/CODE]
Alles ungetestet. Verbesserungsmöglichkeiten:
[LIST]
[*]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.
[/LIST]
[/QUOTE]

Authentifizierung