admin
a708152fc1
React SPA with Vite, Directus backend, canvas-confetti. Includes Dockerfile (multi-stage Node → nginx) for Coolify deployment. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
686 lines
29 KiB
HTML
686 lines
29 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Kachel-Übersicht — Admin</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Lora:wght@700&family=Nunito:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
|
|
<style>
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
body {
|
|
font-family: 'Nunito', sans-serif;
|
|
background: #EDE0CE;
|
|
color: #4A3728;
|
|
padding: 40px 24px 80px;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
h1 {
|
|
font-family: 'Lora', Georgia, serif;
|
|
font-size: 24px;
|
|
color: #4A3728;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 13px;
|
|
color: #8C7A65;
|
|
margin-bottom: 40px;
|
|
letter-spacing: 0.03em;
|
|
}
|
|
|
|
.section {
|
|
margin-bottom: 48px;
|
|
}
|
|
|
|
.section-label {
|
|
font-size: 10px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.14em;
|
|
color: #8C7A65;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.section-title {
|
|
font-family: 'Lora', Georgia, serif;
|
|
font-size: 18px;
|
|
color: #4A3728;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.section-desc {
|
|
font-size: 13px;
|
|
color: #8C7A65;
|
|
margin-bottom: 20px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.tag {
|
|
display: inline-block;
|
|
background: #7A5C3A;
|
|
color: #EDE0CE;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
padding: 3px 8px;
|
|
border-radius: 99px;
|
|
letter-spacing: 0.04em;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
/* ── Card shell ── */
|
|
.nw-card {
|
|
width: 100%;
|
|
max-width: 340px;
|
|
border-radius: 24px;
|
|
overflow: hidden;
|
|
border: 0.5px solid #D4B896;
|
|
box-shadow: 0 4px 24px rgba(74,55,40,0.1);
|
|
background: #F5EFE6;
|
|
}
|
|
|
|
.nw-image {
|
|
background: #C4A882;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
padding: 20px 16px 24px;
|
|
min-height: 200px;
|
|
}
|
|
|
|
.nw-lang-pill {
|
|
position: absolute; top: 14px; left: 14px;
|
|
background: #7A5C3A; color: #EDE0CE;
|
|
font-size: 12px; font-weight: 700;
|
|
padding: 5px 12px; border-radius: 99px;
|
|
}
|
|
|
|
.nw-points-pill {
|
|
position: absolute; top: 14px; right: 14px;
|
|
background: #F5EFE6; color: #7A5C3A;
|
|
font-size: 12px; font-weight: 700;
|
|
padding: 5px 12px; border-radius: 99px;
|
|
border: 0.5px solid #D4B896;
|
|
}
|
|
|
|
.nw-bubble {
|
|
position: absolute;
|
|
top: 50%; left: 50%;
|
|
transform: translate(-50%, -68%);
|
|
background: rgba(237,224,206,0.55);
|
|
color: rgba(74,55,40,0.7);
|
|
font-family: 'Lora', Georgia, serif;
|
|
font-size: 24px; font-weight: 700;
|
|
width: 96px; height: 96px;
|
|
border-radius: 50%;
|
|
display: flex; align-items: center; justify-content: center;
|
|
}
|
|
|
|
.nw-content { padding: 18px 20px 20px; }
|
|
|
|
.nw-word-row {
|
|
display: flex; align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.nw-word {
|
|
font-family: 'Lora', Georgia, serif;
|
|
font-size: 28px; font-weight: 700; color: #4A3728;
|
|
}
|
|
|
|
.nw-translation {
|
|
background: #D4B896; color: #4A3728;
|
|
font-size: 12px; font-weight: 600;
|
|
padding: 5px 12px; border-radius: 99px;
|
|
}
|
|
|
|
.nw-divider { height: 0.5px; background: #D4B896; margin-bottom: 14px; }
|
|
|
|
.nw-label { font-size: 12px; color: #8C7A65; margin-bottom: 10px; display: block; }
|
|
|
|
/* Text input */
|
|
.nwt-input-row {
|
|
display: flex; align-items: center; gap: 8px;
|
|
background: #fff; border: 1px solid #D4B896;
|
|
border-radius: 12px; padding: 4px 6px 4px 12px;
|
|
}
|
|
|
|
.nwt-input {
|
|
flex: 1; border: none; outline: none; background: transparent;
|
|
font-family: 'Lora', Georgia, serif;
|
|
font-size: 16px; color: rgba(74,55,40,0.35); padding: 6px 0;
|
|
}
|
|
|
|
.nwt-submit-btn {
|
|
width: 36px; height: 36px; border-radius: 8px;
|
|
background: #7A5C3A; border: none; cursor: pointer;
|
|
display: flex; align-items: center; justify-content: center;
|
|
color: #F5EFE6;
|
|
}
|
|
|
|
/* Voice mic */
|
|
.nwv-mic-row { display: flex; align-items: center; gap: 14px; min-height: 52px; }
|
|
|
|
.nwv-mic-btn {
|
|
width: 52px; height: 52px; border-radius: 12px;
|
|
background: #F5EFE6; border: 1px solid #D4B896;
|
|
display: flex; align-items: center; justify-content: center;
|
|
color: #7A5C3A;
|
|
}
|
|
|
|
.nwv-correct-text { font-size: 13px; font-weight: 700; color: #5a7a3a; }
|
|
|
|
/* Success bar */
|
|
.nwt-success-bar, .nwv-success-bar {
|
|
display: flex; justify-content: space-between; align-items: center;
|
|
background: #EDE0CE; border: 0.5px solid #D4B896;
|
|
border-radius: 12px; padding: 12px 16px;
|
|
}
|
|
|
|
.nwv-success-bar { margin-top: 14px; }
|
|
|
|
.success-left { font-size: 13px; font-weight: 700; color: #4A3728; }
|
|
.success-right { font-size: 12px; color: #8C7A65; }
|
|
|
|
hr.page-divider {
|
|
border: none;
|
|
border-top: 1px solid #D4B896;
|
|
margin: 48px 0;
|
|
}
|
|
|
|
/* ── image_quiz tile ── */
|
|
.iq-image {
|
|
position: relative;
|
|
background: #C4A882;
|
|
min-height: 200px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px 16px;
|
|
}
|
|
.iq-scene-label {
|
|
position: absolute;
|
|
top: 50%; left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-family: 'Lora', Georgia, serif;
|
|
font-size: 22px; font-weight: 700;
|
|
color: rgba(74,55,40,0.55);
|
|
z-index: 1; pointer-events: none;
|
|
}
|
|
.iq-question-row {
|
|
display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px;
|
|
}
|
|
.iq-question { font-size: 15px; font-weight: 700; color: #4A3728; }
|
|
.iq-hint { font-size: 12px; color: #8C7A65; }
|
|
.iq-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
|
|
.iq-chip {
|
|
font-family: 'Nunito', sans-serif;
|
|
font-size: 14px; font-weight: 600; color: #4A3728;
|
|
background: transparent; border: 1.5px solid #C4A882;
|
|
border-radius: 99px; padding: 7px 16px;
|
|
}
|
|
.iq-chip-selected {
|
|
background: rgba(122,92,58,0.12); border-color: #7A5C3A;
|
|
}
|
|
.iq-confirm-btn {
|
|
width: 100%; padding: 14px; border: none; border-radius: 14px;
|
|
background: #D4B896; color: #8C7A65;
|
|
font-family: 'Nunito', sans-serif; font-size: 15px; font-weight: 700;
|
|
}
|
|
.iq-success-bar {
|
|
display: flex; justify-content: space-between; align-items: center;
|
|
background: #EDE0CE; border: 0.5px solid #D4B896;
|
|
border-radius: 12px; padding: 12px 16px;
|
|
}
|
|
.iq-success-left { font-size: 13px; font-weight: 700; color: #4A3728; }
|
|
.iq-success-right { font-size: 12px; color: #8C7A65; }
|
|
|
|
/* ── letter_order tile ── */
|
|
.lo-prompt-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
|
|
.lo-prompt { font-size:13px; color:#8C7A65; line-height:1.5; flex:1; }
|
|
.lo-answer-area {
|
|
display:flex; flex-wrap:wrap; gap:6px;
|
|
min-height:52px; border:1.5px solid #D4B896; border-radius:14px;
|
|
padding:10px 12px; margin-bottom:14px; background:rgba(255,255,255,0.4);
|
|
}
|
|
.lo-answer-correct { border-color:#5a7a3a; background:rgba(90,122,58,0.06); }
|
|
.lo-chip {
|
|
width:38px; height:38px; border-radius:10px;
|
|
display:flex; align-items:center; justify-content:center;
|
|
font-family:'Lora',Georgia,serif; font-size:17px; font-weight:700;
|
|
background:#7A5C3A; color:#F5EFE6; border:none;
|
|
}
|
|
.lo-available { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; min-height:38px; }
|
|
.lo-back-btn { font-size:13px; font-weight:700; color:#7A5C3A; background:transparent; border:none; }
|
|
.lo-success-text { font-size:14px; font-weight:700; color:#5a7a3a; margin-bottom:12px; }
|
|
.lo-success-bar { display:flex; justify-content:space-between; align-items:center; background:#EDE0CE; border:0.5px solid #D4B896; border-radius:12px; padding:12px 16px; }
|
|
.lo-success-left { font-size:13px; font-weight:700; color:#4A3728; }
|
|
.lo-success-right { font-size:12px; color:#8C7A65; }
|
|
|
|
/* ── image_pick tile ── */
|
|
.ip-image { background:#C4A882; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding:20px 16px 12px; min-height:200px; }
|
|
.ip-dots { display:flex; gap:5px; margin-top:10px; }
|
|
.ip-dot { width:6px; height:6px; border-radius:50%; background:rgba(74,55,40,0.25); }
|
|
.ip-dot-active { background:rgba(74,55,40,0.7); }
|
|
.ip-btn-row { display:flex; gap:10px; }
|
|
.ip-btn { flex:1; padding:13px 8px; border-radius:14px; border:1px solid #D4B896; background:#F5EFE6; font-size:14px; font-weight:700; color:#8C7A65; display:flex; align-items:center; justify-content:center; gap:6px; }
|
|
.ip-btn-ja { background:#7A5C3A; color:#F5EFE6; border-color:#7A5C3A; }
|
|
.ip-success-bar { display:flex; justify-content:space-between; align-items:center; background:#EDE0CE; border:0.5px solid #D4B896; border-radius:12px; padding:12px 16px; }
|
|
.ip-success-left { font-size:13px; font-weight:700; color:#4A3728; }
|
|
.ip-success-right { font-size:12px; color:#8C7A65; }
|
|
|
|
/* ── audio_quiz tile ── */
|
|
.aq-card { background:#F5EFE6; }
|
|
.aq-header { background:#2C1A0E; }
|
|
.aq-points-pill-dark { background:#2C1A0E; color:#C4A882; font-size:12px; font-weight:700; padding:5px 12px; border-radius:99px; border:0.5px solid #4A3020; }
|
|
.aq-image { background:#2C1A0E; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:32px 20px 20px; min-height:200px; }
|
|
.aq-speaker-ring { width:100px; height:100px; border-radius:50%; border:2px solid rgba(196,168,130,0.25); display:flex; align-items:center; justify-content:center; }
|
|
.aq-speaker-icon { width:68px; height:68px; border-radius:14px; background:rgba(196,168,130,0.08); border:1.5px solid rgba(196,168,130,0.2); display:flex; align-items:center; justify-content:center; }
|
|
.aq-dots-dark { display:flex; gap:5px; }
|
|
.aq-dot-dark { width:5px; height:5px; border-radius:50%; background:rgba(196,168,130,0.3); }
|
|
.aq-tap-hint { font-size:12px; color:rgba(196,168,130,0.5); }
|
|
.aq-question { font-size:15px; font-weight:700; color:#4A3728; margin-bottom:14px; }
|
|
.aq-options { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
|
|
.aq-option { display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:14px; background:#EDE0CE; border:1px solid transparent; }
|
|
.aq-option-label { font-size:12px; font-weight:700; color:#8C7A65; width:16px; }
|
|
.aq-option-text { font-size:14px; font-weight:600; color:#4A3728; }
|
|
.aq-option-selected-ex { background:rgba(90,122,58,0.12); border-color:#5a7a3a; }
|
|
.aq-success-bar { display:flex; justify-content:space-between; align-items:center; background:#EDE0CE; border:0.5px solid #D4B896; border-radius:12px; padding:12px 16px; }
|
|
.aq-success-left { font-size:13px; font-weight:700; color:#4A3728; }
|
|
.aq-success-right { font-size:12px; color:#8C7A65; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>Kachel-Übersicht</h1>
|
|
<p class="subtitle">Admin · alle verfügbaren Kacheltypen mit Beispiel</p>
|
|
|
|
<!-- ── new_word_text ── -->
|
|
<div class="section">
|
|
<div class="tag">new_word_text</div>
|
|
<div class="section-title">Neues Wort — Text</div>
|
|
<p class="section-desc">
|
|
Der Nutzer sieht das Wort mit Bild und tippt die Übersetzung in der Zielsprache ein.
|
|
Sofortiges Feedback: richtig / falsch. Bei Erfolg Punkte-Anzeige.
|
|
</p>
|
|
|
|
<div class="nw-card">
|
|
<div class="nw-image">
|
|
<span class="nw-lang-pill">Svenska</span>
|
|
<span class="nw-points-pill">★ +1 Punkt</span>
|
|
<div class="nw-bubble">bord</div>
|
|
<svg viewBox="0 0 200 160" width="180" height="144" aria-hidden="true">
|
|
<rect x="20" y="72" width="160" height="22" rx="4" fill="rgba(74,55,40,0.18)"/>
|
|
<rect x="34" y="94" width="16" height="44" rx="3" fill="rgba(74,55,40,0.15)"/>
|
|
<rect x="150" y="94" width="16" height="44" rx="3" fill="rgba(74,55,40,0.15)"/>
|
|
<rect x="28" y="134" width="28" height="8" rx="3" fill="rgba(74,55,40,0.12)"/>
|
|
<rect x="144" y="134" width="28" height="8" rx="3" fill="rgba(74,55,40,0.12)"/>
|
|
</svg>
|
|
</div>
|
|
<div class="nw-content">
|
|
<div class="nw-word-row">
|
|
<span class="nw-word">bordet</span>
|
|
<span class="nw-translation">der Tisch</span>
|
|
</div>
|
|
<div class="nw-divider"></div>
|
|
<label class="nw-label">Schreib das schwedische Wort</label>
|
|
<div class="nwt-input-row">
|
|
<input class="nwt-input" placeholder="bordet …" readonly />
|
|
<button class="nwt-submit-btn">
|
|
<svg viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
|
|
<polyline points="4,10 9,15 16,6"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="page-divider" />
|
|
|
|
<!-- ── new_word_voice ── -->
|
|
<div class="section">
|
|
<div class="tag">new_word_voice</div>
|
|
<div class="section-title">Neues Wort — Sprache</div>
|
|
<p class="section-desc">
|
|
Der Nutzer sieht das Wort und spricht es laut aus. Die Web Speech API erkennt die Aussprache
|
|
und gibt Feedback. Bei Erfolg erscheint die Punkte-Leiste.
|
|
</p>
|
|
|
|
<div class="nw-card">
|
|
<div class="nw-image">
|
|
<span class="nw-lang-pill">Svenska</span>
|
|
<span class="nw-points-pill">★ +1 Punkt</span>
|
|
<div class="nw-bubble">bord</div>
|
|
<svg viewBox="0 0 200 160" width="180" height="144" aria-hidden="true">
|
|
<rect x="20" y="72" width="160" height="22" rx="4" fill="rgba(74,55,40,0.18)"/>
|
|
<rect x="34" y="94" width="16" height="44" rx="3" fill="rgba(74,55,40,0.15)"/>
|
|
<rect x="150" y="94" width="16" height="44" rx="3" fill="rgba(74,55,40,0.15)"/>
|
|
<rect x="28" y="134" width="28" height="8" rx="3" fill="rgba(74,55,40,0.12)"/>
|
|
<rect x="144" y="134" width="28" height="8" rx="3" fill="rgba(74,55,40,0.12)"/>
|
|
</svg>
|
|
</div>
|
|
<div class="nw-content">
|
|
<div class="nw-word-row">
|
|
<span class="nw-word">bordet</span>
|
|
<span class="nw-translation">der Tisch</span>
|
|
</div>
|
|
<div class="nw-divider"></div>
|
|
<label class="nw-label">Spreche das schwedische Wort</label>
|
|
<div class="nwv-mic-row">
|
|
<div class="nwv-mic-btn">
|
|
<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="9" y="2" width="6" height="11" rx="3"/>
|
|
<path d="M5 10a7 7 0 0 0 14 0"/>
|
|
<line x1="12" y1="19" x2="12" y2="22"/>
|
|
<line x1="8" y1="22" x2="16" y2="22"/>
|
|
</svg>
|
|
</div>
|
|
<span class="nwv-correct-text">Bra! Aussprache erkannt.</span>
|
|
</div>
|
|
<div class="nwv-success-bar">
|
|
<span class="success-left">★ +1 Punkt erhalten</span>
|
|
<span class="success-right">Gesamt: 47 Punkte</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<hr class="page-divider" />
|
|
|
|
<!-- ── letter_order ── -->
|
|
<div class="section">
|
|
<div class="tag">letter_order</div>
|
|
<div class="section-title">Buchstaben-Reihenfolge</div>
|
|
<p class="section-desc">
|
|
Der Nutzer sieht ein Bild und tippt die durcheinander gewürfelten Buchstaben in der richtigen Reihenfolge.
|
|
Grüner Rahmen + Erfolgsmeldung bei vollständig richtiger Eingabe.
|
|
</p>
|
|
|
|
<div class="nw-card">
|
|
<div style="display:flex;justify-content:space-between;align-items:center;padding:12px 14px 10px;background:#F5EFE6;">
|
|
<span class="nw-lang-pill">Svenska</span>
|
|
<span class="nw-points-pill">★ +1 Punkt</span>
|
|
</div>
|
|
<div class="nw-image">
|
|
<svg viewBox="0 0 200 140" width="190" height="133" aria-hidden="true">
|
|
<rect x="16" y="46" width="14" height="50" rx="6" fill="rgba(74,55,40,0.16)"/>
|
|
<rect x="170" y="46" width="14" height="50" rx="6" fill="rgba(74,55,40,0.16)"/>
|
|
<rect x="22" y="36" width="156" height="22" rx="8" fill="rgba(74,55,40,0.14)"/>
|
|
<rect x="22" y="54" width="156" height="38" rx="10" fill="rgba(74,55,40,0.18)"/>
|
|
<rect x="32" y="56" width="64" height="32" rx="8" fill="rgba(74,55,40,0.11)"/>
|
|
<rect x="104" y="56" width="64" height="32" rx="8" fill="rgba(74,55,40,0.11)"/>
|
|
<rect x="30" y="92" width="10" height="22" rx="3" fill="rgba(74,55,40,0.13)"/>
|
|
<rect x="160" y="92" width="10" height="22" rx="3" fill="rgba(74,55,40,0.13)"/>
|
|
</svg>
|
|
</div>
|
|
<div class="nw-content">
|
|
<div class="lo-prompt-row">
|
|
<span class="lo-prompt">Tippe die Buchstaben in der richtigen Reihenfolge</span>
|
|
<span class="nw-translation">das Sofa</span>
|
|
</div>
|
|
<!-- Correct state: green border, all letters placed -->
|
|
<div class="lo-answer-area lo-answer-correct">
|
|
<span class="lo-chip">s</span>
|
|
<span class="lo-chip">o</span>
|
|
<span class="lo-chip">f</span>
|
|
<span class="lo-chip">f</span>
|
|
<span class="lo-chip">a</span>
|
|
</div>
|
|
<div class="nw-divider"></div>
|
|
<p class="lo-success-text">Perfekt! Bra jobbat!</p>
|
|
<div class="lo-success-bar">
|
|
<span class="lo-success-left">★ +1 Punkt erhalten</span>
|
|
<span class="lo-success-right">Gesamt: 47 Punkte</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Idle state -->
|
|
<p style="font-size:12px;color:#8C7A65;margin:20px 0 12px;font-weight:700;letter-spacing:0.04em;">ZUSTAND: Wartend (gemischt)</p>
|
|
<div class="nw-card">
|
|
<div style="display:flex;justify-content:space-between;align-items:center;padding:12px 14px 10px;background:#F5EFE6;">
|
|
<span class="nw-lang-pill">Svenska</span>
|
|
<span class="nw-points-pill">★ +1 Punkt</span>
|
|
</div>
|
|
<div class="nw-image">
|
|
<svg viewBox="0 0 200 140" width="190" height="133" aria-hidden="true">
|
|
<rect x="16" y="46" width="14" height="50" rx="6" fill="rgba(74,55,40,0.16)"/>
|
|
<rect x="170" y="46" width="14" height="50" rx="6" fill="rgba(74,55,40,0.16)"/>
|
|
<rect x="22" y="36" width="156" height="22" rx="8" fill="rgba(74,55,40,0.14)"/>
|
|
<rect x="22" y="54" width="156" height="38" rx="10" fill="rgba(74,55,40,0.18)"/>
|
|
<rect x="32" y="56" width="64" height="32" rx="8" fill="rgba(74,55,40,0.11)"/>
|
|
<rect x="104" y="56" width="64" height="32" rx="8" fill="rgba(74,55,40,0.11)"/>
|
|
<rect x="30" y="92" width="10" height="22" rx="3" fill="rgba(74,55,40,0.13)"/>
|
|
<rect x="160" y="92" width="10" height="22" rx="3" fill="rgba(74,55,40,0.13)"/>
|
|
</svg>
|
|
</div>
|
|
<div class="nw-content">
|
|
<div class="lo-prompt-row">
|
|
<span class="lo-prompt">Tippe die Buchstaben in der richtigen Reihenfolge</span>
|
|
<span class="nw-translation">das Sofa</span>
|
|
</div>
|
|
<div class="lo-answer-area">
|
|
<span class="lo-chip">s</span>
|
|
<span class="lo-chip">o</span>
|
|
</div>
|
|
<div class="nw-divider"></div>
|
|
<div class="lo-available">
|
|
<button class="lo-chip">f</button>
|
|
<button class="lo-chip">f</button>
|
|
<button class="lo-chip">a</button>
|
|
</div>
|
|
<button class="lo-back-btn">← Zurück</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="page-divider" />
|
|
|
|
<!-- ── image_pick ── -->
|
|
<div class="section">
|
|
<div class="tag">image_pick</div>
|
|
<div class="section-title">Bild auswählen — Ja / Nein</div>
|
|
<p class="section-desc">
|
|
Der Nutzer sieht ein Wort und blättert durch Bilder. Mit „Ja, das ist es" wählt er das passende Bild aus.
|
|
Punkte gibt es nur beim richtigen Bild.
|
|
</p>
|
|
|
|
<div class="nw-card">
|
|
<div style="display:flex;justify-content:space-between;align-items:center;padding:12px 14px 10px;background:#F5EFE6;">
|
|
<span class="nw-lang-pill">Svenska</span>
|
|
<span class="nw-points-pill">★ +1 Punkt</span>
|
|
</div>
|
|
<div class="ip-image">
|
|
<svg viewBox="0 0 200 140" width="190" height="133" aria-hidden="true">
|
|
<rect x="16" y="46" width="14" height="50" rx="6" fill="rgba(74,55,40,0.16)"/>
|
|
<rect x="170" y="46" width="14" height="50" rx="6" fill="rgba(74,55,40,0.16)"/>
|
|
<rect x="22" y="36" width="156" height="22" rx="8" fill="rgba(74,55,40,0.14)"/>
|
|
<rect x="22" y="54" width="156" height="38" rx="10" fill="rgba(74,55,40,0.18)"/>
|
|
<rect x="32" y="56" width="64" height="32" rx="8" fill="rgba(74,55,40,0.11)"/>
|
|
<rect x="104" y="56" width="64" height="32" rx="8" fill="rgba(74,55,40,0.11)"/>
|
|
<rect x="30" y="92" width="10" height="22" rx="3" fill="rgba(74,55,40,0.13)"/>
|
|
<rect x="160" y="92" width="10" height="22" rx="3" fill="rgba(74,55,40,0.13)"/>
|
|
</svg>
|
|
<div class="ip-dots">
|
|
<span class="ip-dot ip-dot-active"></span>
|
|
<span class="ip-dot"></span>
|
|
<span class="ip-dot"></span>
|
|
<span class="ip-dot"></span>
|
|
</div>
|
|
</div>
|
|
<div class="nw-content">
|
|
<div class="nw-word-row">
|
|
<span class="nw-word">soffa</span>
|
|
<span class="nw-translation">das Sofa</span>
|
|
</div>
|
|
<div class="nw-divider"></div>
|
|
<label class="nw-label">Welches Bild zeigt das Wort?</label>
|
|
<div class="ip-btn-row">
|
|
<button class="ip-btn">✕ Nein</button>
|
|
<button class="ip-btn ip-btn-ja">✓ Ja, das ist es</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="page-divider" />
|
|
|
|
<!-- ── audio_quiz ── -->
|
|
<div class="section">
|
|
<div class="tag">audio_quiz</div>
|
|
<div class="section-title">Audio-Quiz — Mehrfachwahl</div>
|
|
<p class="section-desc">
|
|
Der Nutzer hört einen gesprochenen Begriff und wählt die richtige deutsche Übersetzung aus vier Optionen.
|
|
Dunkles Karten-Design mit Lautsprecher-Animation.
|
|
</p>
|
|
|
|
<div class="nw-card aq-card" style="overflow:hidden;">
|
|
<div class="aq-header" style="display:flex;justify-content:space-between;align-items:center;padding:12px 14px 10px;">
|
|
<span class="nw-lang-pill">Svenska</span>
|
|
<span class="aq-points-pill-dark">★ +1 Punkt</span>
|
|
</div>
|
|
<div class="aq-image">
|
|
<div class="aq-speaker-ring">
|
|
<div class="aq-speaker-icon">
|
|
<svg viewBox="0 0 48 48" width="40" height="40" fill="none" aria-hidden="true">
|
|
<rect x="10" y="14" width="10" height="20" rx="3" fill="rgba(196,168,130,0.5)"/>
|
|
<polygon points="20,14 34,6 34,42 20,34" fill="rgba(196,168,130,0.5)"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="aq-dots-dark">
|
|
<span class="aq-dot-dark"></span>
|
|
<span class="aq-dot-dark"></span>
|
|
<span class="aq-dot-dark"></span>
|
|
<span class="aq-dot-dark"></span>
|
|
<span class="aq-dot-dark"></span>
|
|
<span class="aq-dot-dark"></span>
|
|
</div>
|
|
<p class="aq-tap-hint">Tippe zum Abspielen</p>
|
|
</div>
|
|
<div class="nw-content">
|
|
<p class="aq-question">Was hörst du?</p>
|
|
<div class="aq-options">
|
|
<div class="aq-option"><span class="aq-option-label">A</span><span class="aq-option-text">die Küche</span></div>
|
|
<div class="aq-option aq-option-selected-ex"><span class="aq-option-label" style="color:#3a5a1e">B</span><span class="aq-option-text" style="color:#3a5a1e">das Wohnzimmer</span></div>
|
|
<div class="aq-option"><span class="aq-option-label">C</span><span class="aq-option-text">das Schlafzimmer</span></div>
|
|
<div class="aq-option"><span class="aq-option-label">D</span><span class="aq-option-text">das Badezimmer</span></div>
|
|
</div>
|
|
<div class="nw-divider"></div>
|
|
<div class="aq-success-bar">
|
|
<span class="aq-success-left">★ +1 Punkt erhalten</span>
|
|
<span class="aq-success-right">Gesamt: 47 Punkte</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="page-divider" />
|
|
|
|
<!-- ── image_quiz ── -->
|
|
<div class="section">
|
|
<div class="tag">image_quiz</div>
|
|
<div class="section-title">Bild-Quiz — Mehrfachauswahl</div>
|
|
<p class="section-desc">
|
|
Der Nutzer sieht ein Bild einer Szene und wählt alle passenden schwedischen Wörter aus.
|
|
Mehrere Antworten sind möglich. Bei vollständig richtiger Auswahl gibt es Punkte.
|
|
</p>
|
|
|
|
<div class="nw-card">
|
|
<!-- State: some chips selected, confirm button active -->
|
|
<div style="display:flex;justify-content:space-between;align-items:center;padding:12px 14px 10px;background:#F5EFE6;">
|
|
<span class="nw-lang-pill">Svenska</span>
|
|
<span class="nw-points-pill">★ +1 Punkt</span>
|
|
</div>
|
|
<div class="iq-image">
|
|
<span class="iq-scene-label">vardagsrum</span>
|
|
<svg viewBox="0 0 200 180" width="200" height="180" aria-hidden="true">
|
|
<rect x="30" y="138" width="140" height="28" rx="6" fill="rgba(74,55,40,0.13)"/>
|
|
<rect x="38" y="143" width="124" height="4" rx="2" fill="rgba(74,55,40,0.08)"/>
|
|
<rect x="58" y="112" width="84" height="14" rx="4" fill="rgba(74,55,40,0.22)"/>
|
|
<rect x="68" y="126" width="8" height="16" rx="2" fill="rgba(74,55,40,0.15)"/>
|
|
<rect x="124" y="126" width="8" height="16" rx="2" fill="rgba(74,55,40,0.15)"/>
|
|
<rect x="22" y="74" width="156" height="40" rx="10" fill="rgba(74,55,40,0.18)"/>
|
|
<rect x="22" y="58" width="156" height="22" rx="8" fill="rgba(74,55,40,0.14)"/>
|
|
<rect x="32" y="76" width="64" height="34" rx="8" fill="rgba(74,55,40,0.12)"/>
|
|
<rect x="104" y="76" width="64" height="34" rx="8" fill="rgba(74,55,40,0.12)"/>
|
|
<rect x="16" y="68" width="14" height="46" rx="6" fill="rgba(74,55,40,0.16)"/>
|
|
<rect x="170" y="68" width="14" height="46" rx="6" fill="rgba(74,55,40,0.16)"/>
|
|
</svg>
|
|
</div>
|
|
<div class="nw-content">
|
|
<div class="iq-question-row">
|
|
<span class="iq-question">Was siehst du im Bild?</span>
|
|
<span class="iq-hint">Mehrere möglich</span>
|
|
</div>
|
|
<div class="iq-chips">
|
|
<button class="iq-chip iq-chip-selected">soffa</button>
|
|
<button class="iq-chip">bord</button>
|
|
<button class="iq-chip">lampa</button>
|
|
<button class="iq-chip">stol</button>
|
|
<button class="iq-chip">fönster</button>
|
|
<button class="iq-chip iq-chip-selected">matta</button>
|
|
<button class="iq-chip">bil</button>
|
|
<button class="iq-chip">dörr</button>
|
|
</div>
|
|
<div class="nw-divider"></div>
|
|
<button class="iq-confirm-btn" style="background:#7A5C3A;color:#F5EFE6;">Bestätigen</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- State: correct -->
|
|
<p style="font-size:12px;color:#8C7A65;margin:20px 0 12px;font-weight:700;letter-spacing:0.04em;">ZUSTAND: Richtig</p>
|
|
<div class="nw-card">
|
|
<div style="display:flex;justify-content:space-between;align-items:center;padding:12px 14px 10px;background:#F5EFE6;">
|
|
<span class="nw-lang-pill">Svenska</span>
|
|
<span class="nw-points-pill">★ +1 Punkt</span>
|
|
</div>
|
|
<div class="iq-image">
|
|
<span class="iq-scene-label">vardagsrum</span>
|
|
<svg viewBox="0 0 200 180" width="200" height="180" aria-hidden="true">
|
|
<rect x="30" y="138" width="140" height="28" rx="6" fill="rgba(74,55,40,0.13)"/>
|
|
<rect x="38" y="143" width="124" height="4" rx="2" fill="rgba(74,55,40,0.08)"/>
|
|
<rect x="58" y="112" width="84" height="14" rx="4" fill="rgba(74,55,40,0.22)"/>
|
|
<rect x="68" y="126" width="8" height="16" rx="2" fill="rgba(74,55,40,0.15)"/>
|
|
<rect x="124" y="126" width="8" height="16" rx="2" fill="rgba(74,55,40,0.15)"/>
|
|
<rect x="22" y="74" width="156" height="40" rx="10" fill="rgba(74,55,40,0.18)"/>
|
|
<rect x="22" y="58" width="156" height="22" rx="8" fill="rgba(74,55,40,0.14)"/>
|
|
<rect x="32" y="76" width="64" height="34" rx="8" fill="rgba(74,55,40,0.12)"/>
|
|
<rect x="104" y="76" width="64" height="34" rx="8" fill="rgba(74,55,40,0.12)"/>
|
|
<rect x="16" y="68" width="14" height="46" rx="6" fill="rgba(74,55,40,0.16)"/>
|
|
<rect x="170" y="68" width="14" height="46" rx="6" fill="rgba(74,55,40,0.16)"/>
|
|
</svg>
|
|
</div>
|
|
<div class="nw-content">
|
|
<div class="iq-question-row">
|
|
<span class="iq-question">Was siehst du im Bild?</span>
|
|
<span class="iq-hint">Mehrere möglich</span>
|
|
</div>
|
|
<div class="iq-chips">
|
|
<button class="iq-chip" style="background:rgba(90,122,58,0.12);border-color:#5a7a3a;color:#3a5a1e;">soffa</button>
|
|
<button class="iq-chip">bord</button>
|
|
<button class="iq-chip">lampa</button>
|
|
<button class="iq-chip">stol</button>
|
|
<button class="iq-chip">fönster</button>
|
|
<button class="iq-chip" style="background:rgba(90,122,58,0.12);border-color:#5a7a3a;color:#3a5a1e;">matta</button>
|
|
<button class="iq-chip">bil</button>
|
|
<button class="iq-chip">dörr</button>
|
|
</div>
|
|
<div class="nw-divider"></div>
|
|
<div class="iq-success-bar">
|
|
<span class="iq-success-left">★ +1 Punkt erhalten</span>
|
|
<span class="iq-success-right">Gesamt: 47 Punkte</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|