Javascript Quiz - Hide & Show

  • Guten Tag,


    ich habe folgende Frage. Ich möchte bei meinem Javascript Quiz nur eine Frage der 4 vorhandenen anzeigen. Sobald die Frage beantwortet wurde soll die nächste Frage erscheinen. Am Ende der 4 Fragen soll dann die erreichte Punktzahl ausgegeben werden.

    Das Ganze dient für mich als Übung. Ich habe schon ganz google durchforstet. Auf einer Seite wird es erklärt, damit kann ich aber nicht wirklich etwas anfangen. Ich verstehe es nicht...

    Diese Seite


    Hier meine HTML Datei:

    und hier meine Javascript Datei, bis jetzt..


    Ich möchte diese Aufgabe verstehen. Falls mir jemand hier helfen kann bitte keine fertigen Quellcodes. Es geht mir vor allem ums Verständnis dieser Aufgabe.


    Vielen Dank :-)

  • Verstehe. Dann schlage ich folgendes Vorgehen vor:

    Mit der Funktion document.querySelectorAll() eine Nodelist, das ist im wesentlichen ein Array, mit den Divs mit den Fragen darin erzeugen.

    Eine Variable, z. B. idxQuestion, definieren und am Anfang auf 0 setzen. Diese gibt an, welche Frage zzt. aktiv und sichtbar ist. D. h. am Anfang die erste.

    Wurde eine Frage beantwortet: Die aktuelle Frage entspr. aktuellem Index verbergen, den Index erhöhen. Dann zeigt dieser auf die nächste Frage; diese dann sichtbar machen.

  • Wenn es zwingend mit JS sein muss, stellt sich die Frage, wo die Antworten stehen?

    Die wären dann i.d.R. am Client auf irgendeine Art einsehbar. Das kann man nur umgehen, in dem man serverseitige Scriptsprachen einsetzt.


    Dann wäre es zumindest möglich, erst alle Fragen beantworten zu lassen und diese hinterher zusammen auf dem Server auswerten zu lassen.

    Die Fragen und Benutzer-Antworten würde ich in dem Fall in JSON verwalten und dieses Objekt dann am Ende an den Server senden.


    Soll es wirklich komplett Client seitig ausgewertet werden, ohne serverseitige Scripte, bleibt die Frage halt: Wie verstecke ich die richtigen Antworten?

  • Rein Client Seitig. Ich möchte keine Serveranbindung. Step by Step. Erstmal muss ich das verstehen :D


    Verstehe. Dann schlage ich folgendes Vorgehen vor:

    Mit der Funktion document.querySelectorAll() eine Nodelist, das ist im wesentlichen ein Array, mit den Divs mit den Fragen darin erzeugen.

    Eine Variable, z. B. idxQuestion, definieren und am Anfang auf 0 setzen. Diese gibt an, welche Frage zzt. aktiv und sichtbar ist. D. h. am Anfang die erste.

    Wurde eine Frage beantwortet: Die aktuelle Frage entspr. aktuellem Index verbergen, den Index erhöhen. Dann zeigt dieser auf die nächste Frage; diese dann sichtbar machen.

    In der Theorie ist mir das klar. Jedoch weiß ich nicht genau wie ich das umsetzen soll..

    Hättest du ein Beispiel für mich?

  • Etwa so:

    (ungetestet)

  • Wie verstecke ich die richtigen Antworten?

    Könnte man die nicht mit base64 decodieren , bzw so in der art? Wenn sich einer die mühe macht das vorher zu entschlüsseln dann auch gut. Da es ja Client Seitig ist wird er bei richtigen Antworten oder so wohl kein Preis gewinnen oder so. Beim Gewinn spiel oder oder ähnliches sollte man da wohl doch besser auf Php zugreifen.

  • Habe jetzt über meine Fragen in der index.html jeweils pro Frage ein div mit frage1, frage 2 usw.. gemacht.


    was ist hier beim Aufbau falsch?

  • Um das genau zu beantworten, müsste man auch das HTML sehen: Hast Du frage1, frage2, etc. als Klasse oder als IDs zugewiesen?

    Ich empfehle, dass Du dich über CSS-Selektoren informierst, z. B. hier:

    https://wiki.selfhtml.org/wiki/CSS/Selektoren


    Auf jeden Fall kann man sagen: Globale Variablen haben zwar Nachteile, aber für den Anfang sollte idxQuestion global sein, denn wenn Du sie innerhalb der Funktion submitQuiz definierst, wird sie bei jedem Aufruf wieder mit 0 initialisiert.

  • Um das genau zu beantworten, müsste man auch das HTML sehen: Hast Du frage1, frage2, etc. als Klasse oder als IDs zugewiesen?

    Ich empfehle, dass Du dich über CSS-Selektoren informierst, z. B. hier:

    https://wiki.selfhtml.org/wiki/CSS/Selektoren


    Auf jeden Fall kann man sagen: Globale Variablen haben zwar Nachteile, aber für den Anfang sollte idxQuestion global sein, denn wenn Du sie innerhalb der Funktion submitQuiz definierst, wird sie bei jedem Aufruf wieder mit 0 initialisiert.


    Das ist meine HTML Datei aktuell

  • Also hast Du sie als Klassen zugewiesen. Um es einfach zu machen, empfehle ich bei allen noch eine Klasse "frage" hinzuzufügen:

    <div class = "frage frage1">

    Dann kannst Du die Nodelist ganz einfach ermitteln:

    var questions = document.querySelectorAll(".frage");


    Und da Du auch an die Funktion answerPunkte Klassen übergibst, kannst Du es so machen:

    Code
    1. function answerPunkte (qName) {
    2. var radiosNo = document.querySelector("." + qName);

    Die ganze Logik habe ich jetzt nicht gecheckt, mal Schritt-für-Schritt vorgehen.

  • Viel zu viel HTML, wenn Du mich fragst.

    Ich würde so ein Prinzip wählen: https://codepen.io/anon/pen/Pxxppg


    Du hast dann alle Fragen und User-Antworten in einem Objekt.

    Jetzt musst Du nur noch auswerten.


    Könnte man die nicht mit base64 decodieren

    Sicher kann man das, alle Sicherheitsverfahren haben das Ziel, es einem Angreifer so schwer wie möglich zu machen.

    Man muss am Ende selbst entscheiden, welchen Aufwand man rechtfertigt. base64 ist wie ich finde, relativ leicht zu erkennen und es reicht dann bereits ein atob(), um den Klartext zu haben.


    Aber ja, natürlich kann man das machen, geht hier ja nicht um Millionengewinne oder Passwörter.