├── LICENSE ├── README.md ├── images ├── body-bg.jpg ├── download-button.png ├── github-button.png ├── header-bg.jpg ├── highlight-bg.jpg └── sidebar-bg.jpg ├── index.html ├── javascripts └── main.js ├── params.json ├── src ├── quizapp-v0.2.js ├── templates │ ├── question.html │ ├── quiz.html │ └── scorecard.html └── ui-bootstrap-tpls-0.9.0.min.js └── stylesheets ├── print.css ├── pygment_trac.css └── stylesheet.css /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 eajitesh 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | The sole purpose of this app is to allow users to create quick quizzes comprising of multiple-choice objective questions without getting bothered about HTML aspect. **The current version supports objective questions with just one answer**. In future versions, there will be support for multiple correct answers out of given options. 2 | 3 | It uses the **AngularJS** extensively to achieve the above objective. Following are key directives that are used to create the quiz: 4 | * iquiz 5 | * iquestion 6 | * iscorecard 7 | 8 | Following represents the details on above directives: 9 | 10 | ### Directive: iquiz 11 | 12 | Directive iquiz is used to present summary information about the quiz. It consists of "iquiz" as element tag name and "summary" as attribute. The code looks like following: 13 | 14 | `` 15 | 16 | 17 | ###

Directive: iquestion

18 | 19 | Directive iquestion is used to list down question and answer options along with correct option. It consists of "iquestion" as element tag name and "text" as attribute. The code looks like following: 20 | 21 | `` 22 | 23 | The question and answer options along with correct answer would be assigned to "text" attribute with following convention: 24 | 25 | * Question and answer options are seperated by identifier, **"::"** 26 | * Multiple answer options are seperated by identifier, **";"** 27 | * Correct answer needs to be preceded by identifier, **"__"** 28 | 29 | 30 | Take a look at an example below. Following is how the question would be displayed on the web page: 31 | 32 |
In which year, did the first world war start?
33 | 1912 34 |
35 | 1913 36 |
37 | 1914 38 |
39 | 1915 40 |
41 | 42 | With iquestion directive, the above could be written in the following manner, and AngularJS does the rest. Pay the attention of usage of identifiers such as "::" (question and answers seperator), ";" (answer options), "__" (for right answer) 43 | 44 | `` 45 | 46 | ### Directive: iscorecard 47 | 48 | Directive iscorecard is used to display the scores and correct answers. It just consists of "iscorecard" as element tag name. The code looks like following: 49 | 50 | `` 51 | 52 | ### Installation Instructions 53 | 54 | * Download the zip file, unzip it. 55 | * Following are different files that could be found within the root/src folder: 56 | * quizapp-v0.2.js: This file consists of actual AngularJS code including directives 57 | * ui-bootstrap-tpls-0.9.0.min.js: This is included as dependency of QuizApp to style the templates using Bootstrap library. 58 | * templates/quiz.html: This file is a template to display iquiz directive. 59 | * templates/question.html: This file is a template to display iquestion directive. 60 | * templates/scorecard.html: This file is a template to display scorecard. 61 | * Copy all of the files from "src" folder to another folder, say, "quizapp" within your project and get started. 62 | * Include following angularjs script files. You may want to load the files from Google Hosted Libraries. 63 | * angular.min.js 64 | * angular-sanitize.min.js 65 | * Include bootstrap CSS library. This would make sure that the templates display neat looking HTML blocks. You may change classes in the template files to display the template differently. You may want to use Bootstrap CDN link in your page. 66 | * Include following CSS and script files within your HTML section. Script files can as well be added within BODY section for performance reasons. 67 | * `` 68 | * `` 69 | * `` 70 | * ``. The assumption is that you have copied the downloaded file within **quizapp** folder as instructed above. 71 | * ``. The assumption is that you have copied the downloaded file within **quizapp** folder as instructed above. 72 | * In the page, you want to use the module, define the angular app with QuizApp as dependency. The code would look like following: 73 | `angular.module( "HelloApp", ["QuizApp"] );` 74 | * Once done with above, you are all set to use following three directives: 75 | * iquiz 76 | * iquestion 77 | * iscorecard 78 | 79 | ### QuickStart 80 | 81 | * The samplequiz.html presents sample code in line with instructions written above. It needs a webserver to run. 82 | * Copy the samplequiz.html and src folder content on a location, say, quizdemo, on your webserver. 83 | * Access samplequiz.html in a browser. 84 | -------------------------------------------------------------------------------- /images/body-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eajitesh/QuizApp/02977cc64440450de37e1cd1b1090c277fb3d73f/images/body-bg.jpg -------------------------------------------------------------------------------- /images/download-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eajitesh/QuizApp/02977cc64440450de37e1cd1b1090c277fb3d73f/images/download-button.png -------------------------------------------------------------------------------- /images/github-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eajitesh/QuizApp/02977cc64440450de37e1cd1b1090c277fb3d73f/images/github-button.png -------------------------------------------------------------------------------- /images/header-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eajitesh/QuizApp/02977cc64440450de37e1cd1b1090c277fb3d73f/images/header-bg.jpg -------------------------------------------------------------------------------- /images/highlight-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eajitesh/QuizApp/02977cc64440450de37e1cd1b1090c277fb3d73f/images/highlight-bg.jpg -------------------------------------------------------------------------------- /images/sidebar-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eajitesh/QuizApp/02977cc64440450de37e1cd1b1090c277fb3d73f/images/sidebar-bg.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | 16 | Quizapp by eajitesh 17 | 18 | 19 | 20 |
21 |
22 |

Quizapp

23 |

Create Your Quiz in Just Few Minutes

24 | View project onGitHub 25 |
26 |
27 | 28 |
29 |
30 |
31 |

The sole purpose of this app is to allow users to create quick quizzes comprising of multiple-choice objective questions without getting bothered about HTML aspect. The current version supports objective questions with just one answer. In future versions, there will be support for multiple correct answers out of given options.

32 | 33 |

It uses the AngularJS extensively to achieve the above objective. Following are key directives that are used to create the quiz:

34 | 35 |
    36 |
  • iquiz
    • 37 |
  • iquestion
    • 38 |
  • iscorecard
    • 39 |

Following represents the details on above directives:

40 | 41 |

42 | Directive: iquiz

43 | 44 |

Directive iquiz is used to present summary information about the quiz. It consists of "iquiz" as element tag name and "summary" as attribute. The code looks like following:

45 | 46 |

<iquiz summary=""></iquiz>

47 | 48 |

49 |

50 | Directive: iquestion

51 | 52 | 53 |

Directive iquestion is used to list down question and answer options along with correct option. It consists of "iquestion" as element tag name and "text" as attribute. The code looks like following:

54 | 55 |

<iquestion text=""></iquestion>

56 | 57 |

The question and answer options along with correct answer would be assigned to "text" attribute with following convention:

58 | 59 |
    60 |
  • Question and answer options are seperated by identifier, "::" 61 |
    • 62 |
  • Multiple answer options are seperated by identifier, ";" 63 |
    • 64 |
  • Correct answer needs to be preceded by identifier, "__" 65 |
    • 66 |

Take a look at an example below. Following is how the question would be displayed on the web page:

67 | 68 |
In which year, did the first world war start?
69 | 70 |

1912 71 |
1913 72 |
1914 73 |
1915 74 |

75 | 76 |

With iquestion directive, the above could be written in the following manner, and AngularJS does the rest. Pay the attention of usage of identifiers such as "::" (question and answers seperator), ";" (answer options), "__" (for right answer)

77 | 78 |

<iquestion text="In which year, did the first world war start?::1912;1913;__1914;1915"></iquestion>

79 | 80 |

81 | Directive: iscorecard

82 | 83 |

Directive iscorecard is used to display the scores and correct answers. It just consists of "iscorecard" as element tag name. The code looks like following:

84 | 85 |

<iscorecard></iscorecard>

86 | 87 |

88 | Installation Instructions

89 | 90 |
    91 |
  • Download the zip file, unzip it.
    • 92 |
  • Following are different files that could be found within the root/src folder: 93 | 94 |
      95 |
    • quizapp-v0.2.js: This file consists of actual AngularJS code including directives
      • 96 |
    • ui-bootstrap-tpls-0.9.0.min.js: This is included as dependency of QuizApp to style the templates using Bootstrap library.
      • 97 |
    • templates/quiz.html: This file is a template to display iquiz directive.
      • 98 |
    • templates/question.html: This file is a template to display iquestion directive.
      • 99 |
    • templates/scorecard.html: This file is a template to display scorecard.
      • 100 |
    101 |
    • 102 |
  • Copy all of the files from "src" folder to another folder, say, "quizapp" within your project and get started.
    • 103 |
  • Include following angularjs script files. You may want to load the files from Google Hosted Libraries. 104 | 105 |
      106 |
    • angular.min.js
      • 107 |
    • angular-sanitize.min.js
      • 108 |
    109 |
    • 110 |
  • Include bootstrap CSS library. This would make sure that the templates display neat looking HTML blocks. You may change classes in the template files to display the template differently. You may want to use Bootstrap CDN link in your page.
    • 111 |
  • Include following CSS and script files within your HTML section. Script files can as well be added within BODY section for performance reasons. 112 | 113 |
      114 |
    • <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
      • 115 |
    • <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
      • 116 |
    • <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-sanitize.min.js"></script>
      • 117 |
    • 118 | <script src="quizapp/quizapp-v0.2.js"></script>. The assumption is that you have copied the downloaded file within quizapp folder as instructed above.
      • 119 |
    • 120 | <script src="quizapp/ui-bootstrap-tpls-0.9.0.min.js"></script>. The assumption is that you have copied the downloaded file within quizapp folder as instructed above.
      • 121 |
    122 |
    • 123 |
  • In the page, you want to use the module, define the angular app with QuizApp as dependency. The code would look like following: 124 | angular.module( "HelloApp", ["QuizApp"] ); 125 |
    • 126 |
  • Once done with above, you are all set to use following three directives: 127 | 128 |
      129 |
    • iquiz
      • 130 |
    • iquestion
      • 131 |
    • iscorecard
      • 132 |
    133 |
    • 134 |

135 | QuickStart

136 | 137 |
    138 |
  • The samplequiz.html presents sample code in line with instructions written above. It needs a webserver to run.
    • 139 |
  • Copy the samplequiz.html and src folder content on a location, say, quizdemo, on your webserver.
    • 140 |
  • Access samplequiz.html in a browser.
    • 141 |
142 |
143 | 144 | 158 |
159 |
160 | 161 | 165 | 171 | 172 | 173 | -------------------------------------------------------------------------------- /javascripts/main.js: -------------------------------------------------------------------------------- 1 | console.log('This would be the main JS file.'); 2 | -------------------------------------------------------------------------------- /params.json: -------------------------------------------------------------------------------- 1 | {"name":"Quizapp","tagline":"Create Your Quiz in Just Few Minutes","body":"The sole purpose of this app is to allow users to create quick quizzes comprising of multiple-choice objective questions without getting bothered about HTML aspect. **The current version supports objective questions with just one answer**. In future versions, there will be support for multiple correct answers out of given options. \r\n\r\nIt uses the **AngularJS** extensively to achieve the above objective. Following are key directives that are used to create the quiz:\r\n* iquiz\r\n* iquestion\r\n* iscorecard\r\n\r\nFollowing represents the details on above directives:\r\n\r\n### Directive: iquiz\r\n\r\nDirective iquiz is used to present summary information about the quiz. It consists of \"iquiz\" as element tag name and \"summary\" as attribute. The code looks like following:\r\n\r\n``\r\n\r\n\r\n###

Directive: iquestion

\r\n\r\nDirective iquestion is used to list down question and answer options along with correct option. It consists of \"iquestion\" as element tag name and \"text\" as attribute. The code looks like following:\r\n\r\n``\r\n\r\nThe question and answer options along with correct answer would be assigned to \"text\" attribute with following convention:\r\n\r\n* Question and answer options are seperated by identifier, **\"::\"**\r\n* Multiple answer options are seperated by identifier, **\";\"**\r\n* Correct answer needs to be preceded by identifier, **\"__\"**\r\n\r\n\r\nTake a look at an example below. Following is how the question would be displayed on the web page:\r\n\r\n
In which year, did the first world war start?
\r\n1912\r\n
\r\n1913\r\n
\r\n1914\r\n
\r\n1915\r\n
\r\n\r\nWith iquestion directive, the above could be written in the following manner, and AngularJS does the rest. Pay the attention of usage of identifiers such as \"::\" (question and answers seperator), \";\" (answer options), \"__\" (for right answer)\r\n\r\n``\r\n\r\n### Directive: iscorecard\r\n\r\nDirective iscorecard is used to display the scores and correct answers. It just consists of \"iscorecard\" as element tag name. The code looks like following:\r\n\r\n``\r\n\r\n### Installation Instructions\r\n\r\n* Download the zip file, unzip it.\r\n* Following are different files that could be found within the root/src folder:\r\n * quizapp-v0.2.js: This file consists of actual AngularJS code including directives\r\n * ui-bootstrap-tpls-0.9.0.min.js: This is included as dependency of QuizApp to style the templates using Bootstrap library. \r\n * templates/quiz.html: This file is a template to display iquiz directive.\r\n * templates/question.html: This file is a template to display iquestion directive.\r\n * templates/scorecard.html: This file is a template to display scorecard.\r\n* Copy all of the files from \"src\" folder to another folder, say, \"quizapp\" within your project and get started.\r\n* Include following angularjs script files. You may want to load the files from Google Hosted Libraries.\r\n * angular.min.js\r\n * angular-sanitize.min.js\r\n* Include bootstrap CSS library. This would make sure that the templates display neat looking HTML blocks. You may change classes in the template files to display the template differently. You may want to use Bootstrap CDN link in your page.\r\n* Include following CSS and script files within your HTML section. Script files can as well be added within BODY section for performance reasons.\r\n * ``\r\n * ``\r\n * ``\r\n * ``. The assumption is that you have copied the downloaded file within **quizapp** folder as instructed above.\r\n * ``. The assumption is that you have copied the downloaded file within **quizapp** folder as instructed above.\r\n* In the page, you want to use the module, define the angular app with QuizApp as dependency. The code would look like following:\r\n `angular.module( \"HelloApp\", [\"QuizApp\"] );`\r\n* Once done with above, you are all set to use following three directives:\r\n * iquiz\r\n * iquestion\r\n * iscorecard\r\n\r\n### QuickStart\r\n\r\n* The samplequiz.html presents sample code in line with instructions written above. It needs a webserver to run.\r\n* Copy the samplequiz.html and src folder content on a location, say, quizdemo, on your webserver.\r\n* Access samplequiz.html in a browser.\r\n","google":"UA-37706354-1","note":"Don't delete this file! It's used internally to help with page regeneration."} -------------------------------------------------------------------------------- /src/quizapp-v0.2.js: -------------------------------------------------------------------------------- 1 | var quizApp = angular.module("quizApp", [ 'ngSanitize', 'ui.bootstrap' ]); 2 | 3 | quizApp.service("QuizService", function() { 4 | return new Quiz(); 5 | }); 6 | 7 | function Quiz() { 8 | this.score = 0; 9 | this.showScore = false; 10 | this.totalQuestions = 0; 11 | this.counter = 1; 12 | this.totalQuestions = 0; 13 | this.questionsAttempted = 0; 14 | this.correctAnswers = 0; 15 | this.displayAnswers = false; 16 | 17 | this.plusScore = function(value) { 18 | this.score += value; 19 | this.correctAnswers++; 20 | }; 21 | this.minusScore = function(value) { 22 | this.score -= value; 23 | this.correctAnswers--; 24 | }; 25 | this.displayScore = function() { 26 | this.showScore = true; 27 | }; 28 | this.getCounter = function() { 29 | return this.counter++; 30 | }; 31 | this.updateTotalQuestionsCount = function() { 32 | this.totalQuestions++; 33 | }; 34 | this.updateQuestionsAttemptedCount = function() { 35 | this.questionsAttempted++; 36 | }; 37 | this.updateCorrectQuestionsCount = function() { 38 | this.correctAnswers++; 39 | }; 40 | } 41 | 42 | quizApp.directive("iquiz", function() { 43 | return { 44 | restrict : 'E', 45 | scope : { 46 | summary : '@' 47 | }, 48 | controller : function($scope) { 49 | }, 50 | templateUrl : 'templates/quiz.html' 51 | }; 52 | }); 53 | 54 | quizApp.directive("iscorecard", [ 'QuizService', function( QuizService ) { 55 | return { 56 | restrict : 'E', 57 | scope : {}, 58 | controller : function($scope) { 59 | $scope.totalQuestions = QuizService.totalQuestions; 60 | $scope.questionsAttempted = QuizService.questionsAttempted; 61 | $scope.correctAnswers = QuizService.correctAnswers; 62 | $scope.score = QuizService.score; 63 | $scope.showscores = ""; 64 | 65 | $scope.showAnswers = function() { 66 | QuizService.displayAnswers = true; 67 | } 68 | 69 | $scope.showScores = function() { 70 | $scope.showscores = true; 71 | } 72 | }, 73 | link : function(scope, element, attrs) { 74 | scope.$watch(function() { 75 | return QuizService.questionsAttempted; 76 | }, function() { 77 | scope.questionsAttempted = QuizService.questionsAttempted; 78 | }); 79 | scope.$watch(function() { 80 | return QuizService.score; 81 | }, function() { 82 | scope.score = QuizService.score; 83 | }); 84 | scope.$watch(function() { 85 | return QuizService.score; 86 | }, function() { 87 | scope.correctAnswers = QuizService.correctAnswers; 88 | }); 89 | }, 90 | templateUrl : 'templates/scorecard.html' 91 | }; 92 | }]); 93 | 94 | quizApp.directive("iquestion", [ 'QuizService', function( QuizService ) { 95 | return { 96 | restrict : 'E', 97 | scope : { 98 | text : '@', 99 | }, 100 | controller : function($scope) { 101 | 102 | $scope.evalScore = function(id, value) { 103 | var rightAnswerFound = false, foundIndex = 0, i = 0, arrIndex; 104 | angular.forEach($scope.qna, function(qna) { 105 | if (qna.id === id) { 106 | arrIndex = i; 107 | angular.forEach(qna.options, function(option) { 108 | if (option.text === value 109 | && option.correct === true) { 110 | rightAnswerFound = true; 111 | } 112 | }); 113 | } 114 | i++; 115 | }); 116 | if (rightAnswerFound === true) { 117 | QuizService.plusScore(1); 118 | $scope.qna[arrIndex].answeredCorrectly = true; 119 | } else { 120 | if ($scope.qna[arrIndex].answeredCorrectly === true) { 121 | QuizService.minusScore(1); 122 | $scope.qna[arrIndex].answeredCorrectly = false; 123 | } 124 | } 125 | if ($scope.qna[arrIndex].attempted === false) { 126 | $scope.qna[arrIndex].attempted = true; 127 | QuizService.updateQuestionsAttemptedCount(); 128 | } 129 | }; 130 | 131 | }, 132 | link : function(scope, element, attrs) { 133 | // Update parent scope details 134 | // 135 | QuizService.updateTotalQuestionsCount(); 136 | // 137 | // 138 | var text = scope.text; 139 | scope.qna = []; 140 | var qnaObj = new Object(); 141 | qnaObj.id = QuizService.getCounter(); 142 | qnaObj.tag = "q_" + qnaObj.id; 143 | qnaObj.answeredCorrectly = false; 144 | qnaObj.attempted = false; 145 | // 146 | // Processing the question and answer text 147 | // 148 | var qnaArr = text.split("::"); 149 | qnaObj.question = "Q: " + qnaArr[0] + ""; 150 | var ansArr = qnaArr[1].split(";"); 151 | qnaObj.options = []; 152 | qnaObj.answers = []; 153 | for (i = 0; i < ansArr.length; i++) { 154 | var option = { 155 | "text" : ansArr[i], 156 | "correct" : false, 157 | "style" : "" 158 | }; 159 | var optionText = option.text; 160 | if (optionText.indexOf("__") === 0) { 161 | option.text = optionText.substring(2, optionText.length); 162 | option.correct = true; 163 | } 164 | qnaObj.options.push(option); 165 | } 166 | scope.qna.push(qnaObj); 167 | 168 | scope.$watch(function() { 169 | return QuizService.displayAnswers; 170 | }, function() { 171 | console.log("answer displayed..."); 172 | angular.forEach(scope.qna, function(qna) { 173 | var i = 0; 174 | angular.forEach(qna.options, function(option) { 175 | console.log(option.text); 176 | if (option.correct === true 177 | && QuizService.displayAnswers === true) { 178 | qna.options[i].style = "background-color:#ffff00"; 179 | } 180 | i++; 181 | }); 182 | }); 183 | }); 184 | 185 | }, 186 | templateUrl : 'templates/question.html' 187 | }; 188 | }]); -------------------------------------------------------------------------------- /src/templates/question.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 8 |
9 |
-------------------------------------------------------------------------------- /src/templates/quiz.html: -------------------------------------------------------------------------------- 1 |
2 | {{summary}} 3 |
-------------------------------------------------------------------------------- /src/templates/scorecard.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Score Card

4 |
5 |
6 | 9 |
10 | Total no. of questions: {{totalQuestions}} 11 |
12 |
13 | No. of questions attempted: {{questionsAttempted}} 14 |
15 |
16 |
17 | No. of correct answers: {{correctAnswers}} 18 |
19 |
20 | Overall score: {{score}}/{{totalQuestions}} 21 |
22 |
23 |
24 | 25 | 26 |
27 |
28 |
-------------------------------------------------------------------------------- /src/ui-bootstrap-tpls-0.9.0.min.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eajitesh/QuizApp/02977cc64440450de37e1cd1b1090c277fb3d73f/src/ui-bootstrap-tpls-0.9.0.min.js -------------------------------------------------------------------------------- /stylesheets/print.css: -------------------------------------------------------------------------------- 1 | html, body, div, span, applet, object, iframe, 2 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 3 | a, abbr, acronym, address, big, cite, code, 4 | del, dfn, em, img, ins, kbd, q, s, samp, 5 | small, strike, strong, sub, sup, tt, var, 6 | b, u, i, center, 7 | dl, dt, dd, ol, ul, li, 8 | fieldset, form, label, legend, 9 | table, caption, tbody, tfoot, thead, tr, th, td, 10 | article, aside, canvas, details, embed, 11 | figure, figcaption, footer, header, hgroup, 12 | menu, nav, output, ruby, section, summary, 13 | time, mark, audio, video { 14 | margin: 0; 15 | padding: 0; 16 | border: 0; 17 | font-size: 100%; 18 | font: inherit; 19 | vertical-align: baseline; 20 | } 21 | /* HTML5 display-role reset for older browsers */ 22 | article, aside, details, figcaption, figure, 23 | footer, header, hgroup, menu, nav, section { 24 | display: block; 25 | } 26 | body { 27 | line-height: 1; 28 | } 29 | ol, ul { 30 | list-style: none; 31 | } 32 | blockquote, q { 33 | quotes: none; 34 | } 35 | blockquote:before, blockquote:after, 36 | q:before, q:after { 37 | content: ''; 38 | content: none; 39 | } 40 | table { 41 | border-collapse: collapse; 42 | border-spacing: 0; 43 | } 44 | body { 45 | font-size: 13px; 46 | line-height: 1.5; 47 | font-family: 'Helvetica Neue', Helvetica, Arial, serif; 48 | color: #000; 49 | } 50 | 51 | a { 52 | color: #d5000d; 53 | font-weight: bold; 54 | } 55 | 56 | header { 57 | padding-top: 35px; 58 | padding-bottom: 10px; 59 | } 60 | 61 | header h1 { 62 | font-weight: bold; 63 | letter-spacing: -1px; 64 | font-size: 48px; 65 | color: #303030; 66 | line-height: 1.2; 67 | } 68 | 69 | header h2 { 70 | letter-spacing: -1px; 71 | font-size: 24px; 72 | color: #aaa; 73 | font-weight: normal; 74 | line-height: 1.3; 75 | } 76 | #downloads { 77 | display: none; 78 | } 79 | #main_content { 80 | padding-top: 20px; 81 | } 82 | 83 | code, pre { 84 | font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal; 85 | color: #222; 86 | margin-bottom: 30px; 87 | font-size: 12px; 88 | } 89 | 90 | code { 91 | padding: 0 3px; 92 | } 93 | 94 | pre { 95 | border: solid 1px #ddd; 96 | padding: 20px; 97 | overflow: auto; 98 | } 99 | pre code { 100 | padding: 0; 101 | } 102 | 103 | ul, ol, dl { 104 | margin-bottom: 20px; 105 | } 106 | 107 | 108 | /* COMMON STYLES */ 109 | 110 | table { 111 | width: 100%; 112 | border: 1px solid #ebebeb; 113 | } 114 | 115 | th { 116 | font-weight: 500; 117 | } 118 | 119 | td { 120 | border: 1px solid #ebebeb; 121 | text-align: center; 122 | font-weight: 300; 123 | } 124 | 125 | form { 126 | background: #f2f2f2; 127 | padding: 20px; 128 | 129 | } 130 | 131 | 132 | /* GENERAL ELEMENT TYPE STYLES */ 133 | 134 | h1 { 135 | font-size: 2.8em; 136 | } 137 | 138 | h2 { 139 | font-size: 22px; 140 | font-weight: bold; 141 | color: #303030; 142 | margin-bottom: 8px; 143 | } 144 | 145 | h3 { 146 | color: #d5000d; 147 | font-size: 18px; 148 | font-weight: bold; 149 | margin-bottom: 8px; 150 | } 151 | 152 | h4 { 153 | font-size: 16px; 154 | color: #303030; 155 | font-weight: bold; 156 | } 157 | 158 | h5 { 159 | font-size: 1em; 160 | color: #303030; 161 | } 162 | 163 | h6 { 164 | font-size: .8em; 165 | color: #303030; 166 | } 167 | 168 | p { 169 | font-weight: 300; 170 | margin-bottom: 20px; 171 | } 172 | 173 | a { 174 | text-decoration: none; 175 | } 176 | 177 | p a { 178 | font-weight: 400; 179 | } 180 | 181 | blockquote { 182 | font-size: 1.6em; 183 | border-left: 10px solid #e9e9e9; 184 | margin-bottom: 20px; 185 | padding: 0 0 0 30px; 186 | } 187 | 188 | ul li { 189 | list-style: disc inside; 190 | padding-left: 20px; 191 | } 192 | 193 | ol li { 194 | list-style: decimal inside; 195 | padding-left: 3px; 196 | } 197 | 198 | dl dd { 199 | font-style: italic; 200 | font-weight: 100; 201 | } 202 | 203 | footer { 204 | margin-top: 40px; 205 | padding-top: 20px; 206 | padding-bottom: 30px; 207 | font-size: 13px; 208 | color: #aaa; 209 | } 210 | 211 | footer a { 212 | color: #666; 213 | } 214 | 215 | /* MISC */ 216 | .clearfix:after { 217 | clear: both; 218 | content: '.'; 219 | display: block; 220 | visibility: hidden; 221 | height: 0; 222 | } 223 | 224 | .clearfix {display: inline-block;} 225 | * html .clearfix {height: 1%;} 226 | .clearfix {display: block;} -------------------------------------------------------------------------------- /stylesheets/pygment_trac.css: -------------------------------------------------------------------------------- 1 | .highlight { background: #ffffff; } 2 | .highlight .c { color: #999988; font-style: italic } /* Comment */ 3 | .highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */ 4 | .highlight .k { font-weight: bold } /* Keyword */ 5 | .highlight .o { font-weight: bold } /* Operator */ 6 | .highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */ 7 | .highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */ 8 | .highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */ 9 | .highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ 10 | .highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ 11 | .highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */ 12 | .highlight .ge { font-style: italic } /* Generic.Emph */ 13 | .highlight .gr { color: #aa0000 } /* Generic.Error */ 14 | .highlight .gh { color: #999999 } /* Generic.Heading */ 15 | .highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ 16 | .highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */ 17 | .highlight .go { color: #888888 } /* Generic.Output */ 18 | .highlight .gp { color: #555555 } /* Generic.Prompt */ 19 | .highlight .gs { font-weight: bold } /* Generic.Strong */ 20 | .highlight .gu { color: #800080; font-weight: bold; } /* Generic.Subheading */ 21 | .highlight .gt { color: #aa0000 } /* Generic.Traceback */ 22 | .highlight .kc { font-weight: bold } /* Keyword.Constant */ 23 | .highlight .kd { font-weight: bold } /* Keyword.Declaration */ 24 | .highlight .kn { font-weight: bold } /* Keyword.Namespace */ 25 | .highlight .kp { font-weight: bold } /* Keyword.Pseudo */ 26 | .highlight .kr { font-weight: bold } /* Keyword.Reserved */ 27 | .highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */ 28 | .highlight .m { color: #009999 } /* Literal.Number */ 29 | .highlight .s { color: #d14 } /* Literal.String */ 30 | .highlight .na { color: #008080 } /* Name.Attribute */ 31 | .highlight .nb { color: #0086B3 } /* Name.Builtin */ 32 | .highlight .nc { color: #445588; font-weight: bold } /* Name.Class */ 33 | .highlight .no { color: #008080 } /* Name.Constant */ 34 | .highlight .ni { color: #800080 } /* Name.Entity */ 35 | .highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */ 36 | .highlight .nf { color: #990000; font-weight: bold } /* Name.Function */ 37 | .highlight .nn { color: #555555 } /* Name.Namespace */ 38 | .highlight .nt { color: #000080 } /* Name.Tag */ 39 | .highlight .nv { color: #008080 } /* Name.Variable */ 40 | .highlight .ow { font-weight: bold } /* Operator.Word */ 41 | .highlight .w { color: #bbbbbb } /* Text.Whitespace */ 42 | .highlight .mf { color: #009999 } /* Literal.Number.Float */ 43 | .highlight .mh { color: #009999 } /* Literal.Number.Hex */ 44 | .highlight .mi { color: #009999 } /* Literal.Number.Integer */ 45 | .highlight .mo { color: #009999 } /* Literal.Number.Oct */ 46 | .highlight .sb { color: #d14 } /* Literal.String.Backtick */ 47 | .highlight .sc { color: #d14 } /* Literal.String.Char */ 48 | .highlight .sd { color: #d14 } /* Literal.String.Doc */ 49 | .highlight .s2 { color: #d14 } /* Literal.String.Double */ 50 | .highlight .se { color: #d14 } /* Literal.String.Escape */ 51 | .highlight .sh { color: #d14 } /* Literal.String.Heredoc */ 52 | .highlight .si { color: #d14 } /* Literal.String.Interpol */ 53 | .highlight .sx { color: #d14 } /* Literal.String.Other */ 54 | .highlight .sr { color: #009926 } /* Literal.String.Regex */ 55 | .highlight .s1 { color: #d14 } /* Literal.String.Single */ 56 | .highlight .ss { color: #990073 } /* Literal.String.Symbol */ 57 | .highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */ 58 | .highlight .vc { color: #008080 } /* Name.Variable.Class */ 59 | .highlight .vg { color: #008080 } /* Name.Variable.Global */ 60 | .highlight .vi { color: #008080 } /* Name.Variable.Instance */ 61 | .highlight .il { color: #009999 } /* Literal.Number.Integer.Long */ 62 | 63 | .type-csharp .highlight .k { color: #0000FF } 64 | .type-csharp .highlight .kt { color: #0000FF } 65 | .type-csharp .highlight .nf { color: #000000; font-weight: normal } 66 | .type-csharp .highlight .nc { color: #2B91AF } 67 | .type-csharp .highlight .nn { color: #000000 } 68 | .type-csharp .highlight .s { color: #A31515 } 69 | .type-csharp .highlight .sc { color: #A31515 } 70 | -------------------------------------------------------------------------------- /stylesheets/stylesheet.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | html, body, div, span, applet, object, iframe, 6 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 7 | a, abbr, acronym, address, big, cite, code, 8 | del, dfn, em, img, ins, kbd, q, s, samp, 9 | small, strike, strong, sub, sup, tt, var, 10 | b, u, i, center, 11 | dl, dt, dd, ol, ul, li, 12 | fieldset, form, label, legend, 13 | table, caption, tbody, tfoot, thead, tr, th, td, 14 | article, aside, canvas, details, embed, 15 | figure, figcaption, footer, header, hgroup, 16 | menu, nav, output, ruby, section, summary, 17 | time, mark, audio, video { 18 | margin: 0; 19 | padding: 0; 20 | border: 0; 21 | font-size: 100%; 22 | font: inherit; 23 | vertical-align: baseline; 24 | } 25 | /* HTML5 display-role reset for older browsers */ 26 | article, aside, details, figcaption, figure, 27 | footer, header, hgroup, menu, nav, section { 28 | display: block; 29 | } 30 | body { 31 | line-height: 1; 32 | } 33 | ol, ul { 34 | list-style: none; 35 | } 36 | blockquote, q { 37 | quotes: none; 38 | } 39 | blockquote:before, blockquote:after, 40 | q:before, q:after { 41 | content: ''; 42 | content: none; 43 | } 44 | table { 45 | border-collapse: collapse; 46 | border-spacing: 0; 47 | } 48 | 49 | /* LAYOUT STYLES */ 50 | body { 51 | font-size: 15px; 52 | line-height: 1.5; 53 | background: #fafafa url(../images/body-bg.jpg) 0 0 repeat; 54 | font-family: 'Helvetica Neue', Helvetica, Arial, serif; 55 | font-weight: 400; 56 | color: #666; 57 | } 58 | 59 | a { 60 | color: #2879d0; 61 | } 62 | a:hover { 63 | color: #2268b2; 64 | } 65 | 66 | header { 67 | padding-top: 40px; 68 | padding-bottom: 40px; 69 | font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif; 70 | background: #2e7bcf url(../images/header-bg.jpg) 0 0 repeat-x; 71 | border-bottom: solid 1px #275da1; 72 | } 73 | 74 | header h1 { 75 | letter-spacing: -1px; 76 | font-size: 72px; 77 | color: #fff; 78 | line-height: 1; 79 | margin-bottom: 0.2em; 80 | width: 540px; 81 | } 82 | 83 | header h2 { 84 | font-size: 26px; 85 | color: #9ddcff; 86 | font-weight: normal; 87 | line-height: 1.3; 88 | width: 540px; 89 | letter-spacing: 0; 90 | } 91 | 92 | .inner { 93 | position: relative; 94 | width: 940px; 95 | margin: 0 auto; 96 | } 97 | 98 | #content-wrapper { 99 | border-top: solid 1px #fff; 100 | padding-top: 30px; 101 | } 102 | 103 | #main-content { 104 | width: 690px; 105 | float: left; 106 | } 107 | 108 | #main-content img { 109 | max-width: 100%; 110 | } 111 | 112 | aside#sidebar { 113 | width: 200px; 114 | padding-left: 20px; 115 | min-height: 504px; 116 | float: right; 117 | background: transparent url(../images/sidebar-bg.jpg) 0 0 no-repeat; 118 | font-size: 12px; 119 | line-height: 1.3; 120 | } 121 | 122 | aside#sidebar p.repo-owner, 123 | aside#sidebar p.repo-owner a { 124 | font-weight: bold; 125 | } 126 | 127 | #downloads { 128 | margin-bottom: 40px; 129 | } 130 | 131 | a.button { 132 | width: 134px; 133 | height: 58px; 134 | line-height: 1.2; 135 | font-size: 23px; 136 | color: #fff; 137 | padding-left: 68px; 138 | padding-top: 22px; 139 | font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif; 140 | } 141 | a.button small { 142 | display: block; 143 | font-size: 11px; 144 | } 145 | header a.button { 146 | position: absolute; 147 | right: 0; 148 | top: 0; 149 | background: transparent url(../images/github-button.png) 0 0 no-repeat; 150 | } 151 | aside a.button { 152 | width: 138px; 153 | padding-left: 64px; 154 | display: block; 155 | background: transparent url(../images/download-button.png) 0 0 no-repeat; 156 | margin-bottom: 20px; 157 | font-size: 21px; 158 | } 159 | 160 | code, pre { 161 | font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace; 162 | color: #222; 163 | margin-bottom: 30px; 164 | font-size: 13px; 165 | } 166 | 167 | code { 168 | background-color: #f2f8fc; 169 | border: solid 1px #dbe7f3; 170 | padding: 0 3px; 171 | } 172 | 173 | pre { 174 | padding: 20px; 175 | background: #fff; 176 | text-shadow: none; 177 | overflow: auto; 178 | border: solid 1px #f2f2f2; 179 | } 180 | pre code { 181 | color: #2879d0; 182 | background-color: #fff; 183 | border: none; 184 | padding: 0; 185 | } 186 | 187 | ul, ol, dl { 188 | margin-bottom: 20px; 189 | } 190 | 191 | 192 | /* COMMON STYLES */ 193 | 194 | hr { 195 | height: 1px; 196 | line-height: 1px; 197 | margin-top: 1em; 198 | padding-bottom: 1em; 199 | border: none; 200 | background: transparent url('../images/hr.png') 0 0 no-repeat; 201 | } 202 | 203 | table { 204 | width: 100%; 205 | border: 1px solid #ebebeb; 206 | } 207 | 208 | th { 209 | font-weight: 500; 210 | } 211 | 212 | td { 213 | border: 1px solid #ebebeb; 214 | text-align: center; 215 | font-weight: 300; 216 | } 217 | 218 | form { 219 | background: #f2f2f2; 220 | padding: 20px; 221 | 222 | } 223 | 224 | 225 | /* GENERAL ELEMENT TYPE STYLES */ 226 | 227 | #main-content h1 { 228 | font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif; 229 | font-size: 2.8em; 230 | letter-spacing: -1px; 231 | color: #474747; 232 | } 233 | 234 | #main-content h1:before { 235 | content: "/"; 236 | color: #9ddcff; 237 | padding-right: 0.3em; 238 | margin-left: -0.9em; 239 | } 240 | 241 | #main-content h2 { 242 | font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif; 243 | font-size: 22px; 244 | font-weight: bold; 245 | margin-bottom: 8px; 246 | color: #474747; 247 | } 248 | #main-content h2:before { 249 | content: "//"; 250 | color: #9ddcff; 251 | padding-right: 0.3em; 252 | margin-left: -1.5em; 253 | } 254 | 255 | #main-content h3 { 256 | font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif; 257 | font-size: 18px; 258 | font-weight: bold; 259 | margin-top: 24px; 260 | margin-bottom: 8px; 261 | color: #474747; 262 | } 263 | 264 | #main-content h3:before { 265 | content: "///"; 266 | color: #9ddcff; 267 | padding-right: 0.3em; 268 | margin-left: -2em; 269 | } 270 | 271 | #main-content h4 { 272 | font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif; 273 | font-size: 15px; 274 | font-weight: bold; 275 | color: #474747; 276 | } 277 | 278 | h4:before { 279 | content: "////"; 280 | color: #9ddcff; 281 | padding-right: 0.3em; 282 | margin-left: -2.8em; 283 | } 284 | 285 | #main-content h5 { 286 | font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif; 287 | font-size: 14px; 288 | color: #474747; 289 | } 290 | h5:before { 291 | content: "/////"; 292 | color: #9ddcff; 293 | padding-right: 0.3em; 294 | margin-left: -3.2em; 295 | } 296 | 297 | #main-content h6 { 298 | font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif; 299 | font-size: .8em; 300 | color: #474747; 301 | } 302 | h6:before { 303 | content: "//////"; 304 | color: #9ddcff; 305 | padding-right: 0.3em; 306 | margin-left: -3.7em; 307 | } 308 | 309 | p { 310 | margin-bottom: 20px; 311 | } 312 | 313 | a { 314 | text-decoration: none; 315 | } 316 | 317 | p a { 318 | font-weight: 400; 319 | } 320 | 321 | blockquote { 322 | font-size: 1.6em; 323 | border-left: 10px solid #e9e9e9; 324 | margin-bottom: 20px; 325 | padding: 0 0 0 30px; 326 | } 327 | 328 | ul { 329 | list-style: disc inside; 330 | padding-left: 20px; 331 | } 332 | 333 | ol { 334 | list-style: decimal inside; 335 | padding-left: 3px; 336 | } 337 | 338 | dl dd { 339 | font-style: italic; 340 | font-weight: 100; 341 | } 342 | 343 | footer { 344 | background: transparent url('../images/hr.png') 0 0 no-repeat; 345 | margin-top: 40px; 346 | padding-top: 20px; 347 | padding-bottom: 30px; 348 | font-size: 13px; 349 | color: #aaa; 350 | } 351 | 352 | footer a { 353 | color: #666; 354 | } 355 | footer a:hover { 356 | color: #444; 357 | } 358 | 359 | /* MISC */ 360 | .clearfix:after { 361 | clear: both; 362 | content: '.'; 363 | display: block; 364 | visibility: hidden; 365 | height: 0; 366 | } 367 | 368 | .clearfix {display: inline-block;} 369 | * html .clearfix {height: 1%;} 370 | .clearfix {display: block;} 371 | 372 | /* #Media Queries 373 | ================================================== */ 374 | 375 | /* Smaller than standard 960 (devices and browsers) */ 376 | @media only screen and (max-width: 959px) {} 377 | 378 | /* Tablet Portrait size to standard 960 (devices and browsers) */ 379 | @media only screen and (min-width: 768px) and (max-width: 959px) { 380 | .inner { 381 | width: 740px; 382 | } 383 | header h1, header h2 { 384 | width: 340px; 385 | } 386 | header h1 { 387 | font-size: 60px; 388 | } 389 | header h2 { 390 | font-size: 30px; 391 | } 392 | #main-content { 393 | width: 490px; 394 | } 395 | #main-content h1:before, 396 | #main-content h2:before, 397 | #main-content h3:before, 398 | #main-content h4:before, 399 | #main-content h5:before, 400 | #main-content h6:before { 401 | content: none; 402 | padding-right: 0; 403 | margin-left: 0; 404 | } 405 | } 406 | 407 | /* All Mobile Sizes (devices and browser) */ 408 | @media only screen and (max-width: 767px) { 409 | .inner { 410 | width: 93%; 411 | } 412 | header { 413 | padding: 20px 0; 414 | } 415 | header .inner { 416 | position: relative; 417 | } 418 | header h1, header h2 { 419 | width: 100%; 420 | } 421 | header h1 { 422 | font-size: 48px; 423 | } 424 | header h2 { 425 | font-size: 24px; 426 | } 427 | header a.button { 428 | background-image: none; 429 | width: auto; 430 | height: auto; 431 | display: inline-block; 432 | margin-top: 15px; 433 | padding: 5px 10px; 434 | position: relative; 435 | text-align: center; 436 | font-size: 13px; 437 | line-height: 1; 438 | background-color: #9ddcff; 439 | color: #2879d0; 440 | -moz-border-radius: 5px; 441 | -webkit-border-radius: 5px; 442 | border-radius: 5px; 443 | } 444 | header a.button small { 445 | font-size: 13px; 446 | display: inline; 447 | } 448 | #main-content, 449 | aside#sidebar { 450 | float: none; 451 | width: 100% ! important; 452 | } 453 | aside#sidebar { 454 | background-image: none; 455 | margin-top: 20px; 456 | border-top: solid 1px #ddd; 457 | padding: 20px 0; 458 | min-height: 0; 459 | } 460 | aside#sidebar a.button { 461 | display: none; 462 | } 463 | #main-content h1:before, 464 | #main-content h2:before, 465 | #main-content h3:before, 466 | #main-content h4:before, 467 | #main-content h5:before, 468 | #main-content h6:before { 469 | content: none; 470 | padding-right: 0; 471 | margin-left: 0; 472 | } 473 | } 474 | 475 | /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ 476 | @media only screen and (min-width: 480px) and (max-width: 767px) {} 477 | 478 | /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ 479 | @media only screen and (max-width: 479px) {} 480 | --------------------------------------------------------------------------------