Rise Against Hunger: Learning Survey

Rise Against Hunger seeks to engage volunteers, donors and new supporters in its mission to end hunger beyond its volunteer events -- and that’s where our project comes in!

Comment 1

Problem

In their words: Rise Against Hunger seeks to engage volunteers, donors and new supporters in its mission to end hunger beyond its volunteer events -- and that’s where you come in! We are seeking to build an interactive quiz that will not only serve as an educational tool to help supporters learn about the issue of world hunger, but will also serve as a way for Rise Against Hunger to gather information about what our supporters are most passionate about.

Our Solution

Our idea was to create an interactive quiz that highlighted the different pathways from Rise Against Hunger, and mirror the simplicity and functionality that were reflected on the main website. We wanted the quiz to have an aesthetically pleasing user interface that was simple to interact with. The quiz was designed to help the user learn more about the global food insecurity crisis as well the mission of Rise Against Hunger and how they are working to decrease food insecurity globally.

How we built it

We created Wordpress Plugins that could be embedded into their existing sites, and high fidelity mockups to provide options for a User Interface that match the branding requirements. One plugin called Radio Survey works to save user data, while the other more closely resembled our design objectives.

Our team split into front end and back end. Our back end team used PHP to create a Wordpress Plugin that could be attached to any Wordpress project. Our front end team worked to create high fidelity mockups within FIgma and created a basic implementation using JS that also recorded user answers.

Challenges we ran into

Most of our team were first-timers to submitting a hackathon project. Half of us had no experience with Figma, all of us had no experience with PHP and Wordpress plugins. Throughout the hackathon, our team was learning PHP, Javascript, and Figma all at once.

In the end, we ended up having to shift our focus from PHP to workable front-end files, due to our inexperience with the scripting language. We had a lot of ideas for our quiz interface, but due to the time constraint of the project we had to focus more on the functionality of the quiz, rather than our adding features.

To even test out Wordpress plugins, we'd need access to a business account which is $300 a year. We ended up "hacking" the Wordpress site to one of the student organizations at our university to test out our plugs. Don't worry, we asked for permission first!

Accomplishments that we're proud of

Working plugins! Accessible and simplistic mock-ups! We studied the Rise Against Hunger’s media guidelines and analyzed the main website to create our quiz format. To suit the audience from ages 18-65, we made designs with text large enough for older volunteers. We also made sure our designs were responsive to if a user opened the embed quiz through email. By making the general design minimalistic, it eliminated any confusing UI for volunteers to interact. Basic implementation of mockups using JS! Our team successfully created a Javascript-focused quiz that determined the score of the quiz and opened a new tab depending on which pathway the user selected.

What we learned

Our front-end team learned how to use Figma and how to implement it into CSS. The largest learning curve for implementing the designs so they wouldn't rely on fixed positions that were established in Figma. To solve this, we used Bootstrap to make the website responsive and made all positions relative to the size of the webpage.

Our back-end team learned about using PHP to create a plugin compatible to a Wordpress website and how to create, implement, and run the code used onto the site. Because Wordpress plugins are mainly written using PHP, our greatest challenge was learning enough PHP to create a successful plugin which was visible on the website, while also grappling with format and other details. However, we were ultimately able to write enough PHP code to create a website-friendly plugin which presented multiple choice questions as well as noting and storing the user’s input while marking it as “correct” or “incorrect,” while also taking in the user’s email as another form of input.

What's next for Rise Against Hunger: Learning Survey

Ultimately, our goal in the future is to combine our strongest backend to our strongest front end designs to create a polished final product.

Right now, we have HTML and CSS files for our idealistic UI for the interactive quiz, but the actual interaction (such as the user's score) was made in more visually-basic, separate coding files. Our planned design for the interactive quiz was a page-by-page questionnaire. Once the user answered the question, there would be a modal that highlighted facts about the global hunger crisis as well as more information on Rise Against Hunger. With this format, the user would have a more interactive experience with the quiz overall. When researching the information for the modals we learned more about Rise Against Hunger’s mission and we added details and quote

At the end of the quiz and survey, we want to have a sign-up form that automatically checked the newsletter a user could subscribe to. We wanted to have the check box automatically filled in after the user completed the quiz to help increase the number of people who would sign up for the newsletter to expand the impact of Rise Against Hunger’s message. We wanted to have the results of the quiz sent via email as opposed to the simpler implementation of having the results displayed after the quiz and survey question.

We also want to study PHP so that it could be successfully integrated in Rise Against Hunger's Wordpress plug-in. Then, we would integrate PHP into our HTML files to have a successful plug-in that sends the appropriate data to Rise Against Hunger’s servers.

Share this project:

Updates