Brauche Hilfe bei meinem Javascript Quiz , ich muss einen Zufallsgenerator einbauen=die 3 Frageblöcke beim Aktualiesieren in einer anderen Reihenfolge?
3 Antworten
1) Bringe dein Markup in Ordnung. Es ist schlecht / nicht eingerückt und an einigen Stellen invalid. Beispielsweise fehlt der Doctype, der script-Block gehört in den head oder in den body oder das center-Element ist deprecated (stattdessen wäre der Einsatz von CSS angebracht).
Der Validator kann dir bei diesem Unterfangen helfen. Als aktuelle Referenz solltest du künftig MDN nutzen, denn diese ist aktuell.
2) Setze im head die Zeichenkodierung UTF-8. Dann kannst du dir das Umlaute-Maskieren (ü etc.) sparen.
<meta charset="utf-8">
Statt Leerzeichen mit in das Dokument zu hacken, wäre erneut CSS für das Setzen von Abständen geeigneter.
3) Eine zufällige Reihenfolge wäre eigentlich am besten serverseitig, schon beim Rendern des Dokuments realisierbar. Wenn du das aber mit JavaScript machen sollst, dann lege dir zunächst ein Array an, in dem die Fragen und Antworten des Quiz gespeichert werden:
var quizQuestions = [
{
question: "What color has the sky?",
answers: [ "red", "blue", "yellow", "black" ],
correctAnswerIndex = 1,
color: "#123456",
},
{
question: "Why is the banana crooked?",
answers: [ /* ... */ ],
correctAnswerIndex = /* ... */,
color: /* ... */
}
/* ... */
];
Dann legst du einen Container an, in dem das Quiz liegen soll und stattest diesen mit einer ID aus:
<form id="quiz"></form>
Bei Laden des Dokuments sortierst du das Array zufällig, holst du dir das Container-Element:
var quiz = document.getElementById("quiz");
und iterierst über das Array. Bei jeder Iteration legst du die Elemente für eine Frage mit Antworten an und hängst sie an den Container. Hierbei führen mehrere Wege nach Rom.
- Erstellen, Bearbeiten und Anfügen von Elementen (es gibt noch andere Methoden, schau dir am besten diese Artikel an)
- innerHTML
Für das Setzen der Farbe benötigst du nur eine einzige Funktion, die als Handler für das click-Event an jeden Button gesetzt wird.
Beispiel:
// inside loop:
button.addEventListener("click", function (evt) {
this.style.backgroundColor = color;
});
Das kann nicht funktionieren, schon allein weil du explizit nicht das machst, was ich dir bereits vorgegeben habe, sondern es nochmal anders - falsch - neu schreibst.
Hier ein Beispiel, wie man auf Grundlage eines Arrays neue Elemente in einem HTML-Dokument anlegen kann: https://jsfiddle.net/vfqgxaeL/
Ich habe auch ein Quiz:
Welche Programmiersprache ist in der oberen Abbildung zu sehen?
- Java
- Javascript
- HTML
- C+++++
Beim anklicken der Frage nahm ich an, dass ich Dir mit Java helfen kann. Aber bei Javascript kann ich Dir nicht weiterhelfen.
Genau das gleiche bei mir. Deswegen keine Antwort auf die Frage. ^-^
Ich wollte mich nicht einmischen.
Eigentlich wurde die Hauptfrage schon beantwortet und es ging mir nichts an...
Java != Javascript
Habe es versucht funktioniert aber nicht
</script>
<script>
var arr= new Array(
{ var q1="Sisyphus wurde als.....bezeichnet.",
answers: [ "dumm", "verückt", "sehr schlau", "abendteuerlustig" ],
correctAnswerIndex = 1,
color: "#08ba08",
},
{
var q2="Wofür ist Sisyphus bekannt?",
answers: [ "Für seine Dummheiten","Für die vielen Freveltaten","Für seine Strafe-der Unterwelt","Für seine vielen Liebschaften" ],
correctAnswerIndex =2,
color: "#08ba08",
},
{
var q3="Was wird heute als Sisyphusarbeit bezeichnet?",
answers: [ "einen Felsbrocken hochrollen","immer wiederholende Aufgaben", "große Aufgaben","anstrengende Aufgaben/Tätigkeiten" ],
correctAnswerIndex = 2,
color: "#08ba08",
},
);
document.write(+arr[Math.floor(Math.random() * ((arr.length - 1) - 0 + 1))]);
</script>
<form id="quiz"></form>