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.
"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-[#131f24]">
<WordBank
key={n}
prompt={ex.prompt}
promptLang="ar"
words={ex.words}
answers={ex.answers}
theme="dark"
onContinue={() => setN((x) => x + 1)}
onSkip={() => setN((x) => x + 1)}
/>
</div>
);
}
