Talking to Britt and John “Aughie” Aughenbaugh (who will be teaching an intro to government course online this summer), Aughie mentioned a conversation he had with some students about whether Chris Christie could be a legitimate contender for president after all the recent bridge drama. That led to some talk of other historical political drama and how things were slightly different back then. It led to some wondering about how previous presidential candidates/winners might fare in today’s 24 hour news cycle (AKA the CNN Effect).
The rough idea was to build a randomizer that would present three randomized US presidents with three randomized traits/characteristics. Students would be able to argue whether a person with those traits would be electable.
Clearly, I like randomization but it’s more than just the chaotic serendipitous aspect. I think it adds an element that makes it “safer” for students. It is random after all, there can’t be a specific answer the instructor wants because the question can’t be totally predicted. Plus, it takes work off the instructor and adds variety to the responses since everyone gets different prompts.
I had this meeting Wednesday and wanted to get a semi-decent looking proof of concept built fairly quickly. I knew I wanted images of the presidents and figured I could re-use some of the code I’d used on other randomizers in the past.1
Info Gathering
I planned to use two different lists- one of the presidents and their images and one list of traits.
My goal was to see if I could get the president info and images in a way that didn’t require much work. As it so happens, I knew that there was an Exhibit demo on the presidents2 and they make it very easy to get that data out. I cut/pasted it into a spreadsheet to do a bit of quick parsing as they had a lot of data and all I needed was the name and image URL.
The original image URL (harvested from Wikipedia) was something like https://upload.wikimedia.org/wikipedia/commons/thumb/1/1d/James_Madison.jpg/100px-James_Madison.jpg
That was a bit small for what I wanted but if you look at the URL. You can see that there’s an initial .jpg and then the size portion (/100px-James_Madison.jpg -in this case) is appended. That’s good news for me. All I had to do to create a larger version is change the appended portion to /200px-James_Madison.jpg and I doubled the size of the image.3 That’s one of those strange bits of knowledge that might be easy for someone to miss. I cleaned this up a bit more and put it in a text file.
I did a few Google searches and gathered enough traits for presidents and leaders to make a decent list. That went into another text file.4
Framework
I wanted a decent looking frame for this and this is wonderful time to build things online as there is simply so many options. I went with Bootstrap and used this quick layout tool. It took 5 mins. It’s responsive. More than good enough for a POC.
Mixers
I decided on three presidents paired with three character traits. So I needed six mixers. You can see the code for the first president/characteristic pair below. I included the divs for a little context. The // indicates a comment telling you what’s going on in that line.
Because I was being lazy and have bad habits, I’d used some spreadsheet stuff to make the text files have HTML as well. I should not have done that because it adds hassle in the long run. I’ll need to go to multiple places to change things and it further messes up the data/display separation. That being said, the HTML formula in the spreadsheet for the presidents looks like this.
="
"&A2&"
"&B2&"'s
"
$E$1 is a ” mark. The code above will generate something like . . .
George
Washington's
I wanted to separate out the first and last names and add a div to style the images a bit.
That CSS is below. I liked setting a common largest size with .portrait so things didn’t jump around on refreshes. Some of the images aren’t the same size so doing that solves that problem. The .portrait img piece was the start of aligning the images horizontally and vertically but it was more hassle than it was worth for a POC so there it sits for the moment. The .name and .quality are just to get those pieces closer together. I’ll probably do more with that later.
.portrait {
height:320px;
margin-bottom:8px;
background-color: #eee;
}
.portrait img
{
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 12px;
}
.name h3 {
padding:0px;
margin-top:10px;
margin-bottom:0px;
}
.name h2 {
padding:0px;
margin:0px;
}
.quality h2 {
padding:0px;
margin:0px;
}
To Do
I’m looking at different ways to allow a user to push this randomized set to a blog for commenting and archiving. I can do it at least one way right now but it’s not nearly as clean as I’d like. So I’m continue to explore my options.
The Whole Thing
Electable?
The modern world is a very different political and media landscape from when the majority of U.S. Presidents served. Yet, at the same time, many of the skills and behaviors that resulted in political success in the past are still applicable today. When you get a political chimera that instersts you hit the "Post" button below and justify whether she or he would be electable today in the comments.
Your Presidential Chimera
1 Some of those are php, others javascript and with each language done in a variety of ways. I mention that because I come back to these things often and reuse or retool but having an archive of what you’ve done is important and saves quite a bit of time on occasion.
2 It pays to wander the Internet as I first started looking at that demo several iterations and 6 or 7 years ago.
3 Please do a find/replace for /100px or regex or something. Don’t do that by hand.
4 Both text files could go in a Google SS instead thanks to Timmy and Alan sharing some information. I’ll do that if this gains traction.