This is another example of why I find the Internet so amazing. It’s nothing new. It’s just makes the kind of learning I find so attractive possible.
Here’s the scenario. We were in a meeting an one of our new ITRTs, Rachel Toy, mentioned this Buck’s Institute Tool that’s meant to help shape driving questions. It’s meant to be printed out and then cut up and assembled. Even if you wanted to do it, it’d be hard to justify the construction time in most classrooms where you’d use this. Rachel also commented that building the paper version didn’t work all that well when she did it herself.
For context, I know nothing about real programming or even sophisticated scripting. Over time and space, I’ve dabbled in AppleScript, FileMaker Pro scripting, and banging on WordPress themes. I did, however, cobble together some PHP scripts and make a single variable page that displayed a digital version of the Chinese fortune sticks I have from when I was a kid.1 I have long wanted to make something that shuffled through a variety of variables and displayed them for the user. Based on my past experience with the fortune sticks, I figured I might be able to manage adding some other variable to randomize.
Turns out that wasn’t that hard. My original fortune sticks structure might have worked but I couldn’t figure it out. I went searching and found someone giving an example that actually mocked the person for not Googling the answer. Even in mockery, the Internet is bountiful.
$strings = array('foo', 'bar', 'you could', 'have easily', 'googled for this answer');
echo $strings[array_rand($strings)];
I then duplicated the code below four times and changed the variable names and the phrases per column to match the Buck’s Institute tool. The example below is for column four. The example page is here. It was intentionally made ugly so no one would think that’s what I meant for it to look like in the end.
It worked and I was fairly pleased. Goal achieved and I had an easy way to do things like this in the future. I emailed the link. Rachel responded by asking if it was possible to manipulate the randomized columns individually. My answer was no but I wasn’t happy because that seemed like a reasonable request. As I wandered around looking for a decent way to do that, I kept ending up with javascript references.
I have no experience whatsoever with javascript so that led to a new round of searching. I ended up messing with the W3schools site some. I learn quite a bit there and they also give you the chance to actually try changing things live which is handy simply because it cuts down on the time it takes to see if what you’re doing will work. Stack Overflow was the other main place I found useful help. The only problem there is that there is often a (legitimate) assumption that you might have some idea what’s going on. I don’t. That can lead to some frustration. I often end up with 12 or 15 tabs and 5 or 6 pieces of code in various states of functionality.
My goal is to get something working and then break it. I’m usually very good at breaking things. The key is to break very small pieces. It very quickly shows you what piece does what.
Stack Overflow came to the rescue once again. This code sample was nearly perfect for what I wanted.
function quotes(){
var aquote = new Array;
aquote[0]="\"Quote 1.\"";
aquote[1]="\"Quote 2.\"";
aquote[2]="\"Quote 3.\""
rdmQuote = Math.floor(Math.random()*aquote.length);
document.getElementById("txtbox").value=aquote[rdmQuote];
}
window.onload=quotes;
After a little trial and error it became clear that the function was one name and the variables within that function where another name. In the case above the name for the function was “quotes” and the variable was name “aquote.” As long as I named them differently, it should be no problem to run the four versions I needed and they were already attached to the handy button. I found a four column CSS layout to save time and put the javascript pieces in the proper places. You can see the whole thing in context on any of the javascript examples by viewing source in your browser.
That effort got me to this result which was pretty decent functionally. I made some attempts to use HTML in the variable or to shape the display of the textarea via CSS but neither worked well enough to make me happy.
I knew that better control of the display had to be possible. In my earlier ramblings, I had seen the .innerHTML element referenced.
rdmQuote = Math.floor(Math.random()*aquote.length);
document.getElementById("columnOne").innerHTML=aquote[rdmQuote];
Making the change from .value to .innerHTML on the piece above and then I just needed to add an HTML element with the same id named in that piece. In this case “columnOne” which I did for below.
Now that I could put HTML in my variables, I was pretty excited. I now had a way to make a random image generator to use as a writing prompt.2 Which I made a proof of concept of using #ds106 animated gifs.
My next goal is to look at ways to populate the image/text variables automatically from somewhere else- probably a Google spreadsheet and try to make this something like a Timeline JS style iframe embed.
I documented all this for a few reasons. The first is that maybe it’ll help someone do this faster than I did. I’m also occasionally asked how I did something and I usually just shrug. This is an attempt to document a specific event but it’s representative of how I learn most things on the Internet. I try to pay the Internet back when it does me favors.
Secondly, I remain amazed that I can learn all these things, helped by so many people. I can build things that would have been impossible just a short time ago. This is the same design cycle that got me interested in HTML back in 2000. I had an aim in mind and the Internet provided the tools, building blocks, examples, tutorials, and even one-on-one troubleshooting- all for an investment of time and effort rather than money. That’s still amazing.