website screenshot indicating blue div blocking access to central portion of embedded website

reveal js tweak for iframe backgrounds

*********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 […]

JSON display from spreadsheet

Google Form to Video Display

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 […]

I’m not dead yet . . . Google Scripts to Check on a Bunch of WP Sites

John Stewart is going to write up something more systematic and structured as he’s taken these rough ideas up a notch but I figured I’d throw this functional Google Script code in here before I lost it. I believe I got up to five positive statements on blogging more in-process stuff so I’m taking that as an overwhelming mandate. These Google Script functions are meant to loop through a set of URLs in a Google Sheet pulled as an array to see if the site’s still in use. The first two take a look at the WP REST API endpoints for posts and pages. That way if the person only writes pages you won’t be tricked. I’d probably write them all to the sheet because I’m paranoid. The third (aka the hassle as I hadn’t ever messed with XML using javascript) looks at the RSS/XML feed in case the site is not updated enough to have a functional API endpoint or if it’s broken for some reason. This won’t help you out if they’re just writing pages but there’s only so much a person can do. John made a more robust structure with error checking, the piece where it writes to the spreadsheet etc. and I’ll loop in his post once it’s up.

Rethinking Our Project Page (and other stuff)

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 […]

Non-Standard Shapes- Another Odd WP JSON Display

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.

WP Rest API Tips

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 […]

Setting Cell Values – Google Forms/Sheets Workflow

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 […]

Playing with Words – Google Sheets to jQuery Drag/Drop

flickr photo shared by Internet Archive Book Images with no copyright restriction (Flickr Commons) This is a modification of the old refrigerator poetry concept based on a request from some of our World Languages professors but it’ll likely have some broader applicability. It essentially allows for three major things. You can create draggable elements (words, phrases, any HTML) from a Google spreadsheet You can create destination areas for those elements (also through the Google ss) You can make it so that elements that don’t match those destinations won’t “stick” there (spreadsheet again) It might be easier to see what’s up through the short video below. This was done mostly in jQuery but there are also a few Google Script elements that make life easier. The page below has everything except the CSS. It’s decently commented I think. The only real trouble I had was figuring out where/when to feed in the draggable/droppable elements. It kicked through after a bit of experimentation but I have a long way to go with javascript. Google Script There’s a directions sheet in the spreadsheet where I wrote a custom function. That allows me to write =getId() in the cell and have it generate the right URL for whatever spreadsheet it is in. You can also automatically copy my spreadsheet by going to the following […]

Free Speech? Random Scenario Generator

Talking to Dan about his sports law course resulted in this random generator which might be fun for others. It’s still developing but I like the potential for reinforcing some concepts about free speech in a fun way that allows you to repeatedly explore the topic without it getting tedious. I thought this would be a few minutes of work but I believe that Google has shifted the structure of their JSON feeds from the Spreadsheet. It could also be that I am insane. This particular experience did remind, rather unpleasantly, that I don’t fully understand how nested JSON parsing works. I ended up in the right place but only through about 40 minutes of slamming my head into various walls of misunderstanding. I also need to spend a bit of time applying the DRY concept to this bloated mess.

Hide/Show Angular via URL Variables

flickr photo shared by Internet Archive Book Images with no copyright restriction (Flickr Commons) For some reason I’ve been hiding/showing things a lot recently. One nice little trick I saw (and have already used) was based on the target class. You can see it working – hidden here and expanded here. Notice the #details piece in the URL. The CSS that makes it work is below. Nice and simple. That’s nice if it’s one element you can address via an id. It doesn’t work if you want to hide and show multiple items which might have the same id. I wandered around a bit and found a more interesting way to do it in Angular. The following javascript gets the variable from the URL. It’s straight from this article. So this URL http://bionicteaching.com/tools/hcps/hcps-tools.html?school=varina_hs would pass varina_hs to the variable school. If the school=varina_hs chunk is gone, then the box is invisible. I need to add that variable to the Angular scope so it can be accessed in the template. So now that we have that we can use it. Wandering around a bit I found ng-if. It’s essentially a way to show or hide and element based on whether the statement returns true. This code will return TRUE under either of two conditions. If the JSON element entry.gsx$school.$t has the […]