Update public/index.html

public/index.html

@@ -296,6 +296,28 @@ body {
 }
 
   
+  .node text {
+      fill: white;
+      font-weight: bold;
+      pointer-events: none;
+    }
+    .link {
+      fill: none;
+      stroke: #999;
+      stroke-width: 2px;
+      marker-end: url(#arrowhead);
+    }
+    .tooltip {
+      position: absolute;
+      padding: 6px;
+      background: rgba(0,0,0,0.7);
+      color: white;
+      border-radius: 4px;
+      font-size: 0.9em;
+      pointer-events: none;
+      opacity: 0;
+      transition: opacity 0.3s;
+    }
 
 </style>
 
@@ -522,26 +544,145 @@ body {
    <!-- Neue section in Juni 2025 -->
 
         <!-- Neue Section für interaktive Arbeitspakete -->
-    <h2>KNIGHT Projektprozess - Arbeitspakete</h2>
-  <div class="mermaid">
-    graph LR
-      AP1[AP1: Kompetenzmatrix für KI]
-      AP2[AP2: Ethische Leitlinien]
-      AP3[AP3: Learning Analytics Infrastruktur]
-      AP4[AP4: Adaptive Tests]
-      AP5[AP5: Fachspezifische Programmierung]
-      AP6[AP6: KI-Kompetenz stärken]
-      AP7[AP7: Evaluation & Verankerung]
-      AP8[AP8: Textgenerierende KI]
-
-      AP1 --> AP3
-      AP2 --> AP6
-      AP3 --> AP4
-      AP4 --> AP5
-      AP5 --> AP6
-      AP6 --> AP7
-      AP8 --> AP7
-  </div>
+   <h2>KNIGHT Projektprozess - Arbeitspakete</h2>
+
+<div id="diagram"></div>
+<div class="tooltip" id="tooltip"></div>
+
+<script>
+  const width = 900, height = 500;
+
+  const nodes = [
+    { id: "AP1", title: "Kompetenzmatrix für KI", description: "Interdisziplinäre KI-Kompetenzen entwickeln" },
+    { id: "AP2", title: "Ethische Leitlinien", description: "Verantwortungsvoller KI-Einsatz" },
+    { id: "AP3", title: "Learning Analytics Infrastruktur", description: "Technische Basis für KI-Werkzeuge" },
+    { id: "AP4", title: "Adaptive Tests", description: "KI-gestützte Bewertung und Schwierigkeitsvorhersage" },
+    { id: "AP5", title: "Fachspezifische Programmierung", description: "Individuelle Lernpfade in Programmierung" },
+    { id: "AP6", title: "KI-Kompetenz stärken", description: "Weiterbildung für Lernende und Lehrende" },
+    { id: "AP7", title: "Evaluation & Verankerung", description: "Ergebnisse verbreiten & Integration" },
+    { id: "AP8", title: "Textgenerierende KI", description: "Didaktischer Einsatz von ChatGPT & Co." }
+  ];
+
+  const links = [
+    { source: "AP1", target: "AP3" },
+    { source: "AP2", target: "AP6" },
+    { source: "AP3", target: "AP4" },
+    { source: "AP4", target: "AP5" },
+    { source: "AP5", target: "AP6" },
+    { source: "AP6", target: "AP7" },
+    { source: "AP8", target: "AP7" }
+  ];
+
+  const svg = d3.select("#diagram").append("svg")
+    .attr("width", width)
+    .attr("height", height)
+    .call(d3.zoom().on("zoom", (event) => {
+      g.attr("transform", event.transform);
+    }));
+
+  svg.append("defs").append("marker")
+    .attr("id", "arrowhead")
+    .attr("viewBox", "-0 -5 10 10")
+    .attr("refX", 23)
+    .attr("refY", 0)
+    .attr("orient", "auto")
+    .attr("markerWidth", 8)
+    .attr("markerHeight", 8)
+    .attr("xoverflow", "visible")
+    .append("svg:path")
+    .attr("d", "M 0,-5 L 10 ,0 L 0,5")
+    .attr("fill", "#999")
+    .style("stroke", "none");
+
+  const g = svg.append("g");
+
+  // Simulation setup
+  const simulation = d3.forceSimulation(nodes)
+    .force("link", d3.forceLink(links).id(d => d.id).distance(180))
+    .force("charge", d3.forceManyBody().strength(-600))
+    .force("center", d3.forceCenter(width / 2, height / 2));
+
+  // Draw links
+  const link = g.append("g")
+    .attr("stroke", "#999")
+    .selectAll("line")
+    .data(links)
+    .join("line")
+    .attr("class", "link")
+    .attr("marker-end", "url(#arrowhead)");
+
+  // Draw nodes
+  const node = g.append("g")
+    .selectAll("g")
+    .data(nodes)
+    .join("g")
+    .attr("class", "node")
+    .call(drag(simulation));
+
+  node.append("rect")
+    .attr("width", 180)
+    .attr("height", 70)
+    .attr("x", -90)
+    .attr("y", -35)
+    .attr("rx", 10)
+    .attr("ry", 10)
+    .on("mouseover", (event, d) => showTooltip(event, d))
+    .on("mouseout", hideTooltip);
+
+  node.append("text")
+    .attr("text-anchor", "middle")
+    .attr("y", -10)
+    .text(d => d.title);
+
+  node.append("text")
+    .attr("text-anchor", "middle")
+    .attr("y", 15)
+    .attr("font-size", "0.75em")
+    .text(d => d.id);
+
+  simulation.on("tick", () => {
+    // Update links
+    link
+      .attr("x1", d => d.source.x)
+      .attr("y1", d => d.source.y)
+      .attr("x2", d => d.target.x)
+      .attr("y2", d => d.target.y);
+
+    // Update nodes
+    node.attr("transform", d => `translate(${d.x},${d.y})`);
+  });
+
+  // Dragging functions
+  function drag(simulation) {
+    function dragstarted(event, d) {
+      if (!event.active) simulation.alphaTarget(0.3).restart();
+      d.fx = d.x; d.fy = d.y;
+    }
+    function dragged(event, d) {
+      d.fx = event.x; d.fy = event.y;
+    }
+    function dragended(event, d) {
+      if (!event.active) simulation.alphaTarget(0);
+      d.fx = null; d.fy = null;
+    }
+    return d3.drag()
+      .on("start", dragstarted)
+      .on("drag", dragged)
+      .on("end", dragended);
+  }
+
+  // Tooltip functions
+  const tooltip = d3.select("#tooltip");
+  function showTooltip(event, d) {
+    tooltip.style("opacity", 1)
+      .html(`<strong>${d.title}</strong><br>${d.description}`)
+      .style("left", (event.pageX + 10) + "px")
+      .style("top", (event.pageY + 10) + "px");
+  }
+  function hideTooltip() {
+    tooltip.style("opacity", 0);
+  }
+</script>
 
    <!-- ende neue section in Juni 2025-->