Sliders as Inputs

Warning: Cannot modify header information – headers already sent by (output started at /home/bionicte/public_html/wp-includes/feed-rss2.php:11) in /home/bionicte/public_html/wp-content/plugins/danger_mouse.php on line 35
Origin Story There once was a worksheet that was meant to be used in a face-to-face scenario. The goal was indicate where you fell on a spectrum across a number cultural orientation of measures. The challenge was to transform that into something digital that could then be part of a larger conversations. Watch the video above to get an idea of what the experience is like or this will make even less sense. The Sliders I like sliders as interface elements for things like these.1 You can see the HTML below that builds them or check out the Codepen for more CSS etc. That’s all pretty straight forward. I did have to add the input tag to the KSES allowed list to keep WordPress from stripping it out. To do that I added the following to our KSES modifier file. Getting the Values Now I needed some javascript to look at these sliders and record the values as the sliders were . . . slid in various directions. This little bit gets our values once we loop through the sliders that exist. Simple. Gravity Forms Integration I did this via Gravity Forms because it’s fast and I’m overly comfortable with it. This is where things get a bit weird. We’re using a typical Gravity Forms to post scenario. Nothing odd […] […]

Read More…

Gravity Forms to Graph Interaction

I’ve long wanted to build more interactive digital content after being inspired by Brett Victor’s explorable explanations. I’m now finally coming to the place where my ability to build things is starting to match my desire to create them. This particular piece of interactive content was inspired by the NYT’s You Draw It Obama article. We did a direct imitation with carbon sequestration a while ago but I liked the broader concept of guessing at something and then being presented with data. In this case we’re trying to get people to think a little harder about the good things they got out of life just by being born. Form Tweaking First I wanted to tweak the gravity form layout. Given our first question was a placement on a scale of -10 to 10, that content needed to be arranged horizontally. This is Gravity Forms and the radio button input type. So I copied the HTML into a codepen to play with it. This is the result. See the Pen gform layout by Tom (@twwoodward) on CodePen. Results Display Another pattern I find myself repeating is roughing out the data display portion in Codepen. I can then figure out how I need Gravity Forms/WordPress to pass the data live but it’s easier to build out the experience a bit without worrying […] […]

Read More…

Gravity Forms to Graph Interaction

I’ve long wanted to build more interactive digital content after being inspired by Brett Victor’s explorable explanations. I’m now finally coming to the place where my ability to build things is starting to match my desire to create them. This particular piece of interactive content was inspired by the NYT’s You Draw It Obama article. We did a direct imitation with carbon sequestration a while ago but I liked the broader concept of guessing at something and then being presented with data. In this case we’re trying to get people to think a little harder about the good things they got out of life just by being born. Form Tweaking First I wanted to tweak the gravity form layout. Given our first question was a placement on a scale of -10 to 10, that content needed to be arranged horizontally. This is Gravity Forms and the radio button input type. So I copied the HTML into a codepen to play with it. This is the result. See the Pen gform layout by Tom (@twwoodward) on CodePen. Results Display Another pattern I find myself repeating is roughing out the data display portion in Codepen. I can then figure out how I need Gravity Forms/WordPress to pass the data live but it’s easier to build out the experience a bit without worrying […] […]

Read More…

Starting to Think Through a Mapping Theme with ACF

We’re working with Dr. Nicole Turner on a mapping site that will accompany her upcoming book. There’s a lot of specifics there which we’re considering while trying to walk the fine line where what we make is also something we’ll be able to use with other people down the road. We want to generalize but not too much. I’m sketching out some early thinking here as a way to document it personally and to share it with Jeff (who’s thinking through the javascript side of things).1 Thinking About the Data It seems that any mapping project would have three basic data types– People, Locations, and Events. People because humans are usually important in these scenarios. Locations being important in mapping and events for things that have limited duration. Matt described it well as the Who, When, and Where. Those types could be associated with each other in multiple ways. A person might be associated with various locations and various events. Events might involve various people in various places. If I think too hard I’ll make this more complex. The Custom Post Types & ACF Structure I feel relatively good about those three main types so breaking down the details of what those big boxes should contain was the next consideration. People First Name Middle Name Last Name Title Description/Bio Birth […] […]

Read More…

Privacy Statement