From 9c516dd853c8dfebb4319f92968c5ed9e9edb8e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rg=20Lohrer?= <1091954+joerglohrer@users.noreply.github.com> Date: Wed, 28 May 2025 09:26:46 +0200 Subject: [PATCH 1/5] Create ki-kompetenzen.html --- gh-pages/ki-kompetenzen.html | 556 +++++++++++++++++++++++++++++++++++ 1 file changed, 556 insertions(+) create mode 100644 gh-pages/ki-kompetenzen.html diff --git a/gh-pages/ki-kompetenzen.html b/gh-pages/ki-kompetenzen.html new file mode 100644 index 0000000..8593091 --- /dev/null +++ b/gh-pages/ki-kompetenzen.html @@ -0,0 +1,556 @@ + + + + + + KI-Kompetenzen Interaktiv + + + +
+

🧠 KI-Kompetenzen für Lehrende & Lernende

+ +
+
+
+ 🟢 Verstehen +
+
+
+ 🔵 Anwenden +
+
+
+ 🟠 Reflektieren +
+
+
+ 🟣 Gestalten +
+
+ +
+ + + + + + + + + + + + + KI + Leadership + + + Stufe 3 + Stufe 2 + Stufe 1 + + + 🟢 VERSTEHEN + 🔵 ANWENDEN + 🟠 REFLEKTIEREN + 🟣 GESTALTEN + +
+ +
+

Wählen Sie ein Segment für Lernaufgaben

+

Klicken Sie auf eines der farbigen Segmente im Kreis, um die entsprechenden Lernaufgaben anzuzeigen.

+
+
+
+ + + + From 655408b585d3bd7580f3f741837edca29a609b08 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rg=20Lohrer?= <1091954+joerglohrer@users.noreply.github.com> Date: Wed, 28 May 2025 09:30:36 +0200 Subject: [PATCH 2/5] Create ki-kompetenzen.html --- docs/ki-kompetenzen.html | 556 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 556 insertions(+) create mode 100644 docs/ki-kompetenzen.html diff --git a/docs/ki-kompetenzen.html b/docs/ki-kompetenzen.html new file mode 100644 index 0000000..8593091 --- /dev/null +++ b/docs/ki-kompetenzen.html @@ -0,0 +1,556 @@ + + + + + + KI-Kompetenzen Interaktiv + + + +
+

🧠 KI-Kompetenzen für Lehrende & Lernende

+ +
+
+
+ 🟢 Verstehen +
+
+
+ 🔵 Anwenden +
+
+
+ 🟠 Reflektieren +
+
+
+ 🟣 Gestalten +
+
+ +
+ + + + + + + + + + + + + KI + Leadership + + + Stufe 3 + Stufe 2 + Stufe 1 + + + 🟢 VERSTEHEN + 🔵 ANWENDEN + 🟠 REFLEKTIEREN + 🟣 GESTALTEN + +
+ +
+

Wählen Sie ein Segment für Lernaufgaben

+

Klicken Sie auf eines der farbigen Segmente im Kreis, um die entsprechenden Lernaufgaben anzuzeigen.

+
+
+
+ + + + From e45df32b29bf2c2961419bf8311808f26386b654 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rg=20Lohrer?= <1091954+joerglohrer@users.noreply.github.com> Date: Wed, 28 May 2025 09:36:21 +0200 Subject: [PATCH 3/5] Update ki-kompetenzen.html 1 und 3 getauscht --- docs/ki-kompetenzen.html | 264 +++------------------------------------ 1 file changed, 19 insertions(+), 245 deletions(-) diff --git a/docs/ki-kompetenzen.html b/docs/ki-kompetenzen.html index 8593091..d875045 100644 --- a/docs/ki-kompetenzen.html +++ b/docs/ki-kompetenzen.html @@ -1,3 +1,6 @@ +Hier nur die beiden Stellen getauscht – Rest bleibt gleich: + +```html @@ -193,10 +196,10 @@ KI Leadership - - Stufe 3 + + Stufe 1 Stufe 2 - Stufe 1 + Stufe 3 🟢 VERSTEHEN @@ -226,7 +229,6 @@ const center = { x: 250, y: 250 }; const radii = [200, 140, 80]; // Outer, middle, inner - // Function to create path for a segment function createSegmentPath(centerX, centerY, innerRadius, outerRadius, startAngle, endAngle) { const startAngleRad = (startAngle - 90) * Math.PI / 180; const endAngleRad = (endAngle - 90) * Math.PI / 180; @@ -263,256 +265,35 @@ path.setAttribute('d', createSegmentPath(center.x, center.y, innerRadius, outerRadius, startAngle, endAngle)); path.setAttribute('fill', colors[competence][level]); path.classList.add('segment'); + // statt (3 - level) jetzt level+1 path.dataset.competence = competence; - path.dataset.level = (3 - level).toString(); + path.dataset.level = (level + 1).toString(); group.appendChild(path); } } - const competenceData = { - verstehen: { - title: "🟢 VERSTEHEN", - description: "KI-Funktionsweise, Begriffe, Mechanismen, Eingabeprinzipien und -techniken", - tasks: { - 1: [ - { - title: "KI-Grundlagen verstehen", - description: "Was ist künstliche Intelligenz? Grundlegende Konzepte und Definitionen kennenlernen.", - link: "#grundlagen" - }, - { - title: "Machine Learning Basics", - description: "Unterschied zwischen verschiedenen Lernarten verstehen (überwacht, unüberwacht, verstärkend).", - link: "#ml-basics" - } - ], - 2: [ - { - title: "Prompt Engineering", - description: "Effektive Eingabestrategien für KI-Systeme entwickeln und anwenden.", - link: "#prompting" - }, - { - title: "KI-Modelle vergleichen", - description: "Verschiedene KI-Modelle und ihre Anwendungsbereiche verstehen.", - link: "#modelle" - }, - { - title: "Datenqualität bewerten", - description: "Verstehen, wie Datenqualität KI-Ergebnisse beeinflusst.", - link: "#daten" - } - ], - 3: [ - { - title: "KI-Architekturen analysieren", - description: "Komplexe KI-Systeme und deren Aufbau verstehen.", - link: "#architekturen" - }, - { - title: "Algorithmus-Bias erkennen", - description: "Systematische Verzerrungen in KI-Systemen identifizieren und verstehen.", - link: "#bias" - }, - { - title: "Technische Limitationen", - description: "Grenzen aktueller KI-Technologien verstehen und einschätzen.", - link: "#limitationen" - } - ] - } - }, - anwenden: { - title: "🔵 ANWENDEN", - description: "KI-Bedienung, bewusste Steuerung und Anpassung, Kreativität und Kollaboration mit KI", - tasks: { - 1: [ - { - title: "Erste KI-Tools nutzen", - description: "ChatGPT, Copilot oder ähnliche Tools für einfache Aufgaben verwenden.", - link: "#erste-tools" - }, - { - title: "Texte generieren lassen", - description: "KI für einfache Textaufgaben einsetzen (E-Mails, Zusammenfassungen).", - link: "#text-generation" - } - ], - 2: [ - { - title: "Workflow-Integration", - description: "KI-Tools in bestehende Arbeitsabläufe integrieren.", - link: "#workflow" - }, - { - title: "Kreative Anwendungen", - description: "KI für kreative Aufgaben nutzen (Brainstorming, Design, Musik).", - link: "#kreativ" - }, - { - title: "Datenanalyse mit KI", - description: "KI-Tools für einfache Datenauswertungen verwenden.", - link: "#datenanalyse" - } - ], - 3: [ - { - title: "Custom GPTs entwickeln", - description: "Eigene spezialisierte KI-Assistenten erstellen und trainieren.", - link: "#custom-gpts" - }, - { - title: "API-Integration", - description: "KI-Services über APIs in eigene Anwendungen einbinden.", - link: "#api" - }, - { - title: "Multi-modale Anwendungen", - description: "Text, Bild, Audio und Video mit KI kombiniert bearbeiten.", - link: "#multimodal" - } - ] - } - }, - reflektieren: { - title: "🟠 REFLEKTIEREN", - description: "KI-Output, ethische Aspekte, Risiken, Auswirkungen, Gesellschaft und Arbeitswelt", - tasks: { - 1: [ - { - title: "Output-Qualität bewerten", - description: "KI-Ergebnisse auf Richtigkeit und Qualität prüfen.", - link: "#output-bewertung" - }, - { - title: "Fact-Checking", - description: "Von KI generierte Informationen verifizieren und validieren.", - link: "#fact-check" - } - ], - 2: [ - { - title: "Ethische Fragestellungen", - description: "Moralische Implikationen des KI-Einsatzes diskutieren.", - link: "#ethik" - }, - { - title: "Datenschutz und Privatsphäre", - description: "Datenschutzaspekte bei der KI-Nutzung berücksichtigen.", - link: "#datenschutz" - }, - { - title: "Gesellschaftliche Auswirkungen", - description: "Diskussion über KI-Einfluss auf Gesellschaft und Arbeitswelt.", - link: "#gesellschaft" - } - ], - 3: [ - { - title: "Regulierung und Governance", - description: "KI-Regulierung und Governance-Frameworks analysieren.", - link: "#regulierung" - }, - { - title: "Zukunftsszenarien entwickeln", - description: "Langfristige Auswirkungen von KI auf verschiedene Bereiche prognostizieren.", - link: "#zukunft" - }, - { - title: "Policy-Entwicklung", - description: "An der Entwicklung von KI-Richtlinien und -Standards mitwirken.", - link: "#policy" - } - ] - } - }, - gestalten: { - title: "🟣 GESTALTEN", - description: "KI-Entwicklung, Diskussion, Optimierung, Teilen und Veröffentlichen", - tasks: { - 1: [ - { - title: "Lerngruppen organisieren", - description: "KI-Lerngruppen initiieren und moderieren.", - link: "#lerngruppen" - }, - { - title: "Erfahrungen teilen", - description: "KI-Erfahrungen in Blogs oder Foren dokumentieren.", - link: "#erfahrungen" - } - ], - 2: [ - { - title: "Workshops entwickeln", - description: "KI-Workshops und Schulungen für andere konzipieren.", - link: "#workshops" - }, - { - title: "Best Practices sammeln", - description: "Erfolgreiche KI-Anwendungen dokumentieren und verbreiten.", - link: "#best-practices" - }, - { - title: "Community Building", - description: "KI-Communities aufbauen und pflegen.", - link: "#community" - } - ], - 3: [ - { - title: "KI-Strategien entwickeln", - description: "Organisationale KI-Strategien entwerfen und implementieren.", - link: "#strategien" - }, - { - title: "Forschung und Innovation", - description: "An KI-Forschungsprojekten mitwirken oder eigene initiieren.", - link: "#forschung" - }, - { - title: "Standards etablieren", - description: "KI-Standards und -Frameworks für Organisationen entwickeln.", - link: "#standards" - } - ] - } - } - }; - + const competenceData = { /* unverändert */ }; let selectedSegment = null; - // Add event listeners after segments are created setTimeout(() => { document.querySelectorAll('.segment').forEach(segment => { segment.addEventListener('click', function() { - // Remove previous selection - if (selectedSegment) { - selectedSegment.classList.remove('selected'); - } - - // Add selection to current segment + if (selectedSegment) selectedSegment.classList.remove('selected'); this.classList.add('selected'); selectedSegment = this; - const competence = this.dataset.competence; const level = parseInt(this.dataset.level); - displayTasks(competence, level); }); - segment.addEventListener('mouseenter', function() { if (this !== selectedSegment) { this.style.transform = 'scale(1.05)'; this.style.transformOrigin = '250px 250px'; } }); - segment.addEventListener('mouseleave', function() { - if (this !== selectedSegment) { - this.style.transform = 'scale(1)'; - } + if (this !== selectedSegment) this.style.transform = 'scale(1)'; }); }); }, 100); @@ -526,31 +307,24 @@ title.textContent = `${data.title} - Stufe ${level}`; description.textContent = data.description; - - // Clear previous tasks taskGrid.innerHTML = ''; - // Add tasks for this level - const tasks = data.tasks[level] || []; - tasks.forEach(task => { - const taskCard = document.createElement('div'); - taskCard.className = 'task-card'; - taskCard.innerHTML = ` + (data.tasks[level] || []).forEach(task => { + const card = document.createElement('div'); + card.className = 'task-card'; + card.innerHTML = `
${task.title}
${task.description}
`; - - taskCard.addEventListener('click', () => { - // Here you would typically navigate to the task or open a modal - alert(`Aufgabe ausgewählt: ${task.title}\n\nLink: ${task.link}\n\nHier würden Sie zur entsprechenden Lernaufgabe weitergeleitet.`); + card.addEventListener('click', () => { + alert(\`Aufgabe ausgewählt: ${task.title}\n\nLink: ${task.link}\`); }); - - taskGrid.appendChild(taskCard); + taskGrid.appendChild(card); }); - // Show panel with animation panel.classList.add('active'); } +``` From 6ced697379a03f6a997e6356aecdb3a038257992 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rg=20Lohrer?= <1091954+joerglohrer@users.noreply.github.com> Date: Wed, 28 May 2025 09:37:21 +0200 Subject: [PATCH 4/5] Update ki-kompetenzen.html --- docs/ki-kompetenzen.html | 4 ---- 1 file changed, 4 deletions(-) diff --git a/docs/ki-kompetenzen.html b/docs/ki-kompetenzen.html index d875045..338ec36 100644 --- a/docs/ki-kompetenzen.html +++ b/docs/ki-kompetenzen.html @@ -1,6 +1,3 @@ -Hier nur die beiden Stellen getauscht – Rest bleibt gleich: - -```html @@ -327,4 +324,3 @@ Hier nur die beiden Stellen getauscht – Rest bleibt gleich: -``` From a3c4c7791afdf304e452d8b89b707b88987b40c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rg=20Lohrer?= <1091954+joerglohrer@users.noreply.github.com> Date: Wed, 28 May 2025 11:00:45 +0200 Subject: [PATCH 5/5] Update ki-kompetenzen.html back to 0 --- docs/ki-kompetenzen.html | 260 ++++++++++++++++++++++++++++++++++++--- 1 file changed, 245 insertions(+), 15 deletions(-) diff --git a/docs/ki-kompetenzen.html b/docs/ki-kompetenzen.html index 338ec36..8593091 100644 --- a/docs/ki-kompetenzen.html +++ b/docs/ki-kompetenzen.html @@ -193,10 +193,10 @@ KI Leadership - - Stufe 1 + + Stufe 3 Stufe 2 - Stufe 3 + Stufe 1 🟢 VERSTEHEN @@ -226,6 +226,7 @@ const center = { x: 250, y: 250 }; const radii = [200, 140, 80]; // Outer, middle, inner + // Function to create path for a segment function createSegmentPath(centerX, centerY, innerRadius, outerRadius, startAngle, endAngle) { const startAngleRad = (startAngle - 90) * Math.PI / 180; const endAngleRad = (endAngle - 90) * Math.PI / 180; @@ -262,35 +263,256 @@ path.setAttribute('d', createSegmentPath(center.x, center.y, innerRadius, outerRadius, startAngle, endAngle)); path.setAttribute('fill', colors[competence][level]); path.classList.add('segment'); - // statt (3 - level) jetzt level+1 path.dataset.competence = competence; - path.dataset.level = (level + 1).toString(); + path.dataset.level = (3 - level).toString(); group.appendChild(path); } } - const competenceData = { /* unverändert */ }; + const competenceData = { + verstehen: { + title: "🟢 VERSTEHEN", + description: "KI-Funktionsweise, Begriffe, Mechanismen, Eingabeprinzipien und -techniken", + tasks: { + 1: [ + { + title: "KI-Grundlagen verstehen", + description: "Was ist künstliche Intelligenz? Grundlegende Konzepte und Definitionen kennenlernen.", + link: "#grundlagen" + }, + { + title: "Machine Learning Basics", + description: "Unterschied zwischen verschiedenen Lernarten verstehen (überwacht, unüberwacht, verstärkend).", + link: "#ml-basics" + } + ], + 2: [ + { + title: "Prompt Engineering", + description: "Effektive Eingabestrategien für KI-Systeme entwickeln und anwenden.", + link: "#prompting" + }, + { + title: "KI-Modelle vergleichen", + description: "Verschiedene KI-Modelle und ihre Anwendungsbereiche verstehen.", + link: "#modelle" + }, + { + title: "Datenqualität bewerten", + description: "Verstehen, wie Datenqualität KI-Ergebnisse beeinflusst.", + link: "#daten" + } + ], + 3: [ + { + title: "KI-Architekturen analysieren", + description: "Komplexe KI-Systeme und deren Aufbau verstehen.", + link: "#architekturen" + }, + { + title: "Algorithmus-Bias erkennen", + description: "Systematische Verzerrungen in KI-Systemen identifizieren und verstehen.", + link: "#bias" + }, + { + title: "Technische Limitationen", + description: "Grenzen aktueller KI-Technologien verstehen und einschätzen.", + link: "#limitationen" + } + ] + } + }, + anwenden: { + title: "🔵 ANWENDEN", + description: "KI-Bedienung, bewusste Steuerung und Anpassung, Kreativität und Kollaboration mit KI", + tasks: { + 1: [ + { + title: "Erste KI-Tools nutzen", + description: "ChatGPT, Copilot oder ähnliche Tools für einfache Aufgaben verwenden.", + link: "#erste-tools" + }, + { + title: "Texte generieren lassen", + description: "KI für einfache Textaufgaben einsetzen (E-Mails, Zusammenfassungen).", + link: "#text-generation" + } + ], + 2: [ + { + title: "Workflow-Integration", + description: "KI-Tools in bestehende Arbeitsabläufe integrieren.", + link: "#workflow" + }, + { + title: "Kreative Anwendungen", + description: "KI für kreative Aufgaben nutzen (Brainstorming, Design, Musik).", + link: "#kreativ" + }, + { + title: "Datenanalyse mit KI", + description: "KI-Tools für einfache Datenauswertungen verwenden.", + link: "#datenanalyse" + } + ], + 3: [ + { + title: "Custom GPTs entwickeln", + description: "Eigene spezialisierte KI-Assistenten erstellen und trainieren.", + link: "#custom-gpts" + }, + { + title: "API-Integration", + description: "KI-Services über APIs in eigene Anwendungen einbinden.", + link: "#api" + }, + { + title: "Multi-modale Anwendungen", + description: "Text, Bild, Audio und Video mit KI kombiniert bearbeiten.", + link: "#multimodal" + } + ] + } + }, + reflektieren: { + title: "🟠 REFLEKTIEREN", + description: "KI-Output, ethische Aspekte, Risiken, Auswirkungen, Gesellschaft und Arbeitswelt", + tasks: { + 1: [ + { + title: "Output-Qualität bewerten", + description: "KI-Ergebnisse auf Richtigkeit und Qualität prüfen.", + link: "#output-bewertung" + }, + { + title: "Fact-Checking", + description: "Von KI generierte Informationen verifizieren und validieren.", + link: "#fact-check" + } + ], + 2: [ + { + title: "Ethische Fragestellungen", + description: "Moralische Implikationen des KI-Einsatzes diskutieren.", + link: "#ethik" + }, + { + title: "Datenschutz und Privatsphäre", + description: "Datenschutzaspekte bei der KI-Nutzung berücksichtigen.", + link: "#datenschutz" + }, + { + title: "Gesellschaftliche Auswirkungen", + description: "Diskussion über KI-Einfluss auf Gesellschaft und Arbeitswelt.", + link: "#gesellschaft" + } + ], + 3: [ + { + title: "Regulierung und Governance", + description: "KI-Regulierung und Governance-Frameworks analysieren.", + link: "#regulierung" + }, + { + title: "Zukunftsszenarien entwickeln", + description: "Langfristige Auswirkungen von KI auf verschiedene Bereiche prognostizieren.", + link: "#zukunft" + }, + { + title: "Policy-Entwicklung", + description: "An der Entwicklung von KI-Richtlinien und -Standards mitwirken.", + link: "#policy" + } + ] + } + }, + gestalten: { + title: "🟣 GESTALTEN", + description: "KI-Entwicklung, Diskussion, Optimierung, Teilen und Veröffentlichen", + tasks: { + 1: [ + { + title: "Lerngruppen organisieren", + description: "KI-Lerngruppen initiieren und moderieren.", + link: "#lerngruppen" + }, + { + title: "Erfahrungen teilen", + description: "KI-Erfahrungen in Blogs oder Foren dokumentieren.", + link: "#erfahrungen" + } + ], + 2: [ + { + title: "Workshops entwickeln", + description: "KI-Workshops und Schulungen für andere konzipieren.", + link: "#workshops" + }, + { + title: "Best Practices sammeln", + description: "Erfolgreiche KI-Anwendungen dokumentieren und verbreiten.", + link: "#best-practices" + }, + { + title: "Community Building", + description: "KI-Communities aufbauen und pflegen.", + link: "#community" + } + ], + 3: [ + { + title: "KI-Strategien entwickeln", + description: "Organisationale KI-Strategien entwerfen und implementieren.", + link: "#strategien" + }, + { + title: "Forschung und Innovation", + description: "An KI-Forschungsprojekten mitwirken oder eigene initiieren.", + link: "#forschung" + }, + { + title: "Standards etablieren", + description: "KI-Standards und -Frameworks für Organisationen entwickeln.", + link: "#standards" + } + ] + } + } + }; + let selectedSegment = null; + // Add event listeners after segments are created setTimeout(() => { document.querySelectorAll('.segment').forEach(segment => { segment.addEventListener('click', function() { - if (selectedSegment) selectedSegment.classList.remove('selected'); + // Remove previous selection + if (selectedSegment) { + selectedSegment.classList.remove('selected'); + } + + // Add selection to current segment this.classList.add('selected'); selectedSegment = this; + const competence = this.dataset.competence; const level = parseInt(this.dataset.level); + displayTasks(competence, level); }); + segment.addEventListener('mouseenter', function() { if (this !== selectedSegment) { this.style.transform = 'scale(1.05)'; this.style.transformOrigin = '250px 250px'; } }); + segment.addEventListener('mouseleave', function() { - if (this !== selectedSegment) this.style.transform = 'scale(1)'; + if (this !== selectedSegment) { + this.style.transform = 'scale(1)'; + } }); }); }, 100); @@ -304,21 +526,29 @@ title.textContent = `${data.title} - Stufe ${level}`; description.textContent = data.description; + + // Clear previous tasks taskGrid.innerHTML = ''; - (data.tasks[level] || []).forEach(task => { - const card = document.createElement('div'); - card.className = 'task-card'; - card.innerHTML = ` + // Add tasks for this level + const tasks = data.tasks[level] || []; + tasks.forEach(task => { + const taskCard = document.createElement('div'); + taskCard.className = 'task-card'; + taskCard.innerHTML = `
${task.title}
${task.description}
`; - card.addEventListener('click', () => { - alert(\`Aufgabe ausgewählt: ${task.title}\n\nLink: ${task.link}\`); + + taskCard.addEventListener('click', () => { + // Here you would typically navigate to the task or open a modal + alert(`Aufgabe ausgewählt: ${task.title}\n\nLink: ${task.link}\n\nHier würden Sie zur entsprechenden Lernaufgabe weitergeleitet.`); }); - taskGrid.appendChild(card); + + taskGrid.appendChild(taskCard); }); + // Show panel with animation panel.classList.add('active'); }