Update public/learning-analytics.html

f3c1eb41 · Traboulsi · 48eb40f5 · f3c1eb41
Commit f3c1eb41 authored May 09, 2025 by Traboulsi
--- a/public/learning-analytics.html
+++ b/public/learning-analytics.html
@@ -62,8 +62,8 @@
      border-radius: 8px;
    }
    img {
-         max-width: 100%;
+      max-width: 100%;
-         height: auto;
+      height: auto;
    }
  </style>
  <script>
@@ -79,28 +79,20 @@
          }
        });
      });
+      document.addEventListener('keydown', function (e) {
+        if (e.key === 'Escape') {
+          var modals = document.querySelectorAll('.modal');
+          modals.forEach(function (modal) {
+            modal.classList.remove('show');
+            modal.style.display = 'none';
+          });
+        }
+      });
    });
  </script>
 </head>
 <body>
-  <header id="header" class="header d-flex align-items-center fixed-top">
-    <div class="container-fluid container-xl position-relative d-flex align-items-center">
-      <a href="index.html" class="logo d-flex align-items-center me-auto">
-        <img src="https://www.hft-stuttgart.de/typo3conf/ext/hft_sitepackage/Resources/Public/img/HFT_logo.svg" alt=""> 
-        <h1 class="sitename">KNIGHT</h1>
-      </a>
-      <nav id="navmenu" class="navmenu">
-        <ul>
-          <li><a href="index.html#about" aria-label="Mehr über das Projekt erfahren">Über das Projekt</a></li>
-          <li><a href="index.html#services">Arbeitspakete</a></li>
-          <li><a href="index.html#portfolio">Erkenntnisse</a></li>
-          <li><a href="index.html#team">Projektteam</a></li>
-          <li><a href="index.html#contact">Kontakt</a></li>
-        </ul>
-        <i class="mobile-nav-toggle d-xl-none bi bi-list"></i>
-      </nav>
-    </div>
-  </header>
  <main>
    <section class="hero-section d-flex align-items-center" style="background: #003366; color: white; padding: 60px 0;">
@@ -184,6 +176,40 @@
    </main>
+<!-- added-->
+<section class="container content-section">
+    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#feedbackModal">
+      Mehr zum Feedback-Modell erfahren
+    </button>
+  </section>
+  <!-- Modal -->
+  <div class="modal fade" id="feedbackModal" tabindex="-1" aria-labelledby="feedbackModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="feedbackModalLabel">Feedback-Modell im Detail</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <p>Das entwickelte Feedback-Modell unterscheidet zwischen verhaltensbasiertem Feedback, performancebasiertem Feedback und emotionalem Feedback. Es wurde speziell für die Integration in digitale Lernumgebungen entwickelt und basiert auf Ergebnissen aus der Lernforschung.</p>
+          <ul>
+            <li><strong>Verhaltensbasiert:</strong> Rückmeldungen zur Interaktion mit Lerninhalten</li>
+            <li><strong>Performancebasiert:</strong> Rückmeldung zu Ergebnissen von Tests oder Aufgaben</li>
+            <li><strong>Emotional:</strong> Erkennung von Frustration oder Motivation und entsprechende Rückmeldung</li>
+          </ul>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
+        </div>
+      </div>
+    </div>
+  </div>
+<!-- end of added-->
    <footer id="footer" class="footer">
        <div class="container">
          <p>Zurück zur <a href="index.html">Startseite</a></p>
@@ -198,5 +224,7 @@
      <script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
      <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
      <script src="assets/js/main.js"></script>
 </body>
 </html>