matching game

import React, { useState } from "react"; const personalities = [ "Aurangzeb", "Bahadur Shah I", "Sayyid Brothers", "Nadir Shah", "Ahmad Shah Abdali", "Ranjit Singh", "Bahadur Shah Zafar" ]; const events = [ "Invasion of Delhi", "Wars of Succession", "Revolt of 1857", "Afghan Raids", "Kingmakers", "Sikh Empire" ]; // Correct mapping const correctMatches = { "Aurangzeb": "Wars of Succession", "Bahadur Shah I": "Wars of Succession", "Sayyid Brothers": "Kingmakers", "Nadir Shah": "Invasion of Delhi", "Ahmad Shah Abdali": "Afghan Raids", "Ranjit Singh": "Sikh Empire", "Bahadur Shah Zafar": "Revolt of 1857" }; export default function MughalMatchingGame() { const [matches, setMatches] = useState({}); const [completed, setCompleted] = useState(false); const handleDrop = (event, personality) => { const droppedEvent = event.dataTransfer.getData("event"); setMatches((prev) => { const newMatches = { ...prev, [personality]: droppedEvent }; if (Object.keys(newMatches).length === personalities.length) { setCompleted(true); } return newMatches; }); }; const handleDragStart = (event, ev) => { event.dataTransfer.setData("event", ev); }; return (

Mughal Decline Matching Game

{/* Personalities Column */}

Personalities

{personalities.map((p) => (

e.preventDefault()} onDrop={(e) => handleDrop(e, p)} className="p-3 rounded-lg shadow-md bg-white min-h-[50px] flex items-center justify-between" > {p} {matches[p] ? matches[p] : "Drop event here"}

))}

{/* Events Column */}

Events

{events.map((ev) => (

handleDragStart(e, ev)} className="p-3 rounded-lg shadow-md bg-blue-100 hover:bg-blue-200 cursor-grab" > {ev}

))}

{/* Completion Message */} {completed && (

Results:

{personalities.map((p) => (

{p} → {matches[p]} {matches[p] === correctMatches[p] ? "✅" : "❌"}

))}

)}

); }