John Stewart asked if I had any easy ways to allow users to highlight some text and push that highlighted text to a form. I didn’t but that sounded like something useful in a variety of scenarios so I sketched out a working demo in Codepen which you can see below. It can push the content directly to a form field on the page but I also built a link that would populate to include the highlighted text as a URL parameter and grab the page URL as well. Like most things I make, it’s the result of some Stack Overflow responses being hit several times with a hammer. It’s decently commented up but is not the most optimized of code. This type of construction usually results in new ideas being incorporated on the fly and that makes for ugly code. I am ok with that as this prototype took about 15 minutes to create. We can polish things up if/when we have a more direct audience/intent. Until then, it’s a functional prototype which can be used to get faculty seeing possibilities. See the Pen highlight to field by Tom (@twwoodward) on CodePen.
*********UPDATE********* The stuff below sort of works, but since there’s only one parent element for all sections it won’t let you click on links later on. That’s no good. It’s also kind of weird to go from interacting with the iframe page to get back into the slideshow navigation (partially because I hid the navigation buttons). So . . . I went this route instead. The following code toggles the slide overlay. I set it up as a button at the top of my slides. It’s full width and black so not obtrusive. Click it lets me fully interact with the iframe page and clicking it again reactivates keyboard navigation for the slide deck. *********END UPDATE********* I’m a fan of reveal.js and have been using it to build all of my recent presentations. It feels like it fits what I do really well. The fact that it’s just a website that behaves a certain way means I can do all kinds of fun things that blend both the web-based examples and my ability to annotate and manipulate the web itself.1 There’s also quite a bit of beauty in tools that continue to offer more opportunities to grow as you learn. Anyway . . . One common action in my presentations is to embed a live website as a full size […]
This is another SPLOT-ish tool that takes videos uploaded through a Google Form and then displays them.1 This particular proof of concept was built in about ten minutes as a result of a conversation with our World Language faculty who are going to be doing student-to-student video work with people from other countries. We’re likely to use Zoom as the platform. It makes recording the video easy and the compression of the video is pretty impressive. Initially I was concerned about file size but between that and seeing that Google allows up to 10GB file uploads via their vanilla forms. The caveat there is that the “file upload option is only available for G Suite customers with a Google Form shared within their organization.” Good enough for our purposes but a bit limited if you wanted to use it more broadly. Form Stuff I opted to auto-log the VCU email address since the file upload required that anyway and only used two other elements- a file upload piece and a single categorical element. You could get much more complex if you had the desire. Just make sure you’ve created a results spreadsheet and published it to the web. The Pieces My form is here. The spreadsheet is here.NOTE: Google now creates two IDs when you publish this. There’s an ID […]
Image from page 211 of “Bulletin” (1961-1962) flickr photo by Internet Archive Book Images shared with no copyright restriction (Flickr Commons) I’ve been lucky enough to hire two awesome people who have started over the last month or so.1 We’re also going to get a new supervisor on July 3rd. That’s led me to have a bit of breathing room and a reason to start re-thinking some things. One of those things is how we combine documenting our work. Can we document what we do in a way that will create more people interested in doing these things? Can we do a much better job bringing active faculty to the forefront? Can we serve the end of the year report needs regarding various data elements? Can we gather data we might reflect on regarding our own processes? How do we knit all this stuff together from various services without a lot of extra work? The Old I’ve done this more than a few times. The latest incarnation at VCU was the examples page (pictured above). It is semi-decent but was done in haste. It tries to affiliate tools and instructional concepts with examples. Conceptually, it’s pretty close to TPACK in that way. It has done a marginal job thus far. It houses examples and people can browse them. It doesn’t […]
It’s better to see this in the full page view but it grabs a WP JSON feed and makes up non-standard polygon shapes based on the posts using the featured image as the background. Try reloading the page and the shapes will change. If you hover over them they’ll behave in very odd ways as well. That’s all easier to see on the full page view. It’s a strange proof of concept but one I’ll be putting to work for an odd art site in the future. I’ll tame it a bit as I’ve made a number of completely odd decisions just to see what would happen. It could be I’ll end up using data from the posts to influence the shapes more intentionally. That opens up a whole world of strange dataviz possibilities. That is one of the things I love about doing this kind of WordPress interaction. It’s light enough that I’ll run down a path like this and just try it out. I probably wouldn’t have bothered if it required a full child-theme or page template. It’s a low threshold with a high ceiling and now I have another example of something people don’t think WordPress could do for my NMC presentation next week. See the Pen socially engaged artists – jquery by Tom (@twwoodward) on CodePen.
Cowboy Jason Stanley performing a riding trick at the Round-Up, Pendleton, Oregon flickr photo by UW Digital Collections shared with no copyright restriction (Flickr Commons) I’ve been doing quite a bit more with the WordPress Rest API lately. There’s plenty of documentation and tutorials out there but most of it still feels a bit scattered to me so I’m going to stick a few of the basics here and add a few things that have come up repeatedly that aren’t quite as basic. There’s an attempt here to move upwards in complexity with the examples but to keep them as clean as possible. This will deal entirely with getting the data. I haven’t done much with using the API to write or modify data. Get the Info There are many ways to get data depending on your library of choice or if you’re using vanilla JS. I’ve played with fetch and Axios on the lighter side and jQuery, Vue, and Angular (v1) on the heavier/more involved side of things. I’ll use jQuery in this version because it’s fairly popular but here’s a Vue example. The example below does a basic jQuery ajax call for the JSON associated with blog information. See the Pen simple jquery get of WP JSON for the site by Tom (@twwoodward) on CodePen. The URL Structure/Accessing […]
flickr photo shared by Internet Archive Book Images with no copyright restriction (Flickr Commons) Often, people really like the workflows enabled by Google Forms but they’d like it to go one step farther . . . like adding up two submitted items, or running a particular function/formula against the submitted data. You can certainly go in there and manually enter formulas or drag down to apply them to additional cells but that sucks and if you’re automatically displaying this data live somewhere it’s an impediment to a solid workflow. Most importantly, it sets a human to do something that a machine ought to be doing- that is the path to Skynet assuming control. We can and must resist! Subjugate the machines whenever possible! The script below is broken into three parts and shows two different ways to set the value for columns based on data entered in a form. Part 1 – This is pretty much default information that lets the script know which spreadsheet and which page it’s working with. The getLastRow() is really handy for applying this to data as it is entered. This example form writes data to columns A – K. In example one, we do the math internally and just spit the result into the cell. That’s handy for lots of stuff and can be […]