Hallo,
ich Code jetzt seit 1 Woche und bin grade dabei mein erstes Quiz zu erstellen.
Dabei habe ich ein Problem und vielleicht hat hier wer Lust mir zu helfen.
Die Var f1-f4 werden nicht initialisiert also ich kann mit diesem Code einfach nichts machen.
Es wird auch leider kein Fehler in der Konsole angezeigt.
ich Code jetzt seit 1 Woche und bin grade dabei mein erstes Quiz zu erstellen.
Dabei habe ich ein Problem und vielleicht hat hier wer Lust mir zu helfen.
Die Var f1-f4 werden nicht initialisiert also ich kann mit diesem Code einfach nichts machen.
Es wird auch leider kein Fehler in der Konsole angezeigt.
Java script code:
function submitAnswers() {
var numQuestions = 4; // anzahl der fragen
var answers = ['a', 'c', 'a', 'b']; // lösung
var score = 0;
var name = document.querySelector('input[name="name]').value;
var f1 = document.getElementById(`input[name="f1"]:checked`).value;
var f2 = document.querySelector(`input[name="f2"]:checked`).value;
var f3 = document.querySelector(`input[name="f3"]:checked`).value;
var f4 = document.querySelector(`input[name="f4"]:checked`).value; // daher wissen wir was angeklickt wurde
for (i = 1; i <= numQuestions; i++) {
// <-- erledigt für alle fragen dann muss man den gleichen code nicht für 4 fragen schreiben
if (eval(`f` + i) == null || eval(`f` + i) == ``) {
eval('Folgende Antwort fehlt noch' + i);
return false;
}
}
for (i = 1; i <= numQuestions; i++) {
// <-- schaut ob die fragen richtig sind wenn ja gibt es einen Punkt
if (eval('f' + i) == answers[i - 1]) {
score++;
}
}
var results = document.getElementById(`results`);
results.innerHTML =
`<h3>` +
name +
`Du hast <span>` +
score +
`</span von <span` +
numQuestions +
`</span> Punkten erreicht! </h3>`;
if (score == numQuestions) {
eval(name + `Du hast alle fragen richtig beantwortet!!`);
} else if (score >= 1) {
eval(name + `Du hast` + score + `von` + numQuestions + `Punkte erreicht!`);
} else {
eval('Das war wohl nichts, du hast alle fragen falsch beantwortet!');
}
return false;
}
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Quiz</title>
<link rel="stylesheet" type="Text/css" href="style.css" />
</head>
<body>
<script src="java.js"></script>
<div id="container">
<header>
<h1>
Quiz viel spaß!!!!
</h1>
<p>text</p>
</header>
<section>
<form>
Wie ist dein Name:
<br />
<input type="text" name="name" id="name" />
<br />
</form>
<div id="results"></div>
<form name="quizform" onsubmit="return submitAnswers()">
<h3>Wofür steht das H1 Tag</h3>
<input type="radio" name="f1" value="a" id="f1a" />
a. große Überschrift
<br />
<input type="radio" name="f1" value="b" id="f1b" />
b. große Überschrift
<br />
<input type="radio" name="f1" value="c" id="f1c" />
c. große Überschrift
<br />
<input type="radio" name="f1" value="d" id="f1d" />
d. große Überschrift
<br />
<h3>Wofür steht das H1 Tag</h3>
<input type="radio" name="f2" value="a" id="f2a" />
a. große Überschrift
<br />
<input type="radio" name="f2" value="b" id="f2b" />
b. große Überschrift
<br />
<input type="radio" name="f2" value="c" id="f2c" />
c. große Überschrift
<br />
<input type="radio" name="f2" value="d" id="f2d" />
d. große Überschrift
<br />
<h3>Wofür steht das H1 Tag</h3>
<input type="radio" name="f3" value="a" id="f3a" />
a. große Überschrift
<br />
<input type="radio" name="f3" value="b" id="f3b" />
b. große Überschrift
<br />
<input type="radio" name="f3" value="c" id="f3c" />
c. große Überschrift
<br />
<input type="radio" name="f3" value="d" id="f3d" />
d. große Überschrift
<br />
<h3>Wofür steht das H1 Tag</h3>
<input type="radio" name="f4" value="a" id="f4a" />
a. große Überschrift
<br />
<input type="radio" name="f4" value="b" id="f4b" />
b. große Überschrift
<br />
<input type="radio" name="f4" value="c" id="f4c" />
c. große Überschrift
<br />
<input type="radio" name="f4" value="d" id="f4d" />
d. große Überschrift
<br />
<br />
<input type="submit" value="Antwort Abschicken" />
</form>
</section>
</div>
</body>
</html>