Basic mock-up of a quiz question
Figma mock-up for quiz questions (1)
Figma mock-up for quiz questions (2)
Figma mock-up for survey
Figma mock-up for landing page when accessing the quiz
Figma mock-up for if answers were correct (green), incorrect (black), or hovered over (blue)
Figma mock-up of pop up thanking the user and for email signup
Figma mock-up of interactive idea that included more information about pathways
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 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
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
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.