A well-designed evaluation enables a practitioner to build an evidence base around effective approaches, identify problems in delivery, demonstrate accountability, and make a credible case for continued support.
);
}
/* ---------- Main toolkit view ---------- */
function ToolkitApp() {
const steps = window.MEL_STEPS;
// Flatten lessons (+ section intro stubs) with step ref for easy navigation
const flat = useMemo(() => {
const out = [];
steps.forEach(s => {
if (s.sectionIntro) {
out.push({
id: `si-${s.id}`, type: "section-intro",
stepId: s.id, stepNumber: s.number, stepTitle: s.title, colorHex: s.colorHex,
sectionIntro: s.sectionIntro,
eyebrow: `Step ${s.number}`, title: "Introduction",
prompts: [], allowsNotApplicable: false
});
}
s.lessons.forEach(l => {
out.push({ ...l, stepId: s.id, stepNumber: s.number, stepTitle: s.title, colorHex: s.colorHex });
});
});
return out;
}, [steps]);
// ---------- State ----------
const initial = loadState();
const [screen, setScreen] = useState(initial?.screen || "title"); // title | toolkit | report
const [currentIdx, setCurrentIdx] = useState(initial?.currentIdx ?? 0);
const [answers, setAnswers] = useState(initial?.answers || {});
const [projectName, setProjectName] = useState(initial?.projectName || "");
const [naState, setNaState] = useState(initial?.naState || {});
// Persist
useEffect(() => {
saveState({ screen, currentIdx, answers, projectName, naState });
}, [screen, currentIdx, answers, projectName, naState]);
// Project name dialog on first toolkit entry
const askForName = useCallback(() => {
if (projectName) return;
const n = window.prompt(
"Give your MEL project a name (you can change this later):",
"Counter-antisemitism project"
);
if (n) setProjectName(n.trim());
}, [projectName]);
// ---------- Refs for scrolling the chain ----------
const canvasRef = useRef(null);
const activeCardRef = useRef(null);
// Auto-scroll: keep the active lesson card centered in the canvas
useEffect(() => {
if (screen !== "toolkit") return;
const c = canvasRef.current;
const card = activeCardRef.current;
if (!c || !card) return;
// wait for layout
requestAnimationFrame(() => {
const cardCenter = card.offsetLeft + card.offsetWidth / 2;
// Nudge 30px right of true centre so exactly one preceding card stays visible
const target = cardCenter - c.clientWidth / 2 - 30;
const prevWasIntro = flat[currentIdx - 1]?.type === "section-intro";
if (prevWasIntro) {
// Pre-position just behind the card so the short smooth nudge still plays
c.scrollTo({ left: Math.max(0, target - 120), behavior: "instant" });
}
c.scrollTo({ left: Math.max(0, target), behavior: "smooth" });
});
}, [currentIdx, screen]);
// ---------- TOC gate ----------
const tocData = answers.toc || {};
const isTocComplete = (
(tocData.outputs || []).some(x => (x || "").trim()) &&
(
(tocData.outcomes_im || []).some(x => (x || "").trim()) ||
(tocData.outcomes_it || []).some(x => (x || "").trim()) ||
(tocData.outcomes_lt || []).some(x => (x || "").trim())
) &&
(tocData.impact || []).some(x => (x || "").trim())
);
const [tocGateMsg, setTocGateMsg] = useState(null);
useEffect(() => { if (isTocComplete) setTocGateMsg(null); }, [isTocComplete]);
// (No auto-N/A needed for new method selection sections 3.3–3.5)
// ---------- Handlers ----------
const updateAnswer = (id, val) => setAnswers(a => ({ ...a, [id]: val }));
const toggleNa = (lessonId, isNa) => setNaState(s => ({ ...s, [lessonId]: !!isNa }));
const handleReset = () => {
setAnswers({});
setCurrentIdx(0);
setNaState({});
setProjectName("");
setScreen("title");
setTocGateMsg(null);
};
const toc12Idx = useMemo(() => flat.findIndex(f => f.id === "1.2"), [flat]);
const jumpTo = (i) => {
const target = Math.max(0, Math.min(flat.length - 1, i));
if (target > toc12Idx && !isTocComplete) {
setTocGateMsg("Before continuing, your Theory of Change needs at least one Output, one Outcome, and one Impact.");
setCurrentIdx(toc12Idx);
return;
}
setTocGateMsg(null);
setCurrentIdx(target);
};
const next = () => jumpTo(currentIdx + 1);
const prev = () => jumpTo(currentIdx - 1);
// Keyboard navigation — skip when focus is inside a text input or textarea
useEffect(() => {
if (screen !== "toolkit") return;
const onKey = (e) => {
const tag = document.activeElement?.tagName;
const isTyping = tag === "INPUT" || tag === "TEXTAREA" || document.activeElement?.isContentEditable;
if (isTyping) return;
if (e.key === "ArrowRight" || e.key === "Enter") { e.preventDefault(); next(); }
if (e.key === "ArrowLeft") { e.preventDefault(); jumpTo(currentIdx - 1); }
};
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, [screen, currentIdx, isTocComplete]);
// ---------- Derived ----------
const current = flat[currentIdx];
const currentStep = steps.find(s => s.id === current.stepId);
// Short answer preview for completed nodes
const previewForLesson = useCallback((lesson) => {
if (naState[lesson.id]) return "— Marked not applicable —";
for (const p of lesson.prompts) {
const preview = promptPreview(p, answers[p.id]);
if (preview) return preview.length > 110 ? preview.slice(0, 110) + "…" : preview;
}
return null;
}, [answers, naState]);
const layout = "inline";
const chrome = "full";
// ---------- Render ----------
if (screen === "title") {
const hasProgress = currentIdx > 0 || Object.keys(answers).length > 0;
return (
{
if (name) setProjectName(name);
setScreen(hasProgress ? "toolkit" : "intro");
}}
/>
);
}
if (screen === "intro") {
return (
setScreen("title")} style={{ cursor: "pointer" }} title="Back to home" />
Counter-Antisemitism MEL Toolkit
{steps.map((s) => (
))}
Evaluating Projects to Counter Online Antisemitism
An MEL Tool for Civil Society Organizations and Practitioners
Monitoring, Evaluation & Learning (MEL) is a crucial part of combatting antisemitism. A well-designed evaluation enables a practitioner to build an evidence base around effective approaches, identify problems in program design or delivery, demonstrate accountability to funders and partners, and make a credible case for continued or expanded support. In an area of work with high stakes and finite funding, it is crucial to understand what works and for whom, so good practices can be replicated and harmful practices rooted out.
ISD developed this MEL tool to assist civil society practitioners in evaluating online and offline initiatives to counter antisemitism. It is designed to support a myriad of approaches and provide a practical evaluation framework for those with limited experience or technical knowledge of MEL.
The MEL Tool is divided into four sections and will walk you through a series of steps to produce an evaluation plan for your project. Your progress will be saved automatically, and you can easily navigate back and forth between sections using the menu on the side or by scrolling sideways on your screen. The Tool was designed to be used alongside the Framework Guide, which will offer detailed explanations and examples for everything covered in the Tool.
