Sustainability Website

Gamifying sustainability by asking short questions for Students to consider to be more sustainable and providing further resources to learn more about this topic.

Comment

Inspiration

The sustainability challenge that the UTD Student Government hosted inspired me. Being able to create a website for this challenge allowed me to create this project.

What it does

This is a short 4 question quiz asking students regarding their habits and how they can be more sustainable. Once the quiz is complete, the results appear on the right side of the screen. There are also further resources available from the resources tab.

How we built it

I was unsure if I had the ability to create a mobile app, at least with the given time constraints, and I wasn't exactly sure what I wanted to do. However, since the student mentor from the student government confirmed that it was ok to make a website, I was excited to use the web development skills that I haven't used in a while. Using Javascript to implement the quiz, CSS to make the design of the website more visually appealing, and HTML to make the website overall, I also followed along some tutorials such as [https://www.youtube.com/watch?v=C7NsIRhoWuE])how to make a quiz in Javascript) and I also used https://www.w3schools.com/html/default.asp HTML tutorials to remind myself of how to implement a header bar and the syntax of forms and lists. In addition, I looked up the https://utdallas.edu/brand/color-palette/ and used the school's color of PMS 3375 to fit the UTD brand.

Challenges we ran into

I struggled to figure out what project to create on my own with the limited skilled I have as a freshman CS student. However, I remembered that I had created a website using HTML, CSS, and Javascript in the past and that was what I was most comfortable with, even if I learned C++ and Java in school. Another challenge I had was getting the footer to stay on the bottom of the page. I struggled with that for the longest time but I figured out which part of the CSS was making it cling to the middle of the page (it was the quiz CSS).

Accomplishments that we're proud of

Following along with an online tutorial, I was able to create the quiz on the home page which I was glad I was able to do. I was glad I was able to implement clickable links for the tabs to go to "Quiz, Resources." In addition, I used https://www.domain.com/mlh's free domain to make a custom link to link back to the Github page that my site was hosted on.

What we learned

I learned that it's important to prepare ahead of time. I came into the Hackathon lost and unsure what to create with the limited amount of time and the last time I created a website was over a few years ago. However, I was glad to have this experience, to force myself to code something that I would not have done otherwise.

What's next for Sustainability Website

Implementing more CSS to make it look better, update with more questions with a more modern interface. More resources, more fun games using Unity game engine?

Share this project:

Updates