Update Saqel Platform: 2026-09-12 13:38:49

This commit is contained in:
Hamza-Ayed
2026-09-12 13:38:49 +03:00
parent 1f31369893
commit f4d4f02853
34 changed files with 9136 additions and 386 deletions
@@ -0,0 +1,688 @@
import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import '../../../core/theme/app_colors.dart';
import '../../../data/models/subject_model.dart';
import '../../widgets/luxury_widgets.dart';
/// Modal bottom sheet implementing the 60-second Thinking Pause and scaffolded step-by-step solution builder.
/// Pedagogy: Enforces student mental construction before revealing steps, eliminating passive learning.
class ScaffoldedThinkingPauseSheet extends StatefulWidget {
final CurriculumLessonItemModel lesson;
final SubjectModel? subject;
final VoidCallback? onCompleted;
const ScaffoldedThinkingPauseSheet({
super.key,
required this.lesson,
this.subject,
this.onCompleted,
});
static Future<void> show(
BuildContext context, {
required CurriculumLessonItemModel lesson,
SubjectModel? subject,
VoidCallback? onCompleted,
}) {
return showModalBottomSheet(
context: context,
isScrollControlled: true,
backgroundColor: Colors.transparent,
builder: (ctx) => ScaffoldedThinkingPauseSheet(
lesson: lesson,
subject: subject,
onCompleted: onCompleted,
),
);
}
@override
State<ScaffoldedThinkingPauseSheet> createState() =>
_ScaffoldedThinkingPauseSheetState();
}
class _ScaffoldedThinkingPauseSheetState
extends State<ScaffoldedThinkingPauseSheet> {
int _secondsRemaining = 60;
Timer? _countdownTimer;
bool _thinkingPhaseActive = true;
int _revealedStep = 0; // 0: None, 1: Step 1, 2: Step 2, 3: Step 3, 4: Complete
@override
void initState() {
super.initState();
_startTimer();
}
void _startTimer() {
_countdownTimer?.cancel();
_countdownTimer = Timer.periodic(const Duration(seconds: 1), (timer) {
if (!mounted) return;
if (_secondsRemaining > 0) {
setState(() => _secondsRemaining--);
} else {
timer.cancel();
setState(() {
_thinkingPhaseActive = false;
if (_revealedStep == 0) _revealedStep = 1;
});
}
});
}
void _skipThinkingPhase() {
_countdownTimer?.cancel();
setState(() {
_secondsRemaining = 0;
_thinkingPhaseActive = false;
if (_revealedStep == 0) _revealedStep = 1;
});
}
void _revealNextStep() {
if (_revealedStep < 4) {
setState(() => _revealedStep++);
if (_revealedStep == 4) {
widget.onCompleted?.call();
}
}
}
@override
void dispose() {
_countdownTimer?.cancel();
super.dispose();
}
@override
Widget build(BuildContext context) {
final isMath = (widget.subject?.id ?? '').contains('math') ||
widget.lesson.title.contains('معادل') ||
widget.lesson.title.contains('رياضيات');
final isPhysics = (widget.subject?.id ?? '').contains('physic') ||
widget.lesson.title.contains('حركة') ||
widget.lesson.title.contains('متجه');
return Container(
constraints: BoxConstraints(
maxHeight: MediaQuery.of(context).size.height * 0.88,
),
decoration: const BoxDecoration(
color: AppColors.darkBackground,
borderRadius: BorderRadius.vertical(top: Radius.circular(26)),
border: Border(
top: BorderSide(color: AppColors.saqelCyan, width: 1.8),
),
),
child: SafeArea(
top: false,
child: Column(
children: [
// Drag Handle
Container(
margin: const EdgeInsets.only(top: 12, bottom: 8),
width: 44,
height: 5,
decoration: BoxDecoration(
color: Colors.white24,
borderRadius: BorderRadius.circular(3),
),
),
// Top Header Bar
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
child: Row(
children: [
Container(
width: 38,
height: 38,
decoration: BoxDecoration(
color: AppColors.guardianAmber.withAlpha(30),
borderRadius: BorderRadius.circular(10),
),
child: const Icon(
CupertinoIcons.timer,
color: AppColors.guardianAmber,
size: 20,
),
),
const SizedBox(width: 12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'وقفة تفكير وبناء الحل خطوة بخطوة ⏱️',
style: TextStyle(
color: Colors.white,
fontSize: 15,
fontWeight: FontWeight.w800,
),
),
const SizedBox(height: 2),
Text(
widget.lesson.title,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: AppColors.textSecondaryDark,
fontSize: 11.5,
),
),
],
),
),
IconButton(
icon: const Icon(CupertinoIcons.xmark_circle_fill,
color: Colors.white38, size: 24),
onPressed: () => Navigator.of(context).pop(),
),
],
),
),
const Divider(color: AppColors.darkCardBorder, height: 1),
// Scrollable Content
Expanded(
child: ListView(
padding: const EdgeInsets.all(20),
children: [
// Problem statement box
_buildProblemCard(isMath, isPhysics),
const SizedBox(height: 18),
// 60-second Thinking Timer or Step Construction view
if (_thinkingPhaseActive)
_buildThinkingTimerCard()
else
_buildStepByStepSolutionCard(isMath, isPhysics),
],
),
),
// Bottom Action Bar
_buildBottomActionBar(),
],
),
),
);
}
Widget _buildProblemCard(bool isMath, bool isPhysics) {
String title;
String problemBody;
String subHint;
if (isMath) {
title = 'المسألة النموذجية الوزارية (حل نظام معادلتين):';
problemBody = 'المعادلة (1) الخطية: y - x = 1\n'
'المعادلة (2) التربيعية: x² + y² = 13\n\n'
'المطلوب: جد مجموعة حل النظام بيانياً وجبرياً.';
subHint = 'تلميح ذهني: ابدأ بعزل المتغير y في المعادلة الخطية أولاً، ثم عوضه في التربيعية.';
} else if (isPhysics) {
title = 'المسألة النموذجية الوزارية (حركة المقذوفات في بعدين):';
problemBody = 'أُطلقت قذيفة بسرعة ابتدائية v₀ = 50 m/s وبزاوية θ = 37° مع الأفق.\n'
'بإهمال مقاومة الهواء واعتبار التسارع g = 10 m/s²:\n\n'
'المطلوب: جد المركبتين الأفقية والعمودية للسرعة، وأقصى ارتفاع تصل إليه القذيفة.';
subHint = 'تلميح ذهني: حلل السرعة إلى vx و vy أولاً، وتذكر أن السرعة العمودية عند أقصى ارتفاع تساوي صفراً.';
} else {
title = 'السؤال النموذجي التطبيقي للدرس:';
problemBody = 'حلل مفهوم «${widget.lesson.title}» وفق القواعد والمعايير المعتمدة في المنهاج الوزاري.\n\n'
'المطلوب: صغ خطوات الإثبات والتحليل مع تقديم الدليل والمثال التوضيحي.';
subHint = 'تلميح ذهني: اربط القاعدة بأركانها الأساسية ونفذ شروط التحقق المنهجي.';
}
return LuxuryCard(
borderColor: AppColors.saqelCyan.withAlpha(70),
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
const Icon(CupertinoIcons.doc_text_search,
color: AppColors.saqelCyan, size: 18),
const SizedBox(width: 8),
Expanded(
child: Text(
title,
style: const TextStyle(
color: AppColors.saqelCyan,
fontSize: 13.5,
fontWeight: FontWeight.w700,
),
),
),
],
),
const SizedBox(height: 10),
Container(
width: double.infinity,
padding: const EdgeInsets.all(14),
decoration: BoxDecoration(
color: const Color(0xFF07101E),
borderRadius: BorderRadius.circular(12),
border: Border.all(color: Colors.white12),
),
child: Text(
problemBody,
style: const TextStyle(
color: Colors.white,
fontSize: 13.5,
height: 1.55,
fontWeight: FontWeight.w600,
),
),
),
const SizedBox(height: 8),
Text(
subHint,
style: const TextStyle(
color: AppColors.guardianAmber,
fontSize: 11.5,
fontWeight: FontWeight.w600,
),
),
],
),
),
);
}
Widget _buildThinkingTimerCard() {
final progress = (60 - _secondsRemaining) / 60.0;
return LuxuryCard(
borderColor: AppColors.guardianAmber.withAlpha(90),
child: Padding(
padding: const EdgeInsets.all(20),
child: Column(
children: [
// Circular countdown display
Stack(
alignment: Alignment.center,
children: [
SizedBox(
width: 96,
height: 96,
child: CircularProgressIndicator(
value: progress,
strokeWidth: 6,
backgroundColor: Colors.white12,
valueColor: const AlwaysStoppedAnimation<Color>(
AppColors.guardianAmber),
),
),
Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
'$_secondsRemaining',
style: const TextStyle(
color: Colors.white,
fontSize: 28,
fontWeight: FontWeight.w900,
fontFamily: 'SF Pro Text',
),
),
const Text(
'ثانية',
style: TextStyle(
color: AppColors.textSecondaryDark,
fontSize: 11,
fontWeight: FontWeight.w600,
),
),
],
),
],
),
const SizedBox(height: 16),
const Text(
'وقفة تأمل ذهني مستقل (60 ثانية) 🧠',
style: TextStyle(
color: Colors.white,
fontSize: 15,
fontWeight: FontWeight.w800,
),
),
const SizedBox(height: 8),
const Text(
'لا تبدأ بكتابة الحل فوراً! تدرب على استراتيجية الفهم أولاً:\n'
'• ما المتغيرات المتاحة وما نوع كل معادلة؟\n'
'• أي طرف هو الأيسر للعزل الرياضي؟\n'
'• توقع عدد الحلول الممكنة هندسياً قبل الحساب.',
textAlign: TextAlign.center,
style: TextStyle(
color: AppColors.textSecondaryDark,
fontSize: 12.5,
height: 1.55,
),
),
const SizedBox(height: 16),
ElevatedButton.icon(
icon: const Icon(CupertinoIcons.play_circle_fill, size: 18),
label: const Text('أنا جاهز، ابدأ بناء الحل خطوة بخطوة 🚀'),
style: ElevatedButton.styleFrom(
backgroundColor: AppColors.appleBlue,
foregroundColor: Colors.white,
padding:
const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(14)),
elevation: 4,
),
onPressed: _skipThinkingPhase,
),
],
),
),
);
}
Widget _buildStepByStepSolutionCard(bool isMath, bool isPhysics) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Expanded(
child: Text(
'بناء الحل التراكمي خطوة بخطوة 📐',
style: TextStyle(
color: Colors.white,
fontSize: 15,
fontWeight: FontWeight.w800,
),
),
),
Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
decoration: BoxDecoration(
color: AppColors.saqelCyan.withAlpha(25),
borderRadius: BorderRadius.circular(10),
border: Border.all(color: AppColors.saqelCyan.withAlpha(60)),
),
child: Text(
'الخطوة $_revealedStep من 4',
style: const TextStyle(
color: AppColors.saqelCyan,
fontSize: 11,
fontWeight: FontWeight.w700,
),
),
),
],
),
const SizedBox(height: 14),
// Step 1
_buildStepTile(
stepNum: 1,
title: isMath
? 'الخطوة 1: عزل المتغير في المعادلة الخطية'
: (isPhysics
? 'الخطوة 1: تحليل السرعة الابتدائية إلى مركبتين'
: 'الخطوة 1: تحديد المعطيات وضبط الأركان'),
detail: isMath
? 'من المعادلة (1): y - x = 1 ⟹ y = x + 1\nتم جعل y موضوعاً للقانون لتسهيل التعويض.'
: (isPhysics
? 'v₀x = v₀ cos(37°) = 50 × 0.8 = 40 m/s (سرعة أفقية ثابتة)\n'
'v₀y = v₀ sin(37°) = 50 × 0.6 = 30 m/s (سرعة رأسية ابتدائية)'
: 'حصر المتغيرات والشروط الحاكمة للدرس وفق المنهج الوزاري.'),
isRevealed: _revealedStep >= 1,
),
const SizedBox(height: 12),
// Step 2
_buildStepTile(
stepNum: 2,
title: isMath
? 'الخطوة 2: التعويض في المعادلة التربيعية وتصفيرها'
: (isPhysics
? 'الخطوة 2: تطبيق معادلة الحركة الرأسية عند الذروة'
: 'الخطوة 2: تطبيق القاعدة المنهجية المباشرة'),
detail: isMath
? 'نعوض y = x + 1 في المعادلة (2):\nx² + (x + 1)² = 13\nx² + (x² + 2x + 1) = 13\n2x² + 2x + 1 - 13 = 0 ⟹ 2x² + 2x - 12 = 0\nبالقسمة على 2: x² + x - 6 = 0'
: (isPhysics
? 'عند أقصى ارتفاع: vy = 0\n'
'نطبق: vy² = v₀y² - 2g(h_max)\n'
'0 = (30)² - 2(10)(h_max)\n'
'0 = 900 - 20(h_max) ⟹ 20(h_max) = 900 ⟹ h_max = 45 m'
: 'إجراء المقارنة النحوية أو الاستنتاج العلمي بناءً على الأركان السابقة.'),
isRevealed: _revealedStep >= 2,
),
const SizedBox(height: 12),
// Step 3
_buildStepTile(
stepNum: 3,
title: isMath
? 'الخطوة 3: حساب المميز والتحليل إلى العوامل'
: (isPhysics
? 'الخطوة 3: حساب زمن الصعود وزمن التحليق الكلي'
: 'الخطوة 3: استخراج الحكم المنهجي النهائي'),
detail: isMath
? 'المميز الجبري: Δ = b² - 4ac = (1)² - 4(1)(-6) = 1 + 24 = 25 > 0 (يوجد حلان حقيقيان)\n'
'تحليل العبارة التربيعية:\n(x + 3)(x - 2) = 0\n'
'إما x = 2 أو x = -3'
: (isPhysics
? 'vy = v₀y - gt ⟹ 0 = 30 - 10t_up ⟹ t_up = 3 s\n'
'زمن التحليق الكلي: T_total = 2 × t_up = 2 × 3 = 6 s'
: 'التأكد من خلو الحل من التناقضات وتوافق الشروط الوزارية.'),
isRevealed: _revealedStep >= 3,
),
const SizedBox(height: 12),
// Step 4
_buildStepTile(
stepNum: 4,
title: isMath
? 'الخطوة 4: إيجاد الأزواج المرتبة والتحقق البياني'
: (isPhysics
? 'الخطوة 4: حساب المدى الأفقي الكلي والتحقق'
: 'الخطوة 4: توثيق النتيجة ونموذج الإجابة النموذجية'),
detail: isMath
? 'عند x = 2: y = 2 + 1 = 3 ⟹ النقطة (2, 3)\n'
'عند x = -3: y = -3 + 1 = -2 ⟹ النقطة (-3, -2)\n\n'
'مجموعة حل النظام: {(2, 3), (-3, -2)}\n'
'التحقق: 2² + 3² = 4 + 9 = 13 ✔ (تم التحقق جبرياً وهندسياً بنجاح)'
: (isPhysics
? 'المدى الأفقي: R = vx × T_total = 40 × 6 = 240 m\n'
'القذيفة تقطع 240 متراً أفقياً وتصل ارتفاعاً قدره 45 متراً ✔'
: 'تم صياغة الجواب النموذجي المعتمد بالكامل مع الإثبات الوزاري ✔'),
isRevealed: _revealedStep >= 4,
),
],
);
}
Widget _buildStepTile({
required int stepNum,
required String title,
required String detail,
required bool isRevealed,
}) {
if (!isRevealed) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
decoration: BoxDecoration(
color: Colors.black26,
borderRadius: BorderRadius.circular(14),
border: Border.all(color: Colors.white10),
),
child: Row(
children: [
Container(
width: 28,
height: 28,
decoration: BoxDecoration(
color: Colors.white12,
borderRadius: BorderRadius.circular(8),
),
child: Center(
child: Text(
'$stepNum',
style: const TextStyle(
color: Colors.white38,
fontSize: 12,
fontWeight: FontWeight.w700),
),
),
),
const SizedBox(width: 12),
Expanded(
child: Text(
'الخطوة $stepNum: قيد الإنشاء الذهني (اضغط لإظهار الخطوة)',
style: const TextStyle(
color: Colors.white38,
fontSize: 12,
fontWeight: FontWeight.w600),
),
),
const Icon(CupertinoIcons.lock_fill,
color: Colors.white24, size: 16),
],
),
);
}
return LuxuryCard(
borderColor: AppColors.saqelCyan.withAlpha(90),
child: Padding(
padding: const EdgeInsets.all(14),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Container(
width: 28,
height: 28,
decoration: BoxDecoration(
color: AppColors.saqelCyan.withAlpha(30),
borderRadius: BorderRadius.circular(8),
border: Border.all(color: AppColors.saqelCyan),
),
child: Center(
child: Text(
'$stepNum',
style: const TextStyle(
color: AppColors.saqelCyan,
fontSize: 13,
fontWeight: FontWeight.w800),
),
),
),
const SizedBox(width: 10),
Expanded(
child: Text(
title,
style: const TextStyle(
color: Colors.white,
fontSize: 13,
fontWeight: FontWeight.w700,
),
),
),
const Icon(CupertinoIcons.checkmark_circle_fill,
color: AppColors.emeraldGreen, size: 18),
],
),
const SizedBox(height: 10),
Container(
width: double.infinity,
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: const Color(0xFF07101E),
borderRadius: BorderRadius.circular(10),
border: Border.all(color: Colors.white12),
),
child: Text(
detail,
style: const TextStyle(
color: Colors.white70,
fontSize: 12.5,
height: 1.55,
fontWeight: FontWeight.w500,
),
),
),
],
),
),
);
}
Widget _buildBottomActionBar() {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 14),
decoration: const BoxDecoration(
color: AppColors.darkSurface,
border: Border(top: BorderSide(color: AppColors.darkCardBorder)),
),
child: Row(
children: [
if (_thinkingPhaseActive) ...[
Expanded(
child: OutlinedButton(
style: OutlinedButton.styleFrom(
side: const BorderSide(color: Colors.white24),
padding: const EdgeInsets.symmetric(vertical: 12),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12)),
),
onPressed: () => Navigator.of(context).pop(),
child: const Text('إغلاق والعودة للفيديو',
style: TextStyle(color: Colors.white70, fontSize: 13)),
),
),
] else if (_revealedStep < 4) ...[
Expanded(
child: ElevatedButton.icon(
icon: const Icon(CupertinoIcons.arrow_down_circle_fill,
size: 18),
label: Text(
'اكشف الخطوة التالية (${_revealedStep + 1} من 4) ⬇️'),
style: ElevatedButton.styleFrom(
backgroundColor: AppColors.saqelCyan,
foregroundColor: Colors.black,
padding: const EdgeInsets.symmetric(vertical: 12),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12)),
elevation: 2,
),
onPressed: _revealNextStep,
),
),
] else ...[
Expanded(
child: ElevatedButton.icon(
icon: const Icon(CupertinoIcons.checkmark_seal_fill, size: 18),
label: const Text('اكتمل بناء الحل المنهجي بنجاح! استمر 🎯'),
style: ElevatedButton.styleFrom(
backgroundColor: AppColors.emeraldGreen,
foregroundColor: Colors.black,
padding: const EdgeInsets.symmetric(vertical: 12),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12)),
elevation: 2,
),
onPressed: () => Navigator.of(context).pop(),
),
),
],
],
),
);
}
}
@@ -29,6 +29,7 @@ import '../../widgets/socratic_dialog.dart';
import 'package:video_player/video_player.dart';
import 'package:flutter_tts/flutter_tts.dart';
import '../curriculum/math_interactive_lab_view.dart';
import 'scaffolded_thinking_pause_sheet.dart';
/// مشغل الفيديو السقراطي الذكي ونقاط الفحص والإرجاع العلاجي
class SocraticVideoPlayerScreen extends StatefulWidget {
@@ -717,6 +718,19 @@ class _SocraticVideoPlayerScreenState extends State<SocraticVideoPlayerScreen> w
),
),
const Spacer(),
IconButton(
tooltip: 'وقفة تفكير وبناء الحل خطوة بخطوة',
icon: const Icon(CupertinoIcons.timer, color: AppColors.guardianAmber, size: 20),
onPressed: () {
context.read<VideoPlaybackCubit>().pause();
ScaffoldedThinkingPauseSheet.show(
context,
lesson: widget.lesson,
subject: widget.subject,
);
},
),
const SizedBox(width: 4),
Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
decoration: BoxDecoration(
@@ -844,6 +858,51 @@ class _SocraticVideoPlayerScreenState extends State<SocraticVideoPlayerScreen> w
],
),
),
// Thinking Pause & Scaffolded Solution Construction Card
GestureDetector(
onTap: () {
context.read<VideoPlaybackCubit>().pause();
ScaffoldedThinkingPauseSheet.show(
context,
lesson: widget.lesson,
subject: widget.subject,
);
},
child: LuxuryCard(
borderColor: AppColors.guardianAmber.withAlpha(90),
child: Row(
children: [
Container(
width: 44,
height: 44,
decoration: BoxDecoration(
color: AppColors.guardianAmber.withAlpha(25),
borderRadius: BorderRadius.circular(12),
),
child: const Icon(CupertinoIcons.timer, color: AppColors.guardianAmber, size: 24),
),
const SizedBox(width: 14),
const Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'وقفة تفكير ذهني وبناء الحل خطوة بخطوة ⏱️',
style: TextStyle(color: Colors.white, fontSize: 13.5, fontWeight: FontWeight.w800),
),
SizedBox(height: 3),
Text(
'تأمل المسألة لمدة 60 ثانية قبل كشف خطوات الإثبات والحل المنهجي.',
style: TextStyle(color: AppColors.textSecondaryDark, fontSize: 11.5),
),
],
),
),
const Icon(CupertinoIcons.chevron_left, color: AppColors.guardianAmber, size: 18),
],
),
),
),
const SizedBox(height: 16),
// Interactive Digital Chalkboard & Key Concept Breakdown
@@ -1025,6 +1084,23 @@ class _SocraticVideoPlayerScreenState extends State<SocraticVideoPlayerScreen> w
);
},
),
OutlinedButton.icon(
icon: const Icon(CupertinoIcons.timer, size: 16, color: AppColors.guardianAmber),
label: const Text('وقفة تفكير وبناء الحل (60 ثانية) ⏱️', style: TextStyle(color: AppColors.guardianAmber, fontSize: 12, fontWeight: FontWeight.w700)),
style: OutlinedButton.styleFrom(
side: const BorderSide(color: AppColors.guardianAmber),
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
),
onPressed: () {
context.read<VideoPlaybackCubit>().pause();
ScaffoldedThinkingPauseSheet.show(
context,
lesson: widget.lesson,
subject: widget.subject,
);
},
),
if (isMath)
OutlinedButton.icon(
icon: const Icon(CupertinoIcons.function, size: 16, color: AppColors.saqelCyan),