viewof position = {
const width = 380;
const height = 380;
const margin = 40;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", "100%")
.attr("max-width", width)
.style("cursor", "crosshair")
.style("background", "#fafafa")
.style("border", "1px solid #ddd")
.style("border-radius", "8px");
// Quadrant backgrounds
const quadrantColors = ["#e8f5e9", "#fff3e0", "#e3f2fd", "#fce4ec"];
const quadrants = [
{x: margin, y: margin, label: "Optimistisch\n& wenig Erfahrung"},
{x: width/2, y: margin, label: "Optimistisch\n& viel Erfahrung"},
{x: margin, y: height/2, label: "Skeptisch\n& wenig Erfahrung"},
{x: width/2, y: height/2, label: "Skeptisch\n& viel Erfahrung"}
];
quadrants.forEach((q, i) => {
svg.append("rect")
.attr("x", q.x)
.attr("y", q.y)
.attr("width", (width - 2*margin) / 2)
.attr("height", (height - 2*margin) / 2)
.attr("fill", quadrantColors[i])
.attr("opacity", 0.5);
});
// Axes
svg.append("line")
.attr("x1", margin)
.attr("y1", height/2)
.attr("x2", width - margin)
.attr("y2", height/2)
.attr("stroke", "#333")
.attr("stroke-width", 2);
svg.append("line")
.attr("x1", width/2)
.attr("y1", margin)
.attr("x2", width/2)
.attr("y2", height - margin)
.attr("stroke", "#333")
.attr("stroke-width", 2);
// Axis labels (inside the diagram)
svg.append("text")
.attr("x", width - margin - 5)
.attr("y", height/2 - 8)
.attr("text-anchor", "end")
.attr("font-size", "10px")
.attr("fill", "#555")
.text("Viel Erfahrung →");
svg.append("text")
.attr("x", margin + 5)
.attr("y", height/2 - 8)
.attr("text-anchor", "start")
.attr("font-size", "10px")
.attr("fill", "#555")
.text("← Wenig");
svg.append("text")
.attr("x", width/2 + 8)
.attr("y", margin + 15)
.attr("text-anchor", "start")
.attr("font-size", "10px")
.attr("fill", "#555")
.text("↑ Optimistisch");
svg.append("text")
.attr("x", width/2 + 8)
.attr("y", height - margin - 8)
.attr("text-anchor", "start")
.attr("font-size", "10px")
.attr("fill", "#555")
.text("↓ Skeptisch");
// Marker
const marker = svg.append("circle")
.attr("r", 10)
.attr("fill", "#A3195B")
.attr("stroke", "white")
.attr("stroke-width", 3)
.attr("visibility", "hidden");
// Click handler
let currentPos = null;
svg.on("click", function(event) {
const [x, y] = d3.pointer(event);
if (x >= margin && x <= width - margin && y >= margin && y <= height - margin) {
marker
.attr("cx", x)
.attr("cy", y)
.attr("visibility", "visible");
// Convert to -1 to 1 scale
const normX = ((x - margin) / (width - 2*margin)) * 2 - 1;
const normY = -(((y - margin) / (height - 2*margin)) * 2 - 1);
currentPos = {x: normX.toFixed(2), y: normY.toFixed(2)};
svg.node().value = currentPos;
svg.node().dispatchEvent(new Event("input"));
}
});
svg.node().value = null;
return svg.node();
}Ankommen
Der Elefant im Raum
ScenarioSzenario
Stelle dir vor: Jemand aus deinem Kurs hat eine hervorragende Arbeit abgegeben.
Kannst du sicher sein, dass sie selbst gedacht hat?
Und wenn nicht: Was bedeutet das für deine Lehre?
Was wir heute klären
Dieser Workshop beantwortet drei Fragen:
| Frage | Fokus |
|---|---|
| Was ist KI? | Wie funktioniert das eigentlich? |
| Wofür kann KI verwendet werden? | Möglichkeiten und Grenzen |
| Wofür sollte ich KI verwenden? | Wann ist es sinnvoll, wann nicht? |
Die dritte Frage ist die wichtigste.
Wo stehst du?
ExperimentMarkiere deine Position
Klicke auf das Koordinatensystem, um deine Position zu markieren:
- X-Achse: Wie viel Erfahrung hast du mit KI-Tools?
- Y-Achse: Wie stehst du zu KI in der Lehre?
ExperimentKurzer Austausch
Zeig deiner Nachbarin oder deinem Nachbarn deine Position. Tauscht euch kurz aus:
- Wo habt ihr euch platziert?
- Was hat eure Einschätzung geprägt?
Was wir heute nicht tun
Wir werden nicht behaupten, dass KI gut oder schlecht ist.
Stattdessen: Gemeinsam herausfinden, wann KI das Lernen unterstützt und wann sie es behindert.