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...
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 + ": <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 + " <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