import React, { useState, useEffect } from 'react'; import ReactDOM from 'react-dom/client'; const Animal = ({ name, height, color, isDragging, onDragStart }) => { return (

onDragStart(e, { name, height })} style={{ width: '80px', height: `${height * 40}px`, backgroundColor: 'transparent', margin: '10px', cursor: 'grab', display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: '8px', opacity: isDragging ? 0.5 : 1, transition: 'all 0.3s', border: '2px solid #333', position: 'relative', overflow: 'hidden' }} >

); }; const Pen = ({ size, onDrop, isCorrect, animals }) => { const handleDragOver = (e) => { e.preventDefault(); }; const animalInPen = animals.find(animal => animal.pen === size); return (

{size}

{animalInPen && (

)}

); }; const App = () => { const [animals, setAnimals] = useState([ { name: 'Mouse', height: 1, color: '#f0f0f0', pen: null }, { name: 'Fox', height: 2, color: '#ffd7b5', pen: null }, { name: 'Giraffe', height: 3, color: '#fff4cc', pen: null }, ]); const [message, setMessage] = useState('Sort the animals into the correct size pens.'); const [isDragging, setIsDragging] = useState(null); const shuffleAnimals = () => { const shuffled = [...animals].sort(() => Math.random() - 0.5); setAnimals(shuffled.map(animal => ({ ...animal, pen: null }))); setMessage('Sort the animals into the correct size pens.'); }; useEffect(() => { shuffleAnimals(); }, []); const handleDragStart = (e, animal) => { setIsDragging(animal.name); e.dataTransfer.setData('animal', JSON.stringify(animal)); }; const handleDrop = (e, penSize) => { e.preventDefault(); const animal = JSON.parse(e.dataTransfer.getData('animal')); setIsDragging(null); const isCorrectPen = ( (penSize === 'Small' && animal.height === 1) || (penSize === 'Medium' && animal.height === 2) || (penSize === 'Large' && animal.height === 3) ); if (isCorrectPen) { setAnimals(prev => prev.map(a => a.name === animal.name ? { ...a, pen: penSize } : a )); const allCorrect = animals.every(a => { const correctPen = a.height === 1 ? 'Small' : a.height === 2 ? 'Medium' : 'Large'; return a.pen === correctPen; }); const isGameComplete = allCorrect && animals.every(a => a.pen !== null); if (isGameComplete) { setMessage('Terrific job! All animals are in their correct pens!'); } else { setMessage('Great job!'); setTimeout(() => { if (!isGameComplete) { setMessage(''); } }, 1000); } } else { setMessage(`Try again! The ${animal.name} doesn't belong in the ${penSize} pen!`); } }; return (

Animal Height Sorting Game

{message && (

{message}

)}

{animals.filter(animal => !animal.pen).map((animal) => ( ))}

{['Small', 'Medium', 'Large'].map((size) => ( handleDrop(e, size)} isCorrect={animals.some(a => a.pen === size)} animals={animals} /> ))}

); }; const container = document.getElementById('renderDiv'); const root = ReactDOM.createRoot(container); root.render();