MWD BLOG

Author's Note: this post is part one in a two-part series, adapted from a session by Jesse Kelsey (Donordigital) and Jason Wilson (Share Our Strength), first presented at the 2013 Nonprofit Technology Conference in Minneapolis, Minnesota. We explored unconventional solutions to work with, and around, a familiar platform, Convio (a.k.a. Blackbaud's Luminate product).

I'll explore two of these examples, in depth, during this short series, by highlighting some front-end coding tricks.

PART ONE: Cooking Matters Quiz

Our main goal for this quiz was to drive awareness to a study called It’s Dinnertime that Share Our Strength conducted about how low-income families plan, cook, and shop for healthy meals. The full report can be found at nokidhungry.org/itsdinnertime. The report included the full study, press events, and an infographic in addition to the quiz.

This is the "recipe" that we used as a guide for the quiz, which is a standard Convio survey with some front-end bells and whistles:

• Turn a Convio survey into a quiz
• Give feedback to users on quiz score
• Make dynamic score sharing possible
• Implement a more visually engaging design

Some of the secret ingredients used in this recipe:

• Cookies
• JavaScript/jQuery
• HTML/CSS
• HTML Captions in the Convio survey

In essence, we combined the recipe and ingredients above in order to make the Convio survey more visually engaging, and to make the survey-turned-quiz into a more interactive experience, such that visitors could take the quiz and be provided with a score, as well as dynamic sharing tools to help increase awareness around the It's Dinnertime study.

Web browser cookies played a key role in allowing for the quiz to be scored and for the score information to be used within javascript functions on the survey confirmation page. We borrowed a javascript function, called createCookie() from Quirksmode that lives on the first page of the Cooking Matters Quiz, as well as a function called readCookie(), which resides on the thank you/confirmation page of the quiz. Quirksmode provides a great, general, tutorial on how to implement and use cookies here.

Each question on the Cooking Matters Quiz is a set of radio buttons. In order to create and update the cookies on page one of the quiz, we needed to call the createCookie() function during an onclick event. Since the Convio survey module writes the survey question HTML from the server, meaning that we didn't have direct access to edit or rewrite the HTML, I chose to hide some sections of the HTML written by the survey module with javascript, and to rewrite the HTML inputs (radio buttons) within HTML caption sections on the survey. This allowed for the addition of inline onclick events for each question, like these: onclick="createCookie('Question1','True',0)" and onclick="createCookie('Quesion1','False',0)."

On the thank you page for the quiz, using the readCookie() function, I grabbed the current cookie information from the browser and created javascript variables, like this: var q4 = readCookie('Question4');. Then, still using javascript, created some if/else statements that did the scoring. The logic worked like this: if the cookie value for question four is "Price of healthy grocery items," score 1, else score 0. After a quick tally, a variable called "totalscore" was created and used throughout the thank you page, for dynamic Facebook and Twitter links, and feedback to the quiz takers, etc.

In the end, Share Our Strength attracted 1,138 new advocates to the cause through the quiz alone, and through a small Facebook ad campaign, had over 11 million impressions and just shy of 3,000 clicks (2,860). The quiz was a key engagement factor that helped people not only understand the content of the report without having to read it, but also gave us a way to capture more names of individuals interested in cooking skills education — a core component of Share Our Strength work.

In part two, I'll cover one more in-depth example, which was a dynamic Twitter landing page, called "Hunger Knows No Party," and built into the Convio Pagebuilder module.

Download the full presentation slides here, from C is for Cookie: Convio Platform Townhall, a presentation from the 2013 Nonprofit Technology Conference.

Bonus: view, dissect, and use a simple, cookied quiz recipe here.