Sometimes we are inspired by what tools are in front of us. I have used jQuery UI often in building websites. I was experienced with many of its features. One day, while thoroughly reviewing the jQuery UI site, I grew aware that some of the interactions, widgets, and effects would align with a variety of ways to pose questions, as you might in a form.

My vision was to let an administrator declare a collection of things, and then apply a type of interaction to that set.


The jQuery UI interaction Selectable is the most obvious feature to align with posing a question. It offers a means to multi-select. This got me thinking : I could allow a question to be set with a minimum and maximum selections, i.e. “Choose one or two favorite Beatles.”


I thought it would be beneficial to have an anti-select, that is, a removal method. This is actually the same thing as selection, but is handled differently. The user can select something for removal, which makes it disappear. I was inspired by this jQuery UI effect “explode.”

This would allow a question such as “Remove your least favorite Beatle.”


The second jQuery UI interaction that aligns well with a type of question is Sortable. A sortable collection is one in which the user can drag the elements into different slots, reordering them. I envisioned a question such as “Rank the members of The Beatles from first to fourth.”

The Slider

The jQuery UI Slider Widget aligns with Rating one or more things. (Thus, it would be the only type of question that would allow a collection population of just one). Sliders are a fun and easy way to have a user define a rating. You could have a question such as “Rate each Beatle in terms of songwriting ability.”

What are we making?

What we have in mind is a system in which an Admin can generate a number of questions using the different types we’ve defined : select, remove, rank, rate. After some thinking, we decide that ‘question’ isn’t an accurate name for these interactions. We think a more generic name is in order, and strike upon “sharing opportunity” which we shorten to “share-opp.”

We envision a multi-step creation process, because the type of interaction would warrant related specifications. For example, if type is select, the folow-up would have the admin specify the minimum and maximum allowed selections. If type is rating, the follow-up would ask for the minimum and maximum values. The purpose of the creation process would be to generate a share-opp. So, we must understand what elements comprise a share-opp. This is how we spell it out to the admin:

Here is a screen of an example:

SQL Database

Underpinning our polling system will be a Mysql database. We want to support multiple administrators / businesses. Thus there is a single ‘share-opp’ table that points to a business table. The share-opp table in turn is joined to a table of things – options. Much is defined in the share-opp table, such as the type of userAction (select, remove, rate, rank).

Demonstrating the Creation Process

Here is a walk-through of creating two different types of share-opps.

A Simple Selection Share-Opp

A Rating Share-Opp

Summary and What’s Ahead

We have discussed the inspiration for a polling system, learned the structure of a share-opp, the various types of share-opp, and how they get made by the admin of a business. The SQL data generated by the creation process will be in turn used to render it. In future posts, we will discuss the Display of the Share-Opp, the Interaction with a Customer, the Recording of the Response, and the Viewing of the Response Data.

You can view the example business (The Amazing Pub) by signing in with Google.

Yo can create your own business and share-opps (also uses Google sign in). Use invite code “123456”.