I saw Martin Weller’s tweet out for a randomizing text generator:
He got lots of replies (which is what make twitter useful when often it can not be), though many were just offering tools, not necessarily web producing ones (cough Excel).
Were I not busy with other tasks Sunday, I would have liked to not only a suggestion, but better yet, to whip up a prototype.
I had pretty much done what Martin asked for with my Make a MOOC generator.
It’s done in PHP though, so likely knocks out for being “idiot proof”. I was pretty sure the way that one works, though (a few arrays to hold the list of phrases and a constructor that pulled that at random), could be done all in Javascript in an HTML file.
By then Martin had gotten one going using a web tool I love, glitch, and he already blogged it (one of many reasons I respect and like Martin).
It works, so I could have just moved on to the day. To me it’s a bit scrunched on a phone, and I could not help but wonder if it could be done another way. I gave myself an hour over breakfast to put the edtechaphor together:
I’ve been using Bootstrap already for another project, so it’s fresh in my mind. It not only gives you everything in a single index.html file (loading the scripts and styles via hosted libraries) but a lot of styles, grids, components to put into the mix.
This just uses the jumbotron for the metaphor and a button. I added to be fancy a background using the fantastic (also remotely hosted) Backstretch.js which magically fills the background with a specified image.
Just for fun, I searched for open licensed images on terms crazy machine and one near the top was one by my photo friend Michael Coghlan!
A Drumming and Bell Ringing Machine flickr photo by mikecogh shared under a Creative Commons (BY-SA) license
The whole thing (meaning one HTML file and the background image) is on github so it can be used, forked, but also as above, hosted there. I just put the custom styles and scripts right into the HTML file. A “proper” coder might have insisted on storing them in external folders tucked under an assets directory. Poo.
As far as how it works, the functionality is tucked into the bottom of the HTML file in a script tag. I went to the source of Martin’s glitch code to get the array of phrases he used, but hey, the function was there too that assembled it on his site, so I borrowed it too (rewriting little bit to use jQuery).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
function generate() { // lifted somewhat from https://glitch.com/~spark-chipmunk // arrays of metaphors- if a single quote, a apostrophe needed, enter as \' let metaphor = ['baking a cake', 'a houseplant', 'running a marathon', 'raising a puppy', 'quantum physics', 'visiting an unknown country','the history of porcelain manufacture','the development of New York graffiti styles','the Corn Laws','the Loch Ness monster myth','the CB radio craze of the 70s','the Gargoyles of the Notre Dame','an all you can eat “Around the world” buffet','the growth of interest in vinyl records','a comfortable old coat','knitting','Homers The Iliad','gardening','the ecosystem of a small island','your favourite film','the structure of a typical horror film', 'chasing a cat', 'finding a big stick', 'a local castle', 'real hockey']; // arrays of tech- if a single quote, a apostrophe needed, enter as \' let tech = ['learning analytics', 'VLE', 'blockchain', 'OER', 'MOOCs', 'personalised learning','Artificial Intelligence','open textbooks','automated assessment','MCQs','digital natives','connectivism','blogging','plagiarism detection sites','lecture capture','Flipped Learning','Facebook','academics use of Twitter','open access publishing','mobile learning','learning styles','LMS','e-portfolios','Wikipedia','student-generated content']; let options = [`Use ${metaphor[random(metaphor)]} as a metaphor for ${tech[random(tech)]}. `, `How is ${metaphor[random(metaphor)]} an analogy for ${tech[random(tech)]}?`, `What does ${metaphor[random(metaphor)]} tell us about ${tech[random(tech)]}?`, ] let randomWord = Math.floor(Math.random() * options.length); $('#metaphorical').html(options[randomWord]); } |
So there are 2 arrays for the possible choices of metaphors and technology. The only gotcha is making sure there are no apostrophes inside (if so use \'). I added a few for fun.
What I do like are the array of “options” which offers 3 different ways to construct the sentences. So what generate() does is randomly pick one of the 3 options, and in those, it inserts a random analogy and a random tech. It puts it into the h1 header with an id of metaphorical (which starts empty).
Then to make it work, we call the generate() function when the page loads and each time the button is clicked.
After I tweeted the link Martin’s way, in a flash he had it running in a subdomain.
And properly updated with a background image of the super dog Teilo.
Then the fun begins.
You cannot go too wrong with stuff that generates random stuff. That’s what’s in my transcript.
Give Martin’s generator a spin at http://metaphor.edtechie.net/ — and if you want to make your own, just grab the code and spin it up.
Updates
Now Martin can generate in German!
Featured Image: Image by Dean Moriarty from Pixabay (sort of public domain license) modified with Wikimedia Commons image Martin Guitar Logo also public domain.
Hi Alan,
Love the random. Had a wee go at forking and having a googlesheet as a source. It might be a way of folk making their own without having to edit html…
http://git.johnj.info/edtechaphors/?id=1Tk-IUE8OG_InI6KjZ4GAFMm4IyJl1PoZQYzHCbm4fN8
That’s a way more useful approach, would like to maybe roll it into one. Perhaps the parameter to load could either be a google sheet id (for this way) or a url for a json data file? And then we just need a way to include a link to a background image, and no one would ever need to fiddle with the site code.
Thank for riffing, John.
This is great, John. Thanks for putting it together.