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

Update public/index.html

parent e554c7dd
Pipeline #11225 passed with stage
in 8 seconds
Hide whitespace changes
Inline Side-by-side
public/index.html
View file @ c49f9a84
...@@ -295,29 +295,142 @@ body { ...@@ -295,29 +295,142 @@ body {
border-color: #007bff; /* blaue Linie beim Hover */ border-color: #007bff; /* blaue Linie beim Hover */
} }
.node text { /* debut juni 25*/
fill: white;
font-weight: bold; const width = 900, height = 500;
pointer-events: none;
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;
} }
.link { function dragged(event, d) {
fill: none; d.fx = event.x; d.fy = event.y;
stroke: #999;
stroke-width: 2px;
marker-end: url(#arrowhead);
} }
.tooltip { function dragended(event, d) {
position: absolute; if (!event.active) simulation.alphaTarget(0);
padding: 6px; d.fx = null; d.fy = null;
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;
} }
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);
}
/* fin juni 25*/
</style> </style>
...@@ -544,145 +657,12 @@ body { ...@@ -544,145 +657,12 @@ body {
<!-- Neue section in Juni 2025 --> <!-- Neue section in Juni 2025 -->
<!-- Neue Section für interaktive Arbeitspakete --> <!-- Neue Section für interaktive Arbeitspakete -->
<h2>KNIGHT Projektprozess - Arbeitspakete</h2> <h2>KNIGHT Projektprozess - Arbeitspakete</h2>
<div id="diagram"></div> <div id="diagram"></div>
<div class="tooltip" id="tooltip"></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--> <!-- 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