split_attention_fig = {
const w = 960;
const h = 340;
const fs = 14;
const fsSmall = 12;
const integrated = format_toggle === "integrated";
const svg = d3.create("svg")
.attr("viewBox", `0 0 ${w} ${h}`)
.attr("width", "100%")
.attr("height", "100%")
.style("font-family", "Space Grotesk, sans-serif")
.style("background", "transparent")
.style("max-height", "340px");
// Triangle geometry — compact vertical layout
const triCx = integrated ? w / 2 : w * 0.25;
const triCy = integrated ? h * 0.45 : h * 0.48;
const sz = 105;
const A = { x: triCx, y: triCy - sz };
const B = { x: triCx - sz * 0.9, y: triCy + sz * 0.6 };
const C = { x: triCx + sz * 0.9, y: triCy + sz * 0.6 };
// Triangle
svg.append("polygon")
.attr("points", `${A.x},${A.y} ${B.x},${B.y} ${C.x},${C.y}`)
.attr("fill", "none")
.attr("stroke", "#1A1714")
.attr("stroke-width", 2);
// Angle arc at A
const arcR = 22;
const angAB = Math.atan2(B.y - A.y, B.x - A.x);
const angAC = Math.atan2(C.y - A.y, C.x - A.x);
svg.append("path")
.attr("d", `M ${A.x + arcR * Math.cos(angAB)} ${A.y + arcR * Math.sin(angAB)} A ${arcR} ${arcR} 0 0 1 ${A.x + arcR * Math.cos(angAC)} ${A.y + arcR * Math.sin(angAC)}`)
.attr("fill", "none").attr("stroke", "#A63D2F").attr("stroke-width", 1.5);
// Arcs at B and C
const arcS = 16;
const bA1 = Math.atan2(A.y - B.y, A.x - B.x);
const bA2 = Math.atan2(C.y - B.y, C.x - B.x);
svg.append("path")
.attr("d", `M ${B.x + arcS * Math.cos(bA2)} ${B.y + arcS * Math.sin(bA2)} A ${arcS} ${arcS} 0 0 1 ${B.x + arcS * Math.cos(bA1)} ${B.y + arcS * Math.sin(bA1)}`)
.attr("fill", "none").attr("stroke", "#1E3A5F").attr("stroke-width", 1.5);
const cA1 = Math.atan2(B.y - C.y, B.x - C.x);
const cA2 = Math.atan2(A.y - C.y, A.x - C.x);
svg.append("path")
.attr("d", `M ${C.x + arcS * Math.cos(cA2)} ${C.y + arcS * Math.sin(cA2)} A ${arcS} ${arcS} 0 0 1 ${C.x + arcS * Math.cos(cA1)} ${C.y + arcS * Math.sin(cA1)}`)
.attr("fill", "none").attr("stroke", "#1E3A5F").attr("stroke-width", 1.5);
// Vertex labels — positioned outside the triangle
svg.append("text").attr("x", A.x).attr("y", A.y - 12).attr("text-anchor", "middle").attr("font-size", fs).attr("font-weight", "bold").text("A");
svg.append("text").attr("x", B.x - 14).attr("y", B.y + 16).attr("text-anchor", "middle").attr("font-size", fs).attr("font-weight", "bold").text("B");
svg.append("text").attr("x", C.x + 14).attr("y", C.y + 16).attr("text-anchor", "middle").attr("font-size", fs).attr("font-weight", "bold").text("C");
// Angle label at A — inside the triangle below the arc
svg.append("text").attr("x", A.x).attr("y", A.y + 38).attr("text-anchor", "middle").attr("font-size", fs).attr("fill", "#A63D2F").attr("font-weight", "600").text("68°");
// Side label — offset to the left of side AB
const abNorm = Math.atan2(B.y - A.y, B.x - A.x) + Math.PI / 2;
svg.append("text")
.attr("x", (A.x + B.x) / 2 + 18 * Math.cos(abNorm))
.attr("y", (A.y + B.y) / 2 + 18 * Math.sin(abNorm))
.attr("text-anchor", "middle")
.attr("font-size", fsSmall)
.attr("fill", "#555")
.attr("transform", `rotate(${angAB * 180 / Math.PI}, ${(A.x + B.x) / 2 + 18 * Math.cos(abNorm)}, ${(A.y + B.y) / 2 + 18 * Math.sin(abNorm)})`)
.text("AB = AC");
// Tick marks for equal sides
const tickLen = 7;
const abMid = { x: (A.x + B.x) / 2, y: (A.y + B.y) / 2 };
const abAng = Math.atan2(B.y - A.y, B.x - A.x) + Math.PI / 2;
svg.append("line").attr("x1", abMid.x + tickLen * Math.cos(abAng)).attr("y1", abMid.y + tickLen * Math.sin(abAng)).attr("x2", abMid.x - tickLen * Math.cos(abAng)).attr("y2", abMid.y - tickLen * Math.sin(abAng)).attr("stroke", "#1A1714").attr("stroke-width", 1.5);
const acMid = { x: (A.x + C.x) / 2, y: (A.y + C.y) / 2 };
const acAng = Math.atan2(C.y - A.y, C.x - A.x) + Math.PI / 2;
svg.append("line").attr("x1", acMid.x + tickLen * Math.cos(acAng)).attr("y1", acMid.y + tickLen * Math.sin(acAng)).attr("x2", acMid.x - tickLen * Math.cos(acAng)).attr("y2", acMid.y - tickLen * Math.sin(acAng)).attr("stroke", "#1A1714").attr("stroke-width", 1.5);
if (integrated) {
// INTEGRATED FORMAT
// "Gesucht" above triangle
svg.append("text").attr("x", triCx).attr("y", A.y - 30).attr("text-anchor", "middle").attr("font-size", fs).attr("fill", "#1E3A5F").attr("font-weight", "500").text("Gesucht: Winkel B und C");
// Answer labels near B and C angles — outside, below the vertex labels
svg.append("text").attr("x", B.x + 22).attr("y", B.y - 8).attr("text-anchor", "start").attr("font-size", fs).attr("fill", "#1E3A5F").attr("font-weight", "600").text("56°");
svg.append("text").attr("x", C.x - 22).attr("y", C.y - 8).attr("text-anchor", "end").attr("font-size", fs).attr("fill", "#1E3A5F").attr("font-weight", "600").text("56°");
// Solution steps below triangle — compact two-line summary
const stepY = B.y + 36;
svg.append("text").attr("x", triCx).attr("y", stepY).attr("text-anchor", "middle").attr("font-size", fsSmall).attr("fill", "#555").attr("font-weight", "500").text("AB = AC → gleichschenkliges Dreieck → Winkel B = Winkel C");
svg.append("text").attr("x", triCx).attr("y", stepY + 20).attr("text-anchor", "middle").attr("font-size", fsSmall).attr("fill", "#A63D2F").attr("font-weight", "600").text("B = C = (180° − 68°) / 2 = 56°");
} else {
// SPLIT FORMAT
// Solution box to the right
const boxX = w * 0.50;
const boxY = 10;
const boxW = w * 0.46;
const boxH = h - 20;
svg.append("rect").attr("x", boxX).attr("y", boxY).attr("width", boxW).attr("height", boxH).attr("fill", "#f8f6f0").attr("stroke", "#ccc").attr("stroke-width", 1).attr("rx", 2);
svg.append("text").attr("x", boxX + boxW / 2).attr("y", boxY + 22).attr("text-anchor", "middle").attr("font-size", fs).attr("font-weight", "bold").text("Lösungsschritte");
const steps = [
{ text: "Schritt 1:", bold: true },
{ text: "Erkenne, dass AB = AC" },
{ text: "(gleichschenkliges Dreieck)." },
{ text: "" },
{ text: "Schritt 2:", bold: true },
{ text: "In einem gleichschenkligen Dreieck" },
{ text: "sind die Basiswinkel gleich: ∠B = ∠C." },
{ text: "" },
{ text: "Schritt 3:", bold: true },
{ text: "Winkelsumme im Dreieck = 180°." },
{ text: "∠B = ∠C = (180° − 68°) / 2" },
{ text: "∠B = ∠C = 56°", color: "#A63D2F", bold: true },
];
steps.forEach((s, i) => {
svg.append("text")
.attr("x", boxX + 14)
.attr("y", boxY + 44 + i * 16)
.attr("font-size", fsSmall - 1)
.attr("fill", s.color || "#1A1714")
.attr("font-weight", s.bold ? "600" : "400")
.text(s.text);
});
// Dashed arrows showing eye movement between triangle and box
svg.append("defs").append("marker")
.attr("id", "arrowhead")
.attr("viewBox", "0 0 10 10")
.attr("refX", 9).attr("refY", 5)
.attr("markerWidth", 6).attr("markerHeight", 6)
.attr("orient", "auto")
.append("path").attr("d", "M 0 0 L 10 5 L 0 10 Z").attr("fill", "#D55E00");
const arrowX1 = triCx + sz * 0.9 + 20;
const arrowX2 = boxX - 12;
const arrowY = h * 0.48;
svg.append("line").attr("x1", arrowX1).attr("y1", arrowY - 6).attr("x2", arrowX2).attr("y2", arrowY - 6).attr("stroke", "#D55E00").attr("stroke-width", 1.5).attr("stroke-dasharray", "5,4").attr("marker-end", "url(#arrowhead)");
svg.append("line").attr("x1", arrowX2).attr("y1", arrowY + 10).attr("x2", arrowX1).attr("y2", arrowY + 10).attr("stroke", "#D55E00").attr("stroke-width", 1.5).attr("stroke-dasharray", "5,4").attr("marker-end", "url(#arrowhead)");
svg.append("text").attr("x", (arrowX1 + arrowX2) / 2).attr("y", arrowY - 16).attr("text-anchor", "middle").attr("font-size", fsSmall - 1).attr("fill", "#D55E00").attr("font-weight", "600").text("Blickbewegung");
}
return svg.node();
}
