Choose your role!
Landing page
Change your avatar
Classes you created as an Admin!
Create a new class
List of all the chapters in your Class
Upload your course notes

Project Name: D&C: Divide and Conquer

Tagline

An interactive learning platform that uses AI-generated narrative adventures to improve student engagement with course material.

Inspiration and Problem Statement

As university students, we've frequently observed a common pattern in our studies: the challenge of staying engaged with dense, static course materials like lecture notes or PDFs. Passive reading often leads to a superficial understanding, making exam preparation a process of rote memorisation rather than genuine comprehension.

This led us to our core research question: Can we leverage principles of active recall and situated learning to create a more effective study tool? Our solution, D&C, is an exploration of this question. We drew inspiration from the interactive storytelling of tabletop games like Dungeons & Dragons, not for the fantasy elements themselves, but for the underlying mechanics of engagement: active choice, problem-solving, and contextual decision-making.

D&C aims to convert the passive act of reading notes into an active process of inquiry and application. What It Does
D&C is a web application designed for two user personas: educators and students. It functions as a pipeline, transforming raw educational content into an interactive, narrative-based learning module.

Educator Workflow

Content Upload: An educator uploads course material in .txt or .pdf format through a simple web interface.

AI-Powered Generation: On the backend, the uploaded document is processed. Our system sends a sequence of carefully engineered prompts to the Google Gemini API to generate a complete text-based adventure, structuring the learning content into a campaign format.
Review and Deployment: The educator is presented with the generated campaign, allowing for a final review before assigning it to their students via a unique link.

Student Experience

Campaign Start: The student accesses the assigned campaign and is introduced to a narrative scenario by an AI "Game Master." The story is supplemented with AI-generated images to aid immersion.
Interactive Learning: To progress, the student must make choices presented as multiple-choice options, which are designed to test their understanding of the uploaded course material.
Feedback Loop: A correct answer advances the narrative. An incorrect answer loops the student back to the previous decision point, encouraging them to reconsider the context and the material, thereby reinforcing the learning concept.

Tech Stack

Frontend: A responsive single-page application built with React and TypeScript, using Vite as the build tool. The user interface was styled with Tailwind CSS for rapid and consistent design.
Backend: We developed a RESTful API using Express.js running on Node.js. This server handles all business logic, including user authentication, document processing, and managing the AI interactions.
Database: We used MongoDB as our database to store nested structures of the generated narrative campaigns and user data.
AI Integration: The core functionality is driven by the Google Gemini API. Our backend uses a multi-step prompt chain to direct the AI to analyse uploaded text, generate a thematically consistent story, and create relevant questions.

Challenges and Accomplishments

A significant technical challenge was designing the prompt engineering pipeline. It required extensive iteration to balance the AI's creative output with the need for pedagogical accuracy. We had to develop a system of constraints within our prompts to prevent the AI from generating information that wasn't present in the source material.

A further challenge was creating a seamless user experience around the AI-generated content. The variable nature of the narrative meant that the length and structure of the data coming from our API were unpredictable. We had to design our React components to be highly flexible and dynamic, capable of gracefully handling everything from short dialogues to long descriptive passages.

Innovation and Impact

While many platforms gamify learning with quizzes, D&C's innovation lies in its use of generative AI to create dynamic, narrative-based campaigns from raw course material.

A Novel Approach: Unlike static quiz platforms like Kahoot or flashcard apps like Quizlet, our solution doesn't just digitise questions. It fundamentally reframes the learning process into an interactive story.
Potential for Impact: We believe D&C has the potential to change how students approach self-study significantly. For educators, this tool can save dozens of hours in creating custom, engaging content.

Implementation and Completeness

Our goal was to build a functional and robust proof-of-concept within the hackathon timeframe.

End-to-End Functionality: The core user journeys for both the educator (uploading notes, generating a campaign) and the student (playing the campaign) are fully implemented and functional. Responsive Design: The frontend, built with Tailwind CSS, is fully responsive and provides a consistent experience across desktop devices.
Edge Case Considerations: We considered several edge cases in our design. For example, our backend includes error handling to manage malformed AI API responses. On the frontend, we ensure the application gracefully handles empty or invalid course materials being uploaded, preventing crashes and providing clear user feedback.

User Experience (UX) and Design

Our design philosophy was centred on creating two distinct but equally intuitive experiences: maximum simplicity for the educator and maximum immersion for the student.

Intuitive Workflows: For the educator, the process is a simple three-step flow: upload, generate, assign. We intentionally minimised configuration options to make the tool as approachable as possible. For the student, the interface is minimalist and game-like, focusing their attention on the narrative and choices.
Cohesive Visual Design: We used a consistent colour palette, typography, and layout to ensure the application feels professional and polished. The AI-generated images supplement the text to create a more immersive and visually appealing atmosphere

Practicality and Future Roadmap

We believe D&C is a practical and scalable solution for a clear market need.

Feasibility and Scalability: The project is built on a modern, scalable tech stack (Node.js, MongoDB) capable of handling a growing number of users. The primary operational cost is the Gemini API usage, which can be managed and optimised.
Clear Target Audience: Our initial target audience is university and high school students in courses that require a deep comprehension of the course materials.

Team Collaboration

Our team operated with a clear division of roles based on individual strengths, ensuring efficient and parallel development.

Communication: We held daily in-person check-ins on campus and used WhatsApp for any urgent questions. The majority of our discussions took place face-to-face, fostering rapid idea exchange and immediate problem solving.
Role Allocation: We assigned clear responsibilities, such as front-end, back-end, and design team, based on each member’s expertise. This prevented overlap and ensured all tasks progressed in parallel toward our final deliverable.
Peer Feedback & Continuous Improvement: After each development sprint, we conducted brief retrospectives to discuss what worked well and where we could improve. This practice helped us fine-tune our workflow, enhance code quality, and strengthen team cohesion.