Jigsaw

Upload Page
Interactive Map Page
Progress Tracker Page
Quiz Page

Inspiration

We wanted to make learning fun, engaging, and interactive. During our own experiences and discussions with fellow students, we noticed that many struggle to grasp complex content, which often leads to frustration and loss of interest. Knowledge is incredibly valuable, but only if students can understand, retain, and apply it effectively.

This inspired us to create Jigsaw, a tool that turns any topic into an interactive quiz, helping learners identify gaps in their knowledge while keeping the process fun. By combining AI-powered question generation with an interactive map-based learning game, we hope to rekindle curiosity and make learning feel like a game rather than a chore.

What it does

Jigsaw turns learning into an interactive, AI-powered experience. It allows users to:

Upload any PDF (up to 5MB) on the topic they want to learn.
Select a country on a map interface (currently, United Kingdom is available).
Answer AI-generated quiz questions based on the uploaded PDF, where the questions are categorised into easy, medium, hard and creative, and users have a maximum of 2 wrong attempts per question; failing restarts the game.
Receive automatic results as a downloadable PDF summarizing all questions asked and the correct answers.

Jigsaw combines PDF parsing, AI question generation, and gamification to create a fun, interactive way to learn. By highlighting “missing pieces” of knowledge, it helps users understand concepts deeply while keeping the process engaging and playful.

How we built it

We built Jigsaw using a combination of frontend, backend, and AI technologies to create a seamless and interactive learning experience:

Frontend:

HTML, CSS, and JavaScript for a responsive and interactive interface.
Drag-and-drop and file selection for easy PDF uploads.
Map interface powered by Leaflet.js, allowing users to select countries visually.

Backend:

Node.js with Express.js to handle file uploads, PDF parsing, and API requests.
Multer for handling file uploads securely.
pdf-parse to extract text from uploaded PDFs.
CORS and dotenv for configuration and security.

AI Integration:

OpenRouter AI to automatically generate multiple-choice questions from PDF content.

Other Tools:

jsPDF to generate downloadable PDFs with quiz results.
Hosted on Render, providing a stable backend and serving static frontend files.

We focused on creating a smooth end-to-end experience where a user can upload a PDF, take a quiz, and immediately see a summary of their learning, all powered by AI and delivered in an interactive, gamified way.

Challenges we ran into

During development, we faced a few significant challenges. First, the backend was not fully integrated with the frontend, which caused issues like file uploads failing and the map not generating correctly. We spent time debugging extensively using console.log to trace the flow of data and ensure that the frontend and backend communicated properly. Another challenge was deployment: while the app worked perfectly on our local machines, it did not function correctly for team members accessing it via Render. The issue was traced to incorrect paths in the fetch API calls, which we resolved by updating the frontend to use the proper Render service URL. These challenges taught us the importance of careful debugging, consistent environment configuration, and thorough testing across devices.

Accomplishments that we're proud of

We’re particularly proud of how well our team worked together throughout this project. Great teamwork, clear communication, and strong coordination allowed us to divide tasks effectively, debug complex issues, and integrate the frontend, backend, and AI components seamlessly. Despite the challenges we faced with deployment and integration, our collaboration ensured that we could deliver a fully functional and interactive learning tool on time.

What we learned

The biggest lesson we learned from building Jigsaw is that teamwork makes the dream work. By collaborating closely, communicating clearly, and supporting each other through challenges, we were able to turn a complex idea into a fully functional, interactive learning tool. This experience reinforced how much a strong, coordinated team can accomplish, especially when tackling technical and creative problems together.

What's next for Jigsaw

Looking ahead, we plan to expand Jigsaw in several exciting ways. First, we want to introduce a points and rewards system, where users can earn coins by completing quizzes correctly and use them to unlock new countries on the map. Currently, only the United Kingdom is available, but we aim to add more countries and topics to make the learning experience broader and more engaging. We also plan to enhance the AI question generation to support more diverse formats, and improve the user interface. Ultimately, our goal is to make learning truly fun, interactive, and accessible for students everywhere.