Quiz: erste Frage mit Feedback
This commit is contained in:
parent
69212b8e46
commit
0c7abb353c
2 changed files with 31 additions and 2 deletions
24
js/quiz.js
24
js/quiz.js
|
|
@ -1 +1,23 @@
|
||||||
console.log("Quiz lädt")
|
// 1. Elemente aus der HTML-Seite heraussuchen
|
||||||
|
const buttonA = document.getElementById("btn-antwort-a");
|
||||||
|
const buttonB = document.getElementById("btn-antwort-b");
|
||||||
|
const buttonC = document.getElementById("btn-antwort-c");
|
||||||
|
const feedback = document.getElementById("feedback");
|
||||||
|
|
||||||
|
// 2. Logik für den ersten Button (Falsche Antwort)
|
||||||
|
buttonA.addEventListener("click", function() {
|
||||||
|
feedback.textContent = "Leider falsch! ❌ Versuche es noch einmal.";
|
||||||
|
feedback.style.color = "red";
|
||||||
|
});
|
||||||
|
|
||||||
|
// 3. Logik für den zweiten Button (Richtige Antwort)
|
||||||
|
buttonB.addEventListener("click", function() {
|
||||||
|
feedback.textContent = "Richtig! 🎉 Gute Arbeit.";
|
||||||
|
feedback.style.color = "green";
|
||||||
|
});
|
||||||
|
|
||||||
|
// 4. Logik für den dritten Button (Falsche Antwort)
|
||||||
|
buttonC.addEventListener("click", function() {
|
||||||
|
feedback.textContent = "Leider falsch! ❌ Versuche es noch einmal.";
|
||||||
|
feedback.style.color = "red";
|
||||||
|
});
|
||||||
|
|
@ -30,7 +30,14 @@
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<div id="quiz"></div>
|
<div class="question-container">
|
||||||
|
<h2>Frage 1: Wofür brauchen wir JavaScript</h2>
|
||||||
|
<button class="Design" data-correct="false">Antwort A</button>
|
||||||
|
<button class="Dynamik" data-correct="true">Antwort B (Richtig)</button>
|
||||||
|
<button class="Struktur" data-correct="false">Antwort C</button>
|
||||||
|
|
||||||
|
<p id="feedback-1"></p>
|
||||||
|
</div>
|
||||||
<h2></h2>
|
<h2></h2>
|
||||||
<p><p>
|
<p><p>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue