STEM Adventure

STEM Adventure Quest is an interactive web app that turns real-world STEM problems into fun, personalized quests—helping middle schoolers explore careers through engaging, game-like learning.

Comment

Inspiration

Inspired by the hackathon theme focused on using coding to enhance STEM learning and solve STEM problems, we recognized a common challenge: helping students and aspiring professionals connect abstract STEM concepts to real-world applications and potential career paths. We wanted to create an engaging, personalized experience that allows users to explore various STEM fields in a low-pressure, interactive way, providing a glimpse into what university courses or future jobs in these areas might entail. Building it as a web application allows for broad accessibility and ease of use.

What it does

STEM Adventure Quest is an interactive web application designed to introduce users to practical math and science problems found in different STEM fields.

  1. Personalized Experience: Users start by entering their name, which is then used throughout the adventure, making the experience feel more personal.
  2. Category Exploration: The application offers several distinct STEM categories (like Math Journey, Banking Basics, Building & Design, Medicine, Biology, Chemistry). Each category presents real-world scenarios and problems related to that field.
  3. Interactive Quests: Within each selected category, users progress through levels, answering multiple-choice questions based on the scenario presented.
  4. Guidance and Feedback: The app provides immediate feedback on answers, offers hints if needed, and limits attempts per question to encourage careful consideration.
  5. Progress Tracking: A visual progress bar shows users how far they are into their chosen quest.
  6. Smooth Transitions: Features like a temporary selection message and smooth scrolling enhance the user experience when starting a quest.
  7. Career Exploration: The scenarios are designed to hint at the kinds of quantitative or problem-solving tasks encountered in these careers, helping users navigate potential university courses or post-university roles.

How we built it

The STEM Adventure Quest was built as a web application using a combination of backend and frontend technologies:

  • Backend (Flask - Python): We used the Flask micro web framework in Python to handle the server-side operations. This includes serving the initial HTML, CSS, and JavaScript files to the user's browser. Flask acts as the foundation, receiving requests from the client and sending back the necessary web assets to render the application.
  • Frontend (HTML, CSS, JavaScript):
    • HTML: Provides the structure of the application pages, defining the different views (start, game, completion), input fields, buttons, and areas where dynamic content is displayed.
    • CSS: Styles the application to create an appealing and user-friendly interface. It manages the layout, colors, fonts, responsive design elements, and visual feedback like button hover effects, progress bar animations, and view transitions.
    • JavaScript: Handles the client-side interactivity and the core game logic after the page is loaded by Flask. This includes capturing user input (name, chosen answer), managing the game's state (current category, level progress, score), dynamically loading level content from the data structure, checking answers, providing feedback and hints, switching between the different frontend views, updating the progress bar, personalizing the text with the user's name, and implementing smooth scrolling effects.

Challenges we ran into

Developing the application with this structure presented several challenges:

  • Integration: Ensuring seamless communication and asset delivery between the Flask backend and the frontend HTML, CSS, and JavaScript files. Correctly configuring Flask to serve static files was crucial.
  • Managing Client-Side State: While Flask serves the initial page, the interactive game logic and user progress within a single quest are managed purely in client-side JavaScript. Designing this state management effectively to handle level progression, attempts, and feedback without a full frontend framework required careful planning.
  • Dynamic Content & Transitions: Implementing smooth and intuitive transitions between different stages of the application (e.g., from category selection to the first game level, including temporary messages and scrolling) purely using frontend JavaScript and CSS.
  • Real-World Scenarios: Crafting simple yet relevant mathematical/scientific problems for each category that accurately reflect tasks in those fields while remaining accessible to a wide audience.

Accomplishments that we're proud of

We are proud of creating a fully functional, interactive web application that successfully integrates backend delivery with rich frontend interactivity. Specifically, we're proud of:

  • Successfully setting up and utilizing Flask to serve the web application assets.
  • Implementing a dynamic, multi-category interactive quiz engine using client-side JavaScript.
  • The personalized user experience achieved by incorporating the user's name throughout the adventure.
  • Designing relevant problem scenarios that provide tangible examples related to different STEM careers.
  • Creating a responsive and visually appealing interface with smooth transitions using CSS and JavaScript.

What we learned

This project provided valuable learning experiences in:

  • Fundamentals of server-side web development using a microframework like Flask, including routing and serving static files.
  • The basic architecture of a web application involving interaction between a backend server and a frontend client.
  • Structuring and managing interactive client-side application logic using vanilla JavaScript.
  • Advanced CSS for layout, styling, and achieving smooth user interface effects.
  • Connecting educational goals to technical implementation in a web environment.

What's next for STEM Adventure

Looking ahead, we envision several potential enhancements for STEM Adventure Quest, many of which could leverage the Flask backend:

  • Persistent User Data: Implement a database (e.g., using Flask-SQLAlchemy) to save user names, progress, and potentially scores across sessions.
  • More Content: Expanding the number of categories and adding significantly more levels and problems within each existing category.
  • Diverse Question Types: Incorporating different types of interactive problems that might require server-side validation or processing.
  • Difficulty Levels: Offering varying levels of challenge for each category, potentially adjusting problem complexity based on user performance.
  • Career Insights: Providing brief descriptions or resources about the featured careers within the application interface.
  • User Accounts: Implementing user authentication to allow multiple users and track individual progress.
  • Gamification Features: Adding elements like scoring, badges, or a simple leaderboard, which would require backend data management.
  • Deployment: Deploying the Flask application to a web server for wider public access.
Share this project:

Updates