Skip to content
GitLab
Commit 904773a8 authored by Traboulsi's avatar Traboulsi
Browse files

Update public/index.html

parent 90928aa1
Pipeline #11222 passed with stage
in 9 seconds
Hide whitespace changes
Inline Side-by-side
public/index.html
View file @ 904773a8
...@@ -295,6 +295,34 @@ body { ...@@ -295,6 +295,34 @@ body {
border-color: #007bff; /* blaue Linie beim Hover */ border-color: #007bff; /* blaue Linie beim Hover */
} }
section#project-flow {
padding: 40px 20px;
background: white;
max-width: 1200px;
margin: 40px auto;
box-shadow: 0 4px 8px rgb(0 0 0 / 0.1);
border-radius: 8px;
}
section#project-flow h2 {
text-align: center;
margin-bottom: 12px;
color: #2a7a9a;
}
section#project-flow p {
text-align: center;
margin-bottom: 30px;
font-size: 1.1em;
color: #555;
}
#flowchart-container {
width: 100%;
height: 600px;
border: 1px solid #ddd;
border-radius: 6px;
background-color: #fff;
}
</style> </style>
<!-- ======================================================= <!-- =======================================================
...@@ -519,94 +547,71 @@ body { ...@@ -519,94 +547,71 @@ body {
<!-- Neue section in Juni 2025 --> <!-- Neue section in Juni 2025 -->
<!-- Arbeitsprozess Section --> <!-- Neue Section für interaktive Arbeitspakete -->
<section id="arbeitsprozess" class="arbeitsprozess section" style="padding: 60px 20px; background: #f9f9f9;"> <section id="project-flow">
<div class="container"> <h2>Projektprozess & Arbeitspakete</h2>
<h2 style="text-align:center; margin-bottom: 40px;">Arbeitsprozess der Arbeitspakete</h2> <p>Visualisierung der intelligenten Prozessstruktur und KI-Integration im KNIGHT-Projekt.</p>
<div id="flowchart-container"></div>
<div style="max-width: 1000px; margin: 0 auto; position: relative;"> </section>
<!-- AP-Boxen als flexibles Grid -->
<div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;">
<!-- AP1 -->
<a href="ki-kompetenzen.html" class="ap-box" style="flex: 1 1 300px; background: #00bcd4; color: white; padding: 20px; border-radius: 8px; text-decoration: none; box-shadow: 0 3px 6px rgba(0,0,0,0.1);">
<h3>AP 1: Kompetenzmatrix für KI</h3>
<p>Interdisziplinäre Kompetenzmatrix zur Orientierung und Validierung mit Learning Analytics.</p>
</a>
<!-- Pfeil -->
<div style="align-self: center; font-size: 24px; color: #00bcd4;">→</div>
<!-- AP2 -->
<a href="ki-ethik.html" class="ap-box" style="flex: 1 1 300px; background: #f44336; color: white; padding: 20px; border-radius: 8px; text-decoration: none; box-shadow: 0 3px 6px rgba(0,0,0,0.1);">
<h3>AP 2: Ethische Leitlinien</h3>
<p>Werterahmen und konkrete ethische Leitlinien für den Umgang mit KI in der Hochschulbildung.</p>
</a>
<!-- Pfeil -->
<div style="align-self: center; font-size: 24px; color: #f44336;">→</div>
<!-- AP3 -->
<a href="learning-analytics.html" class="ap-box" style="flex: 1 1 300px; background: #ff9800; color: white; padding: 20px; border-radius: 8px; text-decoration: none; box-shadow: 0 3px 6px rgba(0,0,0,0.1);">
<h3>AP 3: Learning-Analytics-Infrastruktur</h3>
<p>Technische Infrastruktur und KI-gestützte Werkzeuge für Learning Analytics und Interaktionsanalysen.</p>
</a>
</div>
<!-- Zweite Reihe -->
<div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 40px;">
<!-- AP4 -->
<a href="adaptives-testen.html" class="ap-box" style="flex: 1 1 300px; background: #00bcd4; color: white; padding: 20px; border-radius: 8px; text-decoration: none; box-shadow: 0 3px 6px rgba(0,0,0,0.1);">
<h3>AP 4: Adaptive Tests</h3>
<p>Leistungsadaptive Tests mit KI-Methoden zur Bewertung und Schwierigkeitsvorhersage.</p>
</a>
<!-- Pfeil -->
<div style="align-self: center; font-size: 24px; color: #00bcd4;">→</div>
<!-- AP5 -->
<a href="personalisiertes-lernen.html" class="ap-box" style="flex: 1 1 300px; background: #009688; color: white; padding: 20px; border-radius: 8px; text-decoration: none; box-shadow: 0 3px 6px rgba(0,0,0,0.1);">
<h3>AP 5: Fachspezifische Programmierung</h3>
<p>Individuelle Lernpfade und Aufgaben mit KI-Anpassung für Programmierfähigkeiten.</p>
</a>
<!-- Pfeil -->
<div style="align-self: center; font-size: 24px; color: #009688;">→</div>
<!-- AP6 -->
<a href="study-dean-cockpit.html" class="ap-box" style="flex: 1 1 300px; background: #3f51b5; color: white; padding: 20px; border-radius: 8px; text-decoration: none; box-shadow: 0 3px 6px rgba(0,0,0,0.1);">
<h3>AP 6: KI-Kompetenz stärken</h3>
<p>Weiterbildungsangebote für Studierende und Lehrende zur Stärkung der KI-Kompetenz.</p>
</a>
</div>
<!-- Dritte Reihe -->
<div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 40px;">
<!-- AP8 -->
<a href="generative-ki-schreibseminar.html" class="ap-box" style="flex: 1 1 300px; background: #ffeb3b; color: #333; padding: 20px; border-radius: 8px; text-decoration: none; box-shadow: 0 3px 6px rgba(0,0,0,0.1);">
<h3>AP 8: Textgenerierende KI in der Lehre</h3>
<p>Didaktisch reflektierter Einsatz von KI-Systemen wie ChatGPT in Schreibseminaren und Programmiermodulen.</p>
</a>
<!-- Pfeil -->
<div style="align-self: center; font-size: 24px; color: #ffeb3b;">→</div>
<!-- AP7 -->
<a href="projekt-evaluation.html" class="ap-box" style="flex: 1 1 300px; background: #e91e63; color: white; padding: 20px; border-radius: 8px; text-decoration: none; box-shadow: 0 3px 6px rgba(0,0,0,0.1);">
<h3>AP 7: Evaluation & Projektverankerung</h3>
<p>Evaluation, Dissemination und Vorbereitung der Integration in den Lehrplan.</p>
</a>
</div>
</div> <!-- GoJS Script laden -->
</div> <script src="https://unpkg.com/gojs/release/go.js"></script>
</section>
<script>
const $ = go.GraphObject.make;
const myDiagram = $(go.Diagram, "flowchart-container", {
"undoManager.isEnabled": true,
layout: $(go.LayeredDigraphLayout, { direction: 0 }),
"toolManager.hoverDelay": 100,
"toolManager.tooltipDelay": 200,
});
// Node Template mit Tooltip
myDiagram.nodeTemplate =
$(go.Node, "Auto",
{
toolTip:
$(go.Adornment, "Auto",
$(go.Shape, { fill: "#ffffcc" }),
$(go.TextBlock, { margin: 6, maxSize: new go.Size(200, NaN), font: "12px Arial", wrap: go.TextBlock.WrapFit },
new go.Binding("text", "desc"))
)
},
$(go.Shape, "RoundedRectangle",
{ fill: "#4caf50", strokeWidth: 0, stroke: null, cursor: "pointer" },
new go.Binding("fill", "color")
),
$(go.TextBlock,
{ margin: 8, stroke: "white", font: "bold 14px sans-serif", textAlign: "center" },
new go.Binding("text", "name"))
);
// Daten der Arbeitspakete mit Beschreibung und Farbe
const nodeDataArray = [
{ key: 1, name: "AP1: Kompetenzmatrix für KI", desc: "Entwicklung einer interdisziplinären Kompetenzmatrix für KI-Kompetenzen in der Hochschulbildung. Validierung via Learning Analytics.", color: "#2196f3" },
{ key: 2, name: "AP2: Ethische Leitlinien", desc: "Formulierung ethischer Leitlinien für KI-Nutzung in der Hochschulbildung, Leitung Prof. Popović.", color: "#f44336" },
{ key: 3, name: "AP3: Learning Analytics Infrastruktur", desc: "Technische Infrastruktur für Learning Analytics und KI-Werkzeuge, inkl. Digital Educational Mirror.", color: "#ff9800" },
{ key: 4, name: "AP4: Adaptive Tests", desc: "Entwicklung KI-gestützter adaptiver Tests zur automatischen Bewertung und Schwierigkeitsvorhersage.", color: "#00bcd4" },
{ key: 5, name: "AP5: Fachspezifische Programmierung", desc: "Personalisierte Lernpfade zur Förderung von Programmierfähigkeiten mit KI-Unterstützung.", color: "#009688" },
{ key: 6, name: "AP6: KI-Kompetenz stärken", desc: "Weiterbildungsangebote für Studierende und Lehrende zur Stärkung technischer und ethischer KI-Kompetenz.", color: "#673ab7" },
{ key: 7, name: "AP7: Evaluation & Verankerung", desc: "Evaluation der Ansätze, Dissemination via Workshops und Integration in den Lehrplan.", color: "#e91e63" },
{ key: 8, name: "AP8: Textgenerierende KI", desc: "Didaktisch reflektierter Einsatz von KI-Systemen wie ChatGPT in der Lehre zur Förderung kritischer Nutzung.", color: "#ffeb3b" }
];
// Beziehungen (Pfeile) zwischen den Arbeitspaketen
const linkDataArray = [
{ from: 1, to: 3 },
{ from: 2, to: 6 },
{ from: 3, to: 4 },
{ from: 4, to: 5 },
{ from: 5, to: 6 },
{ from: 6, to: 7 },
{ from: 8, to: 7 }
];
myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
</script>
<!-- ende neue section in Juni 2025--> <!-- ende neue section in Juni 2025-->
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal