qcm_screen.dart

Go to the documentation of this file.

import 'package:connect/core/localization/app_localizations.dart';
import 'package:connect/core/ui/theme/color_palette.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
 
import '../../../../core/ui/screens/views/faild_to_fetch_data_view.dart';
import '../../../../core/ui/widgets/custom_scaffold.dart';
import '../../domain/entities/qcm_entity.dart';
import '../logic/cubit/elearning_v2_cubit.dart';
 
class QcmScreen extends StatefulWidget {
  final int courseId;
  final double currentProgress;
  final Function(double) onComplete;
 
  const QcmScreen({
    super.key,
    required this.courseId,
    required this.currentProgress,
    required this.onComplete,
  });
 
  @override
  State<QcmScreen> createState() => _QcmScreenState();
}
 
class _QcmScreenState extends State<QcmScreen> {
  int _currentQuestionIndex = 0;
  List<int?> _userAnswers = [];
  bool _quizCompleted = false;
  double _score = 0.0;
 
  @override
  void initState() {
    super.initState();
    _loadQuestions();
  }
 
  void _loadQuestions() {
    context.read<ElearningV2Cubit>().loadCourseDetails(widget.courseId);
  }
 
  @override
  Widget build(BuildContext context) {
    return BlocBuilder<ElearningV2Cubit, ElearningV2State>(
      builder: (context, state) {
        return CustomScaffold(
          title: AppLocalizations.of(context).translate('Knowledge Check'),
          isLoading: state is LoadingCourseDetailsState,
          isLeadingVisible: true,
          body: SafeArea(
            child: _buildBody(state),
          ),
        );
      },
    );
  }
 
  Widget _buildBody(ElearningV2State state) {
    if (state is CourseDetailsLoadedState) {
      final qcmList = state.qcmList;
 
      // Initialize user answers if not already done
      if (_userAnswers.isEmpty) {
        _userAnswers = List.filled(qcmList.length, null);
      }
 
      if (_quizCompleted) {
        return _buildQuizResults(qcmList);
      } else {
        return _buildQuizQuestion(qcmList);
      }
    } else if (state is CourseDetailsLoadingFailureState) {
      return FailedToFetchDataView(
        onRetry: _loadQuestions,
      );
    } else {
      return const SizedBox();
    }
  }
 
  Widget _buildQuizQuestion(List<QcmEntity> questions) {
    if (questions.isEmpty) {
      return Center(
        child: Text(
          AppLocalizations.of(context)
              .translate('No questions available for this course'),
          style: Theme.of(context).textTheme.bodyMedium,
        ),
      );
    }
 
    final currentQuestion = questions[_currentQuestionIndex];
 
    return Padding(
      padding: EdgeInsets.all(16.r),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // Progress indicator
          LinearProgressIndicator(
            value: (_currentQuestionIndex + 1) / questions.length,
            backgroundColor: Colors.grey.withOpacity(0.2),
            valueColor: AlwaysStoppedAnimation<Color>(
              Theme.of(context).primaryColor,
            ),
            borderRadius: BorderRadius.circular(4.r),
            minHeight: 3.r,
          ),
          SizedBox(height: 8.r),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                '${AppLocalizations.of(context).translate('Question')} ${_currentQuestionIndex + 1} of ${questions.length}',
                style: Theme.of(context).textTheme.bodySmall?.copyWith(
                      color: Theme.of(context).hintColor,
                    ),
              ),
              Text(
                '${((_currentQuestionIndex + 1) / questions.length * 100).toInt()}%',
                style: Theme.of(context).textTheme.displaySmall?.copyWith(
                      color: Theme.of(context).colorScheme.primary,
                    ),
              ),
            ],
          ),
          SizedBox(height: 24.r),
 
          // Question
          Text(
            currentQuestion.question ??
                AppLocalizations.of(context).translate('Question'),
            style: Theme.of(context).textTheme.displaySmall,
          ),
          SizedBox(height: 24.r),
 
          // Options
          Expanded(
            child: ListView.separated(
              itemCount: currentQuestion.options?.length ?? 0,
              separatorBuilder: (context, index) => SizedBox(height: 12.r),
              itemBuilder: (context, index) {
                final isSelected = _userAnswers[_currentQuestionIndex] == index;
 
                return GestureDetector(
                  onTap: () {
                    setState(() {
                      _userAnswers[_currentQuestionIndex] = index;
                    });
                  },
                  child: Container(
                    padding: EdgeInsets.all(16.r),
                    decoration: BoxDecoration(
                      color: isSelected
                          ? Theme.of(context).primaryColor.withOpacity(0.1)
                          : Colors.transparent,
                      borderRadius: BorderRadius.circular(10.r),
                    ),
                    child: Row(
                      children: [
                        Container(
                          width: 24.r,
                          height: 24.r,
                          decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            color: isSelected
                                ? Theme.of(context).primaryColor
                                : Colors.transparent,
                            border: Border.all(
                              color: isSelected
                                  ? Theme.of(context).primaryColor
                                  : Theme.of(context).hintColor,
                              width: 1,
                            ),
                          ),
                          child: isSelected
                              ? Icon(
                                  Icons.check,
                                  size: 16.r,
                                  color:
                                      Theme.of(context).colorScheme.onPrimary,
                                )
                              : null,
                        ),
                        SizedBox(width: 12.r),
                        Expanded(
                          child: Text(
                            currentQuestion.options?[index] ?? '',
                            style: Theme.of(context).textTheme.bodyMedium,
                          ),
                        ),
                      ],
                    ),
                  ),
                );
              },
            ),
          ),
 
          // Navigation buttons
          SizedBox(height: 16.r),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              if (_currentQuestionIndex > 0)
                ElevatedButton(
                  onPressed: () {
                    setState(() {
                      _currentQuestionIndex--;
                    });
                  },
                  style: ElevatedButton.styleFrom(
                    padding: EdgeInsets.symmetric(horizontal: 20, vertical: 15),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(200),
                    ),
                  ),
                  child:
                      Text(AppLocalizations.of(context).translate('Previous')),
                )
              else
                SizedBox(width: 100.r),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  padding: EdgeInsets.symmetric(horizontal: 20, vertical: 15),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(200),
                  ),
                ),
                onPressed: _userAnswers[_currentQuestionIndex] != null
                    ? () {
                        if (_currentQuestionIndex < questions.length - 1) {
                          setState(() {
                            _currentQuestionIndex++;
                          });
                        } else {
                          // Calculate score
                          int correctAnswers = 0;
                          for (int i = 0; i < questions.length; i++) {
                            if (_userAnswers[i] ==
                                questions[i].correctAnswerIndex) {
                              correctAnswers++;
                            }
                          }
 
                          _score = correctAnswers / questions.length;
 
                          setState(() {
                            _quizCompleted = true;
                          });
                        }
                      }
                    : null,
                child: Text(
                  _currentQuestionIndex < questions.length - 1
                      ? AppLocalizations.of(context).translate('Next')
                      : AppLocalizations.of(context).translate('Finish'),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
 
  Widget _buildQuizResults(List<QcmEntity> questions) {
    final correctAnswers = _userAnswers
        .asMap()
        .entries
        .where(
          (entry) => entry.value == questions[entry.key].correctAnswerIndex,
        )
        .length;
 
    return Padding(
      padding: EdgeInsets.all(16.r),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          SizedBox(height: 24.r),
 
          // Score circle
          Container(
            width: 150.r,
            height: 150.r,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: Theme.of(context).primaryColor.withOpacity(0.1),
            ),
            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    '${(_score * 100).toInt()}%',
                    style: Theme.of(context).textTheme.displayLarge?.copyWith(
                          color: Theme.of(context).primaryColor,
                        ),
                  ),
                  Text(
                    AppLocalizations.of(context).translate('Score'),
                    style: Theme.of(context).textTheme.bodyLarge,
                  ),
                ],
              ),
            ),
          ),
          SizedBox(height: 30.r),
 
          // Results summary
          Center(
            child: Text(
              AppLocalizations.of(context).translate('Quiz Completed'),
              style: Theme.of(context).textTheme.displayMedium,
            ),
          ),
          SizedBox(height: 15.r),
          Text(
            '${AppLocalizations.of(context).translate('You answered')} $correctAnswers ${AppLocalizations.of(context).translate('out of')} ${questions.length} ${AppLocalizations.of(context).translate('questions correctly')}',
            style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                  color: Theme.of(context).hintColor,
                ),
            textAlign: TextAlign.center,
          ),
          SizedBox(height: 32.r),
 
          // Review answers button
          ElevatedButton.icon(
            onPressed: () {
              setState(() {
                _quizCompleted = false;
                _currentQuestionIndex = 0;
              });
            },
            style: ElevatedButton.styleFrom(
              padding: EdgeInsets.symmetric(
                horizontal: 30,
                vertical: 20,
              ),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(200),
              ),
              backgroundColor: Theme.of(context).primaryColor.withOpacity(0.11),
              foregroundColor: Theme.of(context).primaryColor.withOpacity(0.8),
            ),
            icon: Icon(Icons.refresh),
            label: Text(
              AppLocalizations.of(context).translate('Review Answers'),
            ),
          ),
          SizedBox(height: 16.r),
 
          // Complete button
          ElevatedButton.icon(
            onPressed: () {
              widget.onComplete(_score);
              Navigator.pop(context);
            },
            style: ElevatedButton.styleFrom(
              padding: EdgeInsets.symmetric(
                horizontal: 30,
                vertical: 20,
              ),
              // foregroundColor: ColorPalette.lightGreen,
              backgroundColor: Theme.of(context).primaryColor,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(200),
              ),
            ),
            icon: Icon(Icons.check_circle),
            label: Text(
              AppLocalizations.of(context).translate('Complete'),
            ),
          ),
        ],
      ),
    );
  }
}