Das Trainer/innen Event

Präsenz Kongress 19. & 20. März 2026 »mehr  // Online Angebote »mehr

<!DOCTYPE html>
<html lang=”de”>
<head>
<meta charset=”utf-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1″ />
<title>Leichtes KI‑Quiz (3 Fragen)</title>
<style>
:root{
–bg:#0b0f19; –card:#131a2b; –ink:#e8ecf3; –muted:#a9b3c7; –accent:#7dd3fc; –good:#34d399; –bad:#f87171; –ring:#334155;
}
*{box-sizing:border-box}
body{margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif; color:var(–ink); background:radial-gradient(1200px 600px at 10% -10%, #14203a 0,#0b0f19 60%);
display:grid; place-items:start center; min-height:100dvh; padding:24px}
.wrap{width:min(860px,100%);}
header{display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:16px}
h1{font-size:clamp(1.25rem,2.5vw,1.75rem); margin:0; letter-spacing:.2px}
.badge{font-size:.85rem; color:var(–ink); background:linear-gradient(135deg,#1e293b,#0f172a); border:1px solid var(–ring); padding:.35rem .6rem; border-radius:999px}

.card{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01)); border:1px solid var(–ring); border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.24); padding:20px}
.q{padding:18px; border-radius:14px; background:var(–card); border:1px solid #1f2a44; margin:14px 0}
.q h2{margin:0 0 12px; font-size:1.05rem}
.options{display:grid; gap:10px}
label{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid #22304f; border-radius:12px; background:rgba(255,255,255,.02); cursor:pointer}
label:hover{border-color:#2a3a61}
input[type=radio]{accent-color:var(–accent); margin-top:2px}

.actions{display:flex; gap:12px; margin-top:16px}
button{border-radius:12px; border:1px solid var(–ring); background:#0ea5e9; color:#051423; font-weight:600; padding:10px 14px; cursor:pointer}
button.secondary{background:#0b1223; color:var(–ink)}
button:disabled{opacity:.6; cursor:not-allowed}

.result{margin-top:16px; padding:14px; border-radius:12px; border:1px solid var(–ring); background:#0b1223}
.explain{font-size:.95rem; color:var(–muted)}
.chip{display:inline-block; padding:.2rem .5rem; border-radius:999px; border:1px solid var(–ring);}
.ok{color:#052e1a; background:linear-gradient(180deg,#34d399,#22c55e)}
.err{color:#3c0c0c; background:linear-gradient(180deg,#fda4af,#f87171)}

.correct{outline:2px solid color-mix(in oklab, var(–good) 60%, transparent);}
.wrong{outline:2px solid color-mix(in oklab, var(–bad) 60%, transparent);}
footer{margin-top:20px; color:var(–muted); font-size:.9rem}
</style>
</head>
<body>
<div class=”wrap”>
<header>
<h1>Leichtes KI‑Quiz</h1>
<div class=”badge” aria-live=”polite” id=”progress”>0/3 beantwortet</div>
</header>

<section class=”card” aria-describedby=”intro”>
<p id=”intro” class=”explain”>Drei kurze Fragen. Wähle pro Frage eine Antwort und klicke auf <em>Auswerten</em>. Danach bekommst du Punkte und Erklä­rungen. Viel Erfolg!</p>

<form id=”quiz” novalidate>
<!– Frage 1 –>
<fieldset class=”q” aria-labelledby=”q1l”>
<legend id=”q1l”><h2>1) Was bedeutet die Abkürzung „KI“?</h2></legend>
<div class=”options”>
<label><input type=”radio” name=”q1″ value=”a”/> Künst­liche Insel</label>
<label><input type=”radio” name=”q1″ value=”b”/> Künst­liche Intelligenz</label>
<label><input type=”radio” name=”q1″ value=”c”/> Kritische Information</label>
</div>
<div class=”explain” data-explain=”q1″ hidden></div>
</fieldset>

<!– Frage 2 –>
<fieldset class=”q” aria-labelledby=”q2l”>
<legend id=”q2l”><h2>2) Welches Gerät nutzt am ehesten KI im Alltag?</h2></legend>
<div class=”options”>
<label><input type=”radio” name=”q2″ value=”a”/> Kühlschrank ohne Display</label>
<label><input type=”radio” name=”q2″ value=”b”/> Smart­phone mit Sprachassistent</label>
<label><input type=”radio” name=”q2″ value=”c”/> Taschenrechner</label>
</div>
<div class=”explain” data-explain=”q2″ hidden></div>
</fieldset>

<!– Frage 3 –>
<fieldset class=”q” aria-labelledby=”q3l”>
<legend id=”q3l”><h2>3) Welche typische Fähigkeit versucht KI nachzuahmen?</h2></legend>
<div class=”options”>
<label><input type=”radio” name=”q3″ value=”a”/> Muskelkraft</label>
<label><input type=”radio” name=”q3″ value=”b”/> Intel­ligenz des Menschen</label>
<label><input type=”radio” name=”q3″ value=”c”/> Schwerkraft</label>
</div>
<div class=”explain” data-explain=”q3″ hidden></div>
</fieldset>

<div class=”actions”>
<button type=”submit” id=”submit”>Auswerten</button>
<button type=”button” class=”secondary” id=”reset” aria-label=”Quiz zurücksetzen”>Zurücksetzen</button>
</div>
</form>

<div class=”result” id=”result” hidden aria-live=”polite”></div>
</section>

<footer>
Tipp: Wenn du willst, kann ich Versionen mit Zufalls­rei­hen­folge, Zeitlimit oder mehr Fragen bauen.
</footer>
</div>

<script>
const correct = { q1: ‘b’, q2: ‘b’, q3: ‘b’ };
const explanations = {
q1: {
ok: ‘Richtig: KI steht für <strong>Künstliche Intelligenz</strong>.’,
no: ‘KI bedeutet <strong>Künstliche Intelligenz</strong> — nicht Insel oder Information.’
},
q2: {
ok: ‘Korrekt: Sprach­as­sis­tenten nutzen u. a. Sprach‑, Verständnis‑ und Dialogmodelle.’,
no: ‘Das Smart­phone mit Sprach­as­sistent ist die beste KI‑Beispielanwendung im Alltag.’
},
q3: {
ok: ‘Genau: KI versucht <strong>menschliche Intelligenz</strong> nachzu­ahmen (z. B. Lernen, Entscheiden).’,
no: ‘KI ahmt keine physi­ka­li­schen Kräfte nach, sondern kognitive Fähigkeiten.’
}
};

const form = document.getElementById(‘quiz’);
const result = document.getElementById(‘result’);
const progress = document.getElementById(‘progress’);
const resetBtn = document.getElementById(‘reset’);

function update­Pro­gress(){
const data = new FormData(form);
let answered = 0;
for (const k of [‘q1′,’q2′,’q3’]) if (data.get(k)) answered++;
progress.textContent = `${answered}/3 beantwortet`;
}

form.addEventListener(‘change’, update­Pro­gress);
updateProgress();

form.addEventListener(‘submit’, (e)=>{
e.preventDefault();
const data = new FormData(form);
let score = 0;

// clear previous marks
document.querySelectorAll(‘.options label’).forEach(l=>{
l.classList.remove(‘correct’,’wrong’);
});

[‘q1′,’q2′,’q3’].forEach(q=>{
const val = data.get(q);
const group = form.querySelector(`[name=”${q}”]`)?.closest(‘.options’);
const explain = document.querySelector(`[data-explain=”${q}”]`);
if(!val){
explain.innerHTML = ‘<span class=”chip err”>Noch nichts ausgewählt.</span>’;
explain.hidden = false;
return;
}
const isRight = val === correct[q];
const picked­Label = group.querySelector(`input[value=”${val}”]`).closest(‘label’);
pickedLabel.classList.add(isRight ? ‘correct’ : ‘wrong’);
if(isRight) score++;
explain.innerHTML = isRight ? explanations[q].ok : explanations[q].no;
explain.hidden = false;
});

const pct = Math.round((score/3)*100);
result.hidden = false;
result.innerHTML = `
<div style=”display:flex;align-items:center;gap:10px;flex-wrap:wrap”>
<span class=”chip” aria-label=”Punkte”>Punkte: <strong>${score}/3</strong></span>
<span class=”chip” aria-label=”Prozent”>${pct}%</span>
${score===3 ? ‘<span class=”chip ok”>Super!</span>’ : score===0 ? ‘<span class=”chip err”>Weiter üben</span>’ : ”}
</div>`;

document.getElementById(‘submit’).disabled = true;
});

resetBtn.addEventListener(‘click’, ()=>{
form.reset();
document.getElementById(‘submit’).disabled = false;
result.hidden = true; result.textContent = ”;
document.querySelectorAll(‘[data-explain]’).forEach(e=>{e.hidden=true; e.textContent=”;});
document.querySelectorAll(‘.options label’).forEach(l=>l.classList.remove(‘correct’,’wrong’));
updateProgress();
form.querySelector(‘input[name=”q1″]’).focus();
});
</script>
</body>
</html>