Quiz mit Javascript erstellt - bitte um Code-Beurteilung

Failix · 17. September 2021

Hallo zusammen,

um mein Selbststudium in Javascript voranzubringen, habe ich ein kleines (noch völlig unfertiges) Musik-Quiz erstellt:

Meine Bitte ist, dass sich erfahrene Anwender meinen JS-Code anschauen und beurteilen, ob irgendetwas völlig anders gemacht werden müsste. Ich weiß, dass der Code nicht optimal ist, aber ich suche in meinem frühen Lernstadium auch noch nicht nach Perfektion – es geht mir eher um prinzipielle Fehler, die ich künftig vermeiden sollte.

Eine Sache stört mich schon selbst: Der größte Teil des JS-Codes ist redundant – erst zum Initialisieren des Spiels, dann um mit einem Click zur nächsten Frage zu kommen. Das kann nicht der richtige Weg sein, aber ich finde derzeit keine bessere Lösung. Vielleicht habt Ihr ja einen Tipp für mich.

Danke und Gruß

Felix

Sempervivum · 17. September 2021

Eines hast Du ja schon sehr richtig gemacht: Ein Array verwendet und nur einen Satz von Funktionen anstatt den Code zu vervielfachen wie es viele Anfänger tun.

Was mir sofort ins Auge springt ist die Tatsache, dass sich das immer gleiche HTML im Array wiederholt. Das würde ich als erstes angehen.

Also das HTML nur ein Mal statisch anlegen und darin die Teile, die sich verändern, mit Javascript austauschen:

HTML

    <div id="wr-question">
        
        <!-- In die beiden Spans die Nummer und den Text der Frage eintragen: -->
        <p><span id="nr-question"></span>.Frage</p>
        <p><span id="question"></span></p>

    </div>

    <div id="wr-answers">
        <!-- In die p-Elemente jeweils den Text der Antwort eintragen: -->
        <input type="radio" name="fourQuestions">
        <p id="answer1"></p>
        <input type="radio" name="fourQuestions">
        <p id="answer2"></p>
        <input type="radio" name="fourQuestions">
        <p id="answer3"></p>
        <input type="radio" name="fourQuestions">
        <p id="answer4"></p>
        <i class="fas fa-smile"></i> Richtig! Du bist gut ...
        <i class="fas fa-sad-tear"></i> Das war wohl nichts ...
        <button id="button">nächste Frage</button>

        <div id="end">Das war's!</div>

    </div>

Alles anzeigen

Und das Array mit den Daten so:

JavaScript

        const questions = [
            {
                question: 'Welche Band veröffentlichte 1980 das Album "Paris"?',
                answers: ['Queen', 'Visage', 'Supertramp', 'ELO'],
                isCorrect: [false, false, true, false]
            },
        ];

Wenn Du das so aufziehst, kannst Du darauf verzichten, die Eventlistener bei jedem Klick neu zu registrieren.

Das Javascript dazu zu schreiben überlasse ich dir. Wenn Du nicht zum Ziel kommst, melde dich wieder.

Auch in diesem Fall kann man sich andere Varianten überlegen. Was sich ebenfalls anbieten würde, ist, mit Templates zu arbeiten, d. h. im HTML Platzhalter einzubauen und diese dann gegen die aktuellen Werte auszutauschen. Für solche Platzhalter benutzt man häufig doppelte geschweifte Klammern: {{name}} weil diese normaler Weise im HTML nicht vorkommen.

Dafür gibt es auch Bibliotheken, die es vereinfachen. Vor längerer Zeit habe ich z. B. Handlebars kennen gelernt aber ich weiß nicht, ob das noch aktuell ist.

Failix · 17. September 2021

Vielen Dank! Mir ist klar, dass gerade an dem generierten HTML-Code noch viel zu vereinfachen ist. Ich werde Deinen Vorschlag ausprobieren und mir auch mal den Tipp mit den Templates genauer anschauen. Ja, es muss darauf hinauslaufen, dass sich nichts wiederholt.

Hättest Du noch eine Idee zu meinem redundanten Code? Nach Zeile 85 steht noch mal dasselbe wie oben, und das nur, weil ich die Ausgabe einmal vor dem Eventhandler brauche und dann beliebig oft danach. Das kann doch nicht der richtige Weg sein, sagt mein Bauch (während das Hirn blöd mit den Schultern zuckt).

Sempervivum · 17. September 2021

Zitat

Nach Zeile 85 steht noch mal dasselbe wie oben, und das nur, weil ich die Ausgabe einmal vor dem Eventhandler brauche und dann beliebig oft danach.

So etwas kann man meistens lösen indem man den wiederholten Code in eine Funktion auslagert und diese dann mehrfach aufruft.

Failix · 17. September 2021

Ok, danke noch mal! Wenigstens wird mir am Wochenende nicht langweilig ...

Failix · 17. September 2021

Ich habe noch eine Frage zum aktuellen Code aus dem Beispiel in https://jsfiddle.net/m7gb8d3t/1/:

Wenn man die richtige Antwort wählt, wird der Button "nächste Frage" sichtbar. Klickt man diesen, wird der Zähler i um 1 erhöht (Zeile 82 und 84).

Ich versuche seit Stunden, den Zähler wieder auf 0 zu setzen, sobald man irgendeine Frage falsch beantwortet, aber es gelingt mir beim besten Willen nicht.

Derzeit ist es so, dass man bei einer falschen Antwort zwar aus dem Spiel fliegt, aber mit dem erneuten Starten wieder bei der falsch beantworteten Frage landet. Ich hätte es gern so, dass man bei einer falschen Antwort immer das gesamte Spiel von Anfang an wiederholen muss. Und dazu müsste der Zähler i wieder 0 sein.

Ist das in meinem Beispiel überhaupt machbar?

Sempervivum · 17. September 2021

Wenn ich das ausprobiere habe ich eher den Eindruck, dass es nicht weiter geht nach einer falschen Antwort anstatt dass ich heraus fliege. Weiter komme ich dann nur, wenn ich die Seite neu lade und dann geht es natürlich wieder mit der ersten Frage los.

Failix · 17. September 2021

Du hast vollkommen recht – mein Codebeispiel ist nicht das, was ich auf meinem lokalen Rechner habe. War wohl ein bisschen viel Javascript heute ...

Morgen lade ich das richtige Beispiel hoch, auf das sich meine Frage bezieht. Schönen Abend und schönes Wochenende!

Failix · 18. September 2021

Ich habe nun das korrekte Beispiel hochgeladen:

https://jsfiddle.net/zaypxtjd/

Beantwortet man eine der Fragen falsch, wird das Spiel abgebrochen. Man hat aber auf der Fehlerseite, die erscheint, die Möglichkeit, wieder ins Spiel einzusteigen. Derzeit landet man mit einem Klick auf den Button mit der ID "repeater" jedoch nicht am Anfang des Spiels, wie ich es mir wünsche, sondern bei der zuletzt falsch beantworteten Frage. Klar, der Zähler wird ja nicht zurückgesetzt ...

Also dachte ich mir, ich kann dem Klick auf den Repeater-Button ein i = 0; mitgeben (s. Zeile 99), aber das war eine naive Vorstellung, es funktioniert so nicht. Und auch keiner der anderen Versuche, die ich unternommen habe, funktioniert. Ich bin mit meinem Latein resp. meinem JavaScript am Ende.

Die Frage ist also: Wie schaffe ich es, dass nach einem Fehler das Spiel von Anfang an startet, nicht mittendrin?

Sempervivum · 18. September 2021

Das Problem ist, dass die Frage mit den Antworten auch neu aufgebaut werden muss, sonst läuft das i = 0; ins Leere:

Code

document.getElementById('repeater').addEventListener('click', () => {
            document.getElementById('question').style.display = 'block';
            document.getElementById('answer').style.display = 'block';
            document.getElementById('oneMoreTime').style.display = 'none';
            i = 0;
            // Das Folgende unbedingt in eine Funktion auslagern,
            // denn jetzt haben wir diesen Block schon drei Mal:
            document.getElementById('countQa').innerHTML = questions.length;
            document.getElementById('one').innerHTML = '1. Frage';
            document.getElementById('two').innerHTML = questions[0].two;
            document.getElementById('three').innerHTML = questions[0].three;
            document.getElementById('four').innerHTML = questions[0].four;
            document.getElementById('five').innerHTML = questions[0].five;
            document.getElementById('six').innerHTML = questions[0].six;

        })

Alles anzeigen

Wie ich schon in dem Kommentar geschrieben habe, schreit das natürlich danach, in eine Funktion ausgelagert zu werden, dann jetzt haben wir diesen Codeblock schon drei Mal.

Failix · 18. September 2021

Ganz herzlichen Dank, ich schätze Deine Hilfe sehr. Die Auslagerung in Funktionen und die Vereinfachungsschritte aus #2 sind meine nächste Aufgabe, wenn dieses Script so funktioniert, wie ich es mir wünsche.

Mit dem Code aus #10 funktioniert es nicht, leider. Beantwortet man eine Frage falsch, wird nach dem Neustart zwar wieder die erste Frage angezeigt, aber man kommt nicht weiter – alle Funktionen sind dann außer Kraft.

Hier ein vereinfachtes Beispiel mit nur der ersten Frage: https://jsfiddle.net/e4nroq5w/

Es reicht, eine falsche Antwort zu geben – beim zweiten Versuch ist keine der Klickfunktionen mehr aktiv. Löscht man die Zeilen 88 bis einschließlich 97, funktionieren sie wieder. Was muss anders gemacht werden?

Sempervivum · 18. September 2021

Das liegt daran, dass das HTML überschrieben wird und dabei gehen die Eventlistener verloren. Du wirst auch das Registrieren für diese hinzu fügen müssen, ab Zeile 60. Hier offenbaren sich die Vorteile wenn man widerkehrenden Code in Funktionen packt.

Failix · 18. September 2021

Ich bin gerade dabei, die Funktionen zu erstellen – es wird übersichtlicher. Anschließend versuche ich, die Funktionalität selbst in den Griff zu bekommen, der Nachmittag ist ja noch lang ...

Nachtrag eine Stunde später ...

Es ist geschafft – Code deutlich gestrafft und alle Funktionen wunschgemäß eingerichtet: https://jsfiddle.net/ptkv6ahL/

Dann geht's jetzt an die Optimierung des HTML-Codes. Sempervivum Danke, danke, danke!

Sempervivum · 18. September 2021

Gern geschehen. Jetzt sieht es schon wesentlich aufgeäumter aus, gut gemacht!

Failix · 18. September 2021

Sempervivum Ich hab' mal angefangen, mich mit Deinem Vorschlag aus #2 zu beschäftigen. Hier ein Fragment:

Code

'use strict';

const questions = [
  {
    question: 'Welche Band veröffentlichte 1980 das Album "Paris"?',
    answers: ['Queen', 'Visage', 'Supertramp', 'ELO'],
    isCorrect: [false, false, true, false]
  },
  {
    question: 'Auf welchem Pink-Floyd-Album wird eine Atombombe abgeworfen?',
    answers: ['The Wall', 'The Final Cut', 'The Endless River', 'The Dark Side of the Moon'],
    isCorrect: [false, false, true, false]
  },
];

let i = 0;

document.getElementById('nrQuestion').innerHTML = i + 1;
document.getElementById('question').innerHTML = questions[0].question;
document.getElementById('answer1').innerHTML = questions[0].answers[0];
document.getElementById('answer2').innerHTML = questions[0].answers[1];
document.getElementById('answer3').innerHTML = questions[0].answers[2];
document.getElementById('answer4').innerHTML = questions[0].answers[3];

document.getElementById('answer1').addEventListener('click', () => {
  if (questions[i].isCorrect[0] === true) {
    alert()
  }
})
document.getElementById('answer2').addEventListener('click', () => {
  if (questions[i].isCorrect[1] === true) {
    alert()
  }
})
document.getElementById('answer3').addEventListener('click', () => {
  if (questions[i].isCorrect[2] === true) {
    alert()
  }
})
document.getElementById('answer4').addEventListener('click', () => {
  if (questions[i].isCorrect[3] === true) {
    alert()
  }
})

Alles anzeigen

Mir kommt dieser Ansatz viel zu kompliziert vor. Das geht sicherlich einfacher, oder?

Einen schönen Abend wünsche ich!

basti1012 · 18. September 2021

Wenn du fertig bist, hast du lust dann meinen weg zu sehen ?

Im großen und ganzen ändert sich nicht viel , aber beim Coden gibt es viele Wege die zum Ziel führen.

Aber erst wenn ihr fertig seid , weil sonst wird das ein durcheinander.

Außerdem will ich dein Lernwille da nicht stören , du bist einer von wennigen der wirklich noch lernen will und keine Komplettlösung sucht.

Sempervivum · 18. September 2021

Ja, das kannst Du vereinfachen, indem Du die Elemente in einer Schleife bearbeitest:

Code

        // Das folgende in der Funktion buildQuestins
        // diese kann mehrfach aufgerufen werden
        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];
        }

        // Die Eventlistener brauchen wir jetzt nur noch einmal
        // zu registrieren, da das HTML nicht mehr komplett ausgetauscht wird
        // d. h. außerhalb der Funktion buildQuestions
        for (let j = 0; j < questions[0].answers.length; j++) {
            document.getElementById('answer' + (j + 1)).addEventListener('click', () => {
                if (questions[i].isCorrect[j] === true) {
                    // hier die Aktionen für eine richtige Antwort
                } else {
                    // hier die Aktionen für eine falsche Antwort
                }
            });
        }

Alles anzeigen

Ungetestet.

Jetzt bin ich mir nicht sicher, ob das i von Zeitpunkt der Registrierung gilt oder wenn der Eventlistener feuert. Probiere es aus.

Failix · 19. September 2021

basti1012 Gern schaue ich mir auch Deine Variante an, vielen Dank! Dass beim Programmieren viele Wege nach Rom führen, weiß ich, bin aber froh, wenn ich erst mal einen der möglichen Wege gehen kann. Das ist alles spannendes Neuland für mich. Und ja, Lernen macht mir großen Spaß – was nutzt mir eine fertige Lösung, wenn die nächste Herausforderung dann wieder nicht zu bewältigen ist ...

Sempervivum Ich habe Deinen Code eingebaut und glaube, ich verstehe sogar, was er tut. Darauf gekommen wäre ich allerdings nicht, muss ich zugeben. Ich beginne jetzt, die Aktionen für die Antworten einzubauen und hoffe, ich komme selbst ein Stückchen weiter. Leider habe ich heute nicht so viel Zeit dafür wie an den letzten beiden Tagen. Und natürlich wieder: herzlichen Dank!

Failix · 19. September 2021

Es ist geschafft!

https://jsfiddle.net/t4qebu7d/1/

Was mir nicht gefällt, ist function resetAnswer() ab Zeile 55. Hiermit setze ich nur die Hintergrundfarbe des zuvor gewählten Radiobuttons zurück. Richtig wäre es, ein uncheck anzuwenden, aber ich weiß (noch) nicht, wie ich das Element anspreche. Falls jemand einen Tipp geben möchte ...

In jedem Fall freue ich mich gerade wie ein kleiner Junge, der ein neues Spielzeug bekommen hat.

Und ich bin sehr froh, dass ich Euch und dieses Forum gefunden habe ... kann gar nicht oft genug "Danke!" sagen.

Sempervivum · 19. September 2021

Zitat

Richtig wäre es, ein uncheck anzuwenden, aber ich weiß (noch) nicht, wie ich das Element anspreche.

Das checked bei dem Radiobutton wegnehmen kannst Du indem Du die Eigenschaft checked auf false setzt.

Code

        function resetAnswer() {
            var x, z;
            x = document.querySelectorAll('#divAnswers input[type="radio"]');
            for (z = 0; z < x.length; z++) {
                x[z].checked = false;
            }
        }

Wenn Du gleich gezielt den Radiobutton selektierst, der gecheckt ist, brauchst Du gar keine Schleife mehr:

Code

        function resetAnswer() {
            document.querySelector('#divAnswers input[type="radio"]:checked').checked = false;
        }

(beides ungetestet)

Quiz mit Javascript erstellt - bitte um Code-Beurteilung

Jetzt mitmachen!

Teilen