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

Update public/index.html

parent 930b7c74
Pipeline #11259 passed with stage
in 8 seconds
Hide whitespace changes
Inline Side-by-side
public/index.html
View file @ 9674d846
...@@ -549,7 +549,7 @@ body { ...@@ -549,7 +549,7 @@ body {
</div> </div>
<!-- AP 8 --> <!-- AP 8 -->
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200" data-topic="transfer""> <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200" data-topic="transfer">
<div class="service-item item-red position-relative"> <div class="service-item item-red position-relative">
<div class="icon"><i class="bi bi-bar-chart"></i></div> <div class="icon"><i class="bi bi-bar-chart"></i></div>
<!--<i class="bi bi-chat-square-text icon"></i>--> <!--<i class="bi bi-chat-square-text icon"></i>-->
...@@ -1344,160 +1344,53 @@ Implementations, and Perspectives ...@@ -1344,160 +1344,53 @@ Implementations, and Perspectives
<script src="assets/js/main.js"></script> <script src="assets/js/main.js"></script>
<!-- for the new ST Juni 2025 --->
<script src="https://d3js.org/d3.v7.min.js"></script>
<script>
const data = [
{ id: 'AP 1.1', group: 'AP1', cluster: 'competence', description: 'Kompetenzmodell entwickeln', x: 50, y: 50 },
{ id: 'AP 1.2', group: 'AP1', cluster: 'competence', description: 'Kompetenzmatrix validieren', x: 250, y: 50 },
{ id: 'AP 2.1', group: 'AP2', cluster: 'ethics', description: 'Ethische KI-Leitlinien', x: 50, y: 180 },
{ id: 'AP 3.1', group: 'AP3', cluster: 'tech', description: 'Learning Analytics Infrastruktur', x: 50, y: 310 },
{ id: 'AP 3.2', group: 'AP3', cluster: 'tech', description: 'Nutzerinterfaces entwickeln', x: 250, y: 310 },
{ id: 'AP 4.1', group: 'AP4', cluster: 'tech', description: 'Adaptive Tests konzipieren', x: 450, y: 310 },
{ id: 'AP 5', group: 'AP5', cluster: 'tech', description: 'Fachspezifische Umsetzung', x: 450, y: 50 },
{ id: 'AP 6', group: 'AP6', cluster: 'competence', description: 'KI-Zertifikate für Lehrende', x: 650, y: 50 },
{ id: 'AP 7', group: 'AP7', cluster: 'dissemination', description: 'Evaluation & Integration', x: 650, y: 180 },
{ id: 'AP 8', group: 'AP8', cluster: 'dissemination', description: 'Textgenerierende KI in Lehre', x: 650, y: 310 }
];
const links = [
{ source: 'AP 1.1', target: 'AP 1.2' },
{ source: 'AP 1.2', target: 'AP 3.1' },
{ source: 'AP 3.1', target: 'AP 3.2' },
{ source: 'AP 3.2', target: 'AP 4.1' },
{ source: 'AP 4.1', target: 'AP 5' },
{ source: 'AP 5', target: 'AP 6' },
{ source: 'AP 6', target: 'AP 7' },
{ source: 'AP 7', target: 'AP 8' }
];
const svg = d3.select("svg");
const width = window.innerWidth;
const height = window.innerHeight;
svg.append("defs").append("marker")
.attr("id", "arrow")
.attr("viewBox", "0 -5 10 10")
.attr("refX", 15)
.attr("refY", 0)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto")
.append("path")
.attr("d", "M0,-5L10,0L0,5")
.attr("fill", "#999");
const g = svg.append("g");
const link = g.selectAll(".link")
.data(links)
.enter()
.append("line")
.attr("class", "link")
.attr("x1", d => data.find(n => n.id === d.source).x + 80)
.attr("y1", d => data.find(n => n.id === d.source).y + 25)
.attr("x2", d => data.find(n => n.id === d.target).x)
.attr("y2", d => data.find(n => n.id === d.target).y + 25);
const node = g.selectAll(".node")
.data(data)
.enter()
.append("g")
.attr("class", "node")
.attr("transform", d => `translate(${d.x},${d.y})`)
.on("click", function(event, d) {
d3.select(this).classed("expanded", !d3.select(this).classed("expanded"));
});
node.append("rect")
.attr("width", 160)
.attr("height", 50)
.attr("fill", "#ccc")
.attr("stroke", "#999");
node.append("text")
.attr("x", 80)
.attr("y", 20)
.attr("text-anchor", "middle")
.text(d => d.id);
node.append("text")
.attr("class", "desc")
.attr("x", 80)
.attr("y", 40)
.attr("text-anchor", "middle")
.text(d => d.description);
d3.selectAll(".tab").on("click", function() {
const tag = this.dataset.tag;
d3.selectAll(".tab").classed("active", false);
d3.select(this).classed("active", true);
node.each(function(d) {
const visible = tag === "ALL" || d.group === tag;
d3.select(this)
.transition().duration(300)
.style("opacity", visible ? 1 : 0.1);
});
link.each(function(d) {
const show = (tag === "ALL" || data.find(n => n.id === d.source).group === tag || data.find(n => n.id === d.target).group === tag);
d3.select(this)
.transition().duration(300)
.style("opacity", show ? 1 : 0.05);
});
});
d3.selectAll("#filter-bar button").on("click", function() {
const filter = this.dataset.filter;
d3.selectAll("#filter-bar button").classed("active", false);
d3.select(this).classed("active", true);
node.each(function(d) {
const visible = filter === "all" || d.cluster === filter;
d3.select(this)
.transition().duration(300)
.style("opacity", visible ? 1 : 0.1);
});
link.each(function(d) {
const show = (filter === "all" || data.find(n => n.id === d.source).cluster === filter || data.find(n => n.id === d.target).cluster === filter);
d3.select(this)
.transition().duration(300)
.style("opacity", show ? 1 : 0.05);
});
});
</script>
<!-- Script für themen --> <!-- Script für themen -->
<script> <script>
function toggleTopic(topicId, btn) { function toggleTopic(topic, button) {
// Obere Beschreibungstexte ausblenden const items = document.querySelectorAll('[data-topic]');
document.querySelectorAll('.topic-details').forEach(el => el.style.display = 'none'); const topicDetails = document.querySelectorAll('.topic-details');
const buttons = document.querySelectorAll('.topic-buttons button');
// Aktuellen Text anzeigen (wenn vorhanden)
const topicEl = document.getElementById('topic-' + topicId); // Alle Buttons zurücksetzen
if (topicEl) topicEl.style.display = 'block'; buttons.forEach(btn => btn.classList.remove('active'));
// Button-Aktivstatus aktualisieren // Aktuellen Button hervorheben
document.querySelectorAll('.topic-buttons button').forEach(b => b.classList.remove('active')); if (button) {
btn.classList.add('active'); button.classList.add('active');
}
// Filter für die AP-Karten
document.querySelectorAll('.tab').forEach(card => { // Thema anzeigen / andere ausblenden
const cardTopic = card.getAttribute('data-topic'); items.forEach(item => {
card.style.display = (cardTopic === topicId) ? 'block' : 'none'; if (item.getAttribute('data-topic') === topic) {
item.style.display = 'block';
} else {
item.style.display = 'none';
}
});
topicDetails.forEach(detail => {
if (detail.id === 'topic-' + topic) {
detail.style.display = 'block';
} else {
detail.style.display = 'none';
}
}); });
} }
function resetTopic() { function resetTopic() {
// Obere Beschreibungen ausblenden const items = document.querySelectorAll('[data-topic]');
document.querySelectorAll('.topic-details').forEach(el => el.style.display = 'none'); const topicDetails = document.querySelectorAll('.topic-details');
const buttons = document.querySelectorAll('.topic-buttons button');
// Alle Buttons deaktivieren buttons.forEach(btn => btn.classList.remove('active'));
document.querySelectorAll('.topic-buttons button').forEach(b => b.classList.remove('active'));
// Alle AP-Karten einblenden items.forEach(item => item.style.display = 'block');
document.querySelectorAll('.tab').forEach(card => card.style.display = 'block'); topicDetails.forEach(detail => detail.style.display = 'block');
} }
</script> </script>
</body> </body>
......
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