diff --git a/Creativ sabaq b/Creativ sabaq new file mode 100644 index 00000000..9bc884b7 --- /dev/null +++ b/Creativ sabaq @@ -0,0 +1,356 @@ +import React, { useMemo, useState } from "react"; +import { motion } from "framer-motion"; +import { Button } from "@/components/ui/button"; +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; +import { Input } from "@/components/ui/input"; +import { Textarea } from "@/components/ui/textarea"; +import { Label } from "@/components/ui/label"; +import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select"; +import { Badge } from "@/components/ui/badge"; +import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"; +import { Download, Wand2, Clipboard, Trash2, Sparkles } from "lucide-react"; + +// ---------------------------------------------------- +// Креативті Сабақ — бір файлдық PoC (қазақ тілінде) +// Бұл компонент оффлайн логикамен үлгі жоспар генерациялайды (LLM жоқ). +// ---------------------------------------------------- + +const creativeModes = [ + { value: "квест", label: "Квест" }, + { value: "сторителлинг", label: "Сторителлинг" }, + { value: "дебат", label: "Дебат" }, + { value: "жоба", label: "Жоба" }, +]; + +function section(title: string, body: string) { + return `## ${title}\n${body}\n`; +} + +function list(items: string[]) { + return items.map((i) => `- ${i}`).join("\n"); +} + +function mkDifferentiation(topic: string) { + return section( + "Дифференциация (3 деңгей)", + [ + "**Базалық:** " + + `Қысқа тапсырма: ${topic} бойынша 1 қарапайым мысал орындау. Күтілетін жауап: негізгі ұғымды дұрыс қолдану.`, + "**Орта:** " + + `Қолданбалы тапсырма: ${topic} тақырыбында шағын практикалық жоба (2–3 қадам). Күтілетін жауап: алгоритмді дұрыс қолдану, түсіндірме беру.`, + "**Күрделі:** " + + `Шынайы кейс: ${topic} тақырыбын өмірлік жағдаятқа бейімдеу (шектеулер/шарттармен). Бағалау: дәлдік, тиімділік, креатив.`, + ].join("\n") + ); +} + +function mkRubric() { + return section( + "Рубрика (қысқа)", + [ + "| Критерий | Бастапқы | Жақсы | Өте жақсы |", + "|---|---|---|---|", + "| Мазмұн дәлдігі | Ұғымдар шатасқан | Дұрыс, аз қате | Дәл, дәлелмен |", + "| Креатив | Ойындандыру аз | Идея бар | Ерекше, оқиға/миссия |", + "| Цифрлық сауат | Құралды шектеулі қолданады | Негізгі қолданады | Тиімді, қауіпсіз қолданады |", + "| Коммуникация | Тіл түсініксіз | Түсінікті | Жүйелі, терминдер орынды |", + ].join("\n") + ); +} + +function mkResources(topic: string) { + return section( + "Ресурс идеялары", + list([ + `${topic} тақырыбын түсіндіретін қысқа экранжазба (2–3 мин).`, + "Қарапайым интерактив тапсырма (код фрагментін толықтыр).", + "Шағын викторина (5 сұрақ) — ұғымдарды бекіту.", + ]) + ); +} + +function mkSafety() { + return section( + "Қауіпсіздік/этика чек-лист", + list([ + "Жеке дерек (аты-жөні, байланыс) енгізілмеген.", + "Авторлық құқық: тек ашық/өз материалы қолданылды.", + "Академиялық адалдық: генерирленген мәтін үлгі ретінде, оқушы өздігінен орындайды.", + ]) + ); +} + +function mkCreativeBlock(mode: string, topic: string) { + if (mode === "квест") { + return section( + "Квест дизайны", + list([ + `Миссия: "${topic}" құпиясын аш!`, + "Кезең 1: Терминдерді табу → 3 ұғымға анықтама жаз.", + "Кезең 2: Қолдану сынағы → шағын тапсырма орында.", + "Кезең 3: Шынайы кейс → топпен шешім жаса.", + "Финал: «Жасырын код» — 3 дұрыс жауаптан құралады.", + ]) + ); + } + if (mode === "сторителлинг") { + return section( + "Сторителлинг", + list([ + `Басты кейіпкер ${topic} қиындықтарына тап болды…`, + "Көрініс 1: Мәселені түсіну — терминдерді ашу.", + "Көрініс 2: Шешім жолы — алгоритм/ережені қолдану.", + "Көрініс 3: Нәтиже — рефлексия мен ұсыныс.", + ]) + ); + } + if (mode === "дебат") { + return section( + "Дебат", + list([ + `Тақырыптық тезис: «${topic} — ең тиімді тәсіл ме?»`, + "Команда A: дәлелдер (3).", + "Команда B: қарсы уәждер (3).", + "Қорытындылау: дәлел сапасы, дереккөз сенімділігі.", + ]) + ); + } + // жоба + return section( + "Жобалық формат", + list([ + `Жоба мақсаты: ${topic} тақырыбында пайдалы мини-өнім жасау.`, + "Рөлдер: талдаушы, құрастырушы, баяндаушы.", + "Нәтиже: жұмысшы прототип + қысқа питч (1 мин).", + ]) + ); +} + +function buildPlan({ + grade, + topic, + goal, + duration, + creativeMode, +}: { + grade: string; + topic: string; + goal: string; + duration: string; + creativeMode: string; +}) { + const header = `# Сабақ жоспары (Информатика, ${grade}-сынып)\nТақырып: ${topic}\nОқу мақсаты: ${goal}\nУақыты: ${duration} мин\nРежим: ${creativeMode}\n`; + + const intro = section( + "Кіріспе (қызықтыру, 5 мин)", + list([ + `Өмірден 2 мысал келтір (тақырып: ${topic}).`, + "Сынып шағын сауал: бүгін не үйренеміз?", + "Сабақ мақсаттары жарияланады.", + ]) + ); + + const newKnowledge = section( + "Жаңа білім (15–20 мин)", + list([ + `Негізгі ұғымдар мен ережелер (${topic}).`, + "Қысқа демонстрация немесе код/скрин.", + "Түсіну сұрақтары: 3 сұрақ.", + ]) + ); + + const practice = section( + "Бекіту (15 мин)", + list([ + "Жұптық тапсырма: нұсқаулықпен орындау.", + "Топтық мини-кейс: шешімін постер/код ретінде ұсыну.", + ]) + ); + + const reflection = section( + "Рефлексия (5 мин)", + list([ + "2 қиындық + 1 табысты сәт.", + "Келесі қадам: не жетілдіремін?", + ]) + ); + + const homework = section( + "Үй тапсырмасы", + list([ + `Қысқа тапсырма: ${topic} бойынша 1 мысал жазып келу.`, + "Қосымша: 3 сұрақтан мини-викторина құрастыру.", + ]) + ); + + const creative = mkCreativeBlock(creativeMode, topic); + const diff = mkDifferentiation(topic); + const rubric = mkRubric(); + const resources = mkResources(topic); + const safety = mkSafety(); + + return [ + header, + intro, + newKnowledge, + practice, + reflection, + homework, + creative, + diff, + rubric, + resources, + safety, + ].join("\n\n"); +} + +export default function CreativeLessonPoC() { + const [grade, setGrade] = useState("7"); + const [topic, setTopic] = useState("Шартты операторлар"); + const [goal, setGoal] = useState("if/elif/else синтаксисін қолдану"); + const [duration, setDuration] = useState("45"); + const [creativeMode, setCreativeMode] = useState(creativeModes[0].value); + const [output, setOutput] = useState("\n\nГенерацияланған жоспар осы жерде көрсетіледі…"); + const [tab, setTab] = useState("preview"); + + const canGenerate = useMemo(() => topic.trim().length > 2 && goal.trim().length > 2, [topic, goal]); + + function handleGenerate() { + const text = buildPlan({ grade, topic, goal, duration, creativeMode }); + setOutput(text); + setTab("preview"); + } + + function handleClear() { + setOutput(""); + } + + async function handleCopy() { + try { + await navigator.clipboard.writeText(output); + } catch {} + } + + function handleDownload() { + const blob = new Blob([output], { type: "text/plain;charset=utf-8" }); + const url = URL.createObjectURL(blob); + const a = document.createElement("a"); + a.href = url; + a.download = `sabak-jospary-${Date.now()}.txt`; + a.click(); + URL.revokeObjectURL(url); + } + + return ( +
+
+ +
+ +

Креативті Сабақ — PoC

+ kk +
+ + +
+ {/* Сол панель — параметрлер */} + + + Параметрлер + + +
+ + setGrade(e.target.value)} placeholder="7" /> +
+
+ + setTopic(e.target.value)} placeholder="Мыс.: Алгоритмдер" /> +
+
+ + setGoal(e.target.value)} placeholder="Мыс.: Негізгі ұғымдарды қолдану" /> +
+
+ + setDuration(e.target.value)} placeholder="45" /> +
+
+ + +
+ +
+ + +
+ + + + {/* Оң панель — нәтиже */} + + + Нәтиже +
+ + +
+ + + + + Алдын ала қарау + Мәтін (raw) + + + +
+ {output + .split("\n\n") + .filter(Boolean) + .map((block, idx) => ( +
+ {block.includes("## ") || block.startsWith("# ") ? ( +
$1').replace(/^# (.*)$/gm, '

$1

').replace(/\*\*(.*?)\*\*/g, '$1').replace(/\n/g, '
') }} /> + ) : ( +

{block}

+ )} +
+ ))} +
+ + + +