Familiäre adenomatöse Polyposis (FAP)
Die familiäre adenomatöse Polyposis ist eine erblich bedingte Erkrankung, bei der im Dickdarm sehr viele Polypen entstehen. Da es sich um eine genetische Erkrankung handelt, ist es wichtig, dass auch enge Angehörige beraten und wenn möglich genetisch getestet werden. Erste Polypen können bereits im Teenageralter auftreten, weshalb die Vorsorge in betroffenen Familien früh beginnt. Durch moderne genetische Diagnostik ist heute eine frühzeitige Erkennung möglich, sodass rechtzeitig mit passenden Untersuchungen und Behandlungsmaßnahmen begonnen werden kann.
Das Gefährliche an den Polypen ist, dass sie sich ohne Behandlung zu bösartigen Tumoren entwickeln können. Oft werden zunächst einzelne Polypen entfernt, in vielen Fällen wird jedoch vorsorglich der gesamte Dickdarm operativ entfernt, um das sehr hohe Risiko einer Krebserkrankung zu vermeiden. Neben Veränderungen im Darm können auch gutartige Tumoren an anderen Organen oder am Knochensystem entstehen, was eine umfassende Begleitung durch verschiedene Fachdisziplinen erfordert.
Nach einer Operation bleibt die Erkrankung dennoch ein Leben lang ein Thema, denn Polypen können auch in anderen Abschnitten des Verdauungstraktes wie Magen oder Zwölffingerdarm auftreten. Deshalb sind regelmäßige und lebenslange Nachsorgeuntersuchungen unbedingt notwendig. Betroffene profitieren nicht nur von einer engmaschigen medizinischen Betreuung, sondern auch von unterstützenden Angeboten durch Selbsthilfegruppen. Ein offener Umgang mit der Diagnose und der Austausch mit anderen Betroffenen können zusätzlich helfen, die Herausforderungen der Erkrankung besser zu bewältigen.
.fap-zuordnungsspiel {
–bg: #ffffff;
–text: #1a1a1a;
–muted: #374151;
–primary: #0ea5e9;
–correct: #16a34a;
–wrong: #dc2626;
–card: #f8fafc;
–border: #e5e7eb;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
color: var(–text);
background: var(–bg);
border: 1px solid var(–border);
border-radius: 12px;
padding: 18px;
margin: 16px 0;
font-size: 1.35rem; /* Basisgröße = Überschriftgröße */
line-height: 1.6;
}
/* Überschrift */
.fap-zuordnungsspiel h3 {
margin: 0 0 16px 0;
font-size: 1.35rem; /* Referenzgröße */
font-weight: 700;
}
/* Einleitungstext mindestens so groß wie H3 */
.fap-intro {
font-size: 1.35rem;
color: var(–muted);
margin-bottom: 16px;
line-height: 1.6;
}
/* Toolbar und Buttons: mindestens wie H3 */
.fap-toolbar {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
margin-bottom: 16px;
font-size: 1.35rem;
}
.fap-btn {
appearance: none;
border: 1px solid var(–border);
background: #fff;
color: var(–text);
padding: 12px 16px;
border-radius: 10px;
cursor: pointer;
font-size: 1.35rem;
line-height: 1.4;
}
.fap-btn:hover { border-color: var(–primary); }
.fap-btn.primary {
background: var(–primary);
color: #fff;
border-color: var(–primary);
}
.fap-score {
margin-left: auto;
font-weight: 700;
color: var(–muted);
font-size: 1.35rem;
}
/* Grid */
.fap-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
font-size: 1.35rem;
}
@media (min-width: 820px) {
.fap-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1080px) {
.fap-grid { grid-template-columns: 1fr 1fr 1fr; }
}
/* Drop-Zonen und Überschriften */
.fap-zone {
border: 2px dashed var(–border);
border-radius: 12px;
padding: 16px;
min-height: 260px;
background: #fff;
display: flex;
flex-direction: column;
gap: 12px;
font-size: 1.35rem;
}
.fap-zone[aria-dropeffect=“move“] { outline: 2px solid var(–primary); }
.fap-zone h4 {
margin: 0 0 8px 0;
font-size: 1.35rem; /* gleich groß wie H3 */
color: var(–primary);
font-weight: 700;
}
.fap-drop-hint {
font-size: 1.35rem;
color: var(–muted);
margin-top: 6px;
}
/* Kartenpool */
.fap-pool {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
margin-top: 16px;
font-size: 1.35rem;
}
@media (min-width: 680px) {
.fap-pool { grid-template-columns: 1fr 1fr; }
}
/* Karten */
.fap-card {
background: var(–card);
border: 1px solid var(–border);
border-radius: 10px;
padding: 14px 16px;
font-size: 1.35rem; /* mindestens wie H3 */
line-height: 1.5;
cursor: grab;
user-select: none;
}
.fap-card[draggable=“true“]:active { cursor: grabbing; }
.fap-card:focus { outline: 3px solid var(–primary); outline-offset: 2px; }
.fap-card.correct {
border-color: var(–correct);
background: #f0fdf4;
}
.fap-card.wrong {
border-color: var(–wrong);
background: #fef2f2;
}
/* Footer-Hinweis */
.fap-footer {
margin-top: 16px;
font-size: 1.35rem;
color: var(–muted);
}
(function() {
const root = document.currentScript.closest(‚.fap-zuordnungsspiel‘);
const gameId = root.getAttribute(‚data-game-id‘) || ‚fap-game‘;
const pool = root.querySelector(‚.fap-pool‘);
const zones = Array.from(root.querySelectorAll(‚.fap-zone‘));
const scoreEl = root.querySelector(‚.fap-score‘);
const btnCheck = root.querySelector(‚[data-action=“check“]‘);
const btnReset = root.querySelector(‚[data-action=“reset“]‘);
const btnShow = root.querySelector(‚[data-action=“show“]‘);
const cardsData = [
{ text: ‚FAP ist erblich und betrifft oft mehrere Familienmitglieder.‘, cat: ‚diagnose‘ },
{ text: ‚Genetische Beratung und wenn möglich Testung von Angehörigen.‘, cat: ‚diagnose‘ },
{ text: ‚Erste Polypen können schon im Teenageralter auftreten.‘, cat: ‚diagnose‘ },
{ text: ‚Frühe und regelmäßige Vorsorgeuntersuchungen in betroffenen Familien.‘, cat: ‚diagnose‘ },
{ text: ‚Moderne genetische Diagnostik ermöglicht eine frühe Erkennung.‘, cat: ‚diagnose‘ },
{ text: ‚Polypen können ohne Behandlung zu bösartigen Tumoren werden.‘, cat: ‚behandlung‘ },
{ text: ‚Endoskopische Entfernung einzelner Polypen.‘, cat: ‚behandlung‘ },
{ text: ‚Häufig vorsorgliche Entfernung des gesamten Dickdarms zur Risikoreduktion.‘, cat: ‚behandlung‘ },
{ text: ‚Interdisziplinäre Betreuung durch Gastroenterologie und Chirurgie.‘, cat: ‚behandlung‘ },
{ text: ‚Beachtung möglicher Veränderungen außerhalb des Darms.‘, cat: ‚behandlung‘ },
{ text: ‚Lebenslange Kontrollen, da Polypen auch in Magen oder Zwölffingerdarm auftreten können.‘, cat: ’nachsorge‘ },
{ text: ‚Regelmäßige Endoskopien nach der Operation.‘, cat: ’nachsorge‘ },
{ text: ‚Anpassung der Betreuung an Befund und Lebenssituation.‘, cat: ’nachsorge‘ },
{ text: ‚Unterstützung durch Selbsthilfe und psychosoziale Angebote.‘, cat: ’nachsorge‘ },
{ text: ‚Austausch mit Betroffenen hilft im Alltag.‘, cat: ’nachsorge‘ }
];
function shuffle(arr) {
const a = arr.slice();
for (let i = a.length – 1; i > 0; i–) {
const j = Math.floor(Math.random() * (i + 1));
[a[i], a[j]] = [a[j], a[i]];
}
return a;
}
function makeCard(item, index) {
const el = document.createElement(‚div‘);
el.className = ‚fap-card‘;
el.setAttribute(‚role‘, ‚option‘);
el.setAttribute(‚tabindex‘, ‚0‘);
el.setAttribute(‚draggable‘, ‚true‘);
el.setAttribute(‚data-cat‘, item.cat);
el.setAttribute(‚data-id‘, gameId + ‚-card-‚ + index);
el.textContent = item.text;
return el;
}
function updateScore() {
const allCards = root.querySelectorAll(‚.fap-card‘);
let correct = 0;
allCards.forEach(card => {
const parentZone = card.closest(‚.fap-zone‘);
if (parentZone && parentZone.dataset.phase === card.dataset.cat) correct++;
});
scoreEl.textContent = correct + ‚ korrekt von ‚ + cardsData.length;
}
function resetGame() {
zones.forEach(z => {
Array.from(z.querySelectorAll(‚.fap-card‘)).forEach(c => pool.appendChild(c));
});
Array.from(pool.querySelectorAll(‚.fap-card‘)).forEach(c => {
c.classList.remove(‚correct‘, ‚wrong‘);
});
const shuffled = shuffle(Array.from(pool.children));
shuffled.forEach(c => pool.appendChild(c));
updateScore();
}
function checkNow(showFeedback = true) {
const allCards = root.querySelectorAll(‚.fap-card‘);
allCards.forEach(card => {
const parentZone = card.closest(‚.fap-zone‘);
const isCorrect = parentZone && parentZone.dataset.phase === card.dataset.cat;
card.classList.remove(‚correct‘, ‚wrong‘);
if (showFeedback) {
card.classList.add(isCorrect ? ‚correct‘ : ‚wrong‘);
}
});
updateScore();
}
function showSolution() {
const allCards = Array.from(root.querySelectorAll(‚.fap-card‘));
allCards.forEach(card => {
const target = zones.find(z => z.dataset.phase === card.dataset.cat);
if (target) target.appendChild(card);
card.classList.remove(‚wrong‘);
card.classList.add(‚correct‘);
});
updateScore();
}
function initPool() {
const shuffled = shuffle(cardsData);
shuffled.forEach((item, i) => pool.appendChild(makeCard(item, i)));
}
function enableDnD(card) {
card.addEventListener(‚dragstart‘, e => {
e.dataTransfer.setData(‚text/plain‘, card.getAttribute(‚data-id‘));
zones.forEach(z => z.setAttribute(‚aria-dropeffect‘, ‚move‘));
});
card.addEventListener(‚dragend‘, () => {
zones.forEach(z => z.setAttribute(‚aria-dropeffect‘, ’none‘));
});
card.addEventListener(‚keydown‘, e => {
if (e.key === ‚Enter‘ || e.key === ‚ ‚) {
e.preventDefault();
root.setAttribute(‚data-active-card‘, card.getAttribute(‚data-id‘));
zones.forEach(z => z.setAttribute(‚aria-dropeffect‘, ‚move‘));
}
});
}
function enableZones(zone) {
zone.addEventListener(‚dragover‘, e => { e.preventDefault(); });
zone.addEventListener(‚drop‘, e => {
e.preventDefault();
const id = e.dataTransfer.getData(‚text/plain‘);
const card = root.querySelector(‚[data-id=“‚ + id + ‚“]‘);
if (card) { zone.appendChild(card); }
zones.forEach(z => z.setAttribute(‚aria-dropeffect‘, ’none‘));
updateScore();
});
zone.addEventListener(‚keydown‘, e => {
if (e.key === ‚Enter‘ || e.key === ‚ ‚) {
const id = root.getAttribute(‚data-active-card‘);
if (!id) return;
const card = root.querySelector(‚[data-id=“‚ + id + ‚“]‘);
if (card) {
zone.appendChild(card);
root.removeAttribute(‚data-active-card‘);
zones.forEach(z => z.setAttribute(‚aria-dropeffect‘, ’none‘));
updateScore();
}
}
});
}
initPool();
Array.from(root.querySelectorAll(‚.fap-card‘)).forEach(enableDnD);
zones.forEach(enableZones);
btnCheck.addEventListener(‚click‘, () => checkNow(true));
btnReset.addEventListener(‚click‘, () => resetGame());
btnShow.addEventListener(‚click‘, () => showSolution());
const observer = new MutationObserver(() => {
Array.from(root.querySelectorAll(‚.fap-card‘)).forEach(card => {
if (!card._bound) {
enableDnD(card);
card._bound = true;
}
});
});
observer.observe(root, { childList: true, subtree: true });
updateScore();
})();
Zuordnungsspiel: Diagnose, Behandlung, Nachsorge bei FAP
Ordne die Karten der passenden Phase zu. Per Maus oder Finger ziehen oder per Tastatur auswählen und mit Enter in der gewünschten Spalte ablegen.
Diagnose
Lege hier Karten ab, die zur Diagnose gehören.
Behandlung
Lege hier Karten ab, die zur Behandlung gehören.
Nachsorge
Lege hier Karten ab, die zur Nachsorge gehören.