import React, { useState, useEffect } from 'react'; import { CheckCircle, AlertCircle, RefreshCw, Triangle, Award } from 'lucide-react'; const App = () => { // State for Drag and Drop Task const [dragState, setDragState] = useState({ a: null, b: null, c: null, }); const [dragFeedback, setDragFeedback] = useState(null); // State for Formula Task const [selectedFormula, setSelectedFormula] = useState(null); const [formulaFeedback, setFormulaFeedback] = useState(null); // State for Calculation Tasks const [calcInputs, setCalcInputs] = useState({ task1: '', task2: '', task3: '' }); const [calcResults, setCalcResults] = useState({ task1: null, task2: null, task3: null }); // State for Final Score const [totalScore, setTotalScore] = useState(0); // Constants const labels = [ { id: 'катет1', text: 'Катет', color: 'bg-blue-500' }, { id: 'катет2', text: 'Катет', color: 'bg-green-500' }, { id: 'гіпотенуза', text: 'Гіпотенуза', color: 'bg-red-500' }, ]; // Logic: Drag and Drop const handleDrop = (position, labelId) => { setDragState(prev => ({ ...prev, [position]: labelId })); }; const checkDragTask = () => { const isCorrect = (dragState.a?.startsWith('катет') && dragState.b?.startsWith('катет') && dragState.c === 'гіпотенуза') || (dragState.b?.startsWith('катет') && dragState.a?.startsWith('катет') && dragState.c === 'гіпотенуза'); setDragFeedback(isCorrect ? 'correct' : 'wrong'); }; // Logic: Formula const checkFormula = (choice) => { setSelectedFormula(choice); setFormulaFeedback(choice === 'a2b2c2' ? 'correct' : 'wrong'); }; // Logic: Calculations const checkCalculations = () => { const results = { task1: parseInt(calcInputs.task1) === 5, // 3,4 -> 5 task2: parseInt(calcInputs.task2) === 8, // 10,6 -> 8 task3: parseInt(calcInputs.task3) === 13, // 5,12 -> 13 }; setCalcResults(results); }; // Reset function const resetAll = () => { setDragState({ a: null, b: null, c: null }); setDragFeedback(null); setSelectedFormula(null); setFormulaFeedback(null); setCalcInputs({ task1: '', task2: '', task3: '' }); setCalcResults({ task1: null, task2: null, task3: null }); }; return (

{/* Header */}

Теорема Піфагора

«У прямокутному трикутнику квадрат гіпотенузи дорівнює сумі квадратів катетів»

{/* Section 1: Theory */}

Як це працює?

Уяви, що на кожній стороні трикутника ми побудували квадрати. Площа найбільшого квадрата (на гіпотенузі) дорівнює сумі площ двох менших квадратів (на катетах).

c² = a² + b²

{/* SVG Triangle Visual */}

{/* Section 2: Drag and Drop */}

1. Назви сторін

Перетягни назви (клікни спочатку на назву, потім на поле) на відповідні місця трикутника:

{labels.map(l => ( ))}

{/* Visual Logic Slots */} {/* Slot a (Катет) */}

window.selectedLabel && handleDrop('a', window.selectedLabel.id)} className={`absolute left-[-20px] top-[40px] w-28 h-10 border-2 border-dashed rounded-lg flex items-center justify-center cursor-pointer transition-colors ${dragState.a ? 'bg-blue-100 border-blue-500 text-blue-700' : 'bg-white border-slate-300'}`} > {dragState.a ? 'Катет' : '???'}

{/* Slot b (Катет) */}

window.selectedLabel && handleDrop('b', window.selectedLabel.id)} className={`absolute left-[50px] bottom-[-20px] w-28 h-10 border-2 border-dashed rounded-lg flex items-center justify-center cursor-pointer transition-colors ${dragState.b ? 'bg-green-100 border-green-500 text-green-700' : 'bg-white border-slate-300'}`} > {dragState.b ? 'Катет' : '???'}

{/* Slot c (Гіпотенуза) */}

window.selectedLabel && handleDrop('c', window.selectedLabel.id)} className={`absolute right-[-40px] top-[50px] w-32 h-10 border-2 border-dashed rounded-lg flex items-center justify-center cursor-pointer transition-colors ${dragState.c ? 'bg-red-100 border-red-500 text-red-700' : 'bg-white border-slate-300'}`} > {dragState.c ? 'Гіпотенуза' : '???'}

{dragFeedback === 'correct' &&

Супер!

} {dragFeedback === 'wrong' &&

Спробуй ще

}

{/* Section 3: Formula Selection */}

2. Обери правильну формулу

{[ { id: 'a2b2c', label: 'a² + b² = c' }, { id: 'a2b2c2', label: 'a² + b² = c²' }, { id: 'abc2', label: 'a + b = c²' } ].map((f) => ( ))}

{formulaFeedback === 'correct' &&

Так, це правильний математичний запис!

}

{/* Section 4: Calculation Practice */}

3. Обчислювальний тренажер

{/* Task 1 */}

Задача 1:

Знайди гіпотенузу, якщо катети дорівнюють 3 см та 4 см.

setCalcInputs({...calcInputs, task1: e.target.value})} className={`w-24 p-2 border-2 rounded-lg outline-none transition ${calcResults.task1 === true ? 'border-green-500' : (calcResults.task1 === false ? 'border-red-500' : 'border-slate-300')}`} placeholder="?" /> см

{/* Task 2 */}

Задача 2:

Гіпотенуза 10 см, один катет 6 см. Знайди інший катет.

setCalcInputs({...calcInputs, task2: e.target.value})} className={`w-24 p-2 border-2 rounded-lg outline-none transition ${calcResults.task2 === true ? 'border-green-500' : (calcResults.task2 === false ? 'border-red-500' : 'border-slate-300')}`} placeholder="?" /> см

{/* Task 3 */}

Задача 3:

Катети 5 та 12. Чому дорівнює гіпотенуза?

setCalcInputs({...calcInputs, task3: e.target.value})} className={`w-24 p-2 border-2 rounded-lg outline-none transition ${calcResults.task3 === true ? 'border-green-500' : (calcResults.task3 === false ? 'border-red-500' : 'border-slate-300')}`} placeholder="?" /> см

{/* Section 5: Self-Check Summary */}

Самоперевірка

Завдання 1

{dragFeedback === 'correct' ? '✅ Виконано' : '❌ Не закінчено'}

Завдання 2

{formulaFeedback === 'correct' ? '✅ Правильно' : '❌ Помилка'}

Завдання 3

{Object.values(calcResults).filter(v => v === true).length} / 3 правильних

{Object.values(calcResults).every(v => v === true) && formulaFeedback === 'correct' && dragFeedback === 'correct' ? (

🏆 Вітаємо! Ти опанував основи теореми Піфагора!

) : (

Виконай всі завдання, щоб отримати сертифікат знавця!

)}

Робочий аркуш з геометрії • 8 клас • Тема: Прямокутний трикутник

); }; export default App;