Quiz Seite erstellt und README aktualisiert

README.md

@@ -0,0 +1,58 @@
+# EIS Projekt – Entwicklung interaktiver Softwareanwendungen
+
+Ein interaktives Lernprojekt im Rahmen der Lehrveranstaltung „Entwicklung interaktiver Softwareanwendungen" an der **PH Weingarten**.
+
+🌐 [https://isa4.edumake.de](https://isa4.edumake.de/index.html)
+
+---
+
+## Inhalt
+
+| Datei | Beschreibung |
+|-------|--------------|
+| `index.html` | Startseite mit Projektübersicht |
+| `eis_projekt.html` | Tech-Stack, Features und Lernziele |
+| `team.html` | Teamvorstellung und Fetch-API-Demo |
+| `ueber_uns.html` | Mission und Teamhintergrund |
+| `kontakt.html` | Kontaktformular |
+| `quiz.html` | Mini-Quiz über Web-Entwicklung |
+| `impressum.html` | Rechtliche Pflichtangaben |
+
+---
+
+## Features
+
+- **Begrüßung nach Tageszeit** (js/script.js):
+  - Zeigt je nach Uhrzeit einen anderen Text
+  - in einer anderen Farbe (index.html, css/style.css)
+
+- **Mini-Quiz** (quiz.html, js/quiz.js):
+  - 3 interaktive Fragen zu Web-Entwicklung und PH Weingarten
+  - Direktes Feedback für jede Antwort (richtig/falsch)
+  - Punktezähler und Auswertung am Ende
+  - Responsive Design mit ansprechender Benutzerführung
+  - Verlinkt in der Navigation unter "Übungen"
+
+---
+
+## Tech-Stack
+
+- **HTML5** – Seitenstruktur
+- **CSS3** – Styling und Responsive Layout
+- **JavaScript (ES6+)** – Interaktivität und Fetch API
+- **Git** – Versionskontrolle
+
+---
+
+## Mitwirkende
+
+| Name | Rolle |
+|------|-------|
+| Dylan | Frontend-Entwickler (HTML, CSS, JS, UI/UX) |
+| Leon | Backend-Entwickler (JS, APIs, Datenbanken) |
+
+---
+
+## Lizenz
+
+Dieses Projekt steht unter der MIT-Lizenz.

components/navbar.html

@@ -16,6 +16,7 @@
             <li><a href="textanalyse.html" class="nav-link">Textanalyse</a></li>
             <li><a href="notenrechner-dom.html" class="nav-link">Notenrechner (DOM)</a></li>
             <li><a href="kanban.html" class="nav-link">Kanban Board</a></li>
+            <li><a href="quiz.html" class="nav-link">Mini-Quiz</a></li>
           </ul>
         </li>
         <li><a href="assets/projektinfo.pdf" download class="btn-download">PDF ↓</a></li>

css/style.css

@@ -1,3 +1,18 @@
+/* ====================== BEGRUESSUNG NACH TAGESZEIT ====================== */
+
+#begruessung {
+  font-size: 2.5rem;
+  font-weight: 700;
+  text-align: center;
+  padding: 2rem;
+  border-radius: 12px;
+  transition: all 0.5s ease;
+}
+
+.morgen { color: #d97706; }   /* warmes Orange */
+.tag    { color: #16a34a; }   /* frisches Grün */
+.abend  { color: #4338ca; }   /* tiefes Blau */
+
 /* ====================== RESET & BASICS ====================== */
 
 * {
@@ -2131,6 +2146,204 @@ body.dark .kinetic-btn:hover {
   margin-left: 1.5rem;
 }
 
+/* ====================== QUIZ STYLES ====================== */
+
+.quiz-container {
+  background: white;
+  border-radius: 16px;
+  padding: 2rem;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
+  max-width: 700px;
+  margin: 2rem auto;
+}
+
+.quiz-question {
+  animation: slideIn 0.3s ease;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.question-counter {
+  display: inline-block;
+  background: #667eea;
+  color: white;
+  padding: 0.5rem 1rem;
+  border-radius: 20px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+}
+
+.quiz-question h2 {
+  font-size: 1.5rem;
+  color: #0f172a;
+  margin: 1.5rem 0;
+  line-height: 1.4;
+}
+
+.quiz-answers {
+  display: grid;
+  gap: 1.5rem;
+  margin: 2rem 0;
+}
+
+.answer-btn {
+  padding: 1.75rem 2rem;
+  min-height: 70px;
+  border: 2px solid #cbd5e1;
+  background: white;
+  color: #1e293b;
+  border-radius: 16px;
+  font-size: 1.1rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  text-align: left;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.answer-btn:hover:not(:disabled) {
+  border-color: #667eea;
+  background: linear-gradient(135deg, rgba(102, 126, 234, 0.08), rgba(118, 75, 162, 0.05));
+  transform: translateX(6px) translateY(-2px);
+  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.2);
+}
+
+.answer-btn:disabled {
+  cursor: not-allowed;
+}
+
+.answer-btn.correct {
+  background: linear-gradient(135deg, #dcfce7, #d1fae5);
+  border-color: #16a34a;
+  color: #15803d;
+  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.2);
+}
+
+.answer-btn.incorrect {
+  background: linear-gradient(135deg, #fee2e2, #fecaca);
+  border-color: #dc2626;
+  color: #991b1b;
+  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2);
+}
+
+.feedback {
+  padding: 1rem;
+  border-radius: 12px;
+  font-weight: 600;
+  font-size: 1.1rem;
+  text-align: center;
+  animation: popIn 0.4s ease;
+}
+
+@keyframes popIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.feedback.correct {
+  background: #dcfce7;
+  color: #15803d;
+  border: 2px solid #16a34a;
+}
+
+.feedback.incorrect {
+  background: #fee2e2;
+  color: #991b1b;
+  border: 2px solid #dc2626;
+}
+
+.quiz-progress {
+  margin-top: 2rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid #e2e8f0;
+}
+
+.progress-bar {
+  width: 100%;
+  height: 8px;
+  background: #e2e8f0;
+  border-radius: 10px;
+  overflow: hidden;
+  margin-bottom: 1rem;
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #667eea, #764ba2);
+  transition: width 0.4s ease;
+}
+
+.points-display {
+  text-align: center;
+  color: #64748b;
+  font-size: 0.95rem;
+}
+
+.points-display strong {
+  color: #667eea;
+  font-size: 1.1rem;
+}
+
+.quiz-result {
+  background: white;
+  border-radius: 16px;
+  padding: 2rem;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
+  max-width: 700px;
+  margin: 2rem auto;
+  text-align: center;
+}
+
+.quiz-result h2 {
+  font-size: 2rem;
+  color: #0f172a;
+  margin-bottom: 1rem;
+}
+
+#result-text {
+  font-size: 1.2rem;
+  color: #475569;
+  line-height: 1.8;
+  margin: 1.5rem 0;
+}
+
+/* ====================== RESPONSIVE QUIZ ====================== */
+
+@media (max-width: 768px) {
+  .quiz-container,
+  .quiz-result {
+    padding: 1.5rem;
+    margin: 1rem;
+  }
+
+  .quiz-question h2 {
+    font-size: 1.2rem;
+  }
+
+  .answer-btn {
+    padding: 0.8rem 1rem;
+    font-size: 0.95rem;
+  }
+}
+
 .exercise-card table {
   width: 100%;
   border-collapse: collapse;

index.html

@@ -10,7 +10,6 @@
 </head>
 
 <body>
-
 <main>
 
   <section class="hero kinetic-hero">
@@ -27,6 +26,7 @@
         <span class="word" style="--index: 3">Website!</span>
       </h1>
       <p class="hero-subtitle">Ein interaktives Lernprojekt im Bereich der Web-Entwicklung</p>
+      <p  id="begruessung"></p>
       <div class="scroll-indicator">
         <span>Scroll zum Erkunden</span>
         <svg class="scroll-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -106,5 +106,27 @@
 <script src="js/navbar.js"></script>
 <script src="js/script.js"></script>
 
+<script>
+// Direkte Ausführung der Begrüßung (inline, um sicherzustellen dass es läuft)
+const stunde = new Date().getHours();
+const begruessung = document.getElementById('begruessung');
+
+if (begruessung) {
+  let text;
+  if (stunde < 10) {
+    text = 'Guten Morgen!';
+    begruessung.classList.add('morgen');
+  } else if (stunde < 18) {
+    text = 'Hallo, schön dass du da bist!';
+    begruessung.classList.add('tag');
+  } else {
+    text = 'Guten Abend!';
+    begruessung.classList.add('abend');
+  }
+  begruessung.textContent = text;
+  console.log('Begrüßung gesetzt:', text);
+}
+</script>
+
 </body>
 </html>

js/quiz.js

@@ -0,0 +1,162 @@
+// ====================== QUIZ DATA ======================
+
+const quizData = [
+  {
+    frage: "Welche Aufgabe hat HTML bei der Web-Entwicklung?",
+    antworten: [
+      { text: "Struktur und Inhalte der Webseite", korrekt: true },
+      { text: "Design und visuelle Gestaltung", korrekt: false },
+      { text: "Interaktivität und dynamisches Verhalten", korrekt: false }
+    ]
+  },
+  {
+    frage: "Wo an der PH Weingarten findet die Lehrveranstaltung 'Entwicklung interaktiver Softwareanwendungen' statt?",
+    antworten: [
+      { text: "Universität Konstanz", korrekt: false },
+      { text: "PH Weingarten", korrekt: true },
+      { text: "Universität Stuttgart", korrekt: false }
+    ]
+  },
+  {
+    frage: "Mit welcher Methode kannst du auf ein HTML-Element zugreifen, wenn du seine ID kennst?",
+    antworten: [
+      { text: "document.getElementByName()", korrekt: false },
+      { text: "document.getElementById()", korrekt: true },
+      { text: "document.selectElement()", korrekt: false }
+    ]
+  }
+];
+
+// ====================== QUIZ STATE ======================
+
+let currentQuestion = 0;
+let points = 0;
+let answeredQuestions = new Set();
+
+// ====================== INIT ======================
+
+function initQuiz() {
+  currentQuestion = 0;
+  points = 0;
+  answeredQuestions = new Set();
+  displayQuestion();
+}
+
+// ====================== DISPLAY QUESTION ======================
+
+function displayQuestion() {
+  const container = document.getElementById('quiz-container');
+  const resultContainer = document.getElementById('quiz-result');
+
+  // Quiz beendet
+  if (currentQuestion >= quizData.length) {
+    container.style.display = 'none';
+    resultContainer.style.display = 'block';
+    displayResult();
+    return;
+  }
+
+  // Frage anzeigen
+  resultContainer.style.display = 'none';
+  container.style.display = 'block';
+
+  const question = quizData[currentQuestion];
+  
+  container.innerHTML = `
+    <div class="quiz-question">
+      <div class="question-counter">Frage ${currentQuestion + 1} von ${quizData.length}</div>
+      <h2>${question.frage}</h2>
+      
+      <div class="quiz-answers">
+        ${question.antworten.map((antwort, index) => `
+          <button class="answer-btn" data-index="${index}" onclick="answerQuestion(${index})">
+            ${antwort.text}
+          </button>
+        `).join('')}
+      </div>
+      
+      <div id="feedback" class="feedback" style="display: none;"></div>
+      
+      <div class="quiz-progress">
+        <div class="progress-bar">
+          <div class="progress-fill" style="width: ${((currentQuestion + 1) / quizData.length) * 100}%"></div>
+        </div>
+        <p class="points-display">Punkte: <strong>${points}</strong>/${quizData.length}</p>
+      </div>
+    </div>
+  `;
+}
+
+// ====================== ANSWER QUESTION ======================
+
+function answerQuestion(answerIndex) {
+  // Verhindere mehrfaches Antworten bei gleicher Frage
+  if (answeredQuestions.has(currentQuestion)) {
+    return;
+  }
+  answeredQuestions.add(currentQuestion);
+
+  const question = quizData[currentQuestion];
+  const selectedAnswer = question.antworten[answerIndex];
+  const feedbackEl = document.getElementById('feedback');
+  const buttons = document.querySelectorAll('.answer-btn');
+
+  // Buttons deaktivieren
+  buttons.forEach(btn => btn.disabled = true);
+
+  // Feedback geben
+  if (selectedAnswer.korrekt) {
+    points++;
+    feedbackEl.textContent = '✅ Richtig!';
+    feedbackEl.className = 'feedback correct';
+    buttons[answerIndex].classList.add('correct');
+  } else {
+    feedbackEl.textContent = `❌ Falsch! Die richtige Antwort ist: "${question.antworten.find(a => a.korrekt).text}"`;
+    feedbackEl.className = 'feedback incorrect';
+    buttons[answerIndex].classList.add('incorrect');
+    
+    // Richtige Antwort auch als grün markieren
+    const correctIndex = question.antworten.findIndex(a => a.korrekt);
+    buttons[correctIndex].classList.add('correct');
+  }
+
+  feedbackEl.style.display = 'block';
+
+  // Nächste Frage nach Verzögerung
+  setTimeout(() => {
+    currentQuestion++;
+    displayQuestion();
+  }, 2000);
+}
+
+// ====================== DISPLAY RESULT ======================
+
+function displayResult() {
+  const resultText = document.getElementById('result-text');
+  const percentage = Math.round((points / quizData.length) * 100);
+
+  let message = '';
+  if (points === quizData.length) {
+    message = `🌟 Perfekt! Du hast alle ${quizData.length} Fragen richtig beantwortet!`;
+  } else if (points >= quizData.length * 0.66) {
+    message = `👍 Sehr gut! Du hast ${points} von ${quizData.length} Fragen richtig (${percentage}%).`;
+  } else if (points >= quizData.length * 0.33) {
+    message = `📚 Okay! Du hast ${points} von ${quizData.length} Fragen richtig (${percentage}%). Mehr lernen hilft!`;
+  } else {
+    message = `💪 Nicht so schlecht! Du hast ${points} von ${quizData.length} Fragen richtig (${percentage}%). Nächstes Mal besser!`;
+  }
+
+  resultText.textContent = message;
+}
+
+// ====================== RESTART QUIZ ======================
+
+document.addEventListener('DOMContentLoaded', function() {
+  const restartBtn = document.getElementById('restart-btn');
+  if (restartBtn) {
+    restartBtn.addEventListener('click', initQuiz);
+  }
+  
+  // Quiz starten
+  initQuiz();
+});

js/script.js

@@ -1,3 +1,26 @@
+// ====================== BEGRUESSUNG NACH TAGESZEIT ======================
+
+document.addEventListener('DOMContentLoaded', function() {
+  const stunde = new Date().getHours();
+  const el = document.getElementById('begruessung');
+  let text;
+
+  if (el) {
+    if (stunde < 10) {
+      text = 'Guten Morgen!';
+      el.classList.add('morgen');
+    } else if (stunde < 18) {
+      text = 'Hallo, schön dass du da bist!';
+      el.classList.add('tag');
+    } else {
+      text = 'Guten Abend!';
+      el.classList.add('abend');
+    }
+
+    el.textContent = text;
+  }
+});
+
 // ====================== CONTACT FORM VALIDATION ======================
 
 const contactForm = document.getElementById('contactForm');

kanban.html

@@ -12,6 +12,8 @@
 
 <body>
 
+<script src="js/navbar.js"></script>
+
 <main class="kanban-main">
   <section class="kanban-header">
     <h1>📊 Kanban Board</h1>

quiz.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Mini-Quiz - EIS Projekt</title>
+  <link rel="icon" href="img/favicon.png" type="image/png">
+  <link rel="stylesheet" href="css/style.css">
+</head>
+
+<body>
+
+<main>
+  <section class="content-section">
+    <h1 class="section-title">EIS Mini-Quiz</h1>
+    <p class="section-subtitle">Teste dein Wissen über Web-Entwicklung und unsere PH Weingarten!</p>
+    
+    <div id="quiz-container" class="quiz-container">
+      <!-- Quiz wird hier per JavaScript eingefügt -->
+    </div>
+
+    <div id="quiz-result" class="quiz-result" style="display: none;">
+      <h2>🎉 Quiz abgeschlossen!</h2>
+      <p id="result-text"></p>
+      <button id="restart-btn" class="btn btn-primary" style="margin-top: 1.5rem;">Nochmal spielen</button>
+    </div>
+  </section>
+</main>
+
+<footer>
+  <div class="footer-content">
+    <div class="footer-section">
+      <h3>Kontakt</h3>
+      <p>E-Mail: <a href="mailto:info@beispiel.de">info@beispiel.de</a></p>
+    </div>
+    <div class="footer-section">
+      <h3>Links</h3>
+      <ul>
+        <li><a href="impressum.html">Impressum</a></li>
+        <li><a href="ueber_uns.html">Über uns</a></li>
+        <li><a href="team.html">Team</a></li>
+      </ul>
+    </div>
+    <div class="footer-section">
+      <p>&copy; 2025 – EIS Lernprojekt an der PH Weingarten</p>
+    </div>
+  </div>
+</footer>
+
+<script src="js/navbar.js"></script>
+<script src="js/quiz.js"></script>
+
+</body>
+</html>