Obuka

1h 39m ukupno

Obavezna obuka pre izbornog dana. Možeš pauzirati i nastaviti gde si stao.

{/* Progress hero card */}

Tvoj napredak

{doneCount} od {total} modula

{Math.round(overallPct * 100)}%

{activeMod && ( onOpenModule(activeMod.id)} style={{ width: '100%', padding: '12px 14px', background: 'oklch(1 0 0 / 0.08)', border: '1px solid oklch(1 0 0 / 0.1)', borderRadius: 12, display: 'flex', alignItems: 'center', gap: 12, textAlign: 'left', }}>

Nastavi · modul {activeMod.id}

{activeMod.t}

{Math.round((activeMod.progress || 0) * 100)}% · ~8 min preostalo

)}

{/* Module list */}

Svi moduli

{MODULES.map((m, i, arr) => { const isLocked = m.state === 'locked'; const isDone = m.state === 'done'; const isActive = m.state === 'active'; const isFinal = m.isFinal; return ( isLocked ? null : (isFinal ? onOpenQuiz('final') : onOpenModule(m.id))} disabled={isLocked} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '14px 16px', width: '100%', textAlign: 'left', borderBottom: i === arr.length - 1 ? 'none' : '1px solid ' + V9.ink150, opacity: isLocked ? 0.55 : 1, background: isActive ? V9.warningBg : 'transparent', }}>

{isDone && } {isActive && } {isFinal && !isLocked && } {isLocked && } {!isDone && !isActive && !isFinal && !isLocked && {m.id}}

{m.t}

{isLocked ? 'Otključava se posle prethodnog modula' : m.s}

{isActive && m.progress != null && (

)}

{isDone && m.score != null && (

{Array.from({ length: 5 }).map((_, i) => ( ))}

)} ); })}

{/* Certificate preview if done */}

Po završetku završnog testa, dobićeš CRTA sertifikat. Šaljemo ga na email + automatski povezujemo sa tvojim akreditacionim zahtevom.

); } // ═════════════════════════════════════════════════════════════ // VIEW 2 — Lekcija (video + tekst) // ═════════════════════════════════════════════════════════════ function LessonView({ moduleId, onBack, onStartQuiz }) { const mod = MODULES.find(m => m.id === moduleId) || MODULES[3]; const [playing, setPlaying] = React.useState(false); const [progress, setProgress] = React.useState(0.32); React.useEffect(() => { if (!playing) return; const t = setTimeout(() => setProgress(p => Math.min(1, p + 0.005)), 100); return () => clearTimeout(t); }, [playing, progress]); return (

Modul {mod.id} · lekcija 2 od 3

{mod.t}

{/* Video player */}

{/* Fake video content — illustrative composition */}

VIDEO LEKCIJA · 6:42

Šta tačno smeš da slikaš?

vodi: Vukosava Crnjanski

{/* Play overlay button */} setPlaying(!playing)} style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', width: 64, height: 64, borderRadius: '50%', background: 'oklch(1 0 0 / 0.95)', color: V9.ink950, display: 'grid', placeItems: 'center', boxShadow: '0 8px 32px oklch(0 0 0 / 0.4)', }}>{playing ? : } {/* Top controls */}

{/* Bottom progress */}

{Math.floor(progress * 6 + (progress * 60 * 0.7) / 60)}:{String(Math.floor(progress * 6 * 60 + progress * 42) % 60).padStart(2, '0')} 6:42

{/* Speed controls */}

{['0.75×', '1×', '1.25×', '1.5×'].map((s, i) => ( {s} ))}

{/* Lesson notes */}

Beleške uz lekciju

Šta smeš da slikaš tokom dana:

Spoljašnji deo BM (zgrada, ulaz, plakat) — uvek
Glasačko mesto izdaleka, bez kvaliteta detalja na listićima
Akreditaciju člana BO, ako se to traži za prijavu

Šta NE smeš:

Pojedinačni glasač i njegov listić — to je krivično delo
Zapisnik pre nego što ga BO javno istakne (čl. 78)
Lične podatke birača sa liste

Sledeći korak: kratak kviz od 3 pitanja. Možeš se vratiti na video bilo kad.

Pokreni kviz

); } // ═════════════════════════════════════════════════════════════ // VIEW 3 — Kviz // ═════════════════════════════════════════════════════════════ function QuizView({ onBack, onComplete }) { const [qi, setQi] = React.useState(0); const [picked, setPicked] = React.useState(null); const [answers, setAnswers] = React.useState([]); const q = QUIZ_QS[qi]; const total = QUIZ_QS.length; const isLast = qi === total - 1; const showFeedback = picked != null; const next = () => { if (picked == null) return; setAnswers(a => [...a, picked]); if (isLast) onComplete([...answers, picked]); else { setQi(qi + 1); setPicked(null); } }; return (

{QUIZ_QS.map((_, i) => (

))}

{qi + 1}/{total}

Pitanje {qi + 1}

{q.q}

{q.opts.map((opt, i) => { const isPicked = picked === i; const isCorrect = i === q.correct; let bg = 'white', bord = V9.ink200, fg = V9.ink900, dotBg = 'white', dotBorder = V9.ink300, dotFg = 'transparent'; if (showFeedback) { if (isPicked && isCorrect) { bg = V9.successBg; bord = V9.success; dotBg = V9.success; dotBorder = V9.success; dotFg = 'white'; } else if (isPicked && !isCorrect) { bg = V9.dangerBg; bord = V9.danger; dotBg = V9.danger; dotBorder = V9.danger; dotFg = 'white'; } else if (isCorrect) { bg = V9.successBg; bord = V9.success; dotBg = V9.success; dotBorder = V9.success; dotFg = 'white'; } else { fg = V9.ink500; } } else if (isPicked) { bord = V9.ink900; dotBg = V9.ink900; dotBorder = V9.ink900; dotFg = 'white'; } return ( !showFeedback && setPicked(i)} style={{ display: 'flex', gap: 12, padding: 14, background: bg, border: '1px solid ' + bord, borderRadius: 12, textAlign: 'left', cursor: showFeedback ? 'default' : 'pointer', }}>

{showFeedback && isPicked && isCorrect && } {showFeedback && isPicked && !isCorrect && } {showFeedback && !isPicked && isCorrect && }

{opt}

); })}

{showFeedback && (

{picked === q.correct ? <> Tačno : <>Skoro · evo zašto}

{q.explanation}

)}

{isLast ? 'Završi kviz' : 'Sledeće pitanje'}

); } // ═════════════════════════════════════════════════════════════ // VIEW 4 — Quiz complete // ═════════════════════════════════════════════════════════════ function QuizDone({ answers, onReset }) { const correct = answers.filter((a, i) => a === QUIZ_QS[i].correct).length; const pct = correct / QUIZ_QS.length; const passed = pct >= 0.6; return (

{passed ? : }

{passed ? 'Modul završen!' : 'Probaj još jednom'}

Tačnih odgovora: {correct} od {QUIZ_QS.length} · {Math.round(pct * 100)}%

{QUIZ_QS.map((q, i) => { const ok = answers[i] === q.correct; return (

{ok ? : }

{q.q}

); })}

{passed ? 'Sledeći modul' : 'Probaj ponovo'}

); } // ───────────────────────────────────────────────────────────── // Flow // ───────────────────────────────────────────────────────────── function TrainingFlow({ tweaks }) { const [view, setView] = React.useState(tweaks.view || 'list'); const [moduleId, setModuleId] = React.useState(tweaks.module || 4); const [quizAnswers, setQuizAnswers] = React.useState(null); React.useEffect(() => { setView(tweaks.view || 'list'); }, [tweaks.view]); if (view === 'lesson') return setView('list')} onStartQuiz={() => setView('quiz')}/>; if (view === 'quiz') return setView('lesson')} onComplete={(a) => { setQuizAnswers(a); setView('done'); }}/>; if (view === 'done') return { setQuizAnswers(null); setView('list'); }}/>; return { setModuleId(id); setView('lesson'); }} onOpenQuiz={() => setView('quiz')}/>; } Object.assign(window, { TrainingFlow });