The Right Choice

Initial landing page

This was one of my first deep dives into truly interactive web experiences, and single page applications. I worked closely with a copywriter to develop this quiz for parents of prospective college students. Using jQuery, I fetched an external file for the questions, answers, and responses, which could be independently edited by the copywriter.

Question page

To allow for easy navigation and analytics tracking, each question has it's own url, which is updated without a page refresh to allow for a more seamless experience with animated page transitions. The quiz takes the user through a defined set of questions with specific responses for each answer. The bubbles at the top fill as the user progresses, and serve as a navigation. The progress is also saved in the browser, so the user can refresh the page without loosing their responses. Users are able to scroll through the entire set of questions without answering, but once they answer all of them, we show a new page.

Result Page

This final page of the quiz will only show once all the questions are answered and displays customized content based on the options chosen in the quiz.

Click here to see a functional demo of the quiz.