Set Up a Virtual Learning Environment with Interactive Features

Create the following Firestore collections. courses: title (String), description (String), instructorId (String), thumbnailUrl (String), category (String), totalLessons (Integer), totalXP (Integer), isPublished (Boolean). courses/{id}/modules: title (String), order (Integer), type (String: video, reading, assignment). For video modules: videoUrl (String), durationMinutes (Integer). For reading modules: content (String, rich text). For assignment modules: instructions (String), dueDate (Timestamp). courses/{id}/quizzes: title (String), moduleId (String, optional — ties quiz to a module), questions (Array of Maps, each with questionText, type: multiple_choice/true_false/short_answer, options Array, correctAnswer String, points Integer). student_progress: userId (String), courseId (String), completedModuleIds (Array of Strings), quizScores (Map of quizId to score), totalXP (Integer), enrolledAt (Timestamp), lastAccessedAt (Timestamp). user_gamification: userId (String), totalXP (Integer), level (Integer), badges (Array of Maps with badgeName, earnedAt), streakDays (Integer). discussions: courseId (String), userId (String), userName (String), message (String), timestamp (Timestamp), parentId (String, null for top-level posts). Add sample data: 2 courses with 4-6 modules each, 1 quiz per course, and 2-3 discussion posts.

Create a page called StudentDashboard. Add a Backend Query for student_progress where userId equals currentUserUid. At the top, display a greeting Row with 'Welcome back, {displayName}' and the user's current XP and level from user_gamification. Below, add a section titled 'My Courses' with a horizontal ListView (scrollDirection horizontal, height 180). Each item is a Container (width 160) with the course thumbnail Image, title Text, and a CircularPercentIndicator showing completion percentage. Calculate the percentage using a Custom Function: completedModuleIds.length / totalLessons. Set the progress color to green above 75%, amber 25-75%, red below 25%. On tap, navigate to the CourseViewer page. Below the courses, add a section titled 'Upcoming Deadlines'. Query all modules of type 'assignment' across enrolled courses where dueDate is greater than now, ordered by dueDate ascending, limited to 5. Display each as a Row with an Icon (Icons.assignment), the module title, course name, and a relative date (use the timeUntil Custom Function returning 'Tomorrow', 'In 3 days', etc.). At the bottom, add a section titled 'Continue Learning' showing the most recently accessed course with a prominent 'Continue' button that navigates directly to the last incomplete module.

Create a page called CourseViewer with a Page Parameter courseDocRef. Add a Backend Query for the course document and a second query for the modules subcollection ordered by the order field ascending. Display a left-side ListView of module titles as a table of contents (on tablet/desktop) or a top TabBar (on mobile). Each module row shows an Icon based on type (Icons.play_circle for video, Icons.article for reading, Icons.assignment for assignment), the title, and a Checkbox indicating completion (checked if the module ID exists in the student's completedModuleIds array). Tapping a module loads the content in the main area. For video modules: use a Custom Widget wrapping Chewie or video_player to play the videoUrl. Add a 'Mark as Complete' button below the video that adds the module ID to the completedModuleIds array in the student_progress document and awards XP (add 10 to totalXP in user_gamification). For reading modules: render the content in a Column with Text widgets using appropriate styling. For assignment modules: show the instructions and a TextField for submission with a Submit button. When a student completes the last module in a course, trigger a Custom Action that awards a course completion badge (add to the badges array in user_gamification) and shows a congratulatory Dialog.

Create a page called QuizPage with Page Parameters quizDocRef and courseId. Query the quiz document to get the title and questions array. Display the quiz title and question count at the top. Use a PageView widget to show one question per page with swipe navigation. For each question, display the questionText in titleMedium. Render different input widgets based on the type field: for multiple_choice, use RadioButton widgets for each option in the options array, bound to a Page State variable for the selected answer. For true_false, show two RadioButtons labeled True and False. For short_answer, show a TextField. Track all answers in a Page State variable answerMap (JSON map of question index to selected answer). Add Previous and Next buttons below the question for PageView navigation. On the last question, show a Submit Quiz button. The submit action iterates through answerMap, compares each answer against the correctAnswer field, tallies the score, and stores the result in the student_progress document's quizScores map (quizId to percentage score). Display results in a Dialog: total score, percentage, pass/fail (70% threshold), and a breakdown of correct/incorrect answers with explanations. Award XP based on score: full points for 90%+, half for 70-89%, none below 70%.

Create a page called CourseDiscussion with a Page Parameter courseId. Add a Backend Query for the discussions collection where courseId matches and parentId is null (top-level posts), ordered by timestamp descending. Display posts in a ListView. Each post shows a CircleImage avatar, userName, the message text, a relative timestamp, and a Reply button. Tapping Reply opens a BottomSheet with a TextField and a Post button. The Post action creates a new discussions document with parentId set to the parent post's document ID. Below each top-level post, add a nested ListView querying discussions where parentId equals the post ID, ordered by timestamp ascending. Style replies with a left border (Container with left borderWidth 2, primary color) and slight left margin to visually indicate nesting. At the top of the page, add a TextField with a 'New Post' button for creating top-level discussion posts. Include the userName denormalized from the Auth profile to avoid extra queries on every post render. Add a report IconButton on each post for moderation.

Create a page called Leaderboard. Query user_gamification ordered by totalXP descending, limited to 50. Display a ListView where each item shows the rank number, user avatar (CircleImage from user profile), display name, totalXP with a trophy icon, level, and badge count. Highlight the current user's row with a distinct background color (use Conditional Styles where userId equals currentUserUid). At the top, show the current user's stats in a prominent card: total XP, current level, streak days, and a GridView of earned badges (each badge as an Icon with a label). Badges are awarded by the Custom Action triggered at specific milestones: First Lesson (complete 1 module), Course Complete (finish all modules in a course), Quiz Master (score 90%+ on 3 quizzes), Discussion Starter (create 5 forum posts), Week Streak (access the app 7 consecutive days). Level is calculated from totalXP: Level 1 at 0 XP, Level 2 at 100 XP, Level 3 at 300 XP, and so on with increasing thresholds stored in an App State constant list. Display a LinearProgressIndicator showing progress toward the next level. When a new badge is earned, show an animated Dialog with the badge icon, name, and a congratulatory message.