├── LICENSE ├── README.md ├── lessons ├── lesson-1 │ ├── index.html │ └── jquery-1.7.1.js ├── lesson-10 │ ├── index.html │ └── jquery-1.7.1.js ├── lesson-11 │ ├── index.html │ └── jquery-1.7.1.js ├── lesson-13 │ ├── index.html │ └── jquery-1.7.1.js ├── lesson-14 │ ├── img │ │ ├── img1.gif │ │ ├── img2.gif │ │ ├── img3.gif │ │ └── img4.gif │ ├── index.html │ ├── slider.css │ └── slider.js ├── lesson-15 │ ├── img │ │ ├── img1.gif │ │ ├── img2.gif │ │ ├── img3.gif │ │ └── img4.gif │ ├── index.html │ ├── slider.css │ └── slider.js ├── lesson-18 │ └── index.html ├── lesson-19 │ └── index.html ├── lesson-2 │ └── index.html ├── lesson-20 │ └── index.html ├── lesson-21 │ └── index.html ├── lesson-22 │ ├── index.html │ └── tweets.html ├── lesson-23 │ ├── about.html │ ├── contact.html │ └── index.html ├── lesson-24 │ ├── data.txt │ ├── index.html │ ├── load.php │ └── save.php ├── lesson-25 │ ├── _partials │ │ ├── footer.php │ │ └── header.php │ ├── actor.php │ ├── css │ │ └── style.css │ ├── functions.php │ ├── index.php │ ├── js │ │ └── scripts.js │ └── views │ │ ├── actor.tmpl.php │ │ └── index.tmpl.php ├── lesson-26 │ ├── _partials │ │ ├── footer.php │ │ └── header.php │ ├── actor.php │ ├── css │ │ ├── normalize.css │ │ └── style.css │ ├── functions.php │ ├── index.html │ ├── index.php │ ├── js │ │ └── scripts.js │ └── views │ │ ├── actor.tmpl.php │ │ └── index.tmpl.php ├── lesson-3 │ └── index.html ├── lesson-4 │ ├── day.css │ ├── index.html │ ├── jquery-1.7.1.js │ └── night.css ├── lesson-5 │ ├── index.html │ ├── jquery-1.7.1.js │ └── style.css ├── lesson-7 │ ├── index.html │ └── jquery-1.7.1.js ├── lesson-8 │ ├── index.html │ └── jquery-1.7.1.js ├── lesson-9 │ ├── index.html │ └── jquery-1.7.1.js └── lesson-plugin-dev │ ├── index.html │ └── searchTwitter.jquery.js └── quizzes ├── 1-intro ├── codemirror │ ├── lib │ │ ├── codemirror.css │ │ ├── codemirror.js │ │ ├── overlay.js │ │ └── runmode.js │ ├── mode │ │ ├── coffeescript │ │ │ ├── LICENSE │ │ │ ├── coffeescript.js │ │ │ └── index.html │ │ ├── css │ │ │ ├── css.js │ │ │ └── index.html │ │ ├── htmlmixed │ │ │ ├── htmlmixed.js │ │ │ └── index.html │ │ ├── javascript │ │ │ ├── index.html │ │ │ └── javascript.js │ │ ├── php │ │ │ ├── index.html │ │ │ └── php.js │ │ ├── ruby │ │ │ ├── LICENSE │ │ │ ├── index.html │ │ │ └── ruby.js │ │ ├── xml │ │ │ ├── index.html │ │ │ └── xml.js │ │ └── xmlpure │ │ │ ├── index.html │ │ │ └── xmlpure.js │ └── theme │ │ └── default.css ├── css │ ├── style.css │ └── stylus │ │ ├── aside.styl │ │ ├── button.styl │ │ ├── crumbs.styl │ │ ├── font.css │ │ ├── header.styl │ │ ├── headings.styl │ │ ├── links.styl │ │ ├── main.styl │ │ ├── mixins.styl │ │ ├── orange-button.styl │ │ ├── questions.styl │ │ ├── reset.styl │ │ ├── results.styl │ │ ├── shadowEffects.styl │ │ └── style.styl ├── favicon.ico ├── iframe.html ├── images │ ├── bg-body.jpg │ ├── bg-content-shadow.png │ ├── bg-content-top.jpg │ ├── bg-content.jpg │ ├── bg-header.jpg │ ├── bool-bg.png │ ├── false.png │ ├── logo.png │ ├── percentageComplete-bg.png │ ├── radio-off.png │ ├── radio-on.png │ ├── radioButton.png │ ├── score-bg.png │ ├── sprite-mini-icons.png │ ├── sprite.png │ ├── stripeBG.png │ ├── texture.jpg │ ├── texture.png │ ├── true.png │ ├── tuts.jpg │ └── twitter-bird.png ├── index.html ├── js │ ├── modernizr-custom.js │ └── script.js └── ruby.jpeg ├── 2-effects ├── codemirror │ ├── lib │ │ ├── codemirror.js │ │ ├── codemirror.styl │ │ ├── overlay.js │ │ └── runmode.js │ ├── mode │ │ ├── coffeescript │ │ │ ├── LICENSE │ │ │ ├── coffeescript.js │ │ │ └── index.html │ │ ├── css │ │ │ ├── css.js │ │ │ └── index.html │ │ ├── htmlmixed │ │ │ ├── htmlmixed.js │ │ │ └── index.html │ │ ├── javascript │ │ │ ├── index.html │ │ │ └── javascript.js │ │ ├── php │ │ │ ├── index.html │ │ │ └── php.js │ │ ├── ruby │ │ │ ├── LICENSE │ │ │ ├── index.html │ │ │ └── ruby.js │ │ ├── xml │ │ │ ├── index.html │ │ │ └── xml.js │ │ └── xmlpure │ │ │ ├── index.html │ │ │ └── xmlpure.js │ └── theme │ │ └── default.styl ├── css │ ├── bootstrap.css │ ├── header.css │ ├── progressPoly.css │ ├── style.css │ └── stylus │ │ ├── aside.styl │ │ ├── button.styl │ │ ├── crumbs.styl │ │ ├── font.css │ │ ├── header.styl │ │ ├── headings.styl │ │ ├── links.styl │ │ ├── main.styl │ │ ├── mixins.styl │ │ ├── orange-button.styl │ │ ├── questions.styl │ │ ├── reset.styl │ │ ├── results.styl │ │ ├── shadowEffects.styl │ │ └── style.styl ├── favicon.ico ├── iframe.html ├── images │ ├── bg-body.jpg │ ├── bg-content-shadow.png │ ├── bg-content-top.jpg │ ├── bg-content.jpg │ ├── bg-header.jpg │ ├── bool-bg.png │ ├── false.png │ ├── logo.png │ ├── percentageComplete-bg.png │ ├── radio-off.png │ ├── radio-on.png │ ├── radioButton.png │ ├── score-bg.png │ ├── sprite-mini-icons.png │ ├── sprite.png │ ├── stripeBG.png │ ├── texture.jpg │ ├── texture.png │ ├── true.png │ ├── tuts.jpg │ └── twitter-bird.png ├── index.html ├── js │ ├── modernizr-custom.js │ └── script.js ├── readme.md └── ruby.jpeg └── 3-final ├── codemirror ├── lib │ ├── codemirror.js │ ├── codemirror.styl │ ├── overlay.js │ └── runmode.js ├── mode │ ├── coffeescript │ │ ├── LICENSE │ │ ├── coffeescript.js │ │ └── index.html │ ├── css │ │ ├── css.js │ │ └── index.html │ ├── htmlmixed │ │ ├── htmlmixed.js │ │ └── index.html │ ├── javascript │ │ ├── index.html │ │ └── javascript.js │ ├── php │ │ ├── index.html │ │ └── php.js │ ├── ruby │ │ ├── LICENSE │ │ ├── index.html │ │ └── ruby.js │ ├── xml │ │ ├── index.html │ │ └── xml.js │ └── xmlpure │ │ ├── index.html │ │ └── xmlpure.js └── theme │ └── default.styl ├── css ├── bootstrap.css ├── header.css ├── progressPoly.css ├── style.css └── stylus │ ├── aside.styl │ ├── button.styl │ ├── crumbs.styl │ ├── font.css │ ├── header.styl │ ├── headings.styl │ ├── links.styl │ ├── main.styl │ ├── mixins.styl │ ├── orange-button.styl │ ├── questions.styl │ ├── reset.styl │ ├── results.styl │ ├── shadowEffects.styl │ └── style.styl ├── favicon.ico ├── iframe.html ├── images ├── bg-body.jpg ├── bg-content-shadow.png ├── bg-content-top.jpg ├── bg-content.jpg ├── bg-header.jpg ├── bool-bg.png ├── false.png ├── logo.png ├── percentageComplete-bg.png ├── radio-off.png ├── radio-on.png ├── radioButton.png ├── score-bg.png ├── sprite-mini-icons.png ├── sprite.png ├── stripeBG.png ├── texture.jpg ├── texture.png ├── true.png ├── tuts.jpg └── twitter-bird.png ├── index.html ├── js ├── modernizr-custom.js └── script.js ├── ruby.jpeg └── single.html /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2015, Tuts+ 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without 5 | modification, are permitted provided that the following conditions are met: 6 | 7 | * Redistributions of source code must retain the above copyright notice, this 8 | list of conditions and the following disclaimer. 9 | 10 | * Redistributions in binary form must reproduce the above copyright notice, 11 | this list of conditions and the following disclaimer in the documentation 12 | and/or other materials provided with the distribution. 13 | 14 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" 15 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE 16 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 17 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE 18 | FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL 19 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR 20 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER 21 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, 22 | OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 23 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [30 Days to Learn jQuery][published url] 2 | ## Instructor: [Jeffrey Way][instructor url] 3 | 4 | 5 | You know you need to learn jQuery. Everyone else has, and you’re falling behind! No worries; it’s a brand new year, and what better way to celebrate it than by learning a new skill? Give me thirty minutes every day for the next month, and I’ll transform you into a jQuery pro! 6 | 7 | ## Source Files Description 8 | 9 | These are source files for the Tuts+ course: [30 Days to Learn jQuery][published url]. 10 | 11 | There is a folder for the source code of each individual lesson in the course, as well as a series of quizzes. 12 | 13 | Available on [Tuts+](https://tutsplus.com). Teaching skills to millions worldwide. 14 | 15 | [published url]: https://code.tutsplus.com/courses/30-days-to-learn-jquery 16 | [instructor url]: https://tutsplus.com/authors/jeffrey-way 17 | -------------------------------------------------------------------------------- /lessons/lesson-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 11 | 12 | 13 | 14 | 19 | 20 | 21 | 22 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /lessons/lesson-10/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Custom Effect Methods 6 | 9 | 10 | 11 | 12 | 13 |

Reveal

14 |
15 |

16 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 17 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 18 | quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 19 | consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 20 | cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 21 |

22 |

23 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 24 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 25 | quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 26 | consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 27 | cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 28 |

29 |
30 | 31 | 32 | 33 | 34 | 35 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /lessons/lesson-11/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Custom Effect Methods 6 | 9 | 10 | 11 | 12 |

Click Me

13 | 14 |
15 |

16 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 17 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 18 | quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 19 | consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 20 | cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 21 |

22 |

23 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 24 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 25 | quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 26 | consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 27 | cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 28 |

29 |
30 | 31 | 32 | 33 | 34 | 35 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /lessons/lesson-13/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Animate 6 | 17 | 18 | 19 | 20 | 21 |
22 |

Hi There

23 |

24 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 25 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 26 |

27 |
28 | 29 |

30 | 31 | 32 | 33 | 34 | 60 | 61 | -------------------------------------------------------------------------------- /lessons/lesson-14/img/img1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/lessons/lesson-14/img/img1.gif -------------------------------------------------------------------------------- /lessons/lesson-14/img/img2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/lessons/lesson-14/img/img2.gif -------------------------------------------------------------------------------- /lessons/lesson-14/img/img3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/lessons/lesson-14/img/img3.gif -------------------------------------------------------------------------------- /lessons/lesson-14/img/img4.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/lessons/lesson-14/img/img4.gif -------------------------------------------------------------------------------- /lessons/lesson-14/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | The Obligatory Slider 6 | 13 | 14 | 15 | 16 | 17 |
18 | 28 |
29 | 30 |
31 | 32 | 33 |
34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /lessons/lesson-14/slider.css: -------------------------------------------------------------------------------- 1 | #slider-nav { 2 | display: none; 3 | margin-top: 1em; 4 | } 5 | 6 | #slider-nav button { 7 | padding: 1em; 8 | margin-right: 1em; 9 | border-radius: 10px; 10 | cursor: pointer; 11 | } 12 | 13 | .slider { 14 | width: inherit; 15 | height: 300px; 16 | overflow: scroll; 17 | } 18 | 19 | .slider ul { 20 | width: 10000px; 21 | list-style: none; 22 | } 23 | 24 | .slider li { 25 | float: left; 26 | } -------------------------------------------------------------------------------- /lessons/lesson-14/slider.js: -------------------------------------------------------------------------------- 1 | // the procedural method 2 | (function($) { 3 | var sliderUL = $('div.slider').css('overflow', 'hidden').children('ul'), 4 | imgs = sliderUL.find('img'), 5 | imgWidth = imgs[0].width, // 600 6 | imgsLen = imgs.length, // 4 7 | current = 1, 8 | totalImgsWidth = imgsLen * imgWidth; // 2400 9 | 10 | $('#slider-nav').show().find('button').on('click', function() { 11 | var direction = $(this).data('dir'), 12 | loc = imgWidth; // 600 13 | 14 | // update current value 15 | ( direction === 'next' ) ? ++current : --current; 16 | 17 | // if first image 18 | if ( current === 0 ) { 19 | current = imgsLen; 20 | loc = totalImgsWidth - imgWidth; // 2400 - 600 = 1800 21 | direction = 'next'; 22 | } else if ( current - 1 === imgsLen ) { // Are we at end? Should we reset? 23 | current = 1; 24 | loc = 0; 25 | } 26 | 27 | transition(sliderUL, loc, direction); 28 | }); 29 | 30 | function transition( container, loc, direction ) { 31 | var unit; // -= += 32 | 33 | if ( direction && loc !== 0 ) { 34 | unit = ( direction === 'next' ) ? '-=' : '+='; 35 | } 36 | 37 | container.animate({ 38 | 'margin-left': unit ? (unit + loc) : loc 39 | }); 40 | } 41 | 42 | })(jQuery); -------------------------------------------------------------------------------- /lessons/lesson-15/img/img1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/lessons/lesson-15/img/img1.gif -------------------------------------------------------------------------------- /lessons/lesson-15/img/img2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/lessons/lesson-15/img/img2.gif -------------------------------------------------------------------------------- /lessons/lesson-15/img/img3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/lessons/lesson-15/img/img3.gif -------------------------------------------------------------------------------- /lessons/lesson-15/img/img4.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/lessons/lesson-15/img/img4.gif -------------------------------------------------------------------------------- /lessons/lesson-15/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | The Obligatory Slider 6 | 13 | 14 | 15 | 16 | 17 |
18 | 24 |
25 | 26 |
27 | 28 | 29 |
30 | 31 | 32 | 33 | 34 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /lessons/lesson-15/slider.css: -------------------------------------------------------------------------------- 1 | #slider-nav { 2 | display: none; 3 | margin-top: 1em; 4 | } 5 | 6 | #slider-nav button { 7 | padding: 1em; 8 | margin-right: 1em; 9 | border-radius: 10px; 10 | cursor: pointer; 11 | } 12 | 13 | .slider { 14 | width: inherit; 15 | height: 300px; 16 | overflow: scroll; 17 | } 18 | 19 | .slider ul { 20 | width: 10000px; 21 | list-style: none; 22 | } 23 | 24 | .slider li { 25 | float: left; 26 | } -------------------------------------------------------------------------------- /lessons/lesson-15/slider.js: -------------------------------------------------------------------------------- 1 | function Slider( container, nav ) { 2 | this.container = container; 3 | this.nav = nav.show(); 4 | 5 | this.imgs = this.container.find('img'); 6 | this.imgWidth = this.imgs[0].width; // 600 7 | this.imgsLen = this.imgs.length; 8 | 9 | this.current = 0; 10 | } 11 | 12 | Slider.prototype.transition = function( coords ) { 13 | this.container.animate({ 14 | 'margin-left': coords || -( this.current * this.imgWidth ) 15 | }); 16 | }; 17 | 18 | Slider.prototype.setCurrent = function( dir ) { 19 | var pos = this.current; 20 | 21 | pos += ( ~~( dir === 'next' ) || -1 ); 22 | this.current = ( pos < 0 ) ? this.imgsLen - 1 : pos % this.imgsLen; 23 | 24 | return pos; 25 | }; 26 | 27 | 28 | -------------------------------------------------------------------------------- /lessons/lesson-18/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Q&A 6 | 7 | 8 | 9 | 13 | 14 | 15 | 16 | 49 | 50 | -------------------------------------------------------------------------------- /lessons/lesson-19/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mustache 6 | 9 | 10 | 11 | 12 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /lessons/lesson-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 10 | 11 | 21 | 22 | 23 | 24 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /lessons/lesson-20/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Twitter 6 | 13 | 14 | 15 | 16 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 97 | 98 | 99 | 100 | 101 | -------------------------------------------------------------------------------- /lessons/lesson-21/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | $.grep 6 | 7 | 8 | 9 | 10 | 11 | 12 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /lessons/lesson-22/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Custom Events 6 | 7 | 8 | 9 |

Hi There

10 | 11 | 12 | 13 | 14 | 15 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /lessons/lesson-22/tweets.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Custom Events 6 | 10 | 11 | 12 | 13 |

What Are You Interested In?

14 | 15 |
16 |

17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | -------------------------------------------------------------------------------- /lessons/lesson-23/about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | AJAX: load 6 | 7 | 8 | 9 | 10 |
11 |

About Me

12 |

I work for Envato!

13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /lessons/lesson-23/contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | AJAX: load 6 | 7 | 8 | 9 | 10 |
11 |

Contact Me

12 |

Represent contact form.

13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /lessons/lesson-23/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | AJAX: load 6 | 7 | 8 | 9 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /lessons/lesson-24/data.txt: -------------------------------------------------------------------------------- 1 | Lorem ipsum dolar sit amet. -------------------------------------------------------------------------------- /lessons/lesson-24/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | AJAX: POST 6 | 7 | 8 | 9 |

Something to Save

10 |
11 | 12 |

13 |
14 | 15 | 16 | 17 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /lessons/lesson-24/load.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /lessons/lesson-25/_partials/header.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Actors 6 | 7 | 8 | 9 |
-------------------------------------------------------------------------------- /lessons/lesson-25/actor.php: -------------------------------------------------------------------------------- 1 | prepare(' 12 | SELECT actor_id, first_name, last_name 13 | FROM actor 14 | WHERE last_name LIKE :letter 15 | LIMIT 50'); 16 | 17 | $stmt->execute( array( ':letter' => $letter . '%' ) ); 18 | 19 | return $stmt->fetchAll( PDO::FETCH_OBJ ); 20 | } 21 | 22 | function get_actor_info( $actor_id ) { 23 | global $pdo; 24 | 25 | $stmt = $pdo->prepare(' 26 | SELECT film_info, first_name, last_name 27 | FROM actor_info 28 | WHERE actor_id = :actor_id 29 | LIMIT 1'); 30 | 31 | $stmt->execute( array( ':actor_id' => $actor_id ) ); 32 | 33 | return $stmt->fetch( PDO::FETCH_OBJ ); 34 | } 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /lessons/lesson-25/index.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | {$info->first_name} {$info->last_name}"; 6 | echo "

{$info->film_info}

"; 7 | } else { 8 | echo "

No results available.

"; 9 | } 10 | ?> 11 | 12 |

Back

13 | 14 | -------------------------------------------------------------------------------- /lessons/lesson-25/views/index.tmpl.php: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Search Actors By Last Name

4 |
5 | 13 | 14 |
15 | 16 | 22 | 23 | -------------------------------------------------------------------------------- /lessons/lesson-26/_partials/footer.php: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /lessons/lesson-26/_partials/header.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Actors 6 | 7 | 8 | 9 | 10 | 11 |
-------------------------------------------------------------------------------- /lessons/lesson-26/actor.php: -------------------------------------------------------------------------------- 1 | prepare(' 16 | SELECT actor_id, first_name, last_name 17 | FROM actor 18 | WHERE last_name LIKE :letter 19 | LIMIT 50'); 20 | 21 | $stmt->execute( array( ':letter' => $letter . '%' ) ); 22 | 23 | return $stmt->fetchAll( PDO::FETCH_OBJ ); 24 | } 25 | 26 | function get_actor_info( $actor_id ) { 27 | global $pdo; 28 | 29 | $stmt = $pdo->prepare(' 30 | SELECT film_info, first_name, last_name 31 | FROM actor_info 32 | WHERE actor_id = :actor_id 33 | LIMIT 1'); 34 | 35 | $stmt->execute( array( ':actor_id' => $actor_id ) ); 36 | 37 | return $stmt->fetch( PDO::FETCH_OBJ ); 38 | } 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /lessons/lesson-26/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | jQuery Deferreds 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /lessons/lesson-26/index.php: -------------------------------------------------------------------------------- 1 | film_info; 15 | } 16 | 17 | return; 18 | } 19 | 20 | if ( isset($_POST['q']) ) { 21 | $actors = get_actors_by_last_name( $_POST['q'] ); 22 | } 23 | 24 | include 'views/index.tmpl.php'; -------------------------------------------------------------------------------- /lessons/lesson-26/js/scripts.js: -------------------------------------------------------------------------------- 1 | var Actors = { 2 | init: function( config ) { 3 | this.config = config; 4 | 5 | this.setupTemplates(); 6 | this.bindEvents(); 7 | 8 | $.ajaxSetup({ 9 | url: 'index.php', 10 | type: 'POST' 11 | }); 12 | 13 | $('button').remove(); // little lazy 14 | }, 15 | 16 | bindEvents: function() { 17 | this.config.letterSelection.on( 'change', this.fetchActors ); 18 | this.config.actorsList.on( 'click', 'li', this.displayAuthorInfo ); 19 | this.config.actorInfo.on( 'click', 'span.close', this.closeOverlay ); 20 | }, 21 | 22 | setupTemplates: function() { 23 | this.config.actorListTemplate = Handlebars.compile( this.config.actorListTemplate); 24 | this.config.actorInfoTemplate = Handlebars.compile( this.config.actorInfoTemplate); 25 | 26 | Handlebars.registerHelper( 'fullName', function( actor ) { 27 | return actor.first_name + ' ' + actor.last_name; 28 | }); 29 | }, 30 | 31 | fetchActors: function() { 32 | var self = Actors; 33 | 34 | $.ajax({ 35 | data: self.config.form.serialize(), 36 | dataType: 'json', 37 | success: function(results) { 38 | self.config.actorsList.empty(); 39 | 40 | if ( results[0] ) { 41 | self.config.actorsList.append( self.config.actorListTemplate( results) ); 42 | } else { 43 | self.config.actorsList.append('
  • Nothing returned.
    • '); 44 | } 45 | } 46 | }); 47 | }, 48 | 49 | displayAuthorInfo: function( e ) { 50 | var self = Actors; 51 | 52 | self.config.actorInfo.slideUp( 300 ); 53 | 54 | $.ajax({ 55 | data: { actor_id: $(this).data( 'actor_id' ) } 56 | }).then(function( results ) { 57 | self.config.actorInfo.html( self.config.actorInfoTemplate( { info: results }) ).slideDown(300); 58 | }); 59 | 60 | e.preventDefault(); 61 | }, 62 | 63 | closeOverlay: function() { 64 | Actors.config.actorInfo.slideUp(300); 65 | } 66 | }; 67 | 68 | Actors.init({ 69 | letterSelection: $('#q'), 70 | form: $('#actor-selection'), 71 | actorListTemplate: $('#actor_list_template').html(), 72 | actorInfoTemplate: $('#actor_info_template').html(), 73 | actorsList: $('ul.actors_list'), 74 | actorInfo: $('div.actor_info') 75 | }); 76 | 77 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /lessons/lesson-26/views/actor.tmpl.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | {$info->first_name} {$info->last_name}"; 6 | echo "

    {$info->film_info}

    "; 7 | } else { 8 | echo "

    No results available.

    "; 9 | } 10 | ?> 11 | 12 |

    Back

    13 | 14 | -------------------------------------------------------------------------------- /lessons/lesson-26/views/index.tmpl.php: -------------------------------------------------------------------------------- 1 | 2 | 3 |

    Search Actors By Last Name

    4 |
    5 | 13 | 14 |
    15 | 16 | 30 | 31 |
    32 | 36 |
    37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /lessons/lesson-3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 12 |
    13 |

    Welcome to My Website

    14 |

    15 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 16 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 17 | quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 18 | consequat. 19 |

    20 | 21 |
    22 |
      23 |
    • item
      • 24 |
    • item 2
      • 25 |
    • item 2
      • 26 |
    • item 4
      • 27 |
    • item 5
      • 28 |
    • 29 |
        30 |
      • hello from the nest.
        • 31 |
      34 |
    35 |
    36 |
    37 | 38 | 39 | 40 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /lessons/lesson-4/day.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: yellow; 3 | } -------------------------------------------------------------------------------- /lessons/lesson-4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | jQuery Events 6 | 7 | 8 | 9 | 10 |

    My Website

    11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /lessons/lesson-4/night.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: black; 3 | color: white; 4 | } -------------------------------------------------------------------------------- /lessons/lesson-5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | jQuery Events 201 6 | 7 | 8 | 9 | 10 |
    11 |
    What are your hours?
    12 |
    We are open 24/7.
    13 |
    What are your hours?
    14 |
    We are open 24/7.
    15 |
    What are your hours?
    16 |
    We are open 24/7.
    17 |
    What are your hours?
    18 |
    We are open 24/7.
    19 |
    What are your hours?
    20 |
    We are open 24/7.
    21 |
    22 | 23 | 24 | 25 | 26 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /lessons/lesson-5/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | width: 500px; 3 | 4 | margin: auto; 5 | text-align: center; 6 | } 7 | 8 | dl { 9 | 10 | } 11 | 12 | dd { 13 | margin: 0; 14 | 15 | padding: 1em 0; 16 | } 17 | 18 | dt { 19 | cursor: pointer; 20 | 21 | 22 | font-weight: bold; 23 | font-size : 1.5em; 24 | line-height: 2em; 25 | background: #e3e3e3; 26 | border-bottom: 1px solid #c5c5c5; 27 | border-top: 1px solid white; 28 | } 29 | 30 | dt:first-child { border-top: none; } 31 | dt:nth-last-child(2) { border-bottom: none; } 32 | 33 | .hide { display: none;} 34 | -------------------------------------------------------------------------------- /lessons/lesson-7/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Appending Content 6 | 19 | 20 | 21 | 22 | 23 |
    24 |

    My Awesome Post

    25 |

    26 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 27 | tempor incididunt ut labore et dolore magna aliqua. 28 |

    29 |

    30 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 31 | tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod 32 | tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod 33 | tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod 34 | tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod 35 | tempor incididunt ut labore et dolore magna aliqua. 36 |

    37 |

    38 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 39 | tempor incididunt ut labore et dolore magna aliqua. 40 |

    41 |

    42 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 43 | tempor incididunt ut labore et dolore magna aliqua. 44 |

    45 |

    46 | Consectetur adipisicing elit, sed do eiusmod 47 | tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod 48 | tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod 49 | tempor incididunt ut labore et dolore magna aliqua. Hello from JavaScript. sed do eiusmod 50 | tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod 51 | tempor incididunt ut labore et dolore magna aliqua. 52 |

    53 |
    54 | 55 | 56 | 57 | 58 | 59 | 60 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | -------------------------------------------------------------------------------- /lessons/lesson-9/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | The this Keyword 6 | 7 | 8 | 9 | 10 | Click Me 11 | 12 | 13 | 14 | 15 | 16 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /lessons/lesson-plugin-dev/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | jQuery Plugins 6 | 7 | 8 | 9 |

    My Tweets

    10 |
    11 | 12 | 13 | 14 | 15 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /lessons/lesson-plugin-dev/searchTwitter.jquery.js: -------------------------------------------------------------------------------- 1 | // Utility 2 | if ( typeof Object.create !== 'function' ) { 3 | Object.create = function( obj ) { 4 | function F() {}; 5 | F.prototype = obj; 6 | return new F(); 7 | }; 8 | } 9 | 10 | (function( $, window, document, undefined ) { 11 | var Twitter = { 12 | init: function( options, elem ) { 13 | var self = this; 14 | 15 | self.elem = elem; 16 | self.$elem = $( elem ); 17 | 18 | self.url = 'http://search.twitter.com/search.json'; 19 | 20 | self.search = ( typeof options === 'string' ) 21 | ? options 22 | : options.search; 23 | 24 | self.options = $.extend( {}, $.fn.queryTwitter.options, options ); 25 | 26 | self.refresh( 1 ); 27 | }, 28 | 29 | refresh: function( length ) { 30 | var self = this; 31 | 32 | setTimeout(function() { 33 | self.fetch().done(function( results ) { 34 | results = self.limit( results.results, self.options.limit ); 35 | 36 | self.buildFrag( results ); 37 | 38 | self.display(); 39 | 40 | if ( typeof self.options.onComplete === 'function' ) { 41 | self.options.onComplete.apply( self.elem, arguments ); 42 | } 43 | 44 | if ( self.options.refresh ) { 45 | self.refresh(); 46 | } 47 | }); 48 | }, length || self.options.refresh ); 49 | }, 50 | 51 | fetch: function() { 52 | return $.ajax({ 53 | url: this.url, 54 | data: { q: this.search }, 55 | dataType: 'jsonp' 56 | }); 57 | }, 58 | 59 | buildFrag: function( results ) { 60 | var self = this; 61 | 62 | self.tweets = $.map( results, function( obj, i) { 63 | return $( self.options.wrapEachWith ).append ( obj.text )[0]; 64 | }); 65 | }, 66 | 67 | display: function() { 68 | var self = this; 69 | 70 | if ( self.options.transition === 'none' || !self.options.transition ) { 71 | self.$elem.html( self.tweets ); // that's available?? 72 | } else { 73 | self.$elem[ self.options.transition ]( 500, function() { 74 | $(this).html( self.tweets )[ self.options.transition ]( 500 ); 75 | }); 76 | } 77 | }, 78 | 79 | limit: function( obj, count ) { 80 | return obj.slice( 0, count ); 81 | } 82 | }; 83 | 84 | $.fn.queryTwitter = function( options ) { 85 | return this.each(function() { 86 | var twitter = Object.create( Twitter ); 87 | 88 | twitter.init( options, this ); 89 | 90 | $.data( this, 'queryTwitter', twitter ); 91 | }); 92 | }; 93 | 94 | $.fn.queryTwitter.options = { 95 | search: '@tutspremium', 96 | wrapEachWith: '
  • ', 97 | limit: 10, 98 | refresh: null, 99 | onComplete: null, 100 | transition: 'fadeToggle' 101 | }; 102 | 103 | })( jQuery, window, document ); 104 | -------------------------------------------------------------------------------- /quizzes/1-intro/codemirror/lib/codemirror.css: -------------------------------------------------------------------------------- 1 | .CodeMirror { 2 | line-height: 1em; 3 | font-family: monospace; 4 | } 5 | 6 | .CodeMirror-scroll { 7 | overflow: auto; 8 | height: 300px; 9 | /* This is needed to prevent an IE[67] bug where the scrolled content 10 | is visible outside of the scrolling box. */ 11 | position: relative; 12 | } 13 | 14 | .CodeMirror-gutter { 15 | position: absolute; left: 0; top: 0; 16 | z-index: 10; 17 | background-color: #f7f7f7; 18 | border-right: 1px solid #eee; 19 | min-width: 2em; 20 | height: 100%; 21 | } 22 | .CodeMirror-gutter-text { 23 | color: #aaa; 24 | text-align: right; 25 | padding: .4em .2em .4em .4em; 26 | white-space: pre !important; 27 | } 28 | .CodeMirror-lines { 29 | padding: .4em; 30 | } 31 | 32 | .CodeMirror pre { 33 | -moz-border-radius: 0; 34 | -webkit-border-radius: 0; 35 | -o-border-radius: 0; 36 | border-radius: 0; 37 | border-width: 0; margin: 0; padding: 0; background: transparent; 38 | font-family: inherit; 39 | font-size: inherit; 40 | padding: 0; margin: 0; 41 | white-space: pre; 42 | word-wrap: normal; 43 | } 44 | 45 | .CodeMirror-wrap pre { 46 | word-wrap: break-word; 47 | white-space: pre-wrap; 48 | } 49 | .CodeMirror-wrap .CodeMirror-scroll { 50 | overflow-x: hidden; 51 | } 52 | 53 | .CodeMirror textarea { 54 | outline: none !important; 55 | } 56 | 57 | .CodeMirror pre.CodeMirror-cursor { 58 | z-index: 10; 59 | position: absolute; 60 | visibility: hidden; 61 | border-left: 1px solid black; 62 | } 63 | .CodeMirror-focused pre.CodeMirror-cursor { 64 | visibility: visible; 65 | } 66 | 67 | span.CodeMirror-selected { background: #d9d9d9; } 68 | .CodeMirror-focused span.CodeMirror-selected { background: #d2dcf8; } 69 | 70 | .CodeMirror-searching {background: #ffa;} 71 | 72 | /* Default theme */ 73 | 74 | .cm-s-default span.cm-keyword {color: #708;} 75 | .cm-s-default span.cm-atom {color: #219;} 76 | .cm-s-default span.cm-number {color: #164;} 77 | .cm-s-default span.cm-def {color: #00f;} 78 | .cm-s-default span.cm-variable {color: black;} 79 | .cm-s-default span.cm-variable-2 {color: #05a;} 80 | .cm-s-default span.cm-variable-3 {color: #085;} 81 | .cm-s-default span.cm-property {color: black;} 82 | .cm-s-default span.cm-operator {color: black;} 83 | .cm-s-default span.cm-comment {color: #a50;} 84 | .cm-s-default span.cm-string {color: #a11;} 85 | .cm-s-default span.cm-string-2 {color: #f50;} 86 | .cm-s-default span.cm-meta {color: #555;} 87 | .cm-s-default span.cm-error {color: #f00;} 88 | .cm-s-default span.cm-qualifier {color: #555;} 89 | .cm-s-default span.cm-builtin {color: #30a;} 90 | .cm-s-default span.cm-bracket {color: #cc7;} 91 | .cm-s-default span.cm-tag {color: #170;} 92 | .cm-s-default span.cm-attribute {color: #00c;} 93 | .cm-s-default span.cm-header {color: #a0a;} 94 | .cm-s-default span.cm-quote {color: #090;} 95 | .cm-s-default span.cm-hr {color: #999;} 96 | .cm-s-default span.cm-link {color: #00c;} 97 | 98 | span.cm-header, span.cm-strong {font-weight: bold;} 99 | span.cm-em {font-style: italic;} 100 | span.cm-emstrong {font-style: italic; font-weight: bold;} 101 | span.cm-link {text-decoration: underline;} 102 | 103 | div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;} 104 | div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;} 105 | 106 | iframe { 107 | width: 100%; 108 | margin-top: 40px; 109 | } -------------------------------------------------------------------------------- /quizzes/1-intro/codemirror/lib/overlay.js: -------------------------------------------------------------------------------- 1 | // Utility function that allows modes to be combined. The mode given 2 | // as the base argument takes care of most of the normal mode 3 | // functionality, but a second (typically simple) mode is used, which 4 | // can override the style of text. Both modes get to parse all of the 5 | // text, but when both assign a non-null style to a piece of code, the 6 | // overlay wins, unless the combine argument was true, in which case 7 | // the styles are combined. 8 | 9 | CodeMirror.overlayParser = function(base, overlay, combine) { 10 | return { 11 | startState: function() { 12 | return { 13 | base: CodeMirror.startState(base), 14 | overlay: CodeMirror.startState(overlay), 15 | basePos: 0, baseCur: null, 16 | overlayPos: 0, overlayCur: null 17 | }; 18 | }, 19 | copyState: function(state) { 20 | return { 21 | base: CodeMirror.copyState(base, state.base), 22 | overlay: CodeMirror.copyState(overlay, state.overlay), 23 | basePos: state.basePos, baseCur: null, 24 | overlayPos: state.overlayPos, overlayCur: null 25 | }; 26 | }, 27 | 28 | token: function(stream, state) { 29 | if (stream.start == state.basePos) { 30 | state.baseCur = base.token(stream, state.base); 31 | state.basePos = stream.pos; 32 | } 33 | if (stream.start == state.overlayPos) { 34 | stream.pos = stream.start; 35 | state.overlayCur = overlay.token(stream, state.overlay); 36 | state.overlayPos = stream.pos; 37 | } 38 | stream.pos = Math.min(state.basePos, state.overlayPos); 39 | if (stream.eol()) state.basePos = state.overlayPos = 0; 40 | 41 | if (state.overlayCur == null) return state.baseCur; 42 | if (state.baseCur != null && combine) return state.baseCur + " " + state.overlayCur; 43 | else return state.overlayCur; 44 | }, 45 | 46 | indent: function(state, textAfter) { 47 | return base.indent(state.base, textAfter); 48 | }, 49 | electricChars: base.electricChars 50 | }; 51 | }; 52 | -------------------------------------------------------------------------------- /quizzes/1-intro/codemirror/lib/runmode.js: -------------------------------------------------------------------------------- 1 | CodeMirror.runMode = function(string, modespec, callback) { 2 | var mode = CodeMirror.getMode({indentUnit: 2}, modespec); 3 | var isNode = callback.nodeType == 1; 4 | if (isNode) { 5 | var node = callback, accum = []; 6 | callback = function(string, style) { 7 | if (string == "\n") 8 | accum.push("
    "); 9 | else if (style) 10 | accum.push("" + CodeMirror.htmlEscape(string) + ""); 11 | else 12 | accum.push(CodeMirror.htmlEscape(string)); 13 | } 14 | } 15 | var lines = CodeMirror.splitLines(string), state = CodeMirror.startState(mode); 16 | for (var i = 0, e = lines.length; i < e; ++i) { 17 | if (i) callback("\n"); 18 | var stream = new CodeMirror.StringStream(lines[i]); 19 | while (!stream.eol()) { 20 | var style = mode.token(stream, state); 21 | callback(stream.current(), style, i, stream.start); 22 | stream.start = stream.pos; 23 | } 24 | } 25 | if (isNode) 26 | node.innerHTML = accum.join(""); 27 | }; 28 | -------------------------------------------------------------------------------- /quizzes/1-intro/codemirror/mode/coffeescript/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2011 Jeff Pickhardt 4 | Modified from the Python CodeMirror mode, Copyright (c) 2010 Timothy Farrell 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. -------------------------------------------------------------------------------- /quizzes/1-intro/codemirror/mode/css/css.js: -------------------------------------------------------------------------------- 1 | CodeMirror.defineMode("css", function(config) { 2 | var indentUnit = config.indentUnit, type; 3 | function ret(style, tp) {type = tp; return style;} 4 | 5 | function tokenBase(stream, state) { 6 | var ch = stream.next(); 7 | if (ch == "@") {stream.eatWhile(/[\w\\\-]/); return ret("meta", stream.current());} 8 | else if (ch == "/" && stream.eat("*")) { 9 | state.tokenize = tokenCComment; 10 | return tokenCComment(stream, state); 11 | } 12 | else if (ch == "<" && stream.eat("!")) { 13 | state.tokenize = tokenSGMLComment; 14 | return tokenSGMLComment(stream, state); 15 | } 16 | else if (ch == "=") ret(null, "compare"); 17 | else if ((ch == "~" || ch == "|") && stream.eat("=")) return ret(null, "compare"); 18 | else if (ch == "\"" || ch == "'") { 19 | state.tokenize = tokenString(ch); 20 | return state.tokenize(stream, state); 21 | } 22 | else if (ch == "#") { 23 | stream.eatWhile(/[\w\\\-]/); 24 | return ret("atom", "hash"); 25 | } 26 | else if (ch == "!") { 27 | stream.match(/^\s*\w*/); 28 | return ret("keyword", "important"); 29 | } 30 | else if (/\d/.test(ch)) { 31 | stream.eatWhile(/[\w.%]/); 32 | return ret("number", "unit"); 33 | } 34 | else if (/[,.+>*\/]/.test(ch)) { 35 | return ret(null, "select-op"); 36 | } 37 | else if (/[;{}:\[\]]/.test(ch)) { 38 | return ret(null, ch); 39 | } 40 | else { 41 | stream.eatWhile(/[\w\\\-]/); 42 | return ret("variable", "variable"); 43 | } 44 | } 45 | 46 | function tokenCComment(stream, state) { 47 | var maybeEnd = false, ch; 48 | while ((ch = stream.next()) != null) { 49 | if (maybeEnd && ch == "/") { 50 | state.tokenize = tokenBase; 51 | break; 52 | } 53 | maybeEnd = (ch == "*"); 54 | } 55 | return ret("comment", "comment"); 56 | } 57 | 58 | function tokenSGMLComment(stream, state) { 59 | var dashes = 0, ch; 60 | while ((ch = stream.next()) != null) { 61 | if (dashes >= 2 && ch == ">") { 62 | state.tokenize = tokenBase; 63 | break; 64 | } 65 | dashes = (ch == "-") ? dashes + 1 : 0; 66 | } 67 | return ret("comment", "comment"); 68 | } 69 | 70 | function tokenString(quote) { 71 | return function(stream, state) { 72 | var escaped = false, ch; 73 | while ((ch = stream.next()) != null) { 74 | if (ch == quote && !escaped) 75 | break; 76 | escaped = !escaped && ch == "\\"; 77 | } 78 | if (!escaped) state.tokenize = tokenBase; 79 | return ret("string", "string"); 80 | }; 81 | } 82 | 83 | return { 84 | startState: function(base) { 85 | return {tokenize: tokenBase, 86 | baseIndent: base || 0, 87 | stack: []}; 88 | }, 89 | 90 | token: function(stream, state) { 91 | if (stream.eatSpace()) return null; 92 | var style = state.tokenize(stream, state); 93 | 94 | var context = state.stack[state.stack.length-1]; 95 | if (type == "hash" && context == "rule") style = "atom"; 96 | else if (style == "variable") { 97 | if (context == "rule") style = "number"; 98 | else if (!context || context == "@media{") style = "tag"; 99 | } 100 | 101 | if (context == "rule" && /^[\{\};]$/.test(type)) 102 | state.stack.pop(); 103 | if (type == "{") { 104 | if (context == "@media") state.stack[state.stack.length-1] = "@media{"; 105 | else state.stack.push("{"); 106 | } 107 | else if (type == "}") state.stack.pop(); 108 | else if (type == "@media") state.stack.push("@media"); 109 | else if (context == "{" && type != "comment") state.stack.push("rule"); 110 | return style; 111 | }, 112 | 113 | indent: function(state, textAfter) { 114 | var n = state.stack.length; 115 | if (/^\}/.test(textAfter)) 116 | n -= state.stack[state.stack.length-1] == "rule" ? 2 : 1; 117 | return state.baseIndent + n * indentUnit; 118 | }, 119 | 120 | electricChars: "}" 121 | }; 122 | }); 123 | 124 | CodeMirror.defineMIME("text/css", "css"); 125 | -------------------------------------------------------------------------------- /quizzes/1-intro/codemirror/mode/css/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | CodeMirror 2: CSS mode 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

    CodeMirror 2: CSS mode

    14 |
    49 | 52 | 53 |

    MIME types defined: text/css.

    54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /quizzes/1-intro/codemirror/mode/htmlmixed/htmlmixed.js: -------------------------------------------------------------------------------- 1 | CodeMirror.defineMode("htmlmixed", function(config, parserConfig) { 2 | var htmlMode = CodeMirror.getMode(config, {name: "xml", htmlMode: true}); 3 | var jsMode = CodeMirror.getMode(config, "javascript"); 4 | var cssMode = CodeMirror.getMode(config, "css"); 5 | 6 | function html(stream, state) { 7 | var style = htmlMode.token(stream, state.htmlState); 8 | if (style == "tag" && stream.current() == ">" && state.htmlState.context) { 9 | if (/^script$/i.test(state.htmlState.context.tagName)) { 10 | state.token = javascript; 11 | state.localState = jsMode.startState(htmlMode.indent(state.htmlState, "")); 12 | state.mode = "javascript"; 13 | } 14 | else if (/^style$/i.test(state.htmlState.context.tagName)) { 15 | state.token = css; 16 | state.localState = cssMode.startState(htmlMode.indent(state.htmlState, "")); 17 | state.mode = "css"; 18 | } 19 | } 20 | return style; 21 | } 22 | function maybeBackup(stream, pat, style) { 23 | var cur = stream.current(); 24 | var close = cur.search(pat); 25 | if (close > -1) stream.backUp(cur.length - close); 26 | return style; 27 | } 28 | function javascript(stream, state) { 29 | if (stream.match(/^<\/\s*script\s*>/i, false)) { 30 | state.token = html; 31 | state.curState = null; 32 | state.mode = "html"; 33 | return html(stream, state); 34 | } 35 | return maybeBackup(stream, /<\/\s*script\s*>/, 36 | jsMode.token(stream, state.localState)); 37 | } 38 | function css(stream, state) { 39 | if (stream.match(/^<\/\s*style\s*>/i, false)) { 40 | state.token = html; 41 | state.localState = null; 42 | state.mode = "html"; 43 | return html(stream, state); 44 | } 45 | return maybeBackup(stream, /<\/\s*style\s*>/, 46 | cssMode.token(stream, state.localState)); 47 | } 48 | 49 | return { 50 | startState: function() { 51 | var state = htmlMode.startState(); 52 | return {token: html, localState: null, mode: "html", htmlState: state}; 53 | }, 54 | 55 | copyState: function(state) { 56 | if (state.localState) 57 | var local = CodeMirror.copyState(state.token == css ? cssMode : jsMode, state.localState); 58 | return {token: state.token, localState: local, mode: state.mode, 59 | htmlState: CodeMirror.copyState(htmlMode, state.htmlState)}; 60 | }, 61 | 62 | token: function(stream, state) { 63 | return state.token(stream, state); 64 | }, 65 | 66 | indent: function(state, textAfter) { 67 | if (state.token == html || /^\s*<\//.test(textAfter)) 68 | return htmlMode.indent(state.htmlState, textAfter); 69 | else if (state.token == javascript) 70 | return jsMode.indent(state.localState, textAfter); 71 | else 72 | return cssMode.indent(state.localState, textAfter); 73 | }, 74 | 75 | compareStates: function(a, b) { 76 | return htmlMode.compareStates(a.htmlState, b.htmlState); 77 | }, 78 | 79 | electricChars: "/{}:" 80 | } 81 | }); 82 | 83 | CodeMirror.defineMIME("text/html", "htmlmixed"); 84 | -------------------------------------------------------------------------------- /quizzes/1-intro/codemirror/mode/htmlmixed/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | CodeMirror 2: HTML mixed mode 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

    CodeMirror 2: HTML mixed mode

    17 |
    41 | 44 | 45 |

    The HTML mixed mode depends on the XML, JavaScript, and CSS modes.

    46 | 47 |

    MIME types defined: text/html 48 | (redefined, only takes effect if you load this parser after the 49 | XML parser).

    50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /quizzes/1-intro/codemirror/mode/javascript/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | CodeMirror 2: JavaScript mode 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

    CodeMirror 2: JavaScript mode

    14 | 15 |
    64 | 65 | 71 | 72 |

    JavaScript mode supports a single configuration 73 | option, json, which will set the mode to expect JSON 74 | data rather than a JavaScript program.

    75 | 76 |

    MIME types defined: text/javascript, application/json.

    77 | 78 | 79 | -------------------------------------------------------------------------------- /quizzes/1-intro/codemirror/mode/php/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | CodeMirror 2: PHP mode 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |

    CodeMirror 2: PHP mode

    18 | 19 |
    30 | 31 | 42 | 43 |

    Simple HTML/PHP mode based on 44 | the C-like mode. Depends on XML, 45 | JavaScript, CSS, and C-like modes.

    46 | 47 |

    MIME types defined: application/x-httpd-php (HTML with PHP code), text/x-php (plain, non-wrapped PHP code).

    48 | 49 | 50 | -------------------------------------------------------------------------------- /quizzes/1-intro/codemirror/mode/ruby/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2011, Ubalo, Inc. 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without 5 | modification, are permitted provided that the following conditions are met: 6 | * Redistributions of source code must retain the above copyright 7 | notice, this list of conditions and the following disclaimer. 8 | * Redistributions in binary form must reproduce the above copyright 9 | notice, this list of conditions and the following disclaimer in the 10 | documentation and/or other materials provided with the distribution. 11 | * Neither the name of the Ubalo, Inc. nor the names of its 12 | contributors may be used to endorse or promote products derived 13 | from this software without specific prior written permission. 14 | 15 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 16 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 17 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 18 | DISCLAIMED. IN NO EVENT SHALL UBALO, INC BE LIABLE FOR ANY 19 | DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 20 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 21 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND 22 | ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 23 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 24 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 25 | -------------------------------------------------------------------------------- /quizzes/1-intro/codemirror/mode/xml/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | CodeMirror 2: XML mode 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

    CodeMirror 2: XML mode

    14 |
    26 | 29 |

    The XML mode supports two configuration parameters:

    30 |
    31 |
    htmlMode (boolean)
    32 |
    This switches the mode to parse HTML instead of XML. This 33 | means attributes do not have to be quoted, and some elements 34 | (such as br) do not require a closing tag.
    35 |
    alignCDATA (boolean)
    36 |
    Setting this to true will force the opening tag of CDATA 37 | blocks to not be indented.
    38 |
    39 | 40 |

    MIME types defined: application/xml, text/html.

    41 | 42 | 43 | -------------------------------------------------------------------------------- /quizzes/1-intro/codemirror/mode/xmlpure/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | CodeMirror 2: Pure XML mode 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

    CodeMirror 2: XML mode

    14 |
    31 | 34 | 35 |

    This is my XML parser, based on the original:

    36 | 44 | 45 |

    What's missing:

    46 | 51 | 52 |

    MIME types defined: application/xml, text/xml.

    53 | 54 |

    @author: Dror BG (deebug dot dev at gmail dot com)
    55 |

    @date: August, 2011
    56 |

    @github: https://github.com/deebugger/CodeMirror2

    57 | 58 |

    MIME types defined: application/xml, text/xml.

    59 | 60 | 61 | -------------------------------------------------------------------------------- /quizzes/1-intro/codemirror/theme/default.css: -------------------------------------------------------------------------------- 1 | .cm-s-default span.cm-keyword {color: #708;} 2 | .cm-s-default span.cm-atom {color: #219;} 3 | .cm-s-default span.cm-number {color: #164;} 4 | .cm-s-default span.cm-def {color: #00f;} 5 | .cm-s-default span.cm-variable {color: black;} 6 | .cm-s-default span.cm-variable-2 {color: #05a;} 7 | .cm-s-default span.cm-variable-3 {color: #0a5;} 8 | .cm-s-default span.cm-property {color: black;} 9 | .cm-s-default span.cm-operator {color: black;} 10 | .cm-s-default span.cm-comment {color: #a50;} 11 | .cm-s-default span.cm-string {color: #a11;} 12 | .cm-s-default span.cm-string-2 {color: #f50;} 13 | .cm-s-default span.cm-meta {color: #555;} 14 | .cm-s-default span.cm-error {color: #f00;} 15 | .cm-s-default span.cm-qualifier {color: #555;} 16 | .cm-s-default span.cm-builtin {color: #30a;} 17 | .cm-s-default span.cm-bracket {color: #cc7;} 18 | .cm-s-default span.cm-tag {color: #170;} 19 | .cm-s-default span.cm-attribute {color: #00c;} 20 | 21 | 22 | div pre, .cm-s-default span { 23 | font-size: 16px !important; 24 | line-height: 1.4em !important; 25 | 26 | } 27 | 28 | -------------------------------------------------------------------------------- /quizzes/1-intro/css/stylus/aside.styl: -------------------------------------------------------------------------------- 1 | aside 2 | h2 3 | background url(../images/score-bg.png) no-repeat 4 | text-shadow 0 2px 0 black 5 | color #eeeddf 6 | width 139px 7 | height 78px 8 | box-sizing border-box 9 | text-transform uppercase 10 | padding-top 10px 11 | font-size 12px 12 | text-align center 13 | margin-bottom 7px 14 | 15 | span 16 | font-size 40px 17 | display block 18 | padding-top 17px 19 | font-weight normal 20 | 21 | .progress 22 | background url(../images/percentageComplete-bg.png) no-repeat 23 | height 33px 24 | width 139px 25 | font-size 12px 26 | text-shadow 0 1px 0 #9d532f 27 | color #eeeddf 28 | text-align center 29 | line-height 36px 30 | 31 | .solutions aside 32 | display none -------------------------------------------------------------------------------- /quizzes/1-intro/css/stylus/button.styl: -------------------------------------------------------------------------------- 1 | boolean-button(start, end) 2 | border-radius 40px 3 | background end 4 | background -webkit-linear-gradient(start, end) 5 | background -moz-linear-gradient(start, end) 6 | background -o-linear-gradient(start, end) 7 | background -ms-linear-gradient(start, end) 8 | background linear-gradient(start, end) 9 | outline 0 10 | 11 | .true, .false 12 | boolean-button(#bcbcbc, #858585) 13 | background end 14 | background -moz-linear-gradient(start, end) 15 | background -webkit-linear-gradient(start, end) 16 | background -o-linear-gradient(start, end) 17 | background -ms-linear-gradient(start, end) 18 | background linear-gradient(start, end) 19 | border 1px solid #8d8d8d 20 | box-shadow inset 0 2px 0 #cccccc 21 | color #fff 22 | text-shadow 0 -1px 0 #919191 23 | 24 | 25 | 26 | .true:active, 27 | .true:hover, 28 | input[type=radio]:checked + .true 29 | background #b3d662 30 | background -webkit-linear-gradient(#dceca8, #b3d662) 31 | background -moz-linear-gradient(#dceca8, #b3d662) 32 | background -o-linear-gradient(#dceca8, #b3d662) 33 | background -ms-linear-gradient(#dceca8, #b3d662) 34 | background linear-gradient(#dceca8, #b3d662) 35 | box-shadow inset 0 2px 0 #e5f1be, 0 -2px 5px #cbe190 36 | border 1px solid #9ab359 37 | color #3d3d3d 38 | text-shadow 0 1px 0 #deedb7 39 | outline 0 40 | 41 | .false:active, 42 | .false:hover, 43 | .bool input[type=radio]:checked + .false 44 | background #db4d35 45 | background -webkit-linear-gradient(#ec7e5b, #db4d35) 46 | background -moz-linear-gradient(#ec7e5b, #db4d35) 47 | background -o-linear-gradient(#ec7e5b, #db4d35) 48 | background -ms-linear-gradient(#ec7e5b, #db4d35) 49 | background linear-gradient(#ec7e5b, #db4d35) 50 | box-shadow inset 0 2px 0 #f0997e, 0 -1px 2px darken(#f0997e, 1%) 51 | border 1px solid #de5941 52 | color #fff 53 | text-shadow 0 -1px 0 #c25e43 -------------------------------------------------------------------------------- /quizzes/1-intro/css/stylus/crumbs.styl: -------------------------------------------------------------------------------- 1 | .quiz-crumbs 2 | border-bottom 1px dashed #d0cfc3 3 | 4 | li 5 | display inline 6 | 7 | &:after 8 | content: '\\' 9 | color black-shade 10 | padding-left 5px 11 | padding-right 5px 12 | 13 | &:last-child 14 | font-weight bold 15 | 16 | &:after 17 | content: none 18 | 19 | .quiz-crumbs.wrap 20 | padding-bottom 15px 21 | padding-top 12px -------------------------------------------------------------------------------- /quizzes/1-intro/css/stylus/headings.styl: -------------------------------------------------------------------------------- 1 | h1, h2, h3, h4, h5, h6 2 | color #494949 3 | font-family sans-serif 4 | line-height 1.2em 5 | margin-bottom 15px 6 | 7 | h1, h2 8 | font-family 'MuseoSansRounded-700', sans-serif 9 | letter-spacing -.5px 10 | 11 | h1 12 | font-size 40px 13 | color #322d2d 14 | 15 | h2 16 | font-size 32px 17 | font-weight bold 18 | 19 | h2 span 20 | color #818181 21 | 22 | h3 23 | font-size 24px 24 | font-family 'MuseoSansRounded-700', sans-serif 25 | margin-bottom 10px 26 | line-height: 30px; 27 | 28 | code 29 | line-height: 1.3em 30 | 31 | h4 32 | font-size 14px 33 | font-weight bold 34 | margin-bottom 5px 35 | 36 | h5 37 | font-size 18px 38 | font-style italic 39 | margin-bottom 5px 40 | 41 | h6 42 | font-size 14px 43 | margin-bottom 5px 44 | -------------------------------------------------------------------------------- /quizzes/1-intro/css/stylus/links.styl: -------------------------------------------------------------------------------- 1 | a:link, a:visited { 2 | color: #e56718; 3 | } 4 | a:hover { 5 | color: #000; 6 | } 7 | a:active { 8 | color: #e56718; 9 | } -------------------------------------------------------------------------------- /quizzes/1-intro/css/stylus/main.styl: -------------------------------------------------------------------------------- 1 | .wrap 2 | overflow hidden 3 | width 1000px 4 | padding-bottom 40px 5 | margin auto 6 | 7 | #content-wrap 8 | overflow hidden 9 | min-width 1000px 10 | padding-bottom 40px 11 | 12 | .content 13 | margin auto 14 | width 1000px 15 | padding-top 20px 16 | overflow hidden 17 | 18 | .primary-content 19 | float left 20 | width 840px 21 | margin-right 20px 22 | position relative 23 | z-index 2 24 | 25 | aside 26 | float right 27 | width 139px 28 | box-sizing border-box -------------------------------------------------------------------------------- /quizzes/1-intro/css/stylus/mixins.styl: -------------------------------------------------------------------------------- 1 | transform(style) 2 | -webkit-transform style 3 | -moz-transform style 4 | -o-transform style 5 | -ms-transform style -------------------------------------------------------------------------------- /quizzes/1-intro/css/stylus/questions.styl: -------------------------------------------------------------------------------- 1 | .question, #results 2 | padding 35px 80px 3 | box-sizing border-box 4 | border 1px solid #d3d3ca 5 | position relative 6 | background white 7 | 8 | h3 9 | font-size 16px 10 | color #494949 11 | text-shadow 0 1px 0 white 12 | margin-bottom 25px 13 | margin-right 40px 14 | font-family sans-serif 15 | 16 | .question 17 | margin-bottom 10px 18 | 19 | input[type=text] 20 | font-size 14px 21 | 22 | // Circular bubble with the current question number 23 | span.count 24 | background #edecde 25 | border 1px solid #d4d3c7 26 | color #494949 27 | text-shadow 0 1px 0 #72726e 28 | border-radius 100px 29 | padding 4px 8px 30 | font-size 12px 31 | font-weight normal 32 | margin-left -55px 33 | margin-right 22px 34 | position relative 35 | top -2px 36 | 37 | 38 | 39 | // True or False 40 | .question .bool 41 | overflow hidden 42 | background url(../images/stripeBG.png) 43 | padding 21px 44 | float left 45 | 46 | .bool li 47 | float left 48 | margin-right 20px 49 | 50 | &:last-child 51 | margin-right 0 52 | 53 | .bool input[type=radio] 54 | width 20px 55 | -webkit-appearance none 56 | 57 | .bool label 58 | width 185px 59 | height 34px 60 | line-height 34px 61 | display inline-block 62 | text-align center 63 | font-weight bold 64 | margin-left -25px 65 | cursor pointer 66 | 67 | .correct 68 | box-shadow inset 0 0 0 4px #b8d86b; 69 | 70 | .incorrect 71 | box-shadow inset 0 0 0 4px #f8734a; 72 | 73 | .no-boxshadow 74 | .correct 75 | outline 4px solid #b8d86b 76 | .incorrect 77 | outline 4px solid #f8734a 78 | 79 | span.divider 80 | display: block; 81 | color: red; 82 | clear: left; 83 | float: left; 84 | width: 83%; 85 | margin-top: 50px; 86 | border-top: 1px dashed #e5e5e5; 87 | 88 | // Textareas 89 | .CodeMirror 90 | min-height 150px 91 | border-radius 5px 92 | padding 20px 93 | border 1px solid #e5e5e5 94 | 95 | .CodeMirror-focused 96 | box-shadow 0 0 0 1px #fbbc4b, 0 0 0 2px #fff0d7, 0 0 0 3px #fff6e6 97 | 98 | .CodeMirror-scroll 99 | height auto 100 | 101 | // Multiple Choice 102 | .multiple 103 | background url(../images/stripeBG.png) 104 | text-align center 105 | padding 30px 0 106 | height 40px 107 | 108 | li 109 | display inline 110 | margin-right 48px 111 | font-size 16px 112 | line-height 40px 113 | 114 | &:last-child 115 | margin-right 0 116 | 117 | input 118 | margin-right 10px 119 | cursor pointer 120 | 121 | label 122 | cursor pointer 123 | 124 | 125 | 126 | .multiple input:checked:before, 127 | .multiple input[type=radio] 128 | position:absolute; 129 | clip rect(0,0,0,0); 130 | clip rect(0 0 0 0); 131 | 132 | 133 | .multiple input[type="radio"] + label:before 134 | content url('../images/radio-on.png'); /* preload hover state */ 135 | content url('../images/radio-off.png'); 136 | position relative 137 | top 2px 138 | margin-right 10px 139 | 140 | 141 | .multiple input[type="radio"]:checked + label:before, 142 | .multiple input[type="radio"]:hover + label:before 143 | content url('../images/radio-on.png'); 144 | 145 | 146 | 147 | 148 | // Text Entry 149 | .question input[type=text] 150 | border-radius 5px 151 | border 1px solid #e5e5e5 152 | padding 0 10px 153 | height 45px 154 | width 60% 155 | outline 0 156 | 157 | &:focus, &:hover 158 | box-shadow 0 0 0 1px #fbbc4b, 0 0 0 2px #fff0d7, 0 0 0 3px #fff6e6 159 | 160 | // Solutions 161 | .solutions 162 | span.divider 163 | display none 164 | 165 | .question 166 | min-height 100% 167 | padding-bottom 60px 168 | 169 | // When no notes are provided 170 | + .question 171 | margin-top 40px 172 | 173 | .question input[type=submit] 174 | display none 175 | 176 | .notes 177 | margin-top 25px 178 | margin-bottom 60px 179 | padding-left 10px 180 | border-left 10px solid #fbbc4b 181 | 182 | p 183 | padding-bottom 0 184 | 185 | mark 186 | background none 187 | color #494949 188 | 189 | 190 | .question form 191 | clearfix() 192 | 193 | 194 | .textarea h3:after 195 | content attr(data-syntax); 196 | background #E56718; 197 | color white; 198 | padding .5em 1em; 199 | text-shadow 0 1px 0 #80390D; 200 | position absolute; 201 | right 0; 202 | top 0; 203 | font-family monospace; 204 | font-size .8em; -------------------------------------------------------------------------------- /quizzes/1-intro/css/stylus/reset.styl: -------------------------------------------------------------------------------- 1 | html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td 2 | margin 0 3 | padding 0 4 | border 0 5 | outline 0 6 | font-weight inherit 7 | font-style inherit 8 | font-size 100% 9 | font-family inherit 10 | vertical-align baseline 11 | 12 | focus 13 | outline 0 14 | 15 | html 16 | overflow-y scroll 17 | 18 | body 19 | color #444 20 | background-color #f1f0e2 21 | background url(../images/bg-content.jpg) 22 | font 12px/20px sans-serif 23 | 24 | p 25 | padding-bottom 30px 26 | color #494949 27 | font-size 14px 28 | 29 | ol, ul 30 | list-style none 31 | 32 | code 33 | font-family Courier, "Courier New", "Lucida Console", Monaco 34 | background #e8e7d9 35 | padding 3px 5px 36 | font-size .8em 37 | display inline-block 38 | 39 | table 40 | border-collapse separate 41 | border-spacing 0 42 | 43 | caption, th, td 44 | text-align left 45 | font-weight normal 46 | 47 | blockquotebefore, blockquoteafter, qbefore, qafter 48 | content "" 49 | 50 | blockquote, q 51 | quotes "" "" 52 | 53 | acronym 54 | cursor help 55 | border-bottom 1px dashed #333 56 | 57 | strong 58 | font-weight bold 59 | 60 | cite, 61 | em, 62 | i 63 | font-style italic 64 | 65 | .right 66 | float right 67 | 68 | .left 69 | float left 70 | 71 | .hide, 72 | .screen-reader-text 73 | display none !important 74 | 75 | selection 76 | background #fdd283 77 | color #000 78 | 79 | -moz-selection 80 | background #fdd283 81 | color #000 82 | 83 | .clear 84 | clear both 85 | display block 86 | overflow hidden 87 | visibility hidden 88 | width 0 89 | height 0 90 | 91 | // Mixin 92 | clearfix() 93 | zoom 1 94 | &:before, &:after 95 | content '' 96 | display block 97 | overflow hidden 98 | visibility hidden 99 | width 0 100 | height 0 101 | &:after 102 | clear both -------------------------------------------------------------------------------- /quizzes/1-intro/css/stylus/results.styl: -------------------------------------------------------------------------------- 1 | #results 2 | background white 3 | text-align center 4 | padding 35px 220px 0 5 | 6 | h2 7 | color #494949 8 | margin-bottom 35px 9 | 10 | a 11 | float none 12 | display inline-block 13 | 14 | p 15 | font-size 14px 16 | color #494949 17 | margin 20px 0 18 | line-height 1.7em 19 | 20 | .score 21 | display block 22 | font-family 'MuseoSansRounded-700', sans-serif 23 | font-size 90px 24 | margin-top 40px -------------------------------------------------------------------------------- /quizzes/1-intro/css/stylus/shadowEffects.styl: -------------------------------------------------------------------------------- 1 | flipped(direction) 2 | content '' 3 | position absolute 4 | z-index -1 5 | bottom 15px 6 | width 70% 7 | height 20% 8 | 9 | box-shadow 0 15px 10px -2px rgba(0, 0, 0, .2) 10 | display block 11 | 12 | if direction == 'left' 13 | transform(rotate(-3deg)); 14 | left 10px 15 | else 16 | transform(rotate(3deg)); 17 | right 10px 18 | 19 | .fancy-shadow:after 20 | flipped(left) 21 | 22 | .fancy-shadow:before 23 | flipped(right) 24 | 25 | // Stupid browser bug means I can't combine these four 26 | .fancy-shadow.correct:after, 27 | .fancy-shadow.correct:before 28 | content: none 29 | 30 | .fancy-shadow.incorrect:after, 31 | .fancy-shadow.incorrect:before 32 | content: none 33 | -------------------------------------------------------------------------------- /quizzes/1-intro/css/stylus/style.styl: -------------------------------------------------------------------------------- 1 | black-shade = #494949 2 | grey = #d0cfc3 3 | 4 | @import 'mixins.styl' 5 | @import 'reset.styl' 6 | @import 'links.styl' 7 | @import 'headings.styl' 8 | @import 'crumbs.styl' 9 | @import 'header.styl' 10 | @import 'orange-button.styl' 11 | @import 'button.styl' 12 | @import 'questions.styl' 13 | @import 'results.styl' 14 | @import 'shadowEffects.styl' 15 | @import 'main.styl' 16 | @import 'aside.styl' 17 | @import '../../codemirror/lib/codemirror' 18 | @import '../../codemirror/theme/default' -------------------------------------------------------------------------------- /quizzes/1-intro/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/1-intro/favicon.ico -------------------------------------------------------------------------------- /quizzes/1-intro/iframe.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 |
    18 | 19 |
    20 | 21 |
    22 | 23 | 24 | 25 | 33 | 34 | 43 | 44 | -------------------------------------------------------------------------------- /quizzes/1-intro/images/bg-body.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/1-intro/images/bg-body.jpg -------------------------------------------------------------------------------- /quizzes/1-intro/images/bg-content-shadow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/1-intro/images/bg-content-shadow.png -------------------------------------------------------------------------------- /quizzes/1-intro/images/bg-content-top.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/1-intro/images/bg-content-top.jpg -------------------------------------------------------------------------------- /quizzes/1-intro/images/bg-content.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/1-intro/images/bg-content.jpg -------------------------------------------------------------------------------- /quizzes/1-intro/images/bg-header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/1-intro/images/bg-header.jpg -------------------------------------------------------------------------------- /quizzes/1-intro/images/bool-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/1-intro/images/bool-bg.png -------------------------------------------------------------------------------- /quizzes/1-intro/images/false.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/1-intro/images/false.png -------------------------------------------------------------------------------- /quizzes/1-intro/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/1-intro/images/logo.png -------------------------------------------------------------------------------- /quizzes/1-intro/images/percentageComplete-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/1-intro/images/percentageComplete-bg.png -------------------------------------------------------------------------------- /quizzes/1-intro/images/radio-off.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/1-intro/images/radio-off.png -------------------------------------------------------------------------------- /quizzes/1-intro/images/radio-on.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/1-intro/images/radio-on.png -------------------------------------------------------------------------------- /quizzes/1-intro/images/radioButton.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/1-intro/images/radioButton.png -------------------------------------------------------------------------------- /quizzes/1-intro/images/score-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/1-intro/images/score-bg.png -------------------------------------------------------------------------------- /quizzes/1-intro/images/sprite-mini-icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/1-intro/images/sprite-mini-icons.png -------------------------------------------------------------------------------- /quizzes/1-intro/images/sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/1-intro/images/sprite.png -------------------------------------------------------------------------------- /quizzes/1-intro/images/stripeBG.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/1-intro/images/stripeBG.png -------------------------------------------------------------------------------- /quizzes/1-intro/images/texture.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/1-intro/images/texture.jpg -------------------------------------------------------------------------------- /quizzes/1-intro/images/texture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/1-intro/images/texture.png -------------------------------------------------------------------------------- /quizzes/1-intro/images/true.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/1-intro/images/true.png -------------------------------------------------------------------------------- /quizzes/1-intro/images/tuts.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/1-intro/images/tuts.jpg -------------------------------------------------------------------------------- /quizzes/1-intro/images/twitter-bird.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/1-intro/images/twitter-bird.png -------------------------------------------------------------------------------- /quizzes/1-intro/ruby.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/1-intro/ruby.jpeg -------------------------------------------------------------------------------- /quizzes/2-effects/codemirror/lib/codemirror.styl: -------------------------------------------------------------------------------- 1 | .CodeMirror { 2 | line-height: 1em; 3 | font-family: monospace; 4 | } 5 | 6 | .CodeMirror-scroll { 7 | overflow: auto; 8 | height: 300px; 9 | /* This is needed to prevent an IE[67] bug where the scrolled content 10 | is visible outside of the scrolling box. */ 11 | position: relative; 12 | } 13 | 14 | .CodeMirror-gutter { 15 | position: absolute; left: 0; top: 0; 16 | z-index: 10; 17 | background-color: #f7f7f7; 18 | border-right: 1px solid #eee; 19 | min-width: 2em; 20 | height: 100%; 21 | } 22 | .CodeMirror-gutter-text { 23 | color: #aaa; 24 | text-align: right; 25 | padding: .4em .2em .4em .4em; 26 | white-space: pre !important; 27 | } 28 | .CodeMirror-lines { 29 | padding: .4em; 30 | } 31 | 32 | .CodeMirror pre { 33 | -moz-border-radius: 0; 34 | -webkit-border-radius: 0; 35 | -o-border-radius: 0; 36 | border-radius: 0; 37 | border-width: 0; margin: 0; padding: 0; background: transparent; 38 | font-family: inherit; 39 | font-size: inherit; 40 | padding: 0; margin: 0; 41 | white-space: pre; 42 | word-wrap: normal; 43 | } 44 | 45 | .CodeMirror-wrap pre { 46 | word-wrap: break-word; 47 | white-space: pre-wrap; 48 | } 49 | .CodeMirror-wrap .CodeMirror-scroll { 50 | overflow-x: hidden; 51 | } 52 | 53 | .CodeMirror textarea { 54 | outline: none !important; 55 | } 56 | 57 | .CodeMirror pre.CodeMirror-cursor { 58 | z-index: 10; 59 | position: absolute; 60 | visibility: hidden; 61 | border-left: 1px solid black; 62 | } 63 | .CodeMirror-focused pre.CodeMirror-cursor { 64 | visibility: visible; 65 | } 66 | 67 | span.CodeMirror-selected { background: #d9d9d9; } 68 | .CodeMirror-focused span.CodeMirror-selected { background: #d2dcf8; } 69 | 70 | .CodeMirror-searching {background: #ffa;} 71 | 72 | /* Default theme */ 73 | 74 | .cm-s-default span.cm-keyword {color: #708;} 75 | .cm-s-default span.cm-atom {color: #219;} 76 | .cm-s-default span.cm-number {color: #164;} 77 | .cm-s-default span.cm-def {color: #00f;} 78 | .cm-s-default span.cm-variable {color: black;} 79 | .cm-s-default span.cm-variable-2 {color: #05a;} 80 | .cm-s-default span.cm-variable-3 {color: #085;} 81 | .cm-s-default span.cm-property {color: black;} 82 | .cm-s-default span.cm-operator {color: black;} 83 | .cm-s-default span.cm-comment {color: #a50;} 84 | .cm-s-default span.cm-string {color: #a11;} 85 | .cm-s-default span.cm-string-2 {color: #f50;} 86 | .cm-s-default span.cm-meta {color: #555;} 87 | .cm-s-default span.cm-error {color: #f00;} 88 | .cm-s-default span.cm-qualifier {color: #555;} 89 | .cm-s-default span.cm-builtin {color: #30a;} 90 | .cm-s-default span.cm-bracket {color: #cc7;} 91 | .cm-s-default span.cm-tag {color: #170;} 92 | .cm-s-default span.cm-attribute {color: #00c;} 93 | .cm-s-default span.cm-header {color: #a0a;} 94 | .cm-s-default span.cm-quote {color: #090;} 95 | .cm-s-default span.cm-hr {color: #999;} 96 | .cm-s-default span.cm-link {color: #00c;} 97 | 98 | span.cm-header, span.cm-strong {font-weight: bold;} 99 | span.cm-em {font-style: italic;} 100 | span.cm-emstrong {font-style: italic; font-weight: bold;} 101 | span.cm-link {text-decoration: underline;} 102 | 103 | div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;} 104 | div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;} 105 | 106 | iframe.sandbox { 107 | width: 100%; 108 | margin-top: 40px; 109 | } -------------------------------------------------------------------------------- /quizzes/2-effects/codemirror/lib/overlay.js: -------------------------------------------------------------------------------- 1 | // Utility function that allows modes to be combined. The mode given 2 | // as the base argument takes care of most of the normal mode 3 | // functionality, but a second (typically simple) mode is used, which 4 | // can override the style of text. Both modes get to parse all of the 5 | // text, but when both assign a non-null style to a piece of code, the 6 | // overlay wins, unless the combine argument was true, in which case 7 | // the styles are combined. 8 | 9 | CodeMirror.overlayParser = function(base, overlay, combine) { 10 | return { 11 | startState: function() { 12 | return { 13 | base: CodeMirror.startState(base), 14 | overlay: CodeMirror.startState(overlay), 15 | basePos: 0, baseCur: null, 16 | overlayPos: 0, overlayCur: null 17 | }; 18 | }, 19 | copyState: function(state) { 20 | return { 21 | base: CodeMirror.copyState(base, state.base), 22 | overlay: CodeMirror.copyState(overlay, state.overlay), 23 | basePos: state.basePos, baseCur: null, 24 | overlayPos: state.overlayPos, overlayCur: null 25 | }; 26 | }, 27 | 28 | token: function(stream, state) { 29 | if (stream.start == state.basePos) { 30 | state.baseCur = base.token(stream, state.base); 31 | state.basePos = stream.pos; 32 | } 33 | if (stream.start == state.overlayPos) { 34 | stream.pos = stream.start; 35 | state.overlayCur = overlay.token(stream, state.overlay); 36 | state.overlayPos = stream.pos; 37 | } 38 | stream.pos = Math.min(state.basePos, state.overlayPos); 39 | if (stream.eol()) state.basePos = state.overlayPos = 0; 40 | 41 | if (state.overlayCur == null) return state.baseCur; 42 | if (state.baseCur != null && combine) return state.baseCur + " " + state.overlayCur; 43 | else return state.overlayCur; 44 | }, 45 | 46 | indent: function(state, textAfter) { 47 | return base.indent(state.base, textAfter); 48 | }, 49 | electricChars: base.electricChars 50 | }; 51 | }; 52 | -------------------------------------------------------------------------------- /quizzes/2-effects/codemirror/lib/runmode.js: -------------------------------------------------------------------------------- 1 | CodeMirror.runMode = function(string, modespec, callback) { 2 | var mode = CodeMirror.getMode({indentUnit: 2}, modespec); 3 | var isNode = callback.nodeType == 1; 4 | if (isNode) { 5 | var node = callback, accum = []; 6 | callback = function(string, style) { 7 | if (string == "\n") 8 | accum.push("
    "); 9 | else if (style) 10 | accum.push("" + CodeMirror.htmlEscape(string) + ""); 11 | else 12 | accum.push(CodeMirror.htmlEscape(string)); 13 | } 14 | } 15 | var lines = CodeMirror.splitLines(string), state = CodeMirror.startState(mode); 16 | for (var i = 0, e = lines.length; i < e; ++i) { 17 | if (i) callback("\n"); 18 | var stream = new CodeMirror.StringStream(lines[i]); 19 | while (!stream.eol()) { 20 | var style = mode.token(stream, state); 21 | callback(stream.current(), style, i, stream.start); 22 | stream.start = stream.pos; 23 | } 24 | } 25 | if (isNode) 26 | node.innerHTML = accum.join(""); 27 | }; 28 | -------------------------------------------------------------------------------- /quizzes/2-effects/codemirror/mode/coffeescript/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2011 Jeff Pickhardt 4 | Modified from the Python CodeMirror mode, Copyright (c) 2010 Timothy Farrell 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. -------------------------------------------------------------------------------- /quizzes/2-effects/codemirror/mode/css/css.js: -------------------------------------------------------------------------------- 1 | CodeMirror.defineMode("css", function(config) { 2 | var indentUnit = config.indentUnit, type; 3 | function ret(style, tp) {type = tp; return style;} 4 | 5 | function tokenBase(stream, state) { 6 | var ch = stream.next(); 7 | if (ch == "@") {stream.eatWhile(/[\w\\\-]/); return ret("meta", stream.current());} 8 | else if (ch == "/" && stream.eat("*")) { 9 | state.tokenize = tokenCComment; 10 | return tokenCComment(stream, state); 11 | } 12 | else if (ch == "<" && stream.eat("!")) { 13 | state.tokenize = tokenSGMLComment; 14 | return tokenSGMLComment(stream, state); 15 | } 16 | else if (ch == "=") ret(null, "compare"); 17 | else if ((ch == "~" || ch == "|") && stream.eat("=")) return ret(null, "compare"); 18 | else if (ch == "\"" || ch == "'") { 19 | state.tokenize = tokenString(ch); 20 | return state.tokenize(stream, state); 21 | } 22 | else if (ch == "#") { 23 | stream.eatWhile(/[\w\\\-]/); 24 | return ret("atom", "hash"); 25 | } 26 | else if (ch == "!") { 27 | stream.match(/^\s*\w*/); 28 | return ret("keyword", "important"); 29 | } 30 | else if (/\d/.test(ch)) { 31 | stream.eatWhile(/[\w.%]/); 32 | return ret("number", "unit"); 33 | } 34 | else if (/[,.+>*\/]/.test(ch)) { 35 | return ret(null, "select-op"); 36 | } 37 | else if (/[;{}:\[\]]/.test(ch)) { 38 | return ret(null, ch); 39 | } 40 | else { 41 | stream.eatWhile(/[\w\\\-]/); 42 | return ret("variable", "variable"); 43 | } 44 | } 45 | 46 | function tokenCComment(stream, state) { 47 | var maybeEnd = false, ch; 48 | while ((ch = stream.next()) != null) { 49 | if (maybeEnd && ch == "/") { 50 | state.tokenize = tokenBase; 51 | break; 52 | } 53 | maybeEnd = (ch == "*"); 54 | } 55 | return ret("comment", "comment"); 56 | } 57 | 58 | function tokenSGMLComment(stream, state) { 59 | var dashes = 0, ch; 60 | while ((ch = stream.next()) != null) { 61 | if (dashes >= 2 && ch == ">") { 62 | state.tokenize = tokenBase; 63 | break; 64 | } 65 | dashes = (ch == "-") ? dashes + 1 : 0; 66 | } 67 | return ret("comment", "comment"); 68 | } 69 | 70 | function tokenString(quote) { 71 | return function(stream, state) { 72 | var escaped = false, ch; 73 | while ((ch = stream.next()) != null) { 74 | if (ch == quote && !escaped) 75 | break; 76 | escaped = !escaped && ch == "\\"; 77 | } 78 | if (!escaped) state.tokenize = tokenBase; 79 | return ret("string", "string"); 80 | }; 81 | } 82 | 83 | return { 84 | startState: function(base) { 85 | return {tokenize: tokenBase, 86 | baseIndent: base || 0, 87 | stack: []}; 88 | }, 89 | 90 | token: function(stream, state) { 91 | if (stream.eatSpace()) return null; 92 | var style = state.tokenize(stream, state); 93 | 94 | var context = state.stack[state.stack.length-1]; 95 | if (type == "hash" && context == "rule") style = "atom"; 96 | else if (style == "variable") { 97 | if (context == "rule") style = "number"; 98 | else if (!context || context == "@media{") style = "tag"; 99 | } 100 | 101 | if (context == "rule" && /^[\{\};]$/.test(type)) 102 | state.stack.pop(); 103 | if (type == "{") { 104 | if (context == "@media") state.stack[state.stack.length-1] = "@media{"; 105 | else state.stack.push("{"); 106 | } 107 | else if (type == "}") state.stack.pop(); 108 | else if (type == "@media") state.stack.push("@media"); 109 | else if (context == "{" && type != "comment") state.stack.push("rule"); 110 | return style; 111 | }, 112 | 113 | indent: function(state, textAfter) { 114 | var n = state.stack.length; 115 | if (/^\}/.test(textAfter)) 116 | n -= state.stack[state.stack.length-1] == "rule" ? 2 : 1; 117 | return state.baseIndent + n * indentUnit; 118 | }, 119 | 120 | electricChars: "}" 121 | }; 122 | }); 123 | 124 | CodeMirror.defineMIME("text/css", "css"); 125 | -------------------------------------------------------------------------------- /quizzes/2-effects/codemirror/mode/css/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | CodeMirror 2: CSS mode 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

    CodeMirror 2: CSS mode

    14 |
    49 | 52 | 53 |

    MIME types defined: text/css.

    54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /quizzes/2-effects/codemirror/mode/htmlmixed/htmlmixed.js: -------------------------------------------------------------------------------- 1 | CodeMirror.defineMode("htmlmixed", function(config, parserConfig) { 2 | var htmlMode = CodeMirror.getMode(config, {name: "xml", htmlMode: true}); 3 | var jsMode = CodeMirror.getMode(config, "javascript"); 4 | var cssMode = CodeMirror.getMode(config, "css"); 5 | 6 | function html(stream, state) { 7 | var style = htmlMode.token(stream, state.htmlState); 8 | if (style == "tag" && stream.current() == ">" && state.htmlState.context) { 9 | if (/^script$/i.test(state.htmlState.context.tagName)) { 10 | state.token = javascript; 11 | state.localState = jsMode.startState(htmlMode.indent(state.htmlState, "")); 12 | state.mode = "javascript"; 13 | } 14 | else if (/^style$/i.test(state.htmlState.context.tagName)) { 15 | state.token = css; 16 | state.localState = cssMode.startState(htmlMode.indent(state.htmlState, "")); 17 | state.mode = "css"; 18 | } 19 | } 20 | return style; 21 | } 22 | function maybeBackup(stream, pat, style) { 23 | var cur = stream.current(); 24 | var close = cur.search(pat); 25 | if (close > -1) stream.backUp(cur.length - close); 26 | return style; 27 | } 28 | function javascript(stream, state) { 29 | if (stream.match(/^<\/\s*script\s*>/i, false)) { 30 | state.token = html; 31 | state.curState = null; 32 | state.mode = "html"; 33 | return html(stream, state); 34 | } 35 | return maybeBackup(stream, /<\/\s*script\s*>/, 36 | jsMode.token(stream, state.localState)); 37 | } 38 | function css(stream, state) { 39 | if (stream.match(/^<\/\s*style\s*>/i, false)) { 40 | state.token = html; 41 | state.localState = null; 42 | state.mode = "html"; 43 | return html(stream, state); 44 | } 45 | return maybeBackup(stream, /<\/\s*style\s*>/, 46 | cssMode.token(stream, state.localState)); 47 | } 48 | 49 | return { 50 | startState: function() { 51 | var state = htmlMode.startState(); 52 | return {token: html, localState: null, mode: "html", htmlState: state}; 53 | }, 54 | 55 | copyState: function(state) { 56 | if (state.localState) 57 | var local = CodeMirror.copyState(state.token == css ? cssMode : jsMode, state.localState); 58 | return {token: state.token, localState: local, mode: state.mode, 59 | htmlState: CodeMirror.copyState(htmlMode, state.htmlState)}; 60 | }, 61 | 62 | token: function(stream, state) { 63 | return state.token(stream, state); 64 | }, 65 | 66 | indent: function(state, textAfter) { 67 | if (state.token == html || /^\s*<\//.test(textAfter)) 68 | return htmlMode.indent(state.htmlState, textAfter); 69 | else if (state.token == javascript) 70 | return jsMode.indent(state.localState, textAfter); 71 | else 72 | return cssMode.indent(state.localState, textAfter); 73 | }, 74 | 75 | compareStates: function(a, b) { 76 | return htmlMode.compareStates(a.htmlState, b.htmlState); 77 | }, 78 | 79 | electricChars: "/{}:" 80 | } 81 | }); 82 | 83 | CodeMirror.defineMIME("text/html", "htmlmixed"); 84 | -------------------------------------------------------------------------------- /quizzes/2-effects/codemirror/mode/htmlmixed/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | CodeMirror 2: HTML mixed mode 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

    CodeMirror 2: HTML mixed mode

    17 |
    41 | 44 | 45 |

    The HTML mixed mode depends on the XML, JavaScript, and CSS modes.

    46 | 47 |

    MIME types defined: text/html 48 | (redefined, only takes effect if you load this parser after the 49 | XML parser).

    50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /quizzes/2-effects/codemirror/mode/javascript/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | CodeMirror 2: JavaScript mode 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

    CodeMirror 2: JavaScript mode

    14 | 15 |
    64 | 65 | 71 | 72 |

    JavaScript mode supports a single configuration 73 | option, json, which will set the mode to expect JSON 74 | data rather than a JavaScript program.

    75 | 76 |

    MIME types defined: text/javascript, application/json.

    77 | 78 | 79 | -------------------------------------------------------------------------------- /quizzes/2-effects/codemirror/mode/php/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | CodeMirror 2: PHP mode 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |

    CodeMirror 2: PHP mode

    18 | 19 |
    30 | 31 | 42 | 43 |

    Simple HTML/PHP mode based on 44 | the C-like mode. Depends on XML, 45 | JavaScript, CSS, and C-like modes.

    46 | 47 |

    MIME types defined: application/x-httpd-php (HTML with PHP code), text/x-php (plain, non-wrapped PHP code).

    48 | 49 | 50 | -------------------------------------------------------------------------------- /quizzes/2-effects/codemirror/mode/ruby/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2011, Ubalo, Inc. 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without 5 | modification, are permitted provided that the following conditions are met: 6 | * Redistributions of source code must retain the above copyright 7 | notice, this list of conditions and the following disclaimer. 8 | * Redistributions in binary form must reproduce the above copyright 9 | notice, this list of conditions and the following disclaimer in the 10 | documentation and/or other materials provided with the distribution. 11 | * Neither the name of the Ubalo, Inc. nor the names of its 12 | contributors may be used to endorse or promote products derived 13 | from this software without specific prior written permission. 14 | 15 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 16 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 17 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 18 | DISCLAIMED. IN NO EVENT SHALL UBALO, INC BE LIABLE FOR ANY 19 | DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 20 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 21 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND 22 | ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 23 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 24 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 25 | -------------------------------------------------------------------------------- /quizzes/2-effects/codemirror/mode/xml/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | CodeMirror 2: XML mode 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

    CodeMirror 2: XML mode

    14 |
    26 | 29 |

    The XML mode supports two configuration parameters:

    30 |
    31 |
    htmlMode (boolean)
    32 |
    This switches the mode to parse HTML instead of XML. This 33 | means attributes do not have to be quoted, and some elements 34 | (such as br) do not require a closing tag.
    35 |
    alignCDATA (boolean)
    36 |
    Setting this to true will force the opening tag of CDATA 37 | blocks to not be indented.
    38 |
    39 | 40 |

    MIME types defined: application/xml, text/html.

    41 | 42 | 43 | -------------------------------------------------------------------------------- /quizzes/2-effects/codemirror/mode/xmlpure/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | CodeMirror 2: Pure XML mode 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

    CodeMirror 2: XML mode

    14 |
    31 | 34 | 35 |

    This is my XML parser, based on the original:

    36 | 44 | 45 |

    What's missing:

    46 | 51 | 52 |

    MIME types defined: application/xml, text/xml.

    53 | 54 |

    @author: Dror BG (deebug dot dev at gmail dot com)
    55 |

    @date: August, 2011
    56 |

    @github: https://github.com/deebugger/CodeMirror2

    57 | 58 |

    MIME types defined: application/xml, text/xml.

    59 | 60 | 61 | -------------------------------------------------------------------------------- /quizzes/2-effects/codemirror/theme/default.styl: -------------------------------------------------------------------------------- 1 | .cm-s-default span.cm-keyword {color: #708;} 2 | .cm-s-default span.cm-atom {color: #219;} 3 | .cm-s-default span.cm-number {color: #164;} 4 | .cm-s-default span.cm-def {color: #00f;} 5 | .cm-s-default span.cm-variable {color: black;} 6 | .cm-s-default span.cm-variable-2 {color: #05a;} 7 | .cm-s-default span.cm-variable-3 {color: #0a5;} 8 | .cm-s-default span.cm-property {color: black;} 9 | .cm-s-default span.cm-operator {color: black;} 10 | .cm-s-default span.cm-comment {color: #a50;} 11 | .cm-s-default span.cm-string {color: #a11;} 12 | .cm-s-default span.cm-string-2 {color: #f50;} 13 | .cm-s-default span.cm-meta {color: #555;} 14 | .cm-s-default span.cm-error {color: #f00;} 15 | .cm-s-default span.cm-qualifier {color: #555;} 16 | .cm-s-default span.cm-builtin {color: #30a;} 17 | .cm-s-default span.cm-bracket {color: #cc7;} 18 | .cm-s-default span.cm-tag {color: #170;} 19 | .cm-s-default span.cm-attribute {color: #00c;} 20 | 21 | 22 | div pre, .cm-s-default span { 23 | font-size: 16px !important; 24 | line-height: 1.4em !important; 25 | 26 | } 27 | 28 | -------------------------------------------------------------------------------- /quizzes/2-effects/css/header.css: -------------------------------------------------------------------------------- 1 | #header-wrap { 2 | background: #373232 url("images/bg-header.jpg") repeat-x 0 0; 3 | min-width: 1000px; 4 | } 5 | -------------------------------------------------------------------------------- /quizzes/2-effects/css/stylus/aside.styl: -------------------------------------------------------------------------------- 1 | aside 2 | h2 3 | background url(../images/score-bg.png) no-repeat 4 | text-shadow 0 2px 0 black 5 | color #eeeddf 6 | width 139px 7 | height 78px 8 | box-sizing border-box 9 | text-transform uppercase 10 | padding-top 10px 11 | font-size 12px 12 | text-align center 13 | margin-bottom 7px 14 | 15 | span 16 | font-size 40px 17 | display block 18 | padding-top 17px 19 | font-weight normal 20 | 21 | .progress 22 | background url(../images/percentageComplete-bg.png) no-repeat 23 | height 33px 24 | width 139px 25 | font-size 12px 26 | text-shadow 0 1px 0 #9d532f 27 | color #eeeddf 28 | text-align center 29 | line-height 36px 30 | 31 | .solutions aside 32 | display none -------------------------------------------------------------------------------- /quizzes/2-effects/css/stylus/button.styl: -------------------------------------------------------------------------------- 1 | boolean-button(start, end) 2 | border-radius 40px 3 | background end 4 | background -webkit-linear-gradient(start, end) 5 | background -moz-linear-gradient(start, end) 6 | background -o-linear-gradient(start, end) 7 | background -ms-linear-gradient(start, end) 8 | background linear-gradient(start, end) 9 | outline 0 10 | 11 | .true, .false 12 | boolean-button(#bcbcbc, #858585) 13 | background end 14 | background -moz-linear-gradient(start, end) 15 | background -webkit-linear-gradient(start, end) 16 | background -o-linear-gradient(start, end) 17 | background -ms-linear-gradient(start, end) 18 | background linear-gradient(start, end) 19 | border 1px solid #8d8d8d 20 | box-shadow inset 0 2px 0 #cccccc 21 | color #fff 22 | text-shadow 0 -1px 0 #919191 23 | 24 | 25 | 26 | .true:active, 27 | .true:hover, 28 | input[type=radio]:checked + .true 29 | background #b3d662 30 | background -webkit-linear-gradient(#dceca8, #b3d662) 31 | background -moz-linear-gradient(#dceca8, #b3d662) 32 | background -o-linear-gradient(#dceca8, #b3d662) 33 | background -ms-linear-gradient(#dceca8, #b3d662) 34 | background linear-gradient(#dceca8, #b3d662) 35 | box-shadow inset 0 2px 0 #e5f1be, 0 -2px 5px #cbe190 36 | border 1px solid #9ab359 37 | color #3d3d3d 38 | text-shadow 0 1px 0 #deedb7 39 | outline 0 40 | 41 | .false:active, 42 | .false:hover, 43 | .bool input[type=radio]:checked + .false 44 | background #db4d35 45 | background -webkit-linear-gradient(#ec7e5b, #db4d35) 46 | background -moz-linear-gradient(#ec7e5b, #db4d35) 47 | background -o-linear-gradient(#ec7e5b, #db4d35) 48 | background -ms-linear-gradient(#ec7e5b, #db4d35) 49 | background linear-gradient(#ec7e5b, #db4d35) 50 | box-shadow inset 0 2px 0 #f0997e, 0 -1px 2px darken(#f0997e, 1%) 51 | border 1px solid #de5941 52 | color #fff 53 | text-shadow 0 -1px 0 #c25e43 54 | 55 | .twitter a 56 | background #80d2ff 57 | background url(../images/twitter-bird.png) 15px center no-repeat, -webkit-linear-gradient(#80d2ff, #55afff) 58 | background url(../images/twitter-bird.png) 15px center no-repeat, -moz-linear-gradient(#80d2ff, #55afff) 59 | background url(../images/twitter-bird.png) 15px center no-repeat, -o-linear-gradient(#80d2ff, #55afff) 60 | background url(../images/twitter-bird.png) 15px center no-repeat, -ms-linear-gradient(#80d2ff, #55afff) 61 | background url(../images/twitter-bird.png) 15px center no-repeat, linear-gradient(#80d2ff, #55afff) 62 | padding 9px 24px 7px 35px 63 | border-radius 25px 64 | color white 65 | text-shadow 0 1px 0 #386adb 66 | text-decoration none 67 | border 1px solid #1E87D9; 68 | line-height 1.5em 69 | -webkit-box-shadow: inset 0 2px 0 #a3deff, 0 1px 3px #d4d4d4; 70 | -moz-box-shadow: inset 0 2px 0 #a3deff, 0 1px 3px #d4d4d4; 71 | box-shadow: inset 0 2px 0 #a3deff, 0 1px 3px #d4d4d4; 72 | 73 | .twitter a:hover 74 | background darken(#80d2ff, 10%) 75 | background url(../images/twitter-bird.png) 15px center no-repeat, -webkit-linear-gradient(darken(#80d2ff, 10%), darken(#55afff, 10%)) 76 | background url(../images/twitter-bird.png) 15px center no-repeat, -moz-linear-gradient(darken(#80d2ff, 10%), darken(#55afff, 10%)) 77 | background url(../images/twitter-bird.png) 15px center no-repeat, -o-linear-gradient(darken(#80d2ff, 10%), darken(#55afff, 10%)) 78 | background url(../images/twitter-bird.png) 15px center no-repeat, -ms-linear-gradient(darken(#80d2ff, 10%), darken(#55afff, 10%)) 79 | background url(../images/twitter-bird.png) 15px center no-repeat, linear-gradient(darken(#80d2ff, 10%), darken(#55afff, 10%)) 80 | 81 | .twitter a:active, 82 | .twitter a:focus 83 | -webkit-box-shadow: 0 1px 3px #d4d4d4; 84 | -moz-box-shadow: 0 1px 3px #d4d4d4; 85 | box-shadow: 0 1px 3px #d4d4d4; 86 | -------------------------------------------------------------------------------- /quizzes/2-effects/css/stylus/crumbs.styl: -------------------------------------------------------------------------------- 1 | .quiz-crumbs 2 | border-bottom 1px dashed #d0cfc3 3 | 4 | li 5 | display inline 6 | 7 | &:after 8 | content: '\\' 9 | color black-shade 10 | padding-left 5px 11 | padding-right 5px 12 | 13 | &:last-child 14 | font-weight bold 15 | 16 | &:after 17 | content: none 18 | 19 | .quiz-crumbs.wrap 20 | padding-bottom 15px 21 | padding-top 12px -------------------------------------------------------------------------------- /quizzes/2-effects/css/stylus/headings.styl: -------------------------------------------------------------------------------- 1 | h1, h2, h3, h4, h5, h6 2 | color #494949 3 | font-family sans-serif 4 | line-height 1.2em 5 | margin-bottom 15px 6 | 7 | h1, h2 8 | font-family 'MuseoSansRounded-700', sans-serif 9 | letter-spacing -.5px 10 | 11 | h1 12 | font-size 40px 13 | color #322d2d 14 | 15 | h2 16 | font-size 32px 17 | font-weight bold 18 | 19 | h2 span 20 | color #818181 21 | 22 | h3 23 | font-size 24px 24 | font-family 'MuseoSansRounded-700', sans-serif 25 | margin-bottom 10px 26 | line-height: 30px; 27 | 28 | code 29 | line-height: 1.3em 30 | 31 | h4 32 | font-size 14px 33 | font-weight bold 34 | margin-bottom 5px 35 | 36 | h5 37 | font-size 18px 38 | font-style italic 39 | margin-bottom 5px 40 | 41 | h6 42 | font-size 14px 43 | margin-bottom 5px 44 | -------------------------------------------------------------------------------- /quizzes/2-effects/css/stylus/links.styl: -------------------------------------------------------------------------------- 1 | a:link, a:visited { 2 | color: #e56718; 3 | } 4 | a:hover { 5 | color: #000; 6 | } 7 | a:active { 8 | color: #e56718; 9 | } -------------------------------------------------------------------------------- /quizzes/2-effects/css/stylus/main.styl: -------------------------------------------------------------------------------- 1 | .wrap 2 | overflow hidden 3 | width 1000px 4 | padding-bottom 40px 5 | margin auto 6 | 7 | #content-wrap 8 | overflow hidden 9 | min-width 1000px 10 | padding-bottom 40px 11 | 12 | .content 13 | margin auto 14 | width 1000px 15 | padding-top 20px 16 | overflow hidden 17 | 18 | .primary-content 19 | float left 20 | width 840px 21 | margin-right 20px 22 | position relative 23 | z-index 2 24 | 25 | aside 26 | float right 27 | width 139px 28 | box-sizing border-box -------------------------------------------------------------------------------- /quizzes/2-effects/css/stylus/mixins.styl: -------------------------------------------------------------------------------- 1 | transform(style) 2 | -webkit-transform style 3 | -moz-transform style 4 | -o-transform style 5 | -ms-transform style -------------------------------------------------------------------------------- /quizzes/2-effects/css/stylus/questions.styl: -------------------------------------------------------------------------------- 1 | .question, #results 2 | padding 35px 80px 3 | box-sizing border-box 4 | border 1px solid #d3d3ca 5 | position relative 6 | background white 7 | 8 | h3 9 | font-size 16px 10 | color #494949 11 | text-shadow 0 1px 0 white 12 | margin-bottom 25px 13 | margin-right 40px 14 | font-family sans-serif 15 | 16 | .question 17 | margin-bottom 10px 18 | 19 | input[type=text] 20 | font-size 14px 21 | 22 | // Circular bubble with the current question number 23 | span.count 24 | background #edecde 25 | border 1px solid #d4d3c7 26 | color #494949 27 | text-shadow 0 1px 0 #72726e 28 | border-radius 100px 29 | padding 0 9px 30 | font-size 12px 31 | font-weight normal 32 | margin 7px 22px 0 -55px 33 | float left 34 | position relative 35 | top -2px 36 | line-height 2em 37 | 38 | 39 | 40 | // True or False 41 | .question .bool 42 | overflow hidden 43 | background url(../images/stripeBG.png) 44 | padding 21px 45 | float left 46 | 47 | .bool li 48 | float left 49 | margin-right 20px 50 | 51 | &:last-child 52 | margin-right 0 53 | 54 | .bool input[type=radio] 55 | width 20px 56 | -webkit-appearance none 57 | 58 | .bool label 59 | width 185px 60 | height 34px 61 | line-height 34px 62 | display inline-block 63 | text-align center 64 | font-weight bold 65 | margin-left -25px 66 | cursor pointer 67 | 68 | .correct 69 | box-shadow inset 0 0 0 4px #b8d86b; 70 | 71 | .incorrect 72 | box-shadow inset 0 0 0 4px #f8734a; 73 | 74 | .no-boxshadow 75 | .correct 76 | outline 4px solid #b8d86b 77 | .incorrect 78 | outline 4px solid #f8734a 79 | 80 | span.divider 81 | display: block; 82 | color: red; 83 | clear: left; 84 | float: left; 85 | width: 83%; 86 | margin-top: 50px; 87 | border-top: 1px dashed #e5e5e5; 88 | 89 | // Textareas 90 | .CodeMirror 91 | min-height 150px 92 | border-radius 5px 93 | padding 20px 94 | border 1px solid #e5e5e5 95 | 96 | .CodeMirror-focused 97 | box-shadow 0 0 0 1px #fbbc4b, 0 0 0 2px #fff0d7, 0 0 0 3px #fff6e6 98 | 99 | .CodeMirror-scroll 100 | height auto 101 | 102 | // Multiple Choice 103 | .multiple 104 | background url(../images/stripeBG.png) 105 | text-align center 106 | padding 30px 0 107 | height 40px 108 | 109 | li 110 | display inline 111 | margin-right 48px 112 | font-size 16px 113 | line-height 40px 114 | 115 | &:last-child 116 | margin-right 0 117 | 118 | input 119 | margin-right 10px 120 | cursor pointer 121 | 122 | label 123 | cursor pointer 124 | 125 | 126 | 127 | .multiple input:checked:before, 128 | .multiple input[type=radio] 129 | position:absolute; 130 | clip rect(0,0,0,0); 131 | clip rect(0 0 0 0); 132 | 133 | 134 | .multiple input[type="radio"] + label:before 135 | content url('../images/radio-on.png'); /* preload hover state */ 136 | content url('../images/radio-off.png'); 137 | position relative 138 | top 2px 139 | margin-right 10px 140 | 141 | 142 | .multiple input[type="radio"]:checked + label:before, 143 | .multiple input[type="radio"]:hover + label:before 144 | content url('../images/radio-on.png'); 145 | 146 | 147 | 148 | 149 | // Text Entry 150 | .question input[type=text] 151 | border-radius 5px 152 | border 1px solid #e5e5e5 153 | padding 0 10px 154 | height 45px 155 | width 60% 156 | outline 0 157 | 158 | &:focus, &:hover 159 | box-shadow 0 0 0 1px #fbbc4b, 0 0 0 2px #fff0d7, 0 0 0 3px #fff6e6 160 | 161 | // Solutions 162 | .solutions 163 | span.divider 164 | display none 165 | 166 | .question 167 | min-height 100% 168 | padding-bottom 60px 169 | 170 | // When no notes are provided 171 | + .question 172 | margin-top 40px 173 | 174 | .question input[type=submit] 175 | display none 176 | 177 | .notes 178 | margin-top 25px 179 | margin-bottom 60px 180 | padding-left 10px 181 | border-left 10px solid #fbbc4b 182 | 183 | p 184 | padding-bottom 0 185 | 186 | mark 187 | background none 188 | color #494949 189 | 190 | 191 | .question form 192 | clearfix() 193 | 194 | 195 | .textarea h3:after 196 | content attr(data-syntax); 197 | background #E56718; 198 | color white; 199 | padding .5em 1em; 200 | text-shadow 0 1px 0 #80390D; 201 | position absolute; 202 | right 0; 203 | top 0; 204 | font-family monospace; 205 | font-size .8em; -------------------------------------------------------------------------------- /quizzes/2-effects/css/stylus/reset.styl: -------------------------------------------------------------------------------- 1 | html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td 2 | margin 0 3 | padding 0 4 | border 0 5 | outline 0 6 | font-weight inherit 7 | font-style inherit 8 | font-size 100% 9 | font-family inherit 10 | vertical-align baseline 11 | 12 | focus 13 | outline 0 14 | 15 | html 16 | overflow-y scroll 17 | 18 | body 19 | color #444 20 | background-color #f1f0e2 21 | background url(../images/bg-content.jpg) 22 | font 12px/20px sans-serif 23 | 24 | p 25 | padding-bottom 30px 26 | color #494949 27 | font-size 14px 28 | 29 | ol, ul 30 | list-style none 31 | 32 | code 33 | font-family Courier, "Courier New", "Lucida Console", Monaco 34 | background #e8e7d9 35 | padding 3px 5px 36 | font-size .8em 37 | display inline-block 38 | 39 | table 40 | border-collapse separate 41 | border-spacing 0 42 | 43 | caption, th, td 44 | text-align left 45 | font-weight normal 46 | 47 | blockquotebefore, blockquoteafter, qbefore, qafter 48 | content "" 49 | 50 | blockquote, q 51 | quotes "" "" 52 | 53 | acronym 54 | cursor help 55 | border-bottom 1px dashed #333 56 | 57 | strong 58 | font-weight bold 59 | 60 | cite, 61 | em, 62 | i 63 | font-style italic 64 | 65 | .right 66 | float right 67 | 68 | .left 69 | float left 70 | 71 | .hide, 72 | .screen-reader-text 73 | display none !important 74 | 75 | selection 76 | background #fdd283 77 | color #000 78 | 79 | -moz-selection 80 | background #fdd283 81 | color #000 82 | 83 | .clear 84 | clear both 85 | display block 86 | overflow hidden 87 | visibility hidden 88 | width 0 89 | height 0 90 | 91 | // Mixin 92 | clearfix() 93 | zoom 1 94 | &:before, &:after 95 | content '' 96 | display block 97 | overflow hidden 98 | visibility hidden 99 | width 0 100 | height 0 101 | &:after 102 | clear both -------------------------------------------------------------------------------- /quizzes/2-effects/css/stylus/results.styl: -------------------------------------------------------------------------------- 1 | #results 2 | background white 3 | text-align center 4 | padding 35px 220px 0 5 | 6 | h2 7 | color #494949 8 | margin-bottom 35px 9 | 10 | a 11 | float none 12 | display inline-block 13 | 14 | p 15 | font-size 14px 16 | color #494949 17 | margin 20px 0 0 18 | line-height 1.7em 19 | 20 | .twitter 21 | margin-top 0 22 | margin-bottom 20px 23 | 24 | .score 25 | display block 26 | font-family 'MuseoSansRounded-700', sans-serif 27 | font-size 90px 28 | margin-top 40px -------------------------------------------------------------------------------- /quizzes/2-effects/css/stylus/shadowEffects.styl: -------------------------------------------------------------------------------- 1 | flipped(direction) 2 | content '' 3 | position absolute 4 | z-index -1 5 | bottom 15px 6 | width 70% 7 | height 20% 8 | 9 | box-shadow 0 15px 10px -2px rgba(0, 0, 0, .2) 10 | display block 11 | 12 | if direction == 'left' 13 | transform(rotate(-3deg)); 14 | left 10px 15 | else 16 | transform(rotate(3deg)); 17 | right 10px 18 | 19 | .fancy-shadow:after 20 | flipped(left) 21 | 22 | .fancy-shadow:before 23 | flipped(right) 24 | 25 | // Stupid browser bug means I can't combine these four 26 | .fancy-shadow.correct:after, 27 | .fancy-shadow.correct:before 28 | content: none 29 | 30 | .fancy-shadow.incorrect:after, 31 | .fancy-shadow.incorrect:before 32 | content: none 33 | -------------------------------------------------------------------------------- /quizzes/2-effects/css/stylus/style.styl: -------------------------------------------------------------------------------- 1 | black-shade = #494949 2 | grey = #d0cfc3 3 | 4 | @import 'mixins.styl' 5 | @import 'reset.styl' 6 | @import 'links.styl' 7 | @import 'headings.styl' 8 | @import 'crumbs.styl' 9 | @import 'header.styl' 10 | @import 'orange-button.styl' 11 | @import 'button.styl' 12 | @import 'questions.styl' 13 | @import 'results.styl' 14 | @import 'shadowEffects.styl' 15 | @import 'main.styl' 16 | @import 'aside.styl' 17 | @import '../../codemirror/lib/codemirror' 18 | @import '../../codemirror/theme/default' -------------------------------------------------------------------------------- /quizzes/2-effects/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/2-effects/favicon.ico -------------------------------------------------------------------------------- /quizzes/2-effects/iframe.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 |
    18 | 19 |
    20 | 21 |
    22 | 23 | 24 | 25 | 33 | 34 | 43 | 44 | -------------------------------------------------------------------------------- /quizzes/2-effects/images/bg-body.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/2-effects/images/bg-body.jpg -------------------------------------------------------------------------------- /quizzes/2-effects/images/bg-content-shadow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/2-effects/images/bg-content-shadow.png -------------------------------------------------------------------------------- /quizzes/2-effects/images/bg-content-top.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/2-effects/images/bg-content-top.jpg -------------------------------------------------------------------------------- /quizzes/2-effects/images/bg-content.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/2-effects/images/bg-content.jpg -------------------------------------------------------------------------------- /quizzes/2-effects/images/bg-header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/2-effects/images/bg-header.jpg -------------------------------------------------------------------------------- /quizzes/2-effects/images/bool-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/2-effects/images/bool-bg.png -------------------------------------------------------------------------------- /quizzes/2-effects/images/false.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/2-effects/images/false.png -------------------------------------------------------------------------------- /quizzes/2-effects/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/2-effects/images/logo.png -------------------------------------------------------------------------------- /quizzes/2-effects/images/percentageComplete-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/2-effects/images/percentageComplete-bg.png -------------------------------------------------------------------------------- /quizzes/2-effects/images/radio-off.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/2-effects/images/radio-off.png -------------------------------------------------------------------------------- /quizzes/2-effects/images/radio-on.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/2-effects/images/radio-on.png -------------------------------------------------------------------------------- /quizzes/2-effects/images/radioButton.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/2-effects/images/radioButton.png -------------------------------------------------------------------------------- /quizzes/2-effects/images/score-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/2-effects/images/score-bg.png -------------------------------------------------------------------------------- /quizzes/2-effects/images/sprite-mini-icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/2-effects/images/sprite-mini-icons.png -------------------------------------------------------------------------------- /quizzes/2-effects/images/sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/2-effects/images/sprite.png -------------------------------------------------------------------------------- /quizzes/2-effects/images/stripeBG.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/2-effects/images/stripeBG.png -------------------------------------------------------------------------------- /quizzes/2-effects/images/texture.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/2-effects/images/texture.jpg -------------------------------------------------------------------------------- /quizzes/2-effects/images/texture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/2-effects/images/texture.png -------------------------------------------------------------------------------- /quizzes/2-effects/images/true.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/2-effects/images/true.png -------------------------------------------------------------------------------- /quizzes/2-effects/images/tuts.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/2-effects/images/tuts.jpg -------------------------------------------------------------------------------- /quizzes/2-effects/images/twitter-bird.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/2-effects/images/twitter-bird.png -------------------------------------------------------------------------------- /quizzes/2-effects/readme.md: -------------------------------------------------------------------------------- 1 | These are the source files for the old Tuts+ Premium quizzes. -------------------------------------------------------------------------------- /quizzes/2-effects/ruby.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/2-effects/ruby.jpeg -------------------------------------------------------------------------------- /quizzes/3-final/codemirror/lib/codemirror.styl: -------------------------------------------------------------------------------- 1 | .CodeMirror { 2 | line-height: 1em; 3 | font-family: monospace; 4 | } 5 | 6 | .CodeMirror-scroll { 7 | overflow: auto; 8 | height: 300px; 9 | /* This is needed to prevent an IE[67] bug where the scrolled content 10 | is visible outside of the scrolling box. */ 11 | position: relative; 12 | } 13 | 14 | .CodeMirror-gutter { 15 | position: absolute; left: 0; top: 0; 16 | z-index: 10; 17 | background-color: #f7f7f7; 18 | border-right: 1px solid #eee; 19 | min-width: 2em; 20 | height: 100%; 21 | } 22 | .CodeMirror-gutter-text { 23 | color: #aaa; 24 | text-align: right; 25 | padding: .4em .2em .4em .4em; 26 | white-space: pre !important; 27 | } 28 | .CodeMirror-lines { 29 | padding: .4em; 30 | } 31 | 32 | .CodeMirror pre { 33 | -moz-border-radius: 0; 34 | -webkit-border-radius: 0; 35 | -o-border-radius: 0; 36 | border-radius: 0; 37 | border-width: 0; margin: 0; padding: 0; background: transparent; 38 | font-family: inherit; 39 | font-size: inherit; 40 | padding: 0; margin: 0; 41 | white-space: pre; 42 | word-wrap: normal; 43 | } 44 | 45 | .CodeMirror-wrap pre { 46 | word-wrap: break-word; 47 | white-space: pre-wrap; 48 | } 49 | .CodeMirror-wrap .CodeMirror-scroll { 50 | overflow-x: hidden; 51 | } 52 | 53 | .CodeMirror textarea { 54 | outline: none !important; 55 | } 56 | 57 | .CodeMirror pre.CodeMirror-cursor { 58 | z-index: 10; 59 | position: absolute; 60 | visibility: hidden; 61 | border-left: 1px solid black; 62 | } 63 | .CodeMirror-focused pre.CodeMirror-cursor { 64 | visibility: visible; 65 | } 66 | 67 | span.CodeMirror-selected { background: #d9d9d9; } 68 | .CodeMirror-focused span.CodeMirror-selected { background: #d2dcf8; } 69 | 70 | .CodeMirror-searching {background: #ffa;} 71 | 72 | /* Default theme */ 73 | 74 | .cm-s-default span.cm-keyword {color: #708;} 75 | .cm-s-default span.cm-atom {color: #219;} 76 | .cm-s-default span.cm-number {color: #164;} 77 | .cm-s-default span.cm-def {color: #00f;} 78 | .cm-s-default span.cm-variable {color: black;} 79 | .cm-s-default span.cm-variable-2 {color: #05a;} 80 | .cm-s-default span.cm-variable-3 {color: #085;} 81 | .cm-s-default span.cm-property {color: black;} 82 | .cm-s-default span.cm-operator {color: black;} 83 | .cm-s-default span.cm-comment {color: #a50;} 84 | .cm-s-default span.cm-string {color: #a11;} 85 | .cm-s-default span.cm-string-2 {color: #f50;} 86 | .cm-s-default span.cm-meta {color: #555;} 87 | .cm-s-default span.cm-error {color: #f00;} 88 | .cm-s-default span.cm-qualifier {color: #555;} 89 | .cm-s-default span.cm-builtin {color: #30a;} 90 | .cm-s-default span.cm-bracket {color: #cc7;} 91 | .cm-s-default span.cm-tag {color: #170;} 92 | .cm-s-default span.cm-attribute {color: #00c;} 93 | .cm-s-default span.cm-header {color: #a0a;} 94 | .cm-s-default span.cm-quote {color: #090;} 95 | .cm-s-default span.cm-hr {color: #999;} 96 | .cm-s-default span.cm-link {color: #00c;} 97 | 98 | span.cm-header, span.cm-strong {font-weight: bold;} 99 | span.cm-em {font-style: italic;} 100 | span.cm-emstrong {font-style: italic; font-weight: bold;} 101 | span.cm-link {text-decoration: underline;} 102 | 103 | div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;} 104 | div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;} 105 | 106 | iframe.sandbox { 107 | width: 100%; 108 | margin-top: 40px; 109 | } -------------------------------------------------------------------------------- /quizzes/3-final/codemirror/lib/overlay.js: -------------------------------------------------------------------------------- 1 | // Utility function that allows modes to be combined. The mode given 2 | // as the base argument takes care of most of the normal mode 3 | // functionality, but a second (typically simple) mode is used, which 4 | // can override the style of text. Both modes get to parse all of the 5 | // text, but when both assign a non-null style to a piece of code, the 6 | // overlay wins, unless the combine argument was true, in which case 7 | // the styles are combined. 8 | 9 | CodeMirror.overlayParser = function(base, overlay, combine) { 10 | return { 11 | startState: function() { 12 | return { 13 | base: CodeMirror.startState(base), 14 | overlay: CodeMirror.startState(overlay), 15 | basePos: 0, baseCur: null, 16 | overlayPos: 0, overlayCur: null 17 | }; 18 | }, 19 | copyState: function(state) { 20 | return { 21 | base: CodeMirror.copyState(base, state.base), 22 | overlay: CodeMirror.copyState(overlay, state.overlay), 23 | basePos: state.basePos, baseCur: null, 24 | overlayPos: state.overlayPos, overlayCur: null 25 | }; 26 | }, 27 | 28 | token: function(stream, state) { 29 | if (stream.start == state.basePos) { 30 | state.baseCur = base.token(stream, state.base); 31 | state.basePos = stream.pos; 32 | } 33 | if (stream.start == state.overlayPos) { 34 | stream.pos = stream.start; 35 | state.overlayCur = overlay.token(stream, state.overlay); 36 | state.overlayPos = stream.pos; 37 | } 38 | stream.pos = Math.min(state.basePos, state.overlayPos); 39 | if (stream.eol()) state.basePos = state.overlayPos = 0; 40 | 41 | if (state.overlayCur == null) return state.baseCur; 42 | if (state.baseCur != null && combine) return state.baseCur + " " + state.overlayCur; 43 | else return state.overlayCur; 44 | }, 45 | 46 | indent: function(state, textAfter) { 47 | return base.indent(state.base, textAfter); 48 | }, 49 | electricChars: base.electricChars 50 | }; 51 | }; 52 | -------------------------------------------------------------------------------- /quizzes/3-final/codemirror/lib/runmode.js: -------------------------------------------------------------------------------- 1 | CodeMirror.runMode = function(string, modespec, callback) { 2 | var mode = CodeMirror.getMode({indentUnit: 2}, modespec); 3 | var isNode = callback.nodeType == 1; 4 | if (isNode) { 5 | var node = callback, accum = []; 6 | callback = function(string, style) { 7 | if (string == "\n") 8 | accum.push("
    "); 9 | else if (style) 10 | accum.push("" + CodeMirror.htmlEscape(string) + ""); 11 | else 12 | accum.push(CodeMirror.htmlEscape(string)); 13 | } 14 | } 15 | var lines = CodeMirror.splitLines(string), state = CodeMirror.startState(mode); 16 | for (var i = 0, e = lines.length; i < e; ++i) { 17 | if (i) callback("\n"); 18 | var stream = new CodeMirror.StringStream(lines[i]); 19 | while (!stream.eol()) { 20 | var style = mode.token(stream, state); 21 | callback(stream.current(), style, i, stream.start); 22 | stream.start = stream.pos; 23 | } 24 | } 25 | if (isNode) 26 | node.innerHTML = accum.join(""); 27 | }; 28 | -------------------------------------------------------------------------------- /quizzes/3-final/codemirror/mode/coffeescript/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2011 Jeff Pickhardt 4 | Modified from the Python CodeMirror mode, Copyright (c) 2010 Timothy Farrell 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. -------------------------------------------------------------------------------- /quizzes/3-final/codemirror/mode/css/css.js: -------------------------------------------------------------------------------- 1 | CodeMirror.defineMode("css", function(config) { 2 | var indentUnit = config.indentUnit, type; 3 | function ret(style, tp) {type = tp; return style;} 4 | 5 | function tokenBase(stream, state) { 6 | var ch = stream.next(); 7 | if (ch == "@") {stream.eatWhile(/[\w\\\-]/); return ret("meta", stream.current());} 8 | else if (ch == "/" && stream.eat("*")) { 9 | state.tokenize = tokenCComment; 10 | return tokenCComment(stream, state); 11 | } 12 | else if (ch == "<" && stream.eat("!")) { 13 | state.tokenize = tokenSGMLComment; 14 | return tokenSGMLComment(stream, state); 15 | } 16 | else if (ch == "=") ret(null, "compare"); 17 | else if ((ch == "~" || ch == "|") && stream.eat("=")) return ret(null, "compare"); 18 | else if (ch == "\"" || ch == "'") { 19 | state.tokenize = tokenString(ch); 20 | return state.tokenize(stream, state); 21 | } 22 | else if (ch == "#") { 23 | stream.eatWhile(/[\w\\\-]/); 24 | return ret("atom", "hash"); 25 | } 26 | else if (ch == "!") { 27 | stream.match(/^\s*\w*/); 28 | return ret("keyword", "important"); 29 | } 30 | else if (/\d/.test(ch)) { 31 | stream.eatWhile(/[\w.%]/); 32 | return ret("number", "unit"); 33 | } 34 | else if (/[,.+>*\/]/.test(ch)) { 35 | return ret(null, "select-op"); 36 | } 37 | else if (/[;{}:\[\]]/.test(ch)) { 38 | return ret(null, ch); 39 | } 40 | else { 41 | stream.eatWhile(/[\w\\\-]/); 42 | return ret("variable", "variable"); 43 | } 44 | } 45 | 46 | function tokenCComment(stream, state) { 47 | var maybeEnd = false, ch; 48 | while ((ch = stream.next()) != null) { 49 | if (maybeEnd && ch == "/") { 50 | state.tokenize = tokenBase; 51 | break; 52 | } 53 | maybeEnd = (ch == "*"); 54 | } 55 | return ret("comment", "comment"); 56 | } 57 | 58 | function tokenSGMLComment(stream, state) { 59 | var dashes = 0, ch; 60 | while ((ch = stream.next()) != null) { 61 | if (dashes >= 2 && ch == ">") { 62 | state.tokenize = tokenBase; 63 | break; 64 | } 65 | dashes = (ch == "-") ? dashes + 1 : 0; 66 | } 67 | return ret("comment", "comment"); 68 | } 69 | 70 | function tokenString(quote) { 71 | return function(stream, state) { 72 | var escaped = false, ch; 73 | while ((ch = stream.next()) != null) { 74 | if (ch == quote && !escaped) 75 | break; 76 | escaped = !escaped && ch == "\\"; 77 | } 78 | if (!escaped) state.tokenize = tokenBase; 79 | return ret("string", "string"); 80 | }; 81 | } 82 | 83 | return { 84 | startState: function(base) { 85 | return {tokenize: tokenBase, 86 | baseIndent: base || 0, 87 | stack: []}; 88 | }, 89 | 90 | token: function(stream, state) { 91 | if (stream.eatSpace()) return null; 92 | var style = state.tokenize(stream, state); 93 | 94 | var context = state.stack[state.stack.length-1]; 95 | if (type == "hash" && context == "rule") style = "atom"; 96 | else if (style == "variable") { 97 | if (context == "rule") style = "number"; 98 | else if (!context || context == "@media{") style = "tag"; 99 | } 100 | 101 | if (context == "rule" && /^[\{\};]$/.test(type)) 102 | state.stack.pop(); 103 | if (type == "{") { 104 | if (context == "@media") state.stack[state.stack.length-1] = "@media{"; 105 | else state.stack.push("{"); 106 | } 107 | else if (type == "}") state.stack.pop(); 108 | else if (type == "@media") state.stack.push("@media"); 109 | else if (context == "{" && type != "comment") state.stack.push("rule"); 110 | return style; 111 | }, 112 | 113 | indent: function(state, textAfter) { 114 | var n = state.stack.length; 115 | if (/^\}/.test(textAfter)) 116 | n -= state.stack[state.stack.length-1] == "rule" ? 2 : 1; 117 | return state.baseIndent + n * indentUnit; 118 | }, 119 | 120 | electricChars: "}" 121 | }; 122 | }); 123 | 124 | CodeMirror.defineMIME("text/css", "css"); 125 | -------------------------------------------------------------------------------- /quizzes/3-final/codemirror/mode/css/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | CodeMirror 2: CSS mode 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

    CodeMirror 2: CSS mode

    14 |
    49 | 52 | 53 |

    MIME types defined: text/css.

    54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /quizzes/3-final/codemirror/mode/htmlmixed/htmlmixed.js: -------------------------------------------------------------------------------- 1 | CodeMirror.defineMode("htmlmixed", function(config, parserConfig) { 2 | var htmlMode = CodeMirror.getMode(config, {name: "xml", htmlMode: true}); 3 | var jsMode = CodeMirror.getMode(config, "javascript"); 4 | var cssMode = CodeMirror.getMode(config, "css"); 5 | 6 | function html(stream, state) { 7 | var style = htmlMode.token(stream, state.htmlState); 8 | if (style == "tag" && stream.current() == ">" && state.htmlState.context) { 9 | if (/^script$/i.test(state.htmlState.context.tagName)) { 10 | state.token = javascript; 11 | state.localState = jsMode.startState(htmlMode.indent(state.htmlState, "")); 12 | state.mode = "javascript"; 13 | } 14 | else if (/^style$/i.test(state.htmlState.context.tagName)) { 15 | state.token = css; 16 | state.localState = cssMode.startState(htmlMode.indent(state.htmlState, "")); 17 | state.mode = "css"; 18 | } 19 | } 20 | return style; 21 | } 22 | function maybeBackup(stream, pat, style) { 23 | var cur = stream.current(); 24 | var close = cur.search(pat); 25 | if (close > -1) stream.backUp(cur.length - close); 26 | return style; 27 | } 28 | function javascript(stream, state) { 29 | if (stream.match(/^<\/\s*script\s*>/i, false)) { 30 | state.token = html; 31 | state.curState = null; 32 | state.mode = "html"; 33 | return html(stream, state); 34 | } 35 | return maybeBackup(stream, /<\/\s*script\s*>/, 36 | jsMode.token(stream, state.localState)); 37 | } 38 | function css(stream, state) { 39 | if (stream.match(/^<\/\s*style\s*>/i, false)) { 40 | state.token = html; 41 | state.localState = null; 42 | state.mode = "html"; 43 | return html(stream, state); 44 | } 45 | return maybeBackup(stream, /<\/\s*style\s*>/, 46 | cssMode.token(stream, state.localState)); 47 | } 48 | 49 | return { 50 | startState: function() { 51 | var state = htmlMode.startState(); 52 | return {token: html, localState: null, mode: "html", htmlState: state}; 53 | }, 54 | 55 | copyState: function(state) { 56 | if (state.localState) 57 | var local = CodeMirror.copyState(state.token == css ? cssMode : jsMode, state.localState); 58 | return {token: state.token, localState: local, mode: state.mode, 59 | htmlState: CodeMirror.copyState(htmlMode, state.htmlState)}; 60 | }, 61 | 62 | token: function(stream, state) { 63 | return state.token(stream, state); 64 | }, 65 | 66 | indent: function(state, textAfter) { 67 | if (state.token == html || /^\s*<\//.test(textAfter)) 68 | return htmlMode.indent(state.htmlState, textAfter); 69 | else if (state.token == javascript) 70 | return jsMode.indent(state.localState, textAfter); 71 | else 72 | return cssMode.indent(state.localState, textAfter); 73 | }, 74 | 75 | compareStates: function(a, b) { 76 | return htmlMode.compareStates(a.htmlState, b.htmlState); 77 | }, 78 | 79 | electricChars: "/{}:" 80 | } 81 | }); 82 | 83 | CodeMirror.defineMIME("text/html", "htmlmixed"); 84 | -------------------------------------------------------------------------------- /quizzes/3-final/codemirror/mode/htmlmixed/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | CodeMirror 2: HTML mixed mode 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

    CodeMirror 2: HTML mixed mode

    17 |
    41 | 44 | 45 |

    The HTML mixed mode depends on the XML, JavaScript, and CSS modes.

    46 | 47 |

    MIME types defined: text/html 48 | (redefined, only takes effect if you load this parser after the 49 | XML parser).

    50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /quizzes/3-final/codemirror/mode/javascript/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | CodeMirror 2: JavaScript mode 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

    CodeMirror 2: JavaScript mode

    14 | 15 |
    64 | 65 | 71 | 72 |

    JavaScript mode supports a single configuration 73 | option, json, which will set the mode to expect JSON 74 | data rather than a JavaScript program.

    75 | 76 |

    MIME types defined: text/javascript, application/json.

    77 | 78 | 79 | -------------------------------------------------------------------------------- /quizzes/3-final/codemirror/mode/php/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | CodeMirror 2: PHP mode 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |

    CodeMirror 2: PHP mode

    18 | 19 |
    30 | 31 | 42 | 43 |

    Simple HTML/PHP mode based on 44 | the C-like mode. Depends on XML, 45 | JavaScript, CSS, and C-like modes.

    46 | 47 |

    MIME types defined: application/x-httpd-php (HTML with PHP code), text/x-php (plain, non-wrapped PHP code).

    48 | 49 | 50 | -------------------------------------------------------------------------------- /quizzes/3-final/codemirror/mode/ruby/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2011, Ubalo, Inc. 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without 5 | modification, are permitted provided that the following conditions are met: 6 | * Redistributions of source code must retain the above copyright 7 | notice, this list of conditions and the following disclaimer. 8 | * Redistributions in binary form must reproduce the above copyright 9 | notice, this list of conditions and the following disclaimer in the 10 | documentation and/or other materials provided with the distribution. 11 | * Neither the name of the Ubalo, Inc. nor the names of its 12 | contributors may be used to endorse or promote products derived 13 | from this software without specific prior written permission. 14 | 15 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 16 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 17 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 18 | DISCLAIMED. IN NO EVENT SHALL UBALO, INC BE LIABLE FOR ANY 19 | DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 20 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 21 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND 22 | ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 23 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 24 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 25 | -------------------------------------------------------------------------------- /quizzes/3-final/codemirror/mode/xml/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | CodeMirror 2: XML mode 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

    CodeMirror 2: XML mode

    14 |
    26 | 29 |

    The XML mode supports two configuration parameters:

    30 |
    31 |
    htmlMode (boolean)
    32 |
    This switches the mode to parse HTML instead of XML. This 33 | means attributes do not have to be quoted, and some elements 34 | (such as br) do not require a closing tag.
    35 |
    alignCDATA (boolean)
    36 |
    Setting this to true will force the opening tag of CDATA 37 | blocks to not be indented.
    38 |
    39 | 40 |

    MIME types defined: application/xml, text/html.

    41 | 42 | 43 | -------------------------------------------------------------------------------- /quizzes/3-final/codemirror/mode/xmlpure/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | CodeMirror 2: Pure XML mode 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

    CodeMirror 2: XML mode

    14 |
    31 | 34 | 35 |

    This is my XML parser, based on the original:

    36 | 44 | 45 |

    What's missing:

    46 | 51 | 52 |

    MIME types defined: application/xml, text/xml.

    53 | 54 |

    @author: Dror BG (deebug dot dev at gmail dot com)
    55 |

    @date: August, 2011
    56 |

    @github: https://github.com/deebugger/CodeMirror2

    57 | 58 |

    MIME types defined: application/xml, text/xml.

    59 | 60 | 61 | -------------------------------------------------------------------------------- /quizzes/3-final/codemirror/theme/default.styl: -------------------------------------------------------------------------------- 1 | .cm-s-default span.cm-keyword {color: #708;} 2 | .cm-s-default span.cm-atom {color: #219;} 3 | .cm-s-default span.cm-number {color: #164;} 4 | .cm-s-default span.cm-def {color: #00f;} 5 | .cm-s-default span.cm-variable {color: black;} 6 | .cm-s-default span.cm-variable-2 {color: #05a;} 7 | .cm-s-default span.cm-variable-3 {color: #0a5;} 8 | .cm-s-default span.cm-property {color: black;} 9 | .cm-s-default span.cm-operator {color: black;} 10 | .cm-s-default span.cm-comment {color: #a50;} 11 | .cm-s-default span.cm-string {color: #a11;} 12 | .cm-s-default span.cm-string-2 {color: #f50;} 13 | .cm-s-default span.cm-meta {color: #555;} 14 | .cm-s-default span.cm-error {color: #f00;} 15 | .cm-s-default span.cm-qualifier {color: #555;} 16 | .cm-s-default span.cm-builtin {color: #30a;} 17 | .cm-s-default span.cm-bracket {color: #cc7;} 18 | .cm-s-default span.cm-tag {color: #170;} 19 | .cm-s-default span.cm-attribute {color: #00c;} 20 | 21 | 22 | div pre, .cm-s-default span { 23 | font-size: 16px !important; 24 | line-height: 1.4em !important; 25 | 26 | } 27 | 28 | -------------------------------------------------------------------------------- /quizzes/3-final/css/header.css: -------------------------------------------------------------------------------- 1 | #header-wrap { 2 | background: #373232 url("images/bg-header.jpg") repeat-x 0 0; 3 | min-width: 1000px; 4 | } 5 | -------------------------------------------------------------------------------- /quizzes/3-final/css/stylus/aside.styl: -------------------------------------------------------------------------------- 1 | aside 2 | h2 3 | background url(../images/score-bg.png) no-repeat 4 | text-shadow 0 2px 0 black 5 | color #eeeddf 6 | width 139px 7 | height 78px 8 | box-sizing border-box 9 | text-transform uppercase 10 | padding-top 10px 11 | font-size 12px 12 | text-align center 13 | margin-bottom 7px 14 | 15 | span 16 | font-size 40px 17 | display block 18 | padding-top 17px 19 | font-weight normal 20 | 21 | .progress 22 | background url(../images/percentageComplete-bg.png) no-repeat 23 | height 33px 24 | width 139px 25 | font-size 12px 26 | text-shadow 0 1px 0 #9d532f 27 | color #eeeddf 28 | text-align center 29 | line-height 36px 30 | 31 | .solutions aside 32 | display none -------------------------------------------------------------------------------- /quizzes/3-final/css/stylus/button.styl: -------------------------------------------------------------------------------- 1 | boolean-button(start, end) 2 | border-radius 40px 3 | background end 4 | background -webkit-linear-gradient(start, end) 5 | background -moz-linear-gradient(start, end) 6 | background -o-linear-gradient(start, end) 7 | background -ms-linear-gradient(start, end) 8 | background linear-gradient(start, end) 9 | outline 0 10 | 11 | .true, .false 12 | boolean-button(#bcbcbc, #858585) 13 | background end 14 | background -moz-linear-gradient(start, end) 15 | background -webkit-linear-gradient(start, end) 16 | background -o-linear-gradient(start, end) 17 | background -ms-linear-gradient(start, end) 18 | background linear-gradient(start, end) 19 | border 1px solid #8d8d8d 20 | box-shadow inset 0 2px 0 #cccccc 21 | color #fff 22 | text-shadow 0 -1px 0 #919191 23 | 24 | 25 | 26 | .true:active, 27 | .true:hover, 28 | input[type=radio]:checked + .true 29 | background #b3d662 30 | background -webkit-linear-gradient(#dceca8, #b3d662) 31 | background -moz-linear-gradient(#dceca8, #b3d662) 32 | background -o-linear-gradient(#dceca8, #b3d662) 33 | background -ms-linear-gradient(#dceca8, #b3d662) 34 | background linear-gradient(#dceca8, #b3d662) 35 | box-shadow inset 0 2px 0 #e5f1be, 0 -2px 5px #cbe190 36 | border 1px solid #9ab359 37 | color #3d3d3d 38 | text-shadow 0 1px 0 #deedb7 39 | outline 0 40 | 41 | .false:active, 42 | .false:hover, 43 | .bool input[type=radio]:checked + .false 44 | background #db4d35 45 | background -webkit-linear-gradient(#ec7e5b, #db4d35) 46 | background -moz-linear-gradient(#ec7e5b, #db4d35) 47 | background -o-linear-gradient(#ec7e5b, #db4d35) 48 | background -ms-linear-gradient(#ec7e5b, #db4d35) 49 | background linear-gradient(#ec7e5b, #db4d35) 50 | box-shadow inset 0 2px 0 #f0997e, 0 -1px 2px darken(#f0997e, 1%) 51 | border 1px solid #de5941 52 | color #fff 53 | text-shadow 0 -1px 0 #c25e43 54 | 55 | .twitter a 56 | background #80d2ff 57 | background url(../images/twitter-bird.png) 15px center no-repeat, -webkit-linear-gradient(#80d2ff, #55afff) 58 | background url(../images/twitter-bird.png) 15px center no-repeat, -moz-linear-gradient(#80d2ff, #55afff) 59 | background url(../images/twitter-bird.png) 15px center no-repeat, -o-linear-gradient(#80d2ff, #55afff) 60 | background url(../images/twitter-bird.png) 15px center no-repeat, -ms-linear-gradient(#80d2ff, #55afff) 61 | background url(../images/twitter-bird.png) 15px center no-repeat, linear-gradient(#80d2ff, #55afff) 62 | padding 9px 24px 7px 35px 63 | border-radius 25px 64 | color white 65 | text-shadow 0 1px 0 #386adb 66 | text-decoration none 67 | border 1px solid #1E87D9; 68 | line-height 1.5em 69 | -webkit-box-shadow: inset 0 2px 0 #a3deff, 0 1px 3px #d4d4d4; 70 | -moz-box-shadow: inset 0 2px 0 #a3deff, 0 1px 3px #d4d4d4; 71 | box-shadow: inset 0 2px 0 #a3deff, 0 1px 3px #d4d4d4; 72 | 73 | .twitter a:hover 74 | background darken(#80d2ff, 10%) 75 | background url(../images/twitter-bird.png) 15px center no-repeat, -webkit-linear-gradient(darken(#80d2ff, 10%), darken(#55afff, 10%)) 76 | background url(../images/twitter-bird.png) 15px center no-repeat, -moz-linear-gradient(darken(#80d2ff, 10%), darken(#55afff, 10%)) 77 | background url(../images/twitter-bird.png) 15px center no-repeat, -o-linear-gradient(darken(#80d2ff, 10%), darken(#55afff, 10%)) 78 | background url(../images/twitter-bird.png) 15px center no-repeat, -ms-linear-gradient(darken(#80d2ff, 10%), darken(#55afff, 10%)) 79 | background url(../images/twitter-bird.png) 15px center no-repeat, linear-gradient(darken(#80d2ff, 10%), darken(#55afff, 10%)) 80 | 81 | .twitter a:active, 82 | .twitter a:focus 83 | -webkit-box-shadow: 0 1px 3px #d4d4d4; 84 | -moz-box-shadow: 0 1px 3px #d4d4d4; 85 | box-shadow: 0 1px 3px #d4d4d4; 86 | -------------------------------------------------------------------------------- /quizzes/3-final/css/stylus/crumbs.styl: -------------------------------------------------------------------------------- 1 | .quiz-crumbs 2 | border-bottom 1px dashed #d0cfc3 3 | 4 | li 5 | display inline 6 | 7 | &:after 8 | content: '\\' 9 | color black-shade 10 | padding-left 5px 11 | padding-right 5px 12 | 13 | &:last-child 14 | font-weight bold 15 | 16 | &:after 17 | content: none 18 | 19 | .quiz-crumbs.wrap 20 | padding-bottom 15px 21 | padding-top 12px -------------------------------------------------------------------------------- /quizzes/3-final/css/stylus/headings.styl: -------------------------------------------------------------------------------- 1 | h1, h2, h3, h4, h5, h6 2 | color #494949 3 | font-family sans-serif 4 | line-height 1.2em 5 | margin-bottom 15px 6 | 7 | h1, h2 8 | font-family 'MuseoSansRounded-700', sans-serif 9 | letter-spacing -.5px 10 | 11 | h1 12 | font-size 40px 13 | color #322d2d 14 | 15 | h2 16 | font-size 32px 17 | font-weight bold 18 | 19 | h2 span 20 | color #818181 21 | 22 | h3 23 | font-size 24px 24 | font-family 'MuseoSansRounded-700', sans-serif 25 | margin-bottom 10px 26 | line-height: 30px; 27 | 28 | code 29 | line-height: 1.3em 30 | 31 | h4 32 | font-size 14px 33 | font-weight bold 34 | margin-bottom 5px 35 | 36 | h5 37 | font-size 18px 38 | font-style italic 39 | margin-bottom 5px 40 | 41 | h6 42 | font-size 14px 43 | margin-bottom 5px 44 | -------------------------------------------------------------------------------- /quizzes/3-final/css/stylus/links.styl: -------------------------------------------------------------------------------- 1 | a:link, a:visited { 2 | color: #e56718; 3 | } 4 | a:hover { 5 | color: #000; 6 | } 7 | a:active { 8 | color: #e56718; 9 | } -------------------------------------------------------------------------------- /quizzes/3-final/css/stylus/main.styl: -------------------------------------------------------------------------------- 1 | .wrap 2 | overflow hidden 3 | width 1000px 4 | padding-bottom 40px 5 | margin auto 6 | 7 | #content-wrap 8 | overflow hidden 9 | min-width 1000px 10 | padding-bottom 40px 11 | 12 | .content 13 | margin auto 14 | width 1000px 15 | padding-top 20px 16 | overflow hidden 17 | 18 | .primary-content 19 | float left 20 | width 840px 21 | margin-right 20px 22 | position relative 23 | z-index 2 24 | 25 | aside 26 | float right 27 | width 139px 28 | box-sizing border-box -------------------------------------------------------------------------------- /quizzes/3-final/css/stylus/mixins.styl: -------------------------------------------------------------------------------- 1 | transform(style) 2 | -webkit-transform style 3 | -moz-transform style 4 | -o-transform style 5 | -ms-transform style -------------------------------------------------------------------------------- /quizzes/3-final/css/stylus/questions.styl: -------------------------------------------------------------------------------- 1 | .question, #results 2 | padding 35px 80px 3 | box-sizing border-box 4 | border 1px solid #d3d3ca 5 | position relative 6 | background white 7 | 8 | h3 9 | font-size 16px 10 | color #494949 11 | text-shadow 0 1px 0 white 12 | margin-bottom 25px 13 | margin-right 40px 14 | font-family sans-serif 15 | 16 | .question 17 | margin-bottom 10px 18 | 19 | input[type=text] 20 | font-size 14px 21 | 22 | // Circular bubble with the current question number 23 | span.count 24 | background #edecde 25 | border 1px solid #d4d3c7 26 | color #494949 27 | text-shadow 0 1px 0 #72726e 28 | border-radius 100px 29 | padding 0 9px 30 | font-size 12px 31 | font-weight normal 32 | margin 7px 22px 0 -55px 33 | float left 34 | position relative 35 | top -2px 36 | line-height 2em 37 | 38 | 39 | 40 | // True or False 41 | .question .bool 42 | overflow hidden 43 | background url(../images/stripeBG.png) 44 | padding 21px 45 | float left 46 | 47 | .bool li 48 | float left 49 | margin-right 20px 50 | 51 | &:last-child 52 | margin-right 0 53 | 54 | .bool input[type=radio] 55 | width 20px 56 | -webkit-appearance none 57 | 58 | .bool label 59 | width 185px 60 | height 34px 61 | line-height 34px 62 | display inline-block 63 | text-align center 64 | font-weight bold 65 | margin-left -25px 66 | cursor pointer 67 | 68 | .correct 69 | box-shadow inset 0 0 0 4px #b8d86b; 70 | 71 | .incorrect 72 | box-shadow inset 0 0 0 4px #f8734a; 73 | 74 | .no-boxshadow 75 | .correct 76 | outline 4px solid #b8d86b 77 | .incorrect 78 | outline 4px solid #f8734a 79 | 80 | span.divider 81 | display: block; 82 | color: red; 83 | clear: left; 84 | float: left; 85 | width: 83%; 86 | margin-top: 50px; 87 | border-top: 1px dashed #e5e5e5; 88 | 89 | // Textareas 90 | .CodeMirror 91 | min-height 150px 92 | border-radius 5px 93 | padding 20px 94 | border 1px solid #e5e5e5 95 | 96 | .CodeMirror-focused 97 | box-shadow 0 0 0 1px #fbbc4b, 0 0 0 2px #fff0d7, 0 0 0 3px #fff6e6 98 | 99 | .CodeMirror-scroll 100 | height auto 101 | 102 | // Multiple Choice 103 | .multiple 104 | background url(../images/stripeBG.png) 105 | text-align center 106 | padding 30px 0 107 | height 40px 108 | 109 | li 110 | display inline 111 | margin-right 48px 112 | font-size 16px 113 | line-height 40px 114 | 115 | &:last-child 116 | margin-right 0 117 | 118 | input 119 | margin-right 10px 120 | cursor pointer 121 | 122 | label 123 | cursor pointer 124 | 125 | 126 | 127 | .multiple input:checked:before, 128 | .multiple input[type=radio] 129 | position:absolute; 130 | clip rect(0,0,0,0); 131 | clip rect(0 0 0 0); 132 | 133 | 134 | .multiple input[type="radio"] + label:before 135 | content url('../images/radio-on.png'); /* preload hover state */ 136 | content url('../images/radio-off.png'); 137 | position relative 138 | top 2px 139 | margin-right 10px 140 | 141 | 142 | .multiple input[type="radio"]:checked + label:before, 143 | .multiple input[type="radio"]:hover + label:before 144 | content url('../images/radio-on.png'); 145 | 146 | 147 | 148 | 149 | // Text Entry 150 | .question input[type=text] 151 | border-radius 5px 152 | border 1px solid #e5e5e5 153 | padding 0 10px 154 | height 45px 155 | width 60% 156 | outline 0 157 | 158 | &:focus, &:hover 159 | box-shadow 0 0 0 1px #fbbc4b, 0 0 0 2px #fff0d7, 0 0 0 3px #fff6e6 160 | 161 | // Solutions 162 | .solutions 163 | span.divider 164 | display none 165 | 166 | .question 167 | min-height 100% 168 | padding-bottom 60px 169 | 170 | // When no notes are provided 171 | + .question 172 | margin-top 40px 173 | 174 | .question input[type=submit] 175 | display none 176 | 177 | .notes 178 | margin-top 25px 179 | margin-bottom 60px 180 | padding-left 10px 181 | border-left 10px solid #fbbc4b 182 | 183 | p 184 | padding-bottom 0 185 | 186 | mark 187 | background none 188 | color #494949 189 | 190 | 191 | .question form 192 | clearfix() 193 | 194 | 195 | .textarea h3:after 196 | content attr(data-syntax); 197 | background #E56718; 198 | color white; 199 | padding .5em 1em; 200 | text-shadow 0 1px 0 #80390D; 201 | position absolute; 202 | right 0; 203 | top 0; 204 | font-family monospace; 205 | font-size .8em; -------------------------------------------------------------------------------- /quizzes/3-final/css/stylus/reset.styl: -------------------------------------------------------------------------------- 1 | html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td 2 | margin 0 3 | padding 0 4 | border 0 5 | outline 0 6 | font-weight inherit 7 | font-style inherit 8 | font-size 100% 9 | font-family inherit 10 | vertical-align baseline 11 | 12 | focus 13 | outline 0 14 | 15 | html 16 | overflow-y scroll 17 | 18 | body 19 | color #444 20 | background-color #f1f0e2 21 | background url(../images/bg-content.jpg) 22 | font 12px/20px sans-serif 23 | 24 | p 25 | padding-bottom 30px 26 | color #494949 27 | font-size 14px 28 | 29 | ol, ul 30 | list-style none 31 | 32 | code 33 | font-family Courier, "Courier New", "Lucida Console", Monaco 34 | background #e8e7d9 35 | padding 3px 5px 36 | font-size .8em 37 | display inline-block 38 | 39 | table 40 | border-collapse separate 41 | border-spacing 0 42 | 43 | caption, th, td 44 | text-align left 45 | font-weight normal 46 | 47 | blockquotebefore, blockquoteafter, qbefore, qafter 48 | content "" 49 | 50 | blockquote, q 51 | quotes "" "" 52 | 53 | acronym 54 | cursor help 55 | border-bottom 1px dashed #333 56 | 57 | strong 58 | font-weight bold 59 | 60 | cite, 61 | em, 62 | i 63 | font-style italic 64 | 65 | .right 66 | float right 67 | 68 | .left 69 | float left 70 | 71 | .hide, 72 | .screen-reader-text 73 | display none !important 74 | 75 | selection 76 | background #fdd283 77 | color #000 78 | 79 | -moz-selection 80 | background #fdd283 81 | color #000 82 | 83 | .clear 84 | clear both 85 | display block 86 | overflow hidden 87 | visibility hidden 88 | width 0 89 | height 0 90 | 91 | // Mixin 92 | clearfix() 93 | zoom 1 94 | &:before, &:after 95 | content '' 96 | display block 97 | overflow hidden 98 | visibility hidden 99 | width 0 100 | height 0 101 | &:after 102 | clear both -------------------------------------------------------------------------------- /quizzes/3-final/css/stylus/results.styl: -------------------------------------------------------------------------------- 1 | #results 2 | background white 3 | text-align center 4 | padding 35px 220px 0 5 | 6 | h2 7 | color #494949 8 | margin-bottom 35px 9 | 10 | a 11 | float none 12 | display inline-block 13 | 14 | p 15 | font-size 14px 16 | color #494949 17 | margin 20px 0 0 18 | line-height 1.7em 19 | 20 | .twitter 21 | margin-top 0 22 | margin-bottom 20px 23 | 24 | .score 25 | display block 26 | font-family 'MuseoSansRounded-700', sans-serif 27 | font-size 90px 28 | margin-top 40px -------------------------------------------------------------------------------- /quizzes/3-final/css/stylus/shadowEffects.styl: -------------------------------------------------------------------------------- 1 | flipped(direction) 2 | content '' 3 | position absolute 4 | z-index -1 5 | bottom 15px 6 | width 70% 7 | height 20% 8 | 9 | box-shadow 0 15px 10px -2px rgba(0, 0, 0, .2) 10 | display block 11 | 12 | if direction == 'left' 13 | transform(rotate(-3deg)); 14 | left 10px 15 | else 16 | transform(rotate(3deg)); 17 | right 10px 18 | 19 | .fancy-shadow:after 20 | flipped(left) 21 | 22 | .fancy-shadow:before 23 | flipped(right) 24 | 25 | // Stupid browser bug means I can't combine these four 26 | .fancy-shadow.correct:after, 27 | .fancy-shadow.correct:before 28 | content: none 29 | 30 | .fancy-shadow.incorrect:after, 31 | .fancy-shadow.incorrect:before 32 | content: none 33 | -------------------------------------------------------------------------------- /quizzes/3-final/css/stylus/style.styl: -------------------------------------------------------------------------------- 1 | black-shade = #494949 2 | grey = #d0cfc3 3 | 4 | @import 'mixins.styl' 5 | @import 'reset.styl' 6 | @import 'links.styl' 7 | @import 'headings.styl' 8 | @import 'crumbs.styl' 9 | @import 'header.styl' 10 | @import 'orange-button.styl' 11 | @import 'button.styl' 12 | @import 'questions.styl' 13 | @import 'results.styl' 14 | @import 'shadowEffects.styl' 15 | @import 'main.styl' 16 | @import 'aside.styl' 17 | @import '../../codemirror/lib/codemirror' 18 | @import '../../codemirror/theme/default' -------------------------------------------------------------------------------- /quizzes/3-final/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/3-final/favicon.ico -------------------------------------------------------------------------------- /quizzes/3-final/iframe.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 12 | 13 | 14 | 15 | 16 | 17 |
    18 |
    19 |
    20 | 21 |
    22 | 23 |
    24 |
    25 | 26 | 27 | 28 | 38 | 39 | 49 | 50 | -------------------------------------------------------------------------------- /quizzes/3-final/images/bg-body.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/3-final/images/bg-body.jpg -------------------------------------------------------------------------------- /quizzes/3-final/images/bg-content-shadow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/3-final/images/bg-content-shadow.png -------------------------------------------------------------------------------- /quizzes/3-final/images/bg-content-top.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/3-final/images/bg-content-top.jpg -------------------------------------------------------------------------------- /quizzes/3-final/images/bg-content.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/3-final/images/bg-content.jpg -------------------------------------------------------------------------------- /quizzes/3-final/images/bg-header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/3-final/images/bg-header.jpg -------------------------------------------------------------------------------- /quizzes/3-final/images/bool-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/3-final/images/bool-bg.png -------------------------------------------------------------------------------- /quizzes/3-final/images/false.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/3-final/images/false.png -------------------------------------------------------------------------------- /quizzes/3-final/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/3-final/images/logo.png -------------------------------------------------------------------------------- /quizzes/3-final/images/percentageComplete-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/3-final/images/percentageComplete-bg.png -------------------------------------------------------------------------------- /quizzes/3-final/images/radio-off.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/3-final/images/radio-off.png -------------------------------------------------------------------------------- /quizzes/3-final/images/radio-on.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/3-final/images/radio-on.png -------------------------------------------------------------------------------- /quizzes/3-final/images/radioButton.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/3-final/images/radioButton.png -------------------------------------------------------------------------------- /quizzes/3-final/images/score-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/3-final/images/score-bg.png -------------------------------------------------------------------------------- /quizzes/3-final/images/sprite-mini-icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/3-final/images/sprite-mini-icons.png -------------------------------------------------------------------------------- /quizzes/3-final/images/sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/3-final/images/sprite.png -------------------------------------------------------------------------------- /quizzes/3-final/images/stripeBG.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/3-final/images/stripeBG.png -------------------------------------------------------------------------------- /quizzes/3-final/images/texture.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/3-final/images/texture.jpg -------------------------------------------------------------------------------- /quizzes/3-final/images/texture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/3-final/images/texture.png -------------------------------------------------------------------------------- /quizzes/3-final/images/true.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/3-final/images/true.png -------------------------------------------------------------------------------- /quizzes/3-final/images/tuts.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/3-final/images/tuts.jpg -------------------------------------------------------------------------------- /quizzes/3-final/images/twitter-bird.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/3-final/images/twitter-bird.png -------------------------------------------------------------------------------- /quizzes/3-final/ruby.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tutsplus/30-days-to-jquery/502b7cd7eac7825ace6c2e9f552d7ae414656a2b/quizzes/3-final/ruby.jpeg -------------------------------------------------------------------------------- /quizzes/3-final/single.html: -------------------------------------------------------------------------------- 1 |

    Hi there; I'm single.html.

    --------------------------------------------------------------------------------