short_answer_de/en/se Felder + Distractor-Wörter in Fragen-Sidebar

- Directus: questions.short_answer_de/en/se Text-Felder angelegt
- Backend: short_answer_de beim Erstellen speichern
- Backend: get_object_questions_list gibt short_answer_de + distractor_words zurück
- Frontend: Sidebar zeigt Kurzantwort (blau) + Ablenker-Chips pro Frage

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-26 20:15:14 +02:00
parent f4a4b40914
commit 47af0d705c
3 changed files with 68 additions and 11 deletions

View File

@@ -235,6 +235,8 @@ export interface ObjectQuestion {
id: string
question_de: string
answer_de: string
short_answer_de: string | null
distractor_words: string[]
level: number
status: string
}

View File

@@ -462,7 +462,7 @@ export default function GenerateIt() {
</aside>
{/* Questions sidebar */}
<aside className="sidebar sidebar--right" style={{ width: 280, minWidth: 220 }}>
<aside className="sidebar sidebar--right" style={{ width: 300, minWidth: 240 }}>
<div className="sidebar-panel" style={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
<h3 className="sidebar-heading">
Fragen
@@ -473,20 +473,43 @@ export default function GenerateIt() {
) : (
<div style={{ overflowY: 'auto', flex: 1 }}>
{questions.map(q => (
<div key={q.id} style={{ padding: '6px 10px', borderBottom: '1px solid var(--border)', fontSize: 12 }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 4 }}>
<span style={{ fontWeight: 600, color: 'var(--muted)', fontSize: 10, flexShrink: 0 }}>
<div key={q.id} style={{ padding: '7px 10px', borderBottom: '1px solid var(--border)', fontSize: 12 }}>
{/* Header: Level + Status + Delete */}
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 3 }}>
<span style={{ fontWeight: 700, color: 'var(--muted)', fontSize: 10 }}>
L{q.level}
{q.status === 'published' && <span style={{ marginLeft: 4, color: 'var(--success)' }}>↑</span>}
</span>
<button
onClick={() => handleDeleteQuestion(q.id)}
style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, lineHeight: 1, color: 'var(--muted)', fontSize: 11, flexShrink: 0 }}
style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, color: 'var(--muted)', fontSize: 11 }}
title="Frage löschen"
></button>
</div>
<div style={{ marginTop: 2, color: 'var(--fg)' }}>{q.question_de}</div>
<div style={{ marginTop: 2, color: 'var(--muted)', fontStyle: 'italic' }}>{q.answer_de}</div>
{/* Frage */}
<div style={{ color: 'var(--fg)', marginBottom: 2 }}>{q.question_de}</div>
{/* Antwort */}
<div style={{ color: 'var(--muted)', fontStyle: 'italic', marginBottom: q.short_answer_de || q.distractor_words?.length ? 4 : 0 }}>{q.answer_de}</div>
{/* Short Answer */}
{q.short_answer_de && (
<div style={{ display: 'flex', alignItems: 'center', gap: 4, marginBottom: 3 }}>
<span style={{ fontSize: 10, color: 'var(--muted)', flexShrink: 0 }}>Kurz:</span>
<span style={{ background: 'var(--primary-muted, #e8f0fe)', color: 'var(--primary)', borderRadius: 4, padding: '1px 6px', fontSize: 11, fontWeight: 600 }}>
{q.short_answer_de}
</span>
</div>
)}
{/* Distractor Words */}
{q.distractor_words?.length > 0 && (
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 3 }}>
<span style={{ fontSize: 10, color: 'var(--muted)', alignSelf: 'center', flexShrink: 0 }}>Ablenker:</span>
{q.distractor_words.map(dw => (
<span key={dw} style={{ background: 'var(--bg-muted, #f5f5f5)', border: '1px solid var(--border)', borderRadius: 4, padding: '1px 5px', fontSize: 10 }}>
{dw}
</span>
))}
</div>
)}
</div>
))}
</div>