Hive

• GIF

  Character Animation 1

• GIF

  Character Animation 2

• GIF

  Character Animation 3

• 

  UI Design 1

• 

  UI Design 2

• 

  user flow

• 

  identity design

• 

  identity design

Inspiration

Problem #1 Deep-reading is challenging for students in the digital era Settling down and deep-reading an article is challenging for learners at all stages in this era of information overload. The digital-era habit of skimming through or zombie-reading texts makes it difficult to truly grasp the knowledge or extract key information from text material. We consume a lot of information from the web, but very little knowledge is retained.

Problem #2 Web-pages are great places to learn, but lack a tracking & review mechanism The web is a powerful tool for learning. However, students’ learning journeys on the web are not effectively captured, making it hard to trace back or review the knowledge they’ve acquired in the past.

How might we…

• Accurately extract key knowledge points from web articles to improve the efficiency and quality of information acquisition.
• Guide learners to engage in deep-reading and review, fostering critical thinking and effective reading habits.

What it does

Overview Hive is a Chrome extension that turns any text-based web page into a knowledge scavenger hunt. It transforms passive article-reading into an active learning experience by generating and prompting learners to answer questions related to the text material. The playful scavenger hunt format allows learners to gradually explore and learn the core content of the article. Hive also stores all previous hunts as mind maps for easy knowledge retrieval and review.

Features

1. AI generated questions based on web content Hive analyzes text on a web page and creates hunt questions that covers all parts of the article
2. Interactive learning process Learners are prompted to complete tasks and gain points by answering the hunt questions
3. Real-time Feedback Learners will receive real-time feedback on their answers to reflect and calibrate
   
4. Productivity tools Learners can highlight text in the article or use the “copy pen” to directly copy answers for a specific question
   
5. Knowledge summary and record All scavenger hunts will be summarized in the form of knowledge maps in the hunt library for trace-back and review.
   
6. Knowledge extension Learner can ask for extended information on specific topics in the knowledge map summaries
7. User Agency Users can always make edits to AI generated content and save their own version in the summary

Learning Science Principles We Applied

1. Active Learning The action of actively searching for answers allows learners to use more generative processing than passive reading, which can boost the effectiveness of learning and knowledge retention.
2. Knowledge Retrieval Practice Hive allows students to review previous learning records and generate summaries, supporting the effects of extraction exercises.

How we built it

1. We began our project by creating a detailed roadmap that outlined the MVP of our target product. During the first week, we dedicated time to discussing the required functionalities in depth and carefully planning the technical stack we would use. By the start of the second sprint, we were well-prepared to dive directly into development with a pre-configured React framework tailored to our needs.
2. Our approach to using React emphasized scalability, ensuring that the development process not only met the current requirements but also allowed room for future growth. We structured the application to support potential expansion into a full-fledged website while maintaining compatibility with modern technologies like serverless functions and cloud storage solutions such as Google Firebase and Firebase Functions. This design choice allows for seamless integration of additional functionalities as the project evolves.
3. Throughout the development, we prioritized creating reusable components to enhance code readability and maintainability. We leveraged React's strengths, such as hooks and context, to streamline state management and logic. While the frontend team concentrated on building an intuitive user interface, another developer worked on the backend. This involved integrating the Gemini-Nano API, utilizing chrome.local storage to allow users to revisit their bookmarks and notes on webpages, and ensuring seamless communication between the frontend and backend.
4. By the end of the project, our collaborative approach and forward-thinking architecture enabled us to deliver a polished, functional product. This foundation not only meets our initial objectives but also positions the project for easy scalability and the integration of advanced features in the future.

Challenges we ran into

1. Ensuring question quality
   The questions generated by the API in the beginning are not specific and valuable enough so we had to do some prompt engineering to make sure the questions are of higher quality
   
2. Ensuring feedback quality
   Our current product feature includes a scoring system that tells learner how close their answer is to the correct answer. It is difficult to get a consistently, accurate rating
3. F.A.T.E in AI usage It is difficult to decide when to encourage users to learn from AI generate content and when to trust their own understanding. AI generated content might be better structured but it might have accuracy issues and might take the learning experience away from the learner.

Accomplishments that we're proud of

1. Knowledge mind map We designed the summary of each hunt to be presented in a mind map format for a more structured visualization of the article’s key content.
2. Knowledge extension
   Learners can not only view a summary of their previous answers, they can also learn more about each knowledge point and be pointed to external resources.
   
3. Playfulness and interactiveness We used animated characters, a bright color palette and a point system to increase the playfulness of the hunt experience.
   

What we learned

We gained valuable experience in configuring React to work with Chrome extensions by customizing the Webpack and build process. This allowed us to tailor the development environment to support extension-specific features while maintaining scalability for future enhancements. Additionally, we deepened our understanding of Chrome extension development. We also faced challenges, such as integrating scripts to perform specific functions on webpages and working with the Gemini-Nano API. The API produced noisier text data in real-world use than in testing, requiring additional time for debugging and adjustments. These challenges highlighted the need to account for uncertainties when adopting new technologies and provided us with valuable problem-solving experience.

What's next for Hive

1. Improve Content Accuracy More accurate hunt generation questions and feedback compatible with various disciplines. This is a task both the Hive design & develop team and Google Gemini teams should work on.
2. Hunt beyond text-based web pages Expand Hive to be compatible with multi-media information sources: image, video and interactives.
3. Adaptive Learning Add extra ML algorithms to tailor question difficulties based on student performance, knowledge, and skill proficiencies.
4. Gamification Complete rewards and challenges design for questions and build the networking between disciplines to further motivate students.

Built With

• javascript
• react.js
• typescript