Skip to content

Commit

Permalink
moved js to index.html to bump size, and swapped localStorage to prof…
Browse files Browse the repository at this point in the history 
…iling
  • Loading branch information
@remy
remy committed Oct 25, 2010
1 parent 87365b7 commit 8807584
Showing 1 changed file with 208 additions and 5 deletions.
213 changes: 208 additions & 5 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -269,7 +269,7 @@ <h2>A free tip!</h2>
<form id="quizForm" action="/save" method="get">
<div class="task1">
<h2>Resources</h2>
<p><label for="docsize">Enter the size of <em>this particular document</em> in KB:</label> <input type="number" id="docsize" size="5" value="0.00" min="0" step="0.01" /></p>
<p><label for="docsize">Enter the size of <em>this particular document</em> in KB:</label> <input type="number" id="docsize" data-next="#sp" size="5" value="0.00" min="0" step="0.01" /></p>
<p><small>Tip: select the Documents filter from the Resources tab</small></p>
</div>
<div class="task2">
Expand All @@ -282,11 +282,11 @@ <h2>DOM manipulation</h2>
</div>
<div class="task4">
<h2>Variables</h2>
<p><label for="sp">Enter the value of <code>secretPass</code>:</label> <input data-next="#docsize" id="sp" type="text" /></p>
<p><label for="sp">Enter the value of <code>secretPass</code>:</label> <input data-next="#profile" id="sp" type="text" /></p>
</div>
<div class="task5">
<h2>Data storage</h2>
<p>Delete the "unwanted" item from localStorage</p>
<h2>JavaScript Profiling</h2>
<p><label for="profile">Name the function JavaScript has spent most time in:</label> <input id="profile" type="text" /></p>
</div>
<div class="buttons">
<a class="back button" href="#welcome">&larr; Back</a>
Expand Down Expand Up @@ -321,6 +321,209 @@ <h2>Your gift code: <span id="code">not ready yet - <em>complete the quiz</em></
</div>
</section>
</div>
<script src="chrome-quiz.js"></script>
<script>
// Chrome test game
(function (window, document) {

var completed = false;

window.quiz = (function () {

var tasks = {},
send = document.getElementById('send'),
secretPass = (+new Date).toString(32).substr(3).toUpperCase();

function task(id, fn) {
tasks[id] = function () {
fn.call(fn, function () {
showTask(id+1);
});
};
}

// doc size
task(1, function (next) {
var xhr = new XMLHttpRequest(),
docsize = 0;

xhr.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
docsize = (this.responseText.length / 1024).toFixed(2);
}
};

// really need to be sync? - I like to think so
xhr.open("GET", window.location, false);
xhr.send();

function complete() {
if (this.value == docsize) {
next();
taskvalue.removeEventListener('keyup', complete, false);
}
}

taskvalue = document.getElementById('docsize');

// not using the change event, because the input[type=number]
// doesn't increment by 0.10 - but rather integers :(
taskvalue.addEventListener('keyup', complete, false);
});

// Style manip
task(2, function (next) {
var h1 = document.querySelector('h1'),
comp = document.defaultView.getComputedStyle(h1, null);

(function checkfontsize(){
if (comp['font-size'] == '18px') {
next();
return;
}
setTimeout(checkfontsize, 200);
})();
});

// DOM manip
task(3, function (next) {
function handler(event) {
document.removeEventListener('DOMCharacterDataModified', handler, true);
document.removeEventListener('DOMNodeInserted', handler, true);
next();
}

document.addEventListener('DOMCharacterDataModified', handler, true);
document.addEventListener('DOMNodeInserted', handler, true);
});

// secretPass
task(4, function (next) {
// should have been done this way
window.__defineGetter__("secretPass", function() {
return secretPass;
});

function complete() {
if (this.value == secretPass) {
next();
sp.removeEventListener('keyup', complete, false);
}
}

var sp = document.getElementById('sp');
sp.addEventListener('keyup', complete, false);
});

// profile
task(5, function (next) {
function complete() {
if (this.value == 'omgomg') {
next();
profile.removeEventListener('keyup', complete, false);
}
}

var profile = document.getElementById('profile');
profile.addEventListener('keyup', complete, false);
});

// end
task(6, function () {}); // not quite convinced I need this

function showTask(id) {
if (tasks[id] !== undefined) {
document.body.className += ' task' + id;
tasks[id]();
delete tasks[id];

// last stage
if (id == 6) {
send.value = 'Go get your free gift!';
} else if (id < 4) {
send.value = 'Just ' + (6-id) + ' tasks to go...';
} else if (id < 6) {
send.value = 'Almost there, ' + (6-id) + ' left!';
}
}
}

function omgomg() {
// purposely wasteful - to try and consume some browser time
"a"+"b"+"c"+"d"+"e"+"f"+"g"+"h"+"i"+"j"+"k"+"l"+"m"+"n"+"o"+"p"+"q"+"r"+"s"+"t"+"u"+"v"+"w"+"x"+"y"+"z"+"a"+"b"+"c"+"d"+"e"+"f"+"g"+"h"+"i"+"j"+"k"+"l"+"m"+"n"+"o"+"p"+"q"+"r"+"s"+"t"+"u"+"v"+"w"+"x"+"y"+"z"+"a"+"b"+"c"+"d"+"e"+"f"+"g"+"h"+"i"+"j"+"k"+"l"+"m"+"n"+"o"+"p"+"q"+"r"+"s"+"t"+"u"+"v"+"w"+"x"+"y"+"z"+"a"+"b"+"c"+"d"+"e"+"f"+"g"+"h"+"i"+"j"+"k"+"l"+"m"+"n"+"o"+"p"+"q"+"r"+"s"+"t"+"u"+"v"+"w"+"x"+"y"+"z"+"a"+"b"+"c"+"d"+"e"+"f"+"g"+"h"+"i"+"j"+"k"+"l"+"m"+"n"+"o"+"p"+"q"+"r"+"s"+"t"+"u"+"v"+"w"+"x"+"y"+"z"+"a"+"b"+"c"+"d"+"e"+"f"+"g"+"h"+"i"+"j"+"k"+"l"+"m"+"n"+"o"+"p"+"q"+"r"+"s"+"t"+"u"+"v"+"w"+"x"+"y"+"z";


if (!window.okstop) setTimeout(omgomg, 20);
}

omgomg();

showTask(1);

return function () {
for (var key in tasks) {
return false;
}
return true;
};

})();

[].forEach.call(document.querySelectorAll('input[data-next]'), function (input) {
input.addEventListener('keydown', function (event) {
if (event.which == 13) {
var next = document.getElementById(this.getAttribute('data-next').substr(1));
if (next.nodeName === 'INPUT') {
next.focus();
} else {
window.location = '#' + next.id;
}
event.preventDefault();
}
}, false);
});

document.getElementById('quizForm').addEventListener('submit', function (event) {
event.preventDefault();

if (quiz()) {
if (!completed) {
var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
if (this.responseText == '1') {
// it worked
document.getElementById('code').innerHTML = secretPass;
window.location = '#thankyou';
} else {
// something went wrong
console.log('something went wrong...');
}
}
};

var ua = navigator.userAgent.match(/Chrome\/([\d\.]+)/);

var params = [];
params.push('name=' + encodeURIComponent(document.getElementById('name').value));
params.push('code=' + secretPass.toUpperCase());
params.push('datetime=' + encodeURIComponent(new Date));
params.push('chrome=' + (ua === null ? 'false' : ua[1]));

xhr.open("POST", '/save');
xhr.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
xhr.send(params.join('&'));

completed = true;
} else {
window.location = '#thankyou';
}
} else {
console.log('quiz not complete');
}
}, false);

})(this, document);
</script>
</body>
</html>

0 comments on commit 8807584

Please sign in to comment.