diff options
author | 2008-11-13 09:49:11 +0000 | |
---|---|---|
committer | 2008-11-13 09:49:11 +0000 | |
commit | e44a7e37b6c7b5961adaffc62b9042b8d442938e (patch) | |
tree | 95b67c356e93163467db2451f2b8cce84ed5d582 /includes/js/dojox/gfx/demos/career_test.html | |
parent | a62b9742ee5e28bcec6872d88f50f25b820914f6 (diff) | |
download | scuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz scuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.zip |
New feature: basic Ajax suggestion for tags and implementation of Dojo toolkit
git-svn-id: https://semanticscuttle.svn.sourceforge.net/svnroot/semanticscuttle/trunk@151 b3834d28-1941-0410-a4f8-b48e95affb8f
Diffstat (limited to 'includes/js/dojox/gfx/demos/career_test.html')
-rw-r--r-- | includes/js/dojox/gfx/demos/career_test.html | 467 |
1 files changed, 467 insertions, 0 deletions
diff --git a/includes/js/dojox/gfx/demos/career_test.html b/includes/js/dojox/gfx/demos/career_test.html new file mode 100644 index 0000000..3958395 --- /dev/null +++ b/includes/js/dojox/gfx/demos/career_test.html @@ -0,0 +1,467 @@ +<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> |