Working on our group project about soil pollution taught us more than we expected, especially when it came to turning information into an interactive experience. Our goal was to create a website that did not just explain soil pollution but showed it in a way that students could understand through visuals and simple interactions. We wanted users to see clean soil slowly turning polluted, explore the causes and effects, and then think about what actions they could take. jQuery helped us build these features faster, especially since we did not have time to code everything from scratch.
jQuery was useful because it made it easy to connect different parts of the page. Simple selectors allowed us to target elements quickly, and handling events like scrolling and clicking felt more manageable. This mattered because many parts of the website changed depending on what the user did. For example, the soil in the hero section would slowly get darker as the user scrolled. jQuery helped us trigger those changes smoothly without writing complicated code.
One of the most interesting parts to build was the section where users could drag pollution sources, like trash or chemicals, into the soil area. We used jQuery UI for this feature, and even though it added more weight to the project, it made the interaction easy to create. It also made the experience feel more engaging, because users could see the soil react to what they placed on it.
Another section we worked on was the consequences explorer. When users clicked certain elements, information about how soil pollution affects ecosystems would appear. We set these up so we only needed one event listener for the entire section, which allowed us to edit or move elements without breaking anything. It helped our group work more efficiently, because different members could edit the HTML while others handled the scripts.
We also built a small action planner where users could open a panel, read suggestions, and check off small habits they could start doing. jQuery made it easy to show or hide this section and collect the user's chosen actions.
The project still had challenges:
- Performance Issues: Too many animations made the page lag, so we had to adjust how often certain functions ran.
- File Size: jQuery UI also increased the file size, so we removed the parts we did not need.
- Code Structure: Mixing older jQuery code with more modern JavaScript also forced us to be careful with how we structured our scripts.
These issues slowed us down, but they also taught us how to troubleshoot and adjust our approach.
Looking back, we learned that jQuery is still useful, especially when building prototypes or projects with many quick interactions. It allowed our group to focus more on the message of the project, which was about understanding soil pollution and encouraging students to take action. In the future, we would consider using more modern animation tools or native drag and drop features, but for this project, jQuery helped us meet our research goals within the time we had.
In the future, we could improve on the JavaScript and jQuery implementation. As of now, the animations are very basic and difficult to animate each frame. We would have looked into a library that could have made this simpler, but we already had an implementation in place.
Overall, this experience taught us how technical tools can support environmental education. More importantly, it showed us how teamwork, planning, and testing are just as important as the code itself. Nonetheless, it was challenging and stressful at times, but we managed to pull through and gained a lot of experience.