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:
@@ -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
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user