\").append(n.parseHTML(a)).find(d):a)}).complete(c&&function(a,b){g.each(c,e||[a.responseText,b,a])}),this},n.expr.filters.animated=function(a){return n.grep(n.timers,function(b){return a===b.elem}).length};var dd=a.document.documentElement;function ed(a){return n.isWindow(a)?a:9===a.nodeType?a.defaultView||a.parentWindow:!1}n.offset={setOffset:function(a,b,c){var d,e,f,g,h,i,j,k=n.css(a,\"position\"),l=n(a),m={};\"static\"===k&&(a.style.position=\"relative\"),h=l.offset(),f=n.css(a,\"top\"),i=n.css(a,\"left\"),j=(\"absolute\"===k||\"fixed\"===k)&&n.inArray(\"auto\",[f,i])>-1,j?(d=l.position(),g=d.top,e=d.left):(g=parseFloat(f)||0,e=parseFloat(i)||0),n.isFunction(b)&&(b=b.call(a,c,h)),null!=b.top&&(m.top=b.top-h.top+g),null!=b.left&&(m.left=b.left-h.left+e),\"using\"in b?b.using.call(a,m):l.css(m)}},n.fn.extend({offset:function(a){if(arguments.length)return void 0===a?this:this.each(function(b){n.offset.setOffset(this,a,b)});var b,c,d={top:0,left:0},e=this[0],f=e&&e.ownerDocument;if(f)return b=f.documentElement,n.contains(b,e)?(typeof e.getBoundingClientRect!==L&&(d=e.getBoundingClientRect()),c=ed(f),{top:d.top+(c.pageYOffset||b.scrollTop)-(b.clientTop||0),left:d.left+(c.pageXOffset||b.scrollLeft)-(b.clientLeft||0)}):d},position:function(){if(this[0]){var a,b,c={top:0,left:0},d=this[0];return\"fixed\"===n.css(d,\"position\")?b=d.getBoundingClientRect():(a=this.offsetParent(),b=this.offset(),n.nodeName(a[0],\"html\")||(c=a.offset()),c.top+=n.css(a[0],\"borderTopWidth\",!0),c.left+=n.css(a[0],\"borderLeftWidth\",!0)),{top:b.top-c.top-n.css(d,\"marginTop\",!0),left:b.left-c.left-n.css(d,\"marginLeft\",!0)}}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||dd;while(a&&!n.nodeName(a,\"html\")&&\"static\"===n.css(a,\"position\"))a=a.offsetParent;return a||dd})}}),n.each({scrollLeft:\"pageXOffset\",scrollTop:\"pageYOffset\"},function(a,b){var c=/Y/.test(b);n.fn[a]=function(d){return W(this,function(a,d,e){var f=ed(a);return void 0===e?f?b in f?f[b]:f.document.documentElement[d]:a[d]:void(f?f.scrollTo(c?n(f).scrollLeft():e,c?e:n(f).scrollTop()):a[d]=e)},a,d,arguments.length,null)}}),n.each([\"top\",\"left\"],function(a,b){n.cssHooks[b]=Mb(l.pixelPosition,function(a,c){return c?(c=Kb(a,b),Ib.test(c)?n(a).position()[b]+\"px\":c):void 0})}),n.each({Height:\"height\",Width:\"width\"},function(a,b){n.each({padding:\"inner\"+a,content:b,\"\":\"outer\"+a},function(c,d){n.fn[d]=function(d,e){var f=arguments.length&&(c||\"boolean\"!=typeof d),g=c||(d===!0||e===!0?\"margin\":\"border\");return W(this,function(b,c,d){var e;return n.isWindow(b)?b.document.documentElement[\"client\"+a]:9===b.nodeType?(e=b.documentElement,Math.max(b.body[\"scroll\"+a],e[\"scroll\"+a],b.body[\"offset\"+a],e[\"offset\"+a],e[\"client\"+a])):void 0===d?n.css(b,c,g):n.style(b,c,d,g)},b,f?d:void 0,f,null)}})}),n.fn.size=function(){return this.length},n.fn.andSelf=n.fn.addBack,\"function\"==typeof define&&define.amd&&define(\"jquery\",[],function(){return n});var fd=a.jQuery,gd=a.$;return n.noConflict=function(b){return a.$===n&&(a.$=gd),b&&a.jQuery===n&&(a.jQuery=fd),n},typeof b===L&&(a.jQuery=a.$=n),n});"
},
{
"path": "js/levels.js",
"content": "var levels = [\n {\n helpTitle : \"Select elements by their type\",\n selectorName : \"Type Selector\",\n doThis : \"Select the plates\",\n selector : \"plate\",\n syntax : \"A\",\n help : \"Selects all elements of type
A. Type refers to the type of tag, so
div,
p and
ul are all different element types.\",\n examples : [\n '
div selects all
div elements.',\n '
p selects all
p elements.',\n ],\n boardMarkup: `\n
\n
\n `\n },\n {\n doThis : \"Select the bento boxes\",\n selector : \"bento\",\n syntax : \"A\",\n helpTitle : \"Select elements by their type\",\n selectorName : \"Type Selector\",\n help : \"Selects all elements of type
A. Type refers to the type of tag, so
div,
p and
ul are all different element types.\",\n examples : [\n '
div selects all
div elements.',\n '
p selects all
p elements.',\n ],\n boardMarkup: `\n
\n
\n
\n `\n },\n {\n doThis : \"Select the fancy plate\",\n selector : \"#fancy\",\n selectorName: \"ID Selector\",\n helpTitle: \"Select elements with an ID\",\n syntax: \"#id\",\n help : 'Selects the element with a specific
id. You can also combine the ID selector with the type selector.',\n examples : [\n '
#cool selects any element with
id=\"cool\"',\n '
ul#long selects
ul id=\"long\"'\n ],\n boardMarkup : `\n
\n \n \n `\n },\n {\n helpTitle: \"Select an element inside another element\",\n selectorName : \"Descendant Selector\",\n doThis : \"Select the apple on the plate\",\n selector : \"plate apple\",\n syntax: \"A B\",\n help : \"Selects all B inside of A. B is called a descendant because it is inside of another element.\",\n examples : [\n 'p strong selects all strong elements that are inside of any p',\n '#fancy span selects any span elements that are inside of the element with id=\"fancy\"',\n ],\n boardMarkup : `\n \n \n \n \n \n `\n },\n {\n doThis : \"Select the pickle on the fancy plate\",\n selector : \"#fancy pickle\",\n helpTitle: \"Combine the Descendant & ID Selectors\",\n syntax: \"#id A\",\n help : 'You can combine any selector with the descendent selector.',\n examples : [\n '#cool span selects all span elements that are inside of elements with id=\"cool\"'\n ],\n boardMarkup : `\n \n \n \n \n \n \n \n \n \n `\n },\n {\n doThis : \"Select the small apples\",\n selector : \".small\",\n selectorName: \"Class Selector\",\n helpTitle: \"Select elements by their class\",\n syntax: \".classname\",\n help : 'The class selector selects all elements with that class attribute. Elements can only have one ID, but many classes.',\n examples : [\n '.neato selects all elements with class=\"neato\"'\n ],\n boardMarkup : `\n \n \n \n \n \n \n `\n },\n {\n doThis : \"Select the small oranges\",\n selector : \"orange.small\",\n helpTitle: \"Combine the Class Selector\",\n syntax: \"A.className\",\n help : 'You can combine the class selector with other selectors, like the type selector.',\n examples : [\n 'ul.important selects all ul elements that have class=\"important\"',\n '#big.wide selects all elements with id=\"big\" that also have class=\"wide\"'\n ],\n boardMarkup :`\n \n \n \n \n \n \n \n \n \n \n `\n },\n {\n doThis : \"Select the small oranges in the bentos\",\n selector : \"bento orange.small\",\n syntax: \"Put your back into it!\",\n helpTitle: \"You can do it...\",\n help : 'Combine what you learned in the last few levels to solve this one!',\n boardMarkup : `\n \n \n \n \n \n \n \n \n \n \n \n \n \n `\n },\n {\n doThis : \"Select all the plates and bentos\",\n selector : \"plate,bento\",\n selectorName : \"Comma Combinator\",\n helpTitle: \"Combine, selectors, with... commas!\",\n syntax : \"A, B\",\n help : 'Thanks to Shatner technology, this selects all A and B elements. You can combine any selectors this way, and you can specify more than two.',\n examples: [\n 'p, .fun selects all p elements as well as all elements with class=\"fun\"',\n 'a, p, div selects all a, p and div elements'\n ],\n boardMarkup : `\n \n \n \n \n \n \n \n \n \n \n \n \n \n `\n },\n {\n doThis : \"Select all the things!\",\n selector : \"*\",\n selectorName: \"The Universal Selector\",\n helpTitle: \"You can select everything!\",\n syntax : \"*\",\n help : 'You can select all elements with the universal selector! ',\n examples : [\n 'p * selects any element inside all p elements.',\n ],\n boardMarkup : `\n \n \n \n \n \n \n \n \n \n `\n },\n {\n doThis : \"Select everything on a plate\",\n selector : \"plate *\",\n syntax : \"A *\",\n helpTitle: \"Combine the Universal Selector\",\n help : 'This selects all elements inside of A.',\n examples : [\n 'p * selects every element inside all p elements.',\n 'ul.fancy * selects every element inside all ul class=\"fancy\" elements.'\n ],\n boardMarkup: `\n \n \n \n \n \n \n \n \n \n `\n },\n {\n doThis : \"Select every apple that's next to a plate\",\n selector : \"plate + apple\",\n helpTitle: \"Select an element that directly follows another element\",\n selectorName: \"Adjacent Sibling Selector\",\n syntax : \"A + B\",\n help : \"This selects all B elements that directly follow A. Elements that follow one another are called siblings. They're on the same level, or depth.
In the HTML markup for this level, elements that have the same indentation are siblings.\",\n examples : [\n 'p + .intro selects every element with class=\"intro\" that directly follows a p',\n 'div + a selects every a element that directly follows a div'\n ],\n boardMarkup : `\n \n \n \n \n \n \n \n \n \n `\n },\n {\n selectorName: \"General Sibling Selector\",\n helpTitle: \"Select elements that follows another element\",\n syntax: \"A ~ B\",\n doThis : \"Select the pickles beside the bento\",\n selector : \"bento ~ pickle\",\n help : \"You can select all siblings of an element that follow it. This is like the Adjacent Selector (A + B) except it gets all of the following elements instead of one.\",\n examples : [\n 'A ~ B selects all B that follow a A'\n ],\n boardMarkup : `\n \n \n \n \n \n \n \n \n \n \n \n \n `\n },\n {\n selectorName: \"Child Selector\",\n syntax: \"A > B \",\n doThis : \"Select the apple directly on a plate\",\n selector : \"plate > apple\",\n helpTitle: \"Select direct children of an element\",\n help : \"You can select elements that are direct children of other elements. A child element is any element that is nested directly in another element.
Elements that are nested deeper than that are called descendant elements.\",\n examples : [\n 'A > B selects all B that are a direct children A'\n ],\n boardMarkup: `\n \n \n \n \n \n \n \n \n \n \n \n `\n },\n {\n selectorName: \"First Child Pseudo-selector\",\n helpTitle: \"Select a first child element inside of another element\",\n doThis : \"Select the top orange\",\n selector : \"plate :first-child\",\n syntax: \":first-child\",\n\n help : \"You can select the first child element. A child element is any element that is directly nested in another element. You can combine this pseudo-selector with other selectors.\",\n examples : [\n ':first-child selects all first child elements.',\n 'p:first-child selects all first child p elements.',\n 'div p:first-child selects all first child p elements that are in a div.'\n ],\n boardMarkup :`\n \n \n \n \n \n \n \n \n `\n },\n {\n selectorName: \"Only Child Pseudo-selector\",\n helpTitle: \"Select an element that are the only element inside of another one.\",\n doThis : \"Select the apple and the pickle on the plates\",\n selector : \"plate :only-child\",\n syntax: \":only-child\",\n help : \"You can select any element that is the only element inside of another one.\",\n examples : [\n 'span:only-child selects the span elements that are the only child of some other element.',\n 'ul li:only-child selects the only li element that are in a ul.'\n ],\n boardMarkup : `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n `\n },\n {\n selectorName: \"Last Child Pseudo-selector\",\n helpTitle: \"Select the last element inside of another element\",\n doThis : \"Select the small apple and the pickle\",\n selector : \".small:last-child\",\n syntax: \":last-child\",\n help : \"You can use this selector to select an element that is the last child element inside of another element.
Pro Tip → In cases where there is only one element, that element counts as the first-child, only-child and last-child!\",\n examples : [\n ':last-child selects all last-child elements.',\n 'span:last-child selects all last-child span elements.',\n 'ul li:last-child selects the last li elements inside of any ul.'\n ],\n boardMarkup : `\n \n \n \n \n \n \n \n \n `\n },\n {\n selectorName: \"Nth Child Pseudo-selector\",\n helpTitle: \"Select an element by its order in another element\",\n doThis : \"Select the 3rd plate\",\n selector : \":nth-child(3)\",\n syntax: \":nth-child(A)\",\n help : \"Selects the nth (Ex: 1st, 3rd, 12th etc.) child element in another element.\",\n examples : [\n ':nth-child(8) selects every element that is the 8th child of another element.',\n 'div p:nth-child(2) selects the second p in every div',\n ],\n boardMarkup : `\n \n \n \n \n `\n },\n {\n selectorName: \"Nth Last Child Selector\",\n helpTitle: \"Select an element by its order in another element, counting from the back\",\n doThis : \"Select the 1st bento\",\n selector : \"bento:nth-last-child(3)\",\n syntax: \":nth-last-child(A)\",\n help : \"Selects the children from the bottom of the parent. This is like nth-child, but counting from the back!\",\n examples : [\n ':nth-last-child(2) selects all second-to-last child elements.'\n ],\n boardMarkup: `\n \n \n \n \n \n \n \n \n `\n },\n {\n selectorName: \"First of Type Selector\",\n helpTitle: \"Select the first element of a specific type\",\n doThis : \"Select first apple\",\n selector : \"apple:first-of-type\",\n syntax: \":first-of-type\",\n help : \"Selects the first element of that type within another element.\",\n examples : [\n 'span:first-of-type selects the first span in any element.'\n ],\n boardMarkup: `\n \n \n \n \n \n \n \n \n \n `\n },\n {\n selectorName: \"Nth of Type Selector\",\n doThis: \"Select all even plates\",\n selector: \"plate:nth-of-type(even)\",\n syntax: \":nth-of-type(A)\",\n help: \"Selects a specific element based on its type and order in another element - or even or odd instances of that element.\",\n examples: [\n 'div:nth-of-type(2) selects the second instance of a div.',\n '.example:nth-of-type(odd) selects all odd instances of a the example class.'\n ],\n boardMarkup : `\n \n \n \n \n \n \n `\n },\n {\n selectorName: \"Nth-of-type Selector with Formula\",\n doThis: \"Select every 2nd plate, starting from the 3rd\",\n selector: \"plate:nth-of-type(2n+3)\",\n syntax: \":nth-of-type(An+B)\",\n help: \"The nth-of-type formula selects every nth element, starting the count at a specific instance of that element.\",\n examples: [\n 'span:nth-of-type(6n+2) selects every 6th instance of a span, starting from (and including) the second instance.'\n ],\n boardMarkup : `\n \n \n \n \n \n \n \n \n \n \n \n \n `\n },\n {\n selectorName: \"Only of Type Selector\",\n helpTitle: \"Select elements that are the only ones of their type within their parent element\",\n selector : \"apple:only-of-type\",\n syntax: \":only-of-type\",\n doThis : \"Select the apple on the middle plate\",\n help : \"Selects the only element of its type within another element.\",\n examples : [\n 'p span:only-of-type selects a span within any p if it is the only span in there.'\n ],\n boardMarkup: `\n \n \n \n \n \n \n \n \n \n \n `\n },\n {\n selectorName: \"Last of Type Selector\",\n helpTitle: \"Select the last element of a specific type\",\n doThis : \"Select the last apple and orange\",\n selector : \".small:last-of-type\",\n syntax: \":last-of-type\",\n help : \"Selects each last element of that type within another element. Remember type refers the kind of tag, so p and span are different types.
I wonder if this is how the last dinosaur was selected before it went extinct.\",\n examples : [\n 'div:last-of-type selects the last div in every element.',\n 'p span:last-of-type selects the last span in every p.'\n ],\n boardMarkup : `\n \n \n \n \n \n \n `\n },\n {\n selectorName: \"Empty Selector\",\n helpTitle: \"Select elements that don't have children\",\n doThis : \"Select the empty bentos\",\n selector : \"bento:empty\",\n syntax: \":empty\",\n help : \"Selects elements that don't have any other elements inside of them.\",\n examples : [\n 'div:empty selects all empty div elements.'\n ],\n boardMarkup:`\n \n \n \n \n \n `\n },\n {\n selectorName: \"Negation Pseudo-class\",\n helpTitle: \"Select all elements that don't match the negation selector\",\n doThis : \"Select the big apples\",\n selector : \"apple:not(.small)\",\n syntax: \":not(X)\",\n help : 'You can use this to select all elements that do not match selector \"X\".',\n examples : [\n ':not(#fancy) selects all elements that do not have id=\"fancy\".',\n 'div:not(:first-child) selects every div that is not a first child.',\n ':not(.big, .medium) selects all elements that do not have class=\"big\" or class=\"medium\".'\n ],\n boardMarkup: `\n \n \n \n \n \n \n \n \n \n \n \n `\n },\n {\n selectorName: \"Attribute Selector\",\n helpTitle: \"Select all elements that have a specific attribute\",\n doThis : \"Select the items for someone\",\n selector : \"[for]\",\n syntax: \"[attribute]\",\n help : 'Attributes appear inside the opening tag of an element, like this: span attribute=\"value\". An attribute does not always have a value, it can be blank!',\n examples : [\n 'a[href] selects all a elements that have a href=\"anything\" attribute.',\n '[type] selects all elements that have a type=\"anything\". attribute'\n ],\n boardMarkup:`\n \n \n \n \n `\n },\n {\n selectorName: \"Attribute Selector\",\n helpTitle: \"Select all elements that have a specific attribute\",\n doThis : \"Select the plates for someone\",\n selector : \"plate[for]\",\n syntax: \"A[attribute]\",\n help : \"Combine the attribute selector with another selector (like the tag name selector) by adding it to the end.\",\n examples : [\n '[value] selects all elements that have a value=\"anything\" attribute.',\n 'a[href] selects all a elements that have a href=\"anything\" attribute.',\n 'input[disabled] selects all input elements with the disabled attribute'\n ],\n boardMarkup:`\n \n \n \n \n `\n },\n {\n selectorName: \"Attribute Value Selector\",\n helpTitle: \"Select all elements that have a specific attribute value\",\n doThis : \"Select Vitaly's meal\",\n selector : \"[for=Vitaly]\",\n syntax: '[attribute=\"value\"]',\n help : \"Attribute selectors are case sensitive, each character must match exactly.\",\n examples : [\n 'input[type=\"checkbox\"] selects all checkbox input elements.'\n ],\n boardMarkup:`\n \n \n \n \n `\n },\n {\n selectorName: \"Attribute Starts With Selector\",\n helpTitle: \"Select all elements with an attribute value that starts with specific characters\",\n doThis : \"Select the items for names that start with 'Sa'\",\n selector : '[for^=\"Sa\"]',\n syntax: '[attribute^=\"value\"]',\n // help : \"You can use quotes around the value in the selector, or not—it's optional!\",\n examples : [\n '.toy[category^=\"Swim\"] selects elements with class toy and either category=\"Swimwear\" or category=\"Swimming\".'\n ],\n boardMarkup: `\n \n \n \n `\n },\n {\n selectorName: \"Attribute Ends With Selector\",\n helpTitle: \"Select all elements with an attribute value that ends with specific characters\",\n doThis : \"Select the items for names that end with 'ato'\",\n selector : '[for$=\"ato\"]',\n syntax: '[attribute$=\"value\"]',\n help : '',\n examples : [\n 'img[src$=\".jpg\"] selects all images display a .jpg image.',\n ],\n boardMarkup:`\n \n \n \n \n \n `\n },\n {\n selectorName: \"Attribute Wildcard Selector\",\n helpTitle: \"Select all elements with an attribute value that contains specific characters anywhere\",\n syntax: '[attribute*=\"value\"]',\n doThis : \"Select the meals for names that contain 'obb'\",\n selector : '[for*=\"obb\"]',\n help : 'A useful selector if you can identify a common pattern in things like class, href or src attributes.',\n examples : [\n 'img[src*=\"/thumbnails/\"] selects all image elements that show images from the \"thumbnails\" folder.',\n '[class*=\"heading\"] selects all elements with \"heading\" in their class, like class=\"main-heading\" and class=\"sub-heading\"'\n ],\n boardMarkup:`\n \n \n \n `\n }\n];\n"
},
{
"path": "js/restaurant.js",
"content": "/*\n Function Reference\n ==================\n\n loadLevel() - loads up the level\n fireRule() - fires the css rule\n updateProgressUI() - adds a checkmark to the level menu and header when a correct guess is made, removes it if incorrect\n hideTooltip() - hides markup tooltip that hovers over the elements\n showHelp() - Loads help text & examples for each level\n\n ..to be continued!\n*/\n\nvar level; // Holds current level info\nvar currentLevel = parseInt(localStorage.currentLevel,10) || 0; // Keeps track of the current level Number (0 is level 1)\nvar levelTimeout = 1000; // Delay between levels after completing\nvar finished = false; // Keeps track if the game is showing the Your Rock! screen (so that tooltips can be disabled)\n\nvar blankProgress = {\n totalCorrect : 0,\n percentComplete : 0,\n lastPercentEvent : 0,\n guessHistory : {}\n}\n\n// Get progress from localStorage, or start from scratch if we don't have any\nvar progress = JSON.parse(localStorage.getItem(\"progress\")) || blankProgress;\n\n\n$(document).ready(function(){\n\n $(\".share-menu\").on(\"click\",\"a\",function(){\n\n var type = $(this).attr(\"type\");\n\n if(type == \"twitter\"){\n var url = \"https://twitter.com/intent/tweet?text=Learning%20CSS?%20Try%20CSS%20Diner,%20the%20fun%20way%20to%20practice%20selectors%20%E2%86%92&hashtags=css,cssdiner,webdev&url=http%3A%2F%2Fcssdiner.com%2F&via=flukeout\";\n } else if (type == \"facebook\") {\n var url = \"https://www.facebook.com/sharer.php?src=sp&u=http%3A%2F%2Fcssdiner.com\";\n } else if (type == \"email\") {\n var url = \"mailto:?subject=Check+out+CSS+Diner&body=It's+a+fun+game+to+learn+%26+practice+CSS+selectors.%0D%0A%0D%0AYou+can+try+it+at+http://cssdiner.com\";\n }\n\n PopupCenter(url, \"title\", 600, 450);\n sendEvent(\"share\", type, \"\");\n return false;\n });\n\n $(window).on(\"keydown\",function(e){\n if(e.keyCode == 27) {\n closeMenu();\n }\n });\n\n // Custom scrollbar plugin\n $(\".left-col, .level-menu\").mCustomScrollbar({\n scrollInertia: 0,\n autoHideScrollbar: true\n });\n\n $(\".note-toggle\").on(\"click\", function(){\n $(this).hide();\n $(\".note\").slideToggle();\n });\n\n $(\".level-menu-toggle-wrapper\").on(\"click\",function(){\n if($(\".menu-open\").length == 0) {\n openMenu();\n } else {\n closeMenu();\n }\n });\n\n $(\".level-nav\").on(\"click\",\"a\",function(){\n\n var direction;\n if($(this).hasClass(\"next\")) {\n direction = \"next\";\n }\n\n addAnimation($(this),\"link-jiggle\");\n\n if(direction == \"next\") {\n currentLevel++;\n if(currentLevel >= levels.length) {\n currentLevel = levels.length - 1;\n }\n } else {\n currentLevel--;\n if(currentLevel < 0) {\n currentLevel = 0;\n }\n }\n\n loadLevel();\n return false;\n });\n\n // Resets progress and progress indicators\n $(\".reset-progress\").on(\"click\",function(){\n resetProgress();\n return false;\n })\n\n //Handle inputs from the input box on enter\n $(\"input\").on(\"keypress\",function(e){\n e.stopPropagation();\n if(e.keyCode == 13){\n enterHit();\n return false;\n }\n });\n\n $(\"input\").on(\"keyup\",function(e){\n e.stopPropagation();\n var length = $(this).val().length;\n if(length > 0) {\n $(\"input\").removeClass(\"input-strobe\");\n } else {\n $(\"input\").addClass(\"input-strobe\");\n }\n });\n\n $(\".editor\").on(\"click\",function(){\n $(\"input\").focus();\n });\n\n //Add tooltips\n $(\".table\").on(\"mouseover\",\"*\",function(e){\n e.stopPropagation();\n showTooltip($(this));\n });\n\n //Shows the tooltip on the table\n $(\".markup\").on(\"mouseover\",\"div *\",function(e){\n el = $(this);\n var markupElements = $(\".markup *\");\n var index = markupElements.index(el) -1;\n showTooltip($(\".table *\").eq(index));\n e.stopPropagation();\n });\n\n // Shows the tooltip on the table\n $(\".markup\").on(\"mouseout\",\"*\",function(e){\n e.stopPropagation();\n hideTooltip();\n });\n\n $(\".table\").on(\"mouseout\",\"*\", function(e){\n hideTooltip();\n e.stopPropagation();\n });\n\n $(\".enter-button\").on(\"click\",function(){\n enterHit();\n })\n\n $(\".table-wrapper,.table-edge\").css(\"opacity\",0);\n\n buildLevelmenu();\n\n setTimeout(function(){\n loadLevel();\n $(\".table-wrapper,.table-edge\").css(\"opacity\",1);\n },50);\n});\n\nfunction addAnimation(el, className){\n el.addClass(\"link-jiggle\");\n el.one(\"animationend\",function(e){\n $(e.target).removeClass(\"link-jiggle\");\n })\n}\n\n// Reset all progress\n// * Removes checkmarks from level header and list\n// * Scrolls level menu to top\n// * Resets the progress object\n\nfunction resetProgress(){\n currentLevel = 0;\n progress = blankProgress;\n localStorage.setItem(\"progress\",JSON.stringify(progress));\n finished = false;\n\n $(\".completed\").removeClass(\"completed\");\n loadLevel();\n closeMenu();\n $(\"#mCSB_2_container\").css(\"top\",0); // Strange element to reset scroll due to scroll plugin\n}\n\n\n//Checks if the level is completed\n\nfunction checkCompleted(levelNumber){\n if(progress.guessHistory[levelNumber]){\n if(progress.guessHistory[levelNumber].correct){\n return true;\n } else {\n return false;\n }\n } else {\n return false;\n }\n}\n\n\n// Builds the slide-out level menu\n\nfunction buildLevelmenu(){\n for(var i = 0; i < levels.length; i++){\n var level = levels[i];\n var item = document.createElement(\"a\");\n $(item).html(\"\" + (i+1) + \"\" + level.syntax);\n $(\".level-menu .levels\").append(item);\n\n if(checkCompleted(i)){\n $(item).addClass(\"completed\");\n }\n\n $(item).on(\"click\",function(){\n finished = false;\n currentLevel = $(this).index();\n loadLevel();\n closeMenu();\n });\n }\n}\n\nfunction closeMenu(){\n $(\".right-col\").removeClass(\"menu-open\");\n}\n\nfunction openMenu(){\n $(\".right-col\").addClass(\"menu-open\");\n}\n\n\n// Hides & shows the tooltip that appears when an eleemnt\n// on the table or the editor is hovered over.\n\nfunction hideTooltip(){\n $(\".enhance\").removeClass(\"enhance\");\n $(\"[data-hovered]\").removeAttr(\"data-hovered\");\n $(\".helper\").hide();\n}\n\nfunction showTooltip(el){\n if(finished){\n return; // Only show tooltip if the game isn't finished yet\n }\n\n el.attr(\"data-hovered\",true);\n var tableElements = $(\".table *\");\n var index = tableElements.index(el);\n var that = el;\n $(\".markup > div *\").eq(index).addClass(\"enhance\").find(\"*\").addClass(\"enhance\");\n\n var helper = $(\".helper\");\n\n var pos = el.offset();\n helper.css(\"top\",pos.top - 65);\n helper.css(\"left\",pos.left + (el.width()/2));\n\n var helpertext;\n\n var elType = el.get(0).tagName;\n elType = elType.toLowerCase();\n helpertext = '<' + elType;\n\n var elClass = el.attr(\"class\");\n\n if(elClass) {\n if(elClass.indexOf(\"strobe\") > -1){\n elClass = elClass.replace(\"strobe\",\"\");\n }\n }\n\n if(elClass) {\n helpertext = helpertext + ' class=\"' + elClass + '\"';\n }\n\n var elFor = el.attr(\"for\");\n\n if(elFor) {\n helpertext = helpertext + ' for=\"' + elFor + '\"';\n }\n\n var id = el.attr(\"id\");\n if(id) {\n helpertext = helpertext + ' id=\"' + id + '\"';\n }\n\n helpertext = helpertext + '>';\n helper.show();\n helper.text(helpertext);\n}\n\n\n//Animate the enter button\nfunction enterHit(){\n $(\".enter-button\").removeClass(\"enterhit\");\n $(\".enter-button\").width($(\".enter-button\").width());\n $(\".enter-button\").addClass(\"enterhit\");\n var value = $(\"input\").val();\n handleInput(value);\n}\n\n\n//Parses text from the input field\nfunction handleInput(text){\n if(parseInt(text,10) > 0 && parseInt(text,10) < levels.length+1) {\n currentLevel = parseInt(text,10) - 1;\n loadLevel();\n return;\n }\n fireRule(text);\n}\n\n// Loads up the help text & examples for each level\nfunction showHelp() {\n\n var helpTitle = level.helpTitle || \"\";\n var help = level.help || \"\";\n var examples = level.examples ||[];\n var selector = level.selector || \"\";\n var syntax = level.syntax || \"\";\n var syntaxExample = level.syntaxExample || \"\";\n var selectorName = level.selectorName || \"\";\n\n $(\".display-help .syntax\").html(syntax);\n $(\".display-help .syntax-example\").html(syntaxExample);\n $(\".display-help .selector-name\").html(selectorName);\n $(\".display-help .title\").html(helpTitle);\n $(\".display-help .examples\").html(\"\");\n $(\".display-help .examples-title\").hide(); // Hide the \"Examples\" heading\n\n for(var i = 0; i < examples.length; i++){\n var example = $(\"\" + examples[i] + \"
\");\n $(\".display-help .examples\").append(example);\n $(\".display-help .examples-title\").show(); // Show it if there are examples\n }\n\n $(\".display-help .hint\").html(help);\n $(\".display-help .selector\").text(selector);\n}\n\nfunction resetTable(){\n $(\".display-help\").removeClass(\"open-help\");\n $(\".clean,.strobe\").removeClass(\"clean,strobe\");\n $(\".clean,.strobe\").removeClass(\"clean,strobe\");\n $(\"input\").addClass(\"input-strobe\");\n $(\".table *\").each(function(){\n $(this).width($(this).width());\n // $(this).removeAttr(\"style\");\n // TODO - needed?? Probably not, everything gets removed anyway\n });\n\n var tableWidth = $(\".table\").outerWidth();\n $(\".table-wrapper, .table-edge\").width(tableWidth);\n}\n\nfunction fireRule(rule) {\n\n // prevent cheating\n if(rule === \".strobe\") {\n rule = null;\n }\n\n $(\".shake\").removeClass(\"shake\");\n\n $(\".strobe,.clean,.shake\").each(function(){\n $(this).width($(this).width());\n $(this).removeAttr(\"style\");\n });\n\n /*\n * Sean Nessworthy \n * On 03/17/14\n *\n * Allow [div][.table] to preceed the answer.\n * Makes sense if div.table is going to be included in the HTML viewer\n * and users want to try and use it in their selectors.\n *\n * However, if it is included as a specific match, filter it out.\n * This resolves the \"Match all the things!\" level from beheading the table too.\n * Relatedly, watching that happen made me nearly spill my drink.\n */\n\n // var baseTable = $('.table-wrapper > .table, .table-wrapper > .nametags, .table-wrapper > .table-surface');\n var baseTable = $('.table');\n\n // Check if jQuery will throw an error trying the mystery rule\n // If it errors out, change the rule to null so the wrong-guess animation will work\n try {\n $(\".table\").find(rule).not(baseTable);\n }\n catch(err) {\n rule = null;\n }\n\n var ruleSelected = $(\".table\").find(rule).not(baseTable); // What the correct rule finds\n var levelSelected = $(\".table\").find(level.selector).not(baseTable); // What the person finds\n\n var win = false;\n\n // If nothing is selected\n if(ruleSelected.length == 0) {\n $(\".editor\").addClass(\"shake\");\n }\n\n if(ruleSelected.length == levelSelected.length && ruleSelected.length > 0){\n win = checkResults(ruleSelected,levelSelected,rule);\n }\n\n if(win){\n ruleSelected.removeClass(\"strobe\");\n ruleSelected.addClass(\"clean\");\n $(\"input\").val(\"\");\n $(\".input-wrapper\").css(\"opacity\",.2);\n updateProgressUI(currentLevel, true);\n currentLevel++;\n\n if(currentLevel >= levels.length) {\n winGame();\n } else {\n setTimeout(function(){\n loadLevel();\n },levelTimeout);\n }\n } else {\n ruleSelected.removeClass(\"strobe\");\n ruleSelected.addClass(\"shake\");\n\n setTimeout(function(){\n $(\".shake\").removeClass(\"shake\");\n $(\".strobe\").removeClass(\"strobe\");\n levelSelected.addClass(\"strobe\");\n },500);\n\n $(\".result\").fadeOut();\n }\n\n // If answer is correct, let's track progress\n\n if(win){\n trackProgress(currentLevel-1, \"correct\");\n } else {\n trackProgress(currentLevel, \"incorrect\");\n }\n}\n\n// Marks an individual number as completed or incompleted\n// Just in the level heading though, not the level list\nfunction updateProgressUI(levelNumber, completed){\n if(completed) {\n $(\".levels a:nth-child(\"+ (levelNumber+1) + \")\").addClass(\"completed\");\n $(\".level-header\").addClass(\"completed\");\n } else {\n $(\".level-header\").removeClass(\"completed\");\n }\n}\n\nfunction trackProgress(levelNumber, type){\n if(!progress.guessHistory[levelNumber]) {\n progress.guessHistory[levelNumber] = {\n correct : false,\n incorrectCount : 0,\n gaSent : false\n };\n }\n\n var levelStats = progress.guessHistory[levelNumber];\n\n if(type == \"incorrect\"){\n if(levelStats.correct == false) {\n levelStats.incorrectCount++; // Only update the incorrect count until it is guessed correctly\n }\n } else {\n if(levelStats.correct == false) {\n levelStats.correct = true;\n progress.totalCorrect++;\n progress.percentComplete = progress.totalCorrect / levels.length;\n levelStats.gaSent = true;\n sendEvent(\"guess\", \"correct\", levelNumber + 1); // Send event\n }\n }\n\n // Increments the completion percentage by 10%, and sends an event every time\n var increment = .1;\n if(progress.percentComplete >= progress.lastPercentEvent + increment) {\n progress.lastPercentEvent = progress.lastPercentEvent + increment;\n sendEvent(\"progress\",\"percent\", Math.round(progress.lastPercentEvent * 100));\n }\n\n localStorage.setItem(\"progress\",JSON.stringify(progress));\n}\n\n\n// Sends event to Google Analytics\n// Doesn't send events if we're on localhost, as the ga variable is set to false\nfunction sendEvent(category, action, label){\n if(!ga){\n return;\n }\n\n ga('send', {\n hitType: \"event\",\n eventCategory: category, // guess or progress\n eventAction: action, // action (correct vs not..)\n eventLabel: label // level number\n });\n}\n\nfunction winGame(){\n $(\".table\").html('You did it!
You rock at CSS.');\n addNametags();\n finished = true;\n resetTable();\n}\n\nfunction checkResults(ruleSelected,levelSelected,rule){\n var ruleTable = $(\".table\").clone();\n ruleTable.find(\".strobe\").removeClass(\"strobe\");\n ruleTable.find(rule).addClass(\"strobe\");\n return($(\".table\").html() == ruleTable.html());\n}\n\n// Returns all formatted markup within an element...\n\nfunction getMarkup(el){\n var hasChildren = el.children.length > 0 ? true : false;\n var elName = el.tagName.toLowerCase();\n var wrapperEl = $(\"\");\n var attributeString = \"\";\n $.each(el.attributes, function() {\n if(this.specified) {\n attributeString = attributeString + ' ' + this.name + '=\"' + this.value + '\"';\n }\n });\n var attributeSpace = \"\";\n if(attributeString.length > 0){\n attributeSpace = \" \";\n }\n if(hasChildren) {\n wrapperEl.text(\"<\" + elName + attributeSpace + attributeString + \">\");\n $(el.children).each(function(i,el){\n wrapperEl.append(getMarkup(el));\n });\n wrapperEl.append(\"</\" + elName + \">\");\n } else {\n wrapperEl.text(\"<\" + elName + attributeSpace + attributeString + \" />\");\n }\n return wrapperEl;\n}\n\n//new board loader...\n\nfunction loadBoard(){\n\n var boardString = level.board; // just a placeholder to iterate over...\n boardMarkup = \"\"; // what is this\n var tableMarkup = \"\"; // what is this\n var editorMarkup = \"\"; // this is a string that represents the HTML\n showHelp();\n\n var markupHolder = $(\"\")\n\n $(level.boardMarkup).each(function(i,el){\n if(el.nodeType == 1){\n var result = getMarkup(el);\n markupHolder.append(result);\n }\n });\n\n $(\".table\").html(level.boardMarkup);\n addNametags();\n $(\".table *\").addClass(\"pop\");\n\n\n $(\".markup\").html('<div class=\"table\">' + markupHolder.html() + '</div>
');\n}\n\n// Adds nametags to the items on the table\nfunction addNametags(){\n $(\".nametags *\").remove();\n $(\".table-wrapper\").css(\"transform\",\"rotateX(0)\");\n $(\".table-wrapper\").width($(\".table-wrapper\").width());\n\n $(\".table *\").each(function(){\n if($(this).attr(\"for\")){\n var pos = $(this).position();\n var width = $(this).width();\n var nameTag = $(\"\" + $(this).attr(\"for\") + \"
\");\n $(\".nametags\").append(nameTag);\n var tagPos = pos.left + (width/2) - nameTag.width()/2 + 12;\n nameTag.css(\"left\",tagPos);\n }\n });\n\n $(\".table-wrapper\").css(\"transform\",\"rotateX(20deg)\");\n}\n\n\nfunction loadLevel(){\n // Make sure we don't load a level we don't have\n if(currentLevel < 0 || currentLevel >= levels.length) {\n currentLevel = 0;\n }\n\n hideTooltip();\n\n level = levels[currentLevel];\n\n // Show the help link only for the first three levels\n if(currentLevel < 3) {\n $(\".note-toggle\").show();\n } else {\n $(\".note-toggle\").hide();\n }\n\n $(\".level-menu .current\").removeClass(\"current\");\n $(\".level-menu div a\").eq(currentLevel).addClass(\"current\");\n\n var percent = (currentLevel+1)/levels.length * 100;\n $(\".progress\").css(\"width\",percent + \"%\");\n\n localStorage.setItem(\"currentLevel\",currentLevel);\n\n loadBoard();\n resetTable();\n\n $(\".level-header .level-text\").html(\"Level \" + (currentLevel+1) + \" of \" + levels.length);\n\n updateProgressUI(currentLevel, checkCompleted(currentLevel));\n\n $(\".order\").text(level.doThis);\n $(\"input\").val(\"\").focus();\n\n $(\".input-wrapper\").css(\"opacity\",1);\n $(\".result\").text(\"\");\n\n //Strobe what's supposed to be selected\n setTimeout(function(){\n $(\".table \" + level.selector).addClass(\"strobe\");\n $(\".pop\").removeClass(\"pop\");\n },200);\n\n}\n\n// Popup positioning code from...\n// http://stackoverflow.com/questions/4068373/center-a-popup-window-on-screen\n\nfunction PopupCenter(url, title, w, h) {\n // Fixes dual-screen position Most browsers Firefox\n var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.left;\n var dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.top;\n\n var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;\n var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;\n\n var left = ((width / 2) - (w / 2)) + dualScreenLeft;\n var top = ((height / 2) - (h / 2)) + dualScreenTop;\n var newWindow = window.open(url, title, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);\n\n // Puts focus on the newWindow\n if (window.focus) {\n newWindow.focus();\n }\n}\n"
}
]