Javascript Puzzle Code Proof of Concept

This is the result of a conversation I had with Gardner and Jon yesterday. Essentially, we all found this O-P-E-N page1 pretty interesting. As we got to talking it seemed that there could be some interesting ways that that movement could feed back into what the site itself in ways other than just changing the physical display of the elements. I knew that elements of that were possible in javascript. This site was what was in my head during the discussion- in particular the way the top speed numbers climb as you scroll down. What I wanted was slightly different. My idea what that by moving an element, or series of elements in particular ways a hidden message would appear- kind of like solving a puzzle (more easter egg style, less jigsaw). I did not know how to do this but was certain it could be done. This was my path.

I knew how to make draggable objects from the refrigerator poetry days (That was back in August. See how strange things resurface?). I opted to redo it using the default example in JQuery because I’ve been using that for some other things. Now I just needed to figure out how to get the coordinates back in a way that I could display.

My initial searches led me to position() in jquery. It was what I wanted but it didn’t re-update on the end of the drag scenario. It was very good at telling me the coordinates of the object at the start. Some more searching led to gold – JQuery – Getting the Coordinates of a Draggable Object. A little bit later and I had a functioning proof of concept. The key to all of this is continuing to refine you vocabulary as you search. You can find helpful things but you have to keep picking up key words- in this case coordinates, jquery, and draggable were things that helped refine the search results considerably. You can see my progressive wandering below. “javascript display numbers based on position” was my very awkward early attempt and I ended up with “live display coordinates of dragged object jquery”. You can see I wandered around a bit but I kept improving. Screen Shot 2014-02-26 at 11.10.29 PM2

It’s all javascript so you can see the code clearly if you view source. I left even the CSS in the document to make things really easy to see. I’m also pasting it below in case that’s helpful.

You can play with the full size here if you’d like.. The idea is that if you drag the box onto the green destination and line it up properly you’ll get an IP address. If you look up that IP address, it’ll lead you to a physical address etc. etc. You get the idea. With some thought, you could play all sorts of games with multiple variables based on the positions of elements and variables that interact with one another to create additional layers of complexity.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Draggable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #box { width: 120px; height: 30px; padding: 0.5em; }
  #results { font-size: 3em; position:absolute; top:300px; left:400px;}
  #answer {width:120px; height:30px; position:absolute; top:208px; left:201px; background-color:green; padding: 0.5em; z-index:-20}
  </style>
  <script>
    //makes the item "#box" draggable- you can change "#box" to the id of whatever element you want to drag
  $(function() {
	$( "#box" ).draggable();
  });
  </script>
</head>
<body>

<div id="box" class="ui-widget-content">
  <p>Drag me</p>
</div>

<script>
  //probably best to leave these first four lines alone
var coordinates = function(element) {
    element = $(element);
    var top = element.position().top;
    var left = element.position().left;
    //this part here you can mess with- #results designates the div where the data will go and the .text is what's going to be written.
    $('#results').text('The secret IP address is ' + top + '.80.152.' + left);
}

//This portion makes it so that it gets the coordinates at the end of the move. If you rename #box, make sure you change the name here as well.
$('#box').draggable({
    start: function() {
        coordinates('#box');
    },
    stop: function() {
        coordinates('#box');
    }
});

</script>

<!--You can see where the results are written here (that's the X,Y coordinates and your text from earlier. The answer div was done to give the destination. It's controlled solely by CSS and the top and left coordinates are what I wanted the answer to be for the IP address-->
<div id="results"></div>
<div id="answer"></div>

</body>
</html>


1 h/t Jeff Nugent for finding a very awesome page created by VCU students and focused on Open.

2 You can also see to my shame that I clicked on something with an upworthy style title. Shame on me and FB. The Fashion thing was supposedly related to one of the stackoverflow questions but I have no idea how.

Comments on this post

  1. martha said on February 27, 2014 at 12:01 pm

    BUT WHAT DID HE DO AFTER HE GOT MUGGED AT THE TRAIN STATION!?!

    Seriously, this is very cool. I always assumed that building this kind of interface would be beyond me — you’ve inspired me to do a bit of experimenting!

    • Tom Woodward said on March 8, 2014 at 3:01 pm

      My spam filter didn’t like you. I just found this one when looking for Jim’s epistle comment.

      I didn’t think I could do this either. It is interesting stuff to mess around with. I hope to do something beyond a POC in the near future.

Leave a Reply

Trackbacks and Pingbacks on this post

No trackbacks.

TrackBack URL