Just like every other kid on earth, my brother and I would always try to find ways to peak at (or into) our Christmas presents before the big day. One year, my dad wised up and instead of putting names on the tags, he numbered them and had some memorized formula to resolve it to its recipient. Well Dad, thanks for the idea. I’ve been doing it for years and it works great. But this year, I decided to mix it up a little and make it into a “challenge” for my own boys.
I never did figure out my dad’s formulas, but I suspect it didn’t differ to much from those that I’ve used over the years. My formulas are usually very simple, and always resolve to either an even or odd number (the kids have figured this out). Each year I change it up, so they cannot figure it out.
This Years Challenge
Instead of just having them guess this year, I’ve challenged them to solve it. I wrote a simple mobile web application, that decodes the digits and challenged them to reverse engineer it to figure out how it works.
To help them along, I gave them the program’s source code printed out. After they had a chance to look it over, I booted up the app and showed them how it works. I demonstrated how it decodes the numbers and how it handles exceptions/errors. I also gave them a quick summary on how the code is organized and what sections of it perform what functions (e.g. display, layout, functions).
The WebApp – Gift Obfuscator
The application is just a simple, javascript webpage built using jQuery Mobile. It has a single input field (tag number) and a single button to decode it. If the tag numbered entered is valid, the correct recipient’s picture will be highlighted. If a tag number is input that is not valid, it will display an error.
The Source Code
If you have any experience with programming, you will be able to figure this out in just a few seconds probably..also please do not judge me on the code. I threw it together is a few minutes and tried to make it solvable by my kids. I’ve purposely made the code look a little more complicated than it has to be, to camouflage its simplicity.
If you are not experienced with programming, see if you can figure it out. The method to decode the tag number is very simple.
<!DOCTYPE html>
<html>
<head>
<title>Gift Obfuscator</title>
<link href=”css/jquery.mobile-1.3.1.min.css” rel=”stylesheet” type=”text/css” />
<script src=”js/jquery.js” type=”text/javascript”></script>
<script src=”js/jquery.mobile-1.3.1.min.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(document).ready(function() {
$(“#btnDecode”).click(function () {
$(“#st > img”).fadeTo(“fast”, 0.35).css(“border-color”, “#fff”);
$(“#err”).hide();
var s = $(“#tn”).val();
if (isNaN(s)) { sr(“Invalid Code”); return }
if (s.length !=4) { sr(“Wrong Length Code”); return }
cc(s);
});
function cc(c) {
r = parseInt(c[0])+parseInt(c[2]);
if (r % 2) { z(“#k1”); return; }
z(“#k2”)
};
function sr(s) { $(“#err”).html(s).fadeIn(); $(“#st > img”).fadeTo(“fast”, 1) };
function z(k) { $(k).css(“border-color”, “yellow”).fadeTo(“fast”,1) }
});
</script>
<style>
#err { text-align: center;padding: 5px;display:none;background-color:red;color:#fff; }
#dr > img { width: 150px; }
#st { font-size: 2em;text-align: center;padding: 10px 0; }
#st > img { width: 100px;margin: 2px; border: 10px solid #fff; }
</style>
</head>
<body>
<section id=”decoder” data-role=”page”>
<header data-role=”header”><h1>Gift Obfuscator</h1></header>
<div class=”content” data-role=”content”>
<div id=”err”></div>
<div id=”st”><img src=”images/trevor.jpg” id=”k1″ />
<img src=”images/brandon.jpg” id=”k2″ /><br />Gift Tag Decoder</div>
<input type=”search” name=”textbox” id=”tn” value=”Tag Number” />
<a href=”#” data-role=”button” id=”btnDecode”>Who is it for?</a>
</div>
</section>
</body>
</html>
Summary
With Trevor beginning college to be an application programmer and Brandon showing interest in the same, I thought that this would be a fun and challenging idea for them. Thus far, Brandon has spent a good part of his time, reading the code and taking guesses. Trevor on the other hand, has been transcribing it to his computer to to recreate a working copy. If Trevor can get jQuery mobile configure, he might just be able to do it.
On Christmas day, I will make the URL of the application known. This will allow the kids to use it Christmas morning. I’ll also likely upload the project to GitHub. It can easily be altered to work for more kids.
If you do figure it out, please do not reply with comments until Christmas day.
Update: Try it out for yourself.