468 lines
14 KiB
HTML
468 lines
14 KiB
HTML
|
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
|
||
|
|
<head>
|
||
|
|
<title>dojox.gfx: Career Aptitude Test</title>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||
|
|
<style type="text/css">
|
||
|
|
@import "../../../dojo/resources/dojo.css";
|
||
|
|
@import "../../../dijit/tests/css/dijitTests.css";
|
||
|
|
</style>
|
||
|
|
<!--
|
||
|
|
The next line should include Microsoft's Silverligth.js, if you plan to use the silverlight backend
|
||
|
|
<script type="text/javascript" src="Silverlight.js"></script>
|
||
|
|
-->
|
||
|
|
<script type="text/javascript" src="../../../dojo/dojo.js"></script>
|
||
|
|
|
||
|
|
<!--
|
||
|
|
<script type="text/javascript" src="../Mover.js"></script>
|
||
|
|
<script type="text/javascript" src="../Moveable.js"></script>
|
||
|
|
<script type="text/javascript" src="../move.js"></script>
|
||
|
|
<script type="text/javascript" src="../fx.js"></script>
|
||
|
|
<script type="text/javascript" src="../shape.js"></script>
|
||
|
|
-->
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
|
||
|
|
dojo.require("dojox.gfx");
|
||
|
|
dojo.require("dojox.gfx.move");
|
||
|
|
dojo.require("dojox.gfx.fx");
|
||
|
|
dojo.require("dojo.colors");
|
||
|
|
dojo.require("dojo.fx");
|
||
|
|
|
||
|
|
var g = dojox.gfx, m = g.matrix;
|
||
|
|
|
||
|
|
var container, surface, surface_size,
|
||
|
|
vat, freezer, broiler, score, startTime, endTime;
|
||
|
|
|
||
|
|
var totalItems = 10, goodItems = 0, badItems = 0;
|
||
|
|
|
||
|
|
var radius = 30, // pixels
|
||
|
|
slowRate = 10, // speed in ms per pixel
|
||
|
|
fastRate = 2, // speed in ms per pixel
|
||
|
|
freezeTime = 5000, // ms
|
||
|
|
frostTime = 2000, // ms
|
||
|
|
broilTime = 5000, // ms
|
||
|
|
burnTime = 2000, // ms
|
||
|
|
pulseTime = 200; // ms
|
||
|
|
|
||
|
|
function getRand(from, to){
|
||
|
|
return Math.random() * (to - from) + from;
|
||
|
|
}
|
||
|
|
|
||
|
|
function inRect(rect, crd){
|
||
|
|
return rect.x <= crd.x && crd.x < rect.x + rect.width &&
|
||
|
|
rect.y <= crd.y && crd.y < rect.y + rect.height;
|
||
|
|
}
|
||
|
|
|
||
|
|
function getCenter(circle){
|
||
|
|
var shape = circle.getShape(), matrix = circle.getTransform();
|
||
|
|
return m.multiplyPoint(matrix ? matrix : m.identity, shape.cx, shape.cy);
|
||
|
|
}
|
||
|
|
|
||
|
|
function getDuration(x1, y1, x2, y2, rate){
|
||
|
|
return Math.floor(Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2)) * rate);
|
||
|
|
}
|
||
|
|
|
||
|
|
function updateScore(){
|
||
|
|
var shape = score.getShape();
|
||
|
|
endTime = (new Date()).getTime();
|
||
|
|
shape.text = goodItems + " item" + (goodItems != 1 ? "s" : "") +
|
||
|
|
" in " + ((endTime - startTime) / 1000) + "s"
|
||
|
|
score.setShape(shape);
|
||
|
|
|
||
|
|
if(goodItems + badItems != totalItems){ return; }
|
||
|
|
|
||
|
|
var rating = goodItems / (endTime - startTime) * 60000 * (40 - radius) / 10;
|
||
|
|
dojo.byId("result_pass").style.display = badItems || rating < 5 ? "none" : "";
|
||
|
|
dojo.byId("result_dollar").innerHTML = rating.toFixed(2);
|
||
|
|
dojo.byId("result_but").style.display = badItems ? "" : "none";
|
||
|
|
dojo.byId("result_waste").innerHTML = (badItems * 5).toFixed(2);
|
||
|
|
dojo.byId("result_and").style.display = badItems ? "none" : "";
|
||
|
|
dojo.byId("result_fail").style.display = badItems ? "" : "none";
|
||
|
|
if(!badItems){
|
||
|
|
var pos;
|
||
|
|
if(rating < 1){
|
||
|
|
pos = "Junior Speciment Flipper";
|
||
|
|
}else if(rating < 2){
|
||
|
|
pos = "Senior Speciment Flipper";
|
||
|
|
}else if(rating < 4){
|
||
|
|
pos = "Shift Supervisor";
|
||
|
|
}else if(rating < 6){
|
||
|
|
pos = "Joint Manager";
|
||
|
|
}else if(rating < 8){
|
||
|
|
pos = "Night Director";
|
||
|
|
}else if(rating < 10){
|
||
|
|
pos = "Morning Director";
|
||
|
|
}else if(rating < 12){
|
||
|
|
pos = "Vice President";
|
||
|
|
}else if(rating < 14){
|
||
|
|
pos = "Senior Vice President";
|
||
|
|
}else if(rating < 16){
|
||
|
|
pos = "Chief of Something";
|
||
|
|
}else{
|
||
|
|
pos = "Nominal President";
|
||
|
|
}
|
||
|
|
dojo.byId("result_pos").innerHTML = pos;
|
||
|
|
}
|
||
|
|
var anim1 = dojo.fx.wipeOut({
|
||
|
|
node: "gfx_holder",
|
||
|
|
duration: 500,
|
||
|
|
delay: 1000
|
||
|
|
}),
|
||
|
|
anim2 = dojo.fx.wipeIn({
|
||
|
|
node: "result",
|
||
|
|
duration: 500,
|
||
|
|
delay: 1000
|
||
|
|
});
|
||
|
|
anim1.play();
|
||
|
|
anim2.play();
|
||
|
|
}
|
||
|
|
|
||
|
|
function showStatus(circle, text){
|
||
|
|
var c = getCenter(circle),
|
||
|
|
status = surface.createText({});
|
||
|
|
status.moveToBack().setFill(new dojo.Color([0, 0, 0, 0.5]))
|
||
|
|
.setFont({family: "serif", variant: "small-caps", weight: "bold"})
|
||
|
|
.setShape({x: c.x, y: c.y, text: text, align: "middle"});
|
||
|
|
var anim = dojo.fx.combine([
|
||
|
|
g.fx.animateFill({
|
||
|
|
shape: status,
|
||
|
|
duration: 3000,
|
||
|
|
color: {end: "transparent"}
|
||
|
|
}),
|
||
|
|
g.fx.animateTransform({
|
||
|
|
shape: status,
|
||
|
|
duration: 3000,
|
||
|
|
transform: [
|
||
|
|
{name: "translate", start: [0, 0], end: [0, 300]},
|
||
|
|
{name: "original"}
|
||
|
|
]
|
||
|
|
})
|
||
|
|
]);
|
||
|
|
dojo.connect(anim, "onEnd", function(){ status.removeShape(); });
|
||
|
|
anim.play();
|
||
|
|
}
|
||
|
|
|
||
|
|
function moveToPile(shape, bad){
|
||
|
|
if(shape.moveable){
|
||
|
|
shape.moveable.destroy();
|
||
|
|
delete shape.moveable;
|
||
|
|
}
|
||
|
|
|
||
|
|
var oldColor = shape.getFill(), c = getCenter(shape),
|
||
|
|
newX = 80 + (bad ? badItems++ : goodItems++) * 2.25 * 10,
|
||
|
|
newY = bad ? 445 : 415,
|
||
|
|
duration = getDuration(newX, newY, c.x, c.y, fastRate),
|
||
|
|
anim = dojo.fx.chain([
|
||
|
|
g.fx.animateFill({
|
||
|
|
shape: shape,
|
||
|
|
duration: 250,
|
||
|
|
color: {end: "transparent"}
|
||
|
|
}),
|
||
|
|
g.fx.animateTransform({
|
||
|
|
shape: shape,
|
||
|
|
duration: duration,
|
||
|
|
transform: [
|
||
|
|
{name: "translate", start: [0, 0], end: [newX - c.x, newY - c.y]},
|
||
|
|
{name: "original"}
|
||
|
|
]
|
||
|
|
}),
|
||
|
|
g.fx.animateFill({
|
||
|
|
shape: shape,
|
||
|
|
duration: 250,
|
||
|
|
color: {end: oldColor}
|
||
|
|
}),
|
||
|
|
g.fx.animateTransform({
|
||
|
|
shape: shape,
|
||
|
|
duration: duration,
|
||
|
|
transform: [
|
||
|
|
{name: "scaleAt", start: [1, newX, newY], end: [10 / radius, newX, newY]},
|
||
|
|
{name: "original"}
|
||
|
|
]
|
||
|
|
})
|
||
|
|
]);
|
||
|
|
dojo.connect(anim, "onEnd", updateScore);
|
||
|
|
anim.play();
|
||
|
|
}
|
||
|
|
|
||
|
|
function repeatMove(){
|
||
|
|
var rect = vat.getShape(), c = getCenter(this),
|
||
|
|
x = getRand(rect.x + radius, rect.x + rect.width - radius),
|
||
|
|
y = getRand(rect.y + radius, rect.y + rect.height - radius),
|
||
|
|
duration = getDuration(x, y, c.x, c.y, slowRate);
|
||
|
|
this.anim = g.fx.animateTransform({
|
||
|
|
duration: duration,
|
||
|
|
shape: this,
|
||
|
|
transform: [
|
||
|
|
{name: "translate", start: [0, 0], end: [x - c.x, y - c.y]},
|
||
|
|
{name: "original"}
|
||
|
|
]
|
||
|
|
});
|
||
|
|
dojo.connect(this.anim, "onEnd", this, repeatMove);
|
||
|
|
this.anim.play();
|
||
|
|
}
|
||
|
|
|
||
|
|
function repeatFrost(){
|
||
|
|
this.status = "frozen";
|
||
|
|
this.setStroke({color: "orange", width: 3});
|
||
|
|
showStatus(this, "Ready");
|
||
|
|
this.anim = g.fx.animateFill({
|
||
|
|
duration: frostTime,
|
||
|
|
shape: this,
|
||
|
|
color: {end: "white"}
|
||
|
|
});
|
||
|
|
// calculate a shift
|
||
|
|
var dx = getRand(-radius, radius) / 2, dy = getRand(-radius, radius) / 2, sign = 1;
|
||
|
|
this.applyLeftTransform({dx: -dx / 2, dy: -dy / 2});
|
||
|
|
dojo.connect(this.anim, "onAnimate", this, function(){
|
||
|
|
this.applyLeftTransform({dx: sign * dx, dy: sign * dy});
|
||
|
|
sign = -sign;
|
||
|
|
});
|
||
|
|
dojo.connect(this.anim, "onEnd", this, function(){
|
||
|
|
showStatus(this, "Frozen");
|
||
|
|
moveToPile(this, true);
|
||
|
|
});
|
||
|
|
this.anim.play();
|
||
|
|
}
|
||
|
|
|
||
|
|
function repeatFreeze(){
|
||
|
|
this.status = "freezing";
|
||
|
|
this.setStroke({color: "black", width: 3});
|
||
|
|
this.anim = g.fx.animateFill({
|
||
|
|
duration: freezeTime,
|
||
|
|
shape: this,
|
||
|
|
color: {end: "blue"}
|
||
|
|
});
|
||
|
|
// calculate a shift
|
||
|
|
var dx = getRand(-radius, radius) / 2, dy = getRand(-radius, radius) / 2, sign = 1;
|
||
|
|
this.applyLeftTransform({dx: -dx / 2, dy: -dy / 2});
|
||
|
|
dojo.connect(this.anim, "onAnimate", this, function(){
|
||
|
|
this.applyLeftTransform({dx: sign * dx, dy: sign * dy});
|
||
|
|
sign = -sign;
|
||
|
|
});
|
||
|
|
dojo.connect(this.anim, "onEnd", this, repeatFrost);
|
||
|
|
this.anim.play();
|
||
|
|
}
|
||
|
|
|
||
|
|
function repeatBurn(){
|
||
|
|
this.status = "burnt";
|
||
|
|
this.setStroke({color: "orange", width: 3});
|
||
|
|
showStatus(this, "Done");
|
||
|
|
var anim1 = g.fx.animateFill({
|
||
|
|
duration: burnTime,
|
||
|
|
shape: this,
|
||
|
|
color: {end: "black"}
|
||
|
|
});
|
||
|
|
var anim2 = new dojo._Animation({
|
||
|
|
duration: freezeTime,
|
||
|
|
curve: [0, freezeTime]
|
||
|
|
});
|
||
|
|
var matrix = this.getTransform(), c = getCenter(this);
|
||
|
|
dojo.connect(anim2, "onAnimate", this, function(val){
|
||
|
|
var scale = (val % pulseTime) / pulseTime / 4 + 1;
|
||
|
|
this.setTransform([m.scaleAt(scale, c), matrix]);
|
||
|
|
});
|
||
|
|
this.anim = dojo.fx.combine([anim1, anim2]);
|
||
|
|
dojo.connect(this.anim, "onEnd", this, function(){
|
||
|
|
showStatus(this, "Burnt");
|
||
|
|
moveToPile(this, true);
|
||
|
|
});
|
||
|
|
this.anim.play();
|
||
|
|
}
|
||
|
|
|
||
|
|
function repeatBroil(){
|
||
|
|
this.status = "broiling";
|
||
|
|
this.setStroke({color: "black", width: 3});
|
||
|
|
var anim1 = g.fx.animateFill({
|
||
|
|
duration: broilTime,
|
||
|
|
shape: this,
|
||
|
|
color: {end: "red"}
|
||
|
|
});
|
||
|
|
var anim2 = new dojo._Animation({
|
||
|
|
duration: freezeTime,
|
||
|
|
curve: [0, freezeTime]
|
||
|
|
});
|
||
|
|
var matrix = this.getTransform(), c = getCenter(this);
|
||
|
|
dojo.connect(anim2, "onAnimate", this, function(val){
|
||
|
|
var scale = (val % pulseTime) / pulseTime / 4 + 1;
|
||
|
|
this.setTransform([m.scaleAt(scale, c), matrix]);
|
||
|
|
});
|
||
|
|
this.anim = dojo.fx.combine([anim1, anim2]);
|
||
|
|
dojo.connect(this.anim, "onEnd", this, repeatBurn);
|
||
|
|
this.anim.play();
|
||
|
|
}
|
||
|
|
|
||
|
|
function drag(mover){
|
||
|
|
var shape = mover.shape;
|
||
|
|
shape.anim.stop();
|
||
|
|
shape.anim = null;
|
||
|
|
}
|
||
|
|
|
||
|
|
function drop(mover){
|
||
|
|
var c = getCenter(mover.shape);
|
||
|
|
do{ // break block
|
||
|
|
if(inRect(vat.getShape(), c)){
|
||
|
|
if(mover.shape.status == "fresh"){
|
||
|
|
repeatMove.call(mover.shape);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
if(inRect(freezer.getShape(), c)){
|
||
|
|
if(mover.shape.status == "fresh"){
|
||
|
|
repeatFreeze.call(mover.shape);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
if(inRect(broiler.getShape(), c)){
|
||
|
|
if(mover.shape.status == "frozen"){
|
||
|
|
repeatBroil.call(mover.shape);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
if(mover.shape.status == "burnt"){
|
||
|
|
moveToPile(mover.shape, false); // good
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
}while(false);
|
||
|
|
moveToPile(mover.shape, true); // bad
|
||
|
|
}
|
||
|
|
|
||
|
|
function makePatties(n){
|
||
|
|
var rect = vat.getShape();
|
||
|
|
for(var i = 0; i < n; ++i){
|
||
|
|
var cx = getRand(rect.x + radius, rect.x + rect.width - radius),
|
||
|
|
cy = getRand(rect.y + radius, rect.y + rect.height - radius),
|
||
|
|
patty = surface.createCircle({
|
||
|
|
cx: cx, cy: cy, r: radius
|
||
|
|
}).setFill("green").setStroke({
|
||
|
|
color: "black",
|
||
|
|
width: 3
|
||
|
|
});
|
||
|
|
patty.status = "fresh";
|
||
|
|
patty.moveable = new g.Moveable(patty);
|
||
|
|
repeatMove.call(patty);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function initGfx(){
|
||
|
|
container = dojo.byId("gfx_holder");
|
||
|
|
surface = g.createSurface(container, 500, 500);
|
||
|
|
surface_size = {width: 500, height: 500};
|
||
|
|
|
||
|
|
vat = surface.createRect({x: 10, y: 210, width: 480, height: 180})
|
||
|
|
.setStroke({color: "black", width: 7, join: "round"});
|
||
|
|
surface.createText({x: 15, y: 230, text: "Ye Olde Vat v3.2"})
|
||
|
|
.setFill("black");
|
||
|
|
|
||
|
|
freezer = surface.createRect({x: 10, y: 10, width: 230, height: 180})
|
||
|
|
.setStroke({color: "blue", width: 7, join: "round"});
|
||
|
|
surface.createText({x: 15, y: 30, text: "Deep Freeze 7000"})
|
||
|
|
.setFill("blue");
|
||
|
|
|
||
|
|
broiler = surface.createRect({x: 260, y: 10, width: 230, height: 180})
|
||
|
|
.setStroke({color: "red", width: 7, join: "round"});
|
||
|
|
surface.createText({x: 265, y: 30, text: "Hellfire Broiler A4"})
|
||
|
|
.setFill("red");
|
||
|
|
|
||
|
|
surface.createText({x: 15, y: 420, text: "Good:"})
|
||
|
|
.setFont({weight: "bold"}).setFill("green");
|
||
|
|
surface.createText({x: 15, y: 450, text: "Bad:"})
|
||
|
|
.setFont({weight: "bold"}).setFill("red");
|
||
|
|
surface.createText({x: 15, y: 480, text: "Total:"})
|
||
|
|
.setFont({weight: "bold"}).setFill("black");
|
||
|
|
score = surface.createText({x: 80, y: 485, text: "0"})
|
||
|
|
.setFont({weight: "bold", size: "24pt"}).setFill("black");
|
||
|
|
surface.createText({x: 120, y: 460, text: "DROP HERE!"})
|
||
|
|
.setFont({size: "50px"})
|
||
|
|
.setFill(new dojo.Color([0, 0, 0, 0.1])).moveToBack();
|
||
|
|
|
||
|
|
dojo.subscribe("/gfx/move/start", drag);
|
||
|
|
dojo.subscribe("/gfx/move/stop", drop);
|
||
|
|
makePatties(totalItems);
|
||
|
|
|
||
|
|
startTime = (new Date()).getTime();
|
||
|
|
|
||
|
|
// cancel text selection and text dragging
|
||
|
|
dojo.connect(container, "ondragstart", dojo, "stopEvent");
|
||
|
|
dojo.connect(container, "onselectstart", dojo, "stopEvent");
|
||
|
|
}
|
||
|
|
|
||
|
|
//dojo.addOnLoad(initGfx);
|
||
|
|
|
||
|
|
function startTest(level){
|
||
|
|
radius = level;
|
||
|
|
var anim = dojo.fx.wipeOut({
|
||
|
|
node: "explanation",
|
||
|
|
duration: 500
|
||
|
|
});
|
||
|
|
dojo.connect(anim, "onEnd", function(){
|
||
|
|
dojo.byId("gfx_holder").style.display = "";
|
||
|
|
initGfx();
|
||
|
|
});
|
||
|
|
anim.play();
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style type="text/css">
|
||
|
|
.movable { cursor: pointer; }
|
||
|
|
</style>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>dojox.gfx: Career Aptitude Test</h1>
|
||
|
|
<p>Warning: Canvas renderer doesn't implement event handling.</p>
|
||
|
|
|
||
|
|
<div id="explanation">
|
||
|
|
<p>Thank you for your interest in <em>"I can't believe it's manure" Eateries™</em>
|
||
|
|
and for submitting your resume for our review. While this is an automated response,
|
||
|
|
please be assured that every resume is reviewed by us, and forwarded to the hiring
|
||
|
|
managers if the skills fit our needs.</p>
|
||
|
|
<p>In order order to evaluate your skills we ask you to take a career aptitude test.
|
||
|
|
You will have an exciting chance to operate one of our state-of-the-art workstations
|
||
|
|
remotely. Don't forget:
|
||
|
|
</p>
|
||
|
|
<ol>
|
||
|
|
<li>Fish out a live speciment of <em>dung-42</em> from the container.</li>
|
||
|
|
<li>Freeze it until you see an orange glow to kill the elements and make it less green.</li>
|
||
|
|
<li>Broil it until you see the orange glow again, and drop it on the table below.</li>
|
||
|
|
<li>You have to process all items without wasting resources and in minimal time.</li>
|
||
|
|
</ol>
|
||
|
|
<p>Warnings: don't overfreeze, don't overheat, don't drop the speciment, don't change the sequence,
|
||
|
|
don't touch the speciment in heating and freezing chambers until it is's ready.</p>
|
||
|
|
<p>Use your head and your mouse!</p>
|
||
|
|
<p>Please select the desired position:</p>
|
||
|
|
<table>
|
||
|
|
<tr>
|
||
|
|
<td>Workstation Supervisor </td>
|
||
|
|
<td><button onclick="startTest(30);">Apply</button></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Shift Director </td>
|
||
|
|
<td><button onclick="startTest(20);">Apply</button></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Vice President #49653 </td>
|
||
|
|
<td><button onclick="startTest(10);">Apply</button></td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="gfx_holder" style="width: 500px; height: 500px; display: none;"></div>
|
||
|
|
|
||
|
|
<div id="result" style="display: none;">
|
||
|
|
<p id="result_pass"><strong>Impressive! Please contact us immediately.</strong></p>
|
||
|
|
<p>You have made $<span id="result_dollar"></span> per minute for us.
|
||
|
|
<span id="result_but">But you wasted $<span id="result_waste"></span> in materials.</span>
|
||
|
|
<span id="result_and">It qualifies you to be a <em id="result_pos"></em>.</span>
|
||
|
|
</p>
|
||
|
|
<p id="result_fail">Should our hiring managers have an interest in your skills and
|
||
|
|
capabilities, they will contact you directly. In addition, we will keep
|
||
|
|
your resume on file for one year.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|