I’ve got an interest in beefing up my JavaScript tools in 2012- I’ve mildly dabbled on and off, but am far behind in the current state of the code. I started doing more trying to build more of the onboard interfaces for the StoryBox, mainly because I lacked the python chops to do so.

But there is a lot of power in moving interaction browser side, especially with sophistication of jQuery libraries for a lot of functionality. I am seeing things I typically do in PHP that I can see doing in JS. This was the thinking when I decided a few nights ago to build a web tool to randomly generate some words that have no English Equivalent:

I will roll through some technical stuff which might be hairy or not. But just want to share what I am doing; there are likely much more elegant ways to do the coding here. but oh well. There are two portions to run through- the code/functionality and the design. Let’s start with the basics of the CSS to make a slick web effect. I’l provide the full source at the end. As far as I can test it works well on most browsers (though I have no access to the dreaded cursed IE) including mobile ones.

If you mess around with the window size for the site, you should notice that the background graphic resizes automatically to match the window size. I spotted this effect on someone’s bio page, dug into the source code, and came across the jQuery Backstretch plugin that made this work.

Backstretch is a simple jQuery plugin that allows you to add a dynamically-resized background image to any page. The image will stretch to fit the page, and will automatically resize as the window size changes.

Basically, jQuery is a whole library of code you can just include to provide a whole raft of cool things to your site, and the plugins just extend what it can do. ALmost every modern web site (include many wordpress templates) tide on jQuery.

To make backstretch work, you simply download the back.js file. I usually make a 1024×768 jpg image for the background. The first time I used it was to make a splash page for the domain I use for my experiments, http://lab.cogdogblog.com/ so visitors could not fish around my web directories.

The basic web page to make it work is:

The key parts are in the <head>…</head> You should note we are loading jquery remotely form Google (if you are doing this on something like the StoryBox which is not connected to the ent, you would want to download and reference a local library version). We also link to the local back.js library, the jquery extension. The magic that makes it work is the call:

which applies the effect using the guard-dog.jpg file (you would change this to reflect the name of whatever file you are using). The local style sheet just has some simple formatting, using absolute positioning for the screen text.

My No Words site uses a graphic I seem t always land on when searching for “translation”, the flickr photo shared by tochis.

All of the content was lifted from four web sites:

Now let’s get down to code! The way this works, each time I want to provide a new word and definition pair, we do not have to reload the page- it is all done in place.

To make the site work, I lazily made two arrays (one multi-dimensional array, or better yet, some object construct would have been more elegant), one to hold the name of the word, the other to hold the text that explains it:

Each item in the array is string that is in quotes (which means if the text includes an apostrophe or a quote, I have to write it as \’).

The last thing is a small temp variable I use to keep track of the last item selected, so if we generate a new word, we want to make sure it is different form the old one. All of the tracking is done by referencing the index to the array.

Now, for the randomizing part, we do via a function, so we can call it as needed:

The logic here is:

  • set a flag to indicate we are not done (done = 0)
  • run a do…while loop that repeats until we change that done flag; it checks the exit condition on every round, and once done is something else… we are done looping!
  • We use some math functions to generate a random number between 0 and the number of items in the arrays, this is the pointer for the word/definition we will display.
  • The check to see if it is different from the last number used (lastim), and if so, we are done, so change the value of done=1, and update the new value of lastim to the number chosen.
  • The last part is how we update the page content dynamically. The default page as an empty holder
    and the code is what is used to dynamically update page content referenced by CSS ids, in this case the word chosen wrapped in <strong>…</strong> tags with a line break and then the definition.

That may not be 100% clear, but I tried to comment everything in the source code.

We make it happen the first time by calling the function when the page loads:

and make it available to update using a basic form button

Those are most of the working bits. Not sure if this makes any sense. Frankly I found the best way to understand coding was to dive in and bang it til it works. I rely a lot know on the JavaScript Console in Chrome to find errors (View -> Developer -> JavaScript Console).

You can download the entire batch of code for this site, and maybe try making your own changes to it. There are just 4 files that site in the directory and you can download it all from http://cogdogblog.com/code/nowords.zip

  • back.js
  • index.html
  • style.css
  • translate.jpg

2012, everyone wants to be coding. It’s the new thang. Bust your chops out.

The post "Building the No English Words Translation Tool" was originally dropped like a smoking hot potato at CogDogBlog (http://cogdogblog.com/2012/01/building-nowords-tool/) on January 1, 2012.

10 Comments

  • Nice stuff, I’ve been refreshing the word page for a while, but still in holiday mode as far as doing any work. I am interested in the way this sort of code experiment parallels the creative element of ds106.

    Are you thinking of css or code assignments? I am wondering about hackasaurus, popcorn.js or some of these sites that let you edit html, js & css in the browser (raking addled memory for a lovely one).

    Also reminded me of http://iheartquotes.com/api so I messed about with it a little today:
    http://johnjohnston.info/tests/quote.html
    Which if I could figure out an angle could b a ds106 assignment?

  • Tim Owens timmmmyboy.com

    I had no idea you were this advanced in your programming chops. I’m impressed! I need to get up to speed. I know just enough to nod along when other people do most of the work and try to hack it to make it work. I signed up for http://codeyear.com/ from the folks at http://www.codecademy.com/ which will hopefully help to get some more practice under my belt.

  • John- your demo is tres cool and would love to see the insides; I understand now how you did the Flickr part with the json calls like I did?

    My suggestion is to tweak the interaction a bit- call it something like “Visualize That Quote”- rather than provide choices to pick from Flickr for each word; maybe random generate one image per word. The activity would be to illustrate/explain the quote in pictures with the least number of pictures required. The user could X out ones they did not need (and they would dissapear) and perhaps allow a click to generate a new random image to replace it. They would then do a screenshot to save their work? Perhaps generate a score where there is advantages to lower numbers of pictures and fewer image replacements?

    Whatever the deal I like it! We will give some thoughts to code/CSS assignments for sure.

    • Alan, thanks.
      Trying some of your suggestions:
      http://johnjohnston.info/tests/quote2.html
      By no means finished and pretty slow as it needs a search for each word.

      The insides are pretty horrible, I am not a coder. I start and just keep jamming stuff in;-) The logic is pretty odd.

      All the js & css is in the html file. I had to proxy the quotes json as I can’t get it directly due to some cross domain stuff. the json comes via ‘shortquote.php’ and is pulled in via jquery ajax.

      The flickr search is in ‘randomflickr.php’ which uses phpFlickr to get a list of images with the tag and send the image tag for a random one, this slows the load down as it is called for each word.

      In testing I’ve yet to produce a nice set of images to go with a quote that might just be me. Been good fun for me and I really appreciate the interest.

  • scottlo scottlo.com

    Alan, John:

    All I can say is Wow.

    I dig the direction you guys are pushing this. The idea of using the web to present authentic prompting language selected randomly to students is very powerful and important.

    What really excites me about this is that it is developing in this informal almost play-like setting of ds106.

    If you guys keep cobbling together the tools – imperfect as they may be – you’ll find a willing community of creative and wacky testers (myself included).

    Thanks.

  • Dull Women/Immaculate Homes (Flickr Visualized Quotes) - CogDogBlog cogdogblog.com/2012/01/03/dull-womenimmaculate-homes-flickr-visualized-quotes

    […] posting the contorted how tos for my language tool, John Johnston commented on his own experimentation where we hooked together two web services in a […]

  • Learning at some schools is like drinking from a firehose. | Tim Owens timmmmyboy.com/2012/01/learning-at-some-schools-is-like-drinking-from-a-firehose

    […] already blown away by the amazing programming chops being show by Cogdog and now John Johnston who created this awesome Flickr Quote Visualization Tool that allows you to […]

  • John's World Wide Wall Display johnjohnston.info/blog/?e=2240

    Uitwaaien…

    My first attempt at a ds106 assignment. I was reading Alan Levine’s post Building the No English Words Translation Tool about a new DS106 assignment Make The Untranslatable Understood the task is:Use the Random Words with No English Translation tool t…

  • paul martin

    I am convinced that your example – retrouvailles – is similar in spirit to the motto of this fair City (local cooncil excluded) of Aberdeen. I am told that Bon Accord means “Happy to part, hope to see you soon”. A bit like my coding experience ….

  • Uitwaaien | 106 drop in johnjohnston.info/106/?p=123

    […] first attempt at a ds106 assignment. I was reading Alan Levine’s post Building the No English Words Translation Tool about a new DS106 assignment Make The Untranslatable Understood the task is: Use the Random Words […]

Leave a Comment

All fields are required. Your email address will not be published.

Creative Commons License
Building the No English Words Translation Tool by CogDogBlog is licensed under a Creative Commons Attribution-Share Alike 4.0 License.