Beiträge von terminator78

terminator78

Zitat von Sempervivum

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.

HTML

<!doctype html>
<html>
    <head>
<script language="javascript" type="text/javascript" src="javascript.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<meta charset="utf-8">
<title>Javascript Quiz</title>
</head>
<body>
  <h2 class="quizHeader">Trinkspiel</h2>
  
        <div class="quiz-container">
  <div id="quiz"></div>
</div>
<button id="previous">Previous Question</button>
<button id="next">Next Question</button>
<div id="results"></div>
    
    
    <table style="width:583px">
    <tr>
      <td>
          <div class = "frage1">
              <p class="fragen">Quizfrage 1</p>

            <ul>
            <input class="answer" type="radio" name="frage1" value="1">
            <label id="correctString1">Richtige Antwort</label>
            <br>
            <input class="answer" type="radio" name="frage1" value="0">
            <label>Falsche Antwort</label>
            <br>
            <input class="answer" type="radio" name="frage1" value="0">
            <label>Falsche Antwort</label>
            <br>
            <input class="answer" type="radio" name="frage1" value="0">
            <label>Falsche Antwort</label>
            </ul>
          </div>
      </td>
      <td>
          <div class = "frage2">
              <p class="fragen">Quizfrage 2</p>

            <ul>
            <input class="answer" type="radio" name="frage2" value="0">
            <label>Falsche Antwort</label>
            <br>
            <input class="answer" type="radio" name="frage2" value="1">
            <label id="correctString2">Richtige Antwort</label>
            <br>
            <input class="answer" type="radio" name="frage2" value="0">
            <label>Falsche Antwort</label>
            <br>
            <input class="answer" type="radio" name="frage2" value="0">
            <label>Falsche Antwort</label>
            </ul>
          </div>
      </td>
    </tr>
    <tr>
      <td>
          <div class = "frage3">
              <p class="fragen">Quizfrage 3</p>

            <ul>
            <input class="answer" type="radio" name="frage3" value="0">
            <label>Falsche Antwort</label>
            <br>
            <input class="answer" type="radio" name="frage3" value="1">
            <label id="correctString3">Richtige Antwort</label>
            <br>
            <input class="answer" type="radio" name="frage3" value="0">
            <label>Falsche Antwort</label>
            <br>
            <input class="answer" type="radio" name="frage3" value="0">
            <label>Falsche Antwort</label>
            </ul>
        </div>
      </td>
      <td>
          <div class = "frage4">
              <p class="fragen">Quizfrage 4</p>

            <ul>
            <input class="answer" type="radio" name="frage4" value="0">
            <label>Falsche Antwort</label>
            <br>
            <input class="answer" type="radio" name="frage4" value="1">
            <label id="correctString4">Richtige Antwort</label>
            <br>
            <input class="answer" type="radio" name="frage4" value="0">
            <label>Falsche Antwort</label>
            <br>
            <input class="answer" type="radio" name="frage4" value="0">
            <label>Falsche Antwort</label>
            </ul>
          </div>
      </td>
    </tr>
    </table>
<br/>

    
    
      <div class="submitter">
          <input class="quizSubmit" id="submitButton" onClick="submitQuiz()"
          type="submit" value="Abschicken" />
    </div>
  
    <div class="quizAnswers" id="correctAnswer1"></div>
    <div class="quizAnswers" id="correctAnswer2"></div>
    <div class="quizAnswers" id="correctAnswer3"></div>
    <div class="quizAnswers" id="correctAnswer4"></div>

    <div>
        <h2 class="quizScore" id="userScore"></h2>
    </div>
    </div>

</body>
</html>

Alles anzeigen

Das ist meine HTML Datei aktuell

terminator78

Code

function submitQuiz() {
    
    
    var questions = document.querySelectorAll("frage1 frage2 frage3 frage4");
    var idxQuestion = 0;
        console.log('submitted');
                
            function answerPunkte (qName) {
                var radiosNo = document.getElementsByName(qName);
                
                for (var i = 0, length = radiosNo.length; i < length; i++) {
                    if (radiosNo[i].checked) {
                        var answerValue = Number(radiosNo[i].value);
                    }
                }
                if (isNaN(answerValue)) {
                    answerValue = 0;
                }
                return answerValue;
            }
    
    var Score = (answerPunkte ('frage1') + answerPunkte ('frage2') + answerPunkte ('frage3') + answerPunkte ('frage4'));
    console.log("Score : " + Score);
    
    function nextQuestion() {
    questions[idxQuestion].style.visibility = "hidden";
        idxQuestion++;
    questions[idxQuestion].style.visibility = "visible";
        
    function richtigeantwort (richtigstr, qNumber){
        console.log("qNumber: " + qNumber);
        return ("Die richtige Antwort für die Frage" + qNumber + ": &nbsp;<strong>" +
                (document.getElementById(richtigstr).innerHTML) + "</strong>");
    }
    
    if (answerPunkte('frage1') === 0) {
            document.getElementById('correctAnswer1').innerHTML = richtigeantwort('correctString1', 1);
        }
        if (answerPunkte('frage2') === 0) {
            document.getElementById('correctAnswer2').innerHTML = richtigeantwort('correctString2', 2);
        }
        if (answerPunkte('frage3') === 0) {
            document.getElementById('correctAnswer3').innerHTML = richtigeantwort('correctString3', 3);
        }
        if (answerPunkte('frage4') === 0) {
            document.getElementById('correctAnswer4').innerHTML = richtigeantwort('correctString4', 4);
        }
    }
    var fragenarray = document.getElementsByClassName('frage');
    
    var fragen = 0;
    for (var i = 0, length = fragenarray.length; i < length; i++) {
        fragen++;
    }
    
    
    var ergebnis = "Dein Ergebnis: " + Score +"/" + fragen;
    if (Score === fragen) {
        ergebnis = ergebnis + "&nbsp; <strong>Super!</strong>"
    };
    document.getElementById('userScore').innerHTML = ergebnis;
}

$(document).ready(function(){
    
    $('#submitButton').click(function() {
        $(this).addClass('hide');                        
});
    
});

Alles anzeigen

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?

terminator78

Zitat von Arne Drews

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

Zitat von Sempervivum

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?

terminator78

Zitat von Sempervivum

Wie weit bist Du denn, d. h. was funktioniert schon und was nicht? Oder funktioniert gar nichts?

Bislang wird folgendes angezeigt und funktioniert auch https://share-your-photo.com/b1b75fa6c4

Ich möchte jedoch, dass nur eine Frage angezeigt wird und danach die nächste

terminator78

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:

HTML

<!doctype html>
<html>
    <head>
<script language="javascript" type="text/javascript" src="javascript.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<meta charset="utf-8">
<title>Javascript Quiz</title>
</head>
<body>
  <h2 class="quizHeader">Trinkspiel</h2>
  
        <div class="quiz-container">
  <div id="quiz"></div>
</div>
<button id="previous">Previous Question</button>
<button id="next">Next Question</button>
<div id="results"></div>
    
    
    <table style="width:583px">
    <tr>
      <td>
          <div>
              <p class="fragen">Quizfrage 1</p>

            <ul>
            <input class="answer" type="radio" name="frage1" value="1">
            <label id="correctString1">Richtige Antwort</label>
            <br>
            <input class="answer" type="radio" name="frage1" value="0">
            <label>Falsche Antwort</label>
            <br>
            <input class="answer" type="radio" name="frage1" value="0">
            <label>Falsche Antwort</label>
            <br>
            <input class="answer" type="radio" name="frage1" value="0">
            <label>Falsche Antwort</label>
            </ul>
          </div>
      </td>
      <td>
          <div>
              <p class="fragen">Quizfrage 2</p>

            <ul>
            <input class="answer" type="radio" name="frage2" value="0">
            <label>Falsche Antwort</label>
            <br>
            <input class="answer" type="radio" name="frage2" value="1">
            <label id="correctString2">Richtige Antwort</label>
            <br>
            <input class="answer" type="radio" name="frage2" value="0">
            <label>Falsche Antwort</label>
            <br>
            <input class="answer" type="radio" name="frage2" value="0">
            <label>Falsche Antwort</label>
            </ul>
          </div>
      </td>
    </tr>
    <tr>
      <td>
          <div>
              <p class="fragen">Quizfrage 3</p>

            <ul>
            <input class="answer" type="radio" name="frage3" value="0">
            <label>Falsche Antwort</label>
            <br>
            <input class="answer" type="radio" name="frage3" value="1">
            <label id="correctString3">Richtige Antwort</label>
            <br>
            <input class="answer" type="radio" name="frage3" value="0">
            <label>Falsche Antwort</label>
            <br>
            <input class="answer" type="radio" name="frage3" value="0">
            <label>Falsche Antwort</label>
            </ul>
        </div>
      </td>
      <td>
          <div>
              <p class="fragen">Quizfrage 4</p>

            <ul>
            <input class="answer" type="radio" name="frage4" value="0">
            <label>Falsche Antwort</label>
            <br>
            <input class="answer" type="radio" name="frage4" value="1">
            <label id="correctString4">Richtige Antwort</label>
            <br>
            <input class="answer" type="radio" name="frage4" value="0">
            <label>Falsche Antwort</label>
            <br>
            <input class="answer" type="radio" name="frage4" value="0">
            <label>Falsche Antwort</label>
            </ul>
          </div>
      </td>
    </tr>
    </table>
<br/>

    
    
      <div class="submitter">
          <input class="quizSubmit" id="submitButton" onClick="submitQuiz()"
          type="submit" value="Abschicken" />
    </div>
  
    <div class="quizAnswers" id="correctAnswer1"></div>
    <div class="quizAnswers" id="correctAnswer2"></div>
    <div class="quizAnswers" id="correctAnswer3"></div>
    <div class="quizAnswers" id="correctAnswer4"></div>

    <div>
        <h2 class="quizScore" id="userScore"></h2>
    </div>
    </div>

</body>
</html>

Alles anzeigen

und hier meine Javascript Datei, bis jetzt..

Code

function submitQuiz() {
        console.log('submitted');
                
            function answerPunkte (qName) {
                var radiosNo = document.getElementsByName(qName);
                
                for (var i = 0, length = radiosNo.length; i < length; i++) {
                    if (radiosNo[i].checked) {
                        var answerValue = Number(radiosNo[i].value);
                    }
                }
                if (isNaN(answerValue)) {
                    answerValue = 0;
                }
                return answerValue;
            }
    
    var Score = (answerPunkte ('frage1') + answerPunkte ('frage2') + answerPunkte ('frage3') + answerPunkte ('frage4'));
    console.log("Score : " + Score);
    
    
    function richtigeantwort (richtigstr, qNumber){
        console.log("qNumber: " + qNumber);
        return ("Die richtige Antwort für die Frage" + qNumber + ": &nbsp;<strong>" +
                (document.getElementById(richtigstr).innerHTML) + "</strong>");
    }
    
    if (answerPunkte('frage1') === 0) {
            document.getElementById('correctAnswer1').innerHTML = richtigeantwort('correctString1', 1);
        }
        if (answerPunkte('frage2') === 0) {
            document.getElementById('correctAnswer2').innerHTML = richtigeantwort('correctString2', 2);
        }
        if (answerPunkte('frage3') === 0) {
            document.getElementById('correctAnswer3').innerHTML = richtigeantwort('correctString3', 3);
        }
        if (answerPunkte('frage4') === 0) {
            document.getElementById('correctAnswer4').innerHTML = richtigeantwort('correctString4', 4);
        }

    var fragenarray = document.getElementsByClassName('frage');
    
    var fragen = 0;
    for (var i = 0, length = fragenarray.length; i < length; i++) {
        fragen++;
    }
    
    
    var ergebnis = "Dein Ergebnis: " + Score +"/" + fragen;
    if (Score === fragen) {
        ergebnis = ergebnis + "&nbsp; <strong>Super!</strong>"
    };
    document.getElementById('userScore').innerHTML = ergebnis;
}

$(document).ready(function(){
    
    $('#submitButton').click(function() {
        $(this).addClass('hide');                        
});
    
});

Alles anzeigen

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

Beiträge von terminator78

Javascript Quiz - Hide & Show

Javascript Quiz - Hide & Show

Javascript Quiz - Hide & Show

Javascript Quiz - Hide & Show

Javascript Quiz - Hide & Show