Word Bank

Forms

About

A sentence-building exercise where learners tap word tiles to assemble an answer on a ruled line, then check it against accepted answers with an animated correct/incorrect verdict bar.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Word Bank to your project and fits it to your theme.

Code

How Word Bank is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";
import WordBank from "@/components/ui/word-bank";
import { useState } from "react";

const EXERCISES = [
  {
    prompt: "القهوة ساخنة جداً",
    answers: ["The coffee is very hot"],
    words: ["hot", "tea", "is", "The", "very", "cold", "coffee", "not"],
  },
  {
    prompt: "أين محطة الحافلات؟",
    answers: ["Where is the bus station?", "Where's the bus station?"],
    words: ["station", "the", "Where", "bus", "is", "train", "when"],
  },
];

export default function Demo() {
  const [n, setN] = useState(0);
  const ex = EXERCISES[n % EXERCISES.length];
  return (
    <div className="flex min-h-screen w-full flex-col bg-white">
      <WordBank
        key={n}
        prompt={ex.prompt}
        promptLang="ar"
        words={ex.words}
        answers={ex.answers}
        theme="light"
        onContinue={() => setN((x) => x + 1)}
        onSkip={() => setN((x) => x + 1)}
      />
    </div>
  );
}