komane/eis-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Quiz: Auswertung; README aktualisiert

Browse source
This commit is contained in:
Tahar Lamred & Theresa Nerz 2026-06-18 10:48:24 +02:00
parent bd61feae73
commit 6e8452d131
11 changed files with 178 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
README.md
View file

@ -29,8 +29,10 @@
- **eis_project.html** — Projektbeschreibung
- **imprint.html** — Impressum
- **notenrechner.html** — Notenberechnungstool
- **css/style.css** — Layout, Farben, Dark Mode, Tageszeit-Farben
- **quiz.html** — Mini-Quiz mit drei Fragen
- **css/style.css** — Layout, Farben, Dark Mode, Tageszeit-Farben, Quiz-Design
- **js/script.js** — Begrüßung, Tageszeit-Farben, Dark Mode, Galerie-Zoom
- **js/quiz.js** — Quiz-Logik, direkte Rückmeldung, Auswertung
- **img/Logo.png** — Logo der Website
- **assets/** — zusätzliche Dateien (Medien, Dokumente)
- **.gitignore** — Ausschlussregeln für Git
@ -56,5 +58,5 @@
- **index.html → css/style.css**
- **index.html → img/Logo.png**
- **index.html → imprint.html**
- **Navigation → about_us.html, contact.html, eis_project.html, notenrechner.html**
- **Navigation → about_us.html, contact.html, eis_project.html, quiz.html, notenrechner.html**
- **Unterseiten → ../css/style.css** (eine Ebene höher)

14
about_us.html
View file

@ -12,8 +12,6 @@
<body>
<header>
<header>
<!-- Centered Logo -->
<div class="logo-container">
<img src="./img/Logo.png" alt="Logo">
@ -25,6 +23,7 @@
<a href="index.html">Home</a>
<a href="about_us.html">About Us</a>
<a href="eis_project.html">Project</a>
<a href="quiz.html">Quiz</a>
<a href="contact.html">Contact</a>
<a href="imprint.html">Imprint</a>
<a href="notenrechner.html">Notenrechner</a>
@ -32,8 +31,6 @@
<button id="dark-mode-toggle">Dark Mode</button>
</nav>
</header>
</header>
<main>
@ -44,12 +41,5 @@
<p>&copy; 2026 – EIS Learning Project</p>
</footer>
<script>
const toggle = document.getElementById('dark-mode-toggle');
toggle.addEventListener('click', () => {
document.body.classList.toggle('dark');
});
</script>
</body>
<script src="js/script.js"></script>
</html>

1
contact.html
View file

@ -19,6 +19,7 @@
<a href="index.html">Home</a>
<a href="about_us.html">About Us</a>
<a href="eis_project.html">Project</a>
<a href="quiz.html">Quiz</a>
<a href="contact.html">Contact</a>
<a href="imprint.html">Imprint</a>
<a href="notenrechner.html">Notenrechner</a>

1
eis_project.html
View file

@ -19,6 +19,7 @@
<a href="index.html">Home</a>
<a href="about_us.html">About Us</a>
<a href="eis_project.html">Project</a>
<a href="quiz.html">Quiz</a>
<a href="contact.html">Contact</a>
<a href="imprint.html">Imprint</a>
<a href="notenrechner.html">Notenrechner</a>

1
imprint.html
View file

@ -19,6 +19,7 @@
<a href="index.html">Home</a>
<a href="about_us.html">About Us</a>
<a href="eis_project.html">Project</a>
<a href="quiz.html">Quiz</a>
<a href="contact.html">Contact</a>
<a href="imprint.html">Imprint</a>
<a href="notenrechner.html">Notenrechner</a>

11
index.html
View file

@ -22,6 +22,7 @@
<a href="index.html">Home</a>
<a href="about_us.html">About Us</a>
<a href="eis_project.html">Project</a>
<a href="quiz.html">Quiz</a>
<a href="contact.html">Contact</a>
<a href="imprint.html">Imprint</a>
<a href="notenrechner.html">Notenrechner</a>
@ -42,16 +43,6 @@
<p>&copy; 2026 – EIS Learning Project</p>
</footer>
<!-- Dark Mode Script -->
<script>
document.addEventListener("DOMContentLoaded", () => {
const toggle = document.getElementById("dark-mode-toggle");
toggle.addEventListener("click", () => {
document.body.classList.toggle("dark");
});
});
</script>
<!-- Externe script.js -->
<script src="js/script.js"></script>

26
js/notenrechner.js
View file

@ -3,32 +3,6 @@ document.addEventListener("DOMContentLoaded", () => {
const button = document.getElementById("berechnen");
const ergebnis = document.getElementById("ergebnis");
const balken = document.getElementById("balken");
const darkToggle = document.getElementById("darkmode-toggle");
// -----------------------------
// Dark Mode Toggle
// -----------------------------
if (darkToggle) {
// gespeicherten Modus laden
if (localStorage.getItem("darkmode") === "on") {
document.body.classList.add("dark");
darkToggle.textContent = "☀️ Light Mode";
} else {
darkToggle.textContent = "🌙 Dark Mode";
}
darkToggle.addEventListener("click", () => {
document.body.classList.toggle("dark");
if (document.body.classList.contains("dark")) {
localStorage.setItem("darkmode", "on");
darkToggle.textContent = "☀️ Light Mode";
} else {
localStorage.setItem("darkmode", "off");
darkToggle.textContent = "🌙 Dark Mode";
}
});
}
// -----------------------------
// Notenrechner Logik

104
js/quiz.js Normal file
View file

@ -0,0 +1,104 @@
const quizData = [
{
question: "Wie viele Tage hat der Februar in einem Schaltjahr?",
answers: ["28", "29", "30"],
correct: 1,
},
{
question: "Was bedeutet EIS in der Kursbezeichnung?",
answers: ["Einführung in Informationstechnologien", "Entwicklung interaktiver Systeme", "Elektronische Informationssysteme"],
correct: 2,
},
{
question: "Welches HTML-Element wird für einen Link verwendet?",
answers: ["<span>", "<a>", "<button>"],
correct: 1,
},
];
let currentQuestion = 0;
let score = 0;
const questionEl = document.getElementById("quiz-question");
const answersEl = document.getElementById("quiz-answers");
const feedbackEl = document.getElementById("quiz-feedback");
const nextButton = document.getElementById("next-button");
const scoreEl = document.getElementById("quiz-score");
const progressEl = document.getElementById("quiz-progress");
function loadQuestion() {
const current = quizData[currentQuestion];
progressEl.textContent = `Frage ${currentQuestion + 1} von ${quizData.length}`;
questionEl.textContent = current.question;
feedbackEl.textContent = "";
feedbackEl.className = "feedback";
nextButton.disabled = true;
nextButton.textContent = currentQuestion < quizData.length - 1 ? "Nächste Frage" : "Auswertung anzeigen";
answersEl.innerHTML = "";
current.answers.forEach((answerText, index) => {
const button = document.createElement("button");
button.type = "button";
button.className = "answer-button";
button.textContent = answerText;
button.addEventListener("click", () => handleAnswer(index));
answersEl.appendChild(button);
});
}
function handleAnswer(selectedIndex) {
const current = quizData[currentQuestion];
const buttons = [...answersEl.querySelectorAll("button")];
buttons.forEach((button, index) => {
button.disabled = true;
if (index === current.correct) {
button.classList.add("correct-answer");
}
if (index === selectedIndex && index !== current.correct) {
button.classList.add("wrong-answer");
}
});
if (selectedIndex === current.correct) {
score += 1;
feedbackEl.textContent = "Richtig! Gut gemacht.";
feedbackEl.classList.add("correct");
} else {
feedbackEl.textContent = `Falsch. Die richtige Antwort ist: ${current.answers[current.correct]}.`;
feedbackEl.classList.add("wrong");
}
scoreEl.textContent = `Punkte: ${score}/${quizData.length}`;
nextButton.disabled = false;
}
function showResult() {
progressEl.textContent = "Quiz beendet";
questionEl.textContent = `Du hast ${score} von ${quizData.length} Fragen richtig beantwortet.`;
answersEl.innerHTML = "";
nextButton.style.display = "none";
const finalText = document.createElement("p");
finalText.className = "quiz-final";
if (score === quizData.length) {
finalText.textContent = "Perfekt! Du hast alle Fragen richtig beantwortet.";
} else if (score >= quizData.length - 1) {
finalText.textContent = "Sehr gut! Nur eine Frage wurde nicht ganz korrekt beantwortet.";
} else {
finalText.textContent = "Gut gemacht! Du kannst das Quiz später wiederholen, um noch mehr zu lernen.";
}
feedbackEl.textContent = "";
feedbackEl.className = "feedback";
answersEl.appendChild(finalText);
}
nextButton.addEventListener("click", () => {
currentQuestion += 1;
if (currentQuestion < quizData.length) {
loadQuestion();
} else {
showResult();
}
});
loadQuestion();

23
js/script.js
View file

@ -28,19 +28,20 @@ console.log("Meine Seite läuft!");
// ---------------------------------------------
document.addEventListener("DOMContentLoaded", () => {
const toggle = document.getElementById("dark-mode-toggle");
const storageKey = "darkMode";
// gespeicherten Zustand wiederherstellen
if (localStorage.getItem("darkMode") === "true") {
document.body.classList.add("dark");
toggle.textContent = "Light Mode";
if (!toggle) {
return;
}
// Klick-Event
const isDarkMode = localStorage.getItem(storageKey) === "true";
document.body.classList.toggle("dark", isDarkMode);
toggle.textContent = isDarkMode ? "Light Mode" : "Dark Mode";
toggle.addEventListener("click", () => {
document.body.classList.toggle("dark");
const isDark = document.body.classList.contains("dark");
localStorage.setItem("darkMode", isDark);
toggle.textContent = isDark ? "Light Mode" : "Dark Mode";
const currentDark = document.body.classList.toggle("dark");
localStorage.setItem(storageKey, currentDark);
toggle.textContent = currentDark ? "Light Mode" : "Dark Mode";
});
});
@ -52,6 +53,10 @@ document.addEventListener("DOMContentLoaded", () => {
const stunde = new Date().getHours();
const el = document.getElementById("begruessung");
if (!el) {
return;
}
let text = "";
if (stunde < 10) {

4
notenrechner.html
View file

@ -4,6 +4,7 @@
<meta charset="UTF-8">
<title>Notenrechner</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js" defer></script>
<script src="js/notenrechner.js" defer></script>
</head>
<body>
@ -16,10 +17,11 @@
<li><a href="eis_project.html">Project</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="imprint.html">Imprint</a></li>
<li><a href="quiz.html">Quiz</a></li>
<li><a href="notenrechner.html" class="active">Notenrechner</a></li>
</ul>
<button id="darkmode-toggle" class="darkmode-button">🌙 Dark Mode</button>
<button id="dark-mode-toggle" class="darkmode-button">🌙 Dark Mode</button>
</nav>
</header>

47
quiz.html Normal file
View file

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Mini-Quiz</title>
<link rel="icon" href="img/favicon.png" type="image/png">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="logo-container">
<img src="./img/Logo.png" alt="Logo">
</div>
<nav>
<div class="nav-links">
<a href="index.html">Home</a>
<a href="about_us.html">About Us</a>
<a href="eis_project.html">Project</a>
<a href="quiz.html">Quiz</a>
<a href="contact.html">Contact</a>
<a href="imprint.html">Imprint</a>
<a href="notenrechner.html">Notenrechner</a>
</div>
<button id="dark-mode-toggle">Dark Mode</button>
</nav>
</header>
<main>
<section class="quiz-container">
<h1>Mini-Quiz</h1>
<p>Teste dein Wissen mit drei Fragen. Wähle die richtige Antwort aus und erhalte direktes Feedback.</p>
<div class="quiz-card">
<p id="quiz-progress">Frage 1 von 3</p>
<h2 id="quiz-question"></h2>
<div id="quiz-answers" class="answer-list"></div>
<p id="quiz-feedback" class="feedback"></p>
<button id="next-button" class="quiz-next" disabled>Weiter</button>
<p id="quiz-score" class="quiz-score">Punkte: 0/3</p>
</div>
</section>
</main>
<footer>
<p>&copy; 2026 – EIS Learning Project</p>
</footer>
<script src="js/quiz.js"></script>
<script src="js/script.js"></script>
</body>
</html>