├── .gitignore ├── Gruntfile.js ├── README.md ├── css └── style.css ├── index.html ├── js ├── build │ ├── quiz-min.js │ └── quiz.js ├── modules │ └── get.js └── quiz.js ├── package.json ├── questions.json └── sass ├── base ├── _extends.scss ├── _fonts.scss ├── _mixins.scss ├── _reset.scss ├── _variables.scss └── mixins │ ├── _animate-link.scss │ ├── _animations.scss │ ├── _backface-visibility.scss │ ├── _background-cover.scss │ ├── _box-model.scss │ ├── _box-shadow.scss │ ├── _breakpoint.scss │ ├── _clearfix.scss │ ├── _hide-text.scss │ ├── _hover-focus.scss │ ├── _inline-block.scss │ ├── _inner-shadow.scss │ ├── _keyframes.scss │ ├── _linear-gradient-angle.scss │ ├── _linear-gradient.scss │ ├── _margin-auto.scss │ ├── _min-breakpoint.scss │ ├── _opacity.scss │ ├── _placeholder.scss │ ├── _rem.scss │ ├── _replace-text.scss │ ├── _retina.scss │ ├── _rounded-corners.scss │ ├── _single-transform.scss │ ├── _text-shadow.scss │ ├── _transform.scss │ ├── _transitions.scss │ ├── _translate.scss │ └── _triangles.scss ├── layout └── _grid.scss ├── modules ├── _answers.scss ├── _header.scss ├── _questions.scss ├── _results.scss └── _start.scss └── style.scss /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | ~* 3 | *.bak 4 | *.tmp 5 | .sass-cache 6 | *.log 7 | node_modules/ -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt) { 2 | 'use strict'; 3 | grunt.initConfig({ 4 | pkg: grunt.file.readJSON('package.json'), 5 | sass: { 6 | dist: { 7 | options: { 8 | outputStyle: 'compressed' 9 | }, 10 | files: [ 11 | { 12 | expand: true, 13 | cwd: 'sass/', 14 | src: ['**/*.scss'], 15 | dest: 'css/', 16 | ext: '.css', 17 | }, 18 | ], 19 | } 20 | }, 21 | spell: { 22 | all: { 23 | src: ['questions.json', 'README.md'], 24 | options: { 25 | ignore: [] 26 | } 27 | } 28 | }, 29 | jshint: { 30 | all: ['js/**/*.js'], 31 | options: { 32 | reporter: require('jshint-stylish'), 33 | curly: true, 34 | eqeqeq: true, 35 | eqnull: false, 36 | browser: true, 37 | indent: 2, 38 | quotmark: 'single', 39 | unused: false, 40 | ignores: ['node_modules/**/*.js', 'js/build/**/*.js'], 41 | globals: { 42 | jQuery: true 43 | }, 44 | }, 45 | }, 46 | jsonlint: { 47 | sample: { 48 | src: [ '**/*.json' ] 49 | } 50 | }, 51 | browserify: { 52 | dist: { 53 | options: { 54 | }, 55 | files: { 56 | 'js/build/quiz.js': ['js/quiz.js'] 57 | }, 58 | } 59 | }, 60 | uglify: { 61 | dist: { 62 | files:{ 63 | 'js/build/quiz-min.js': ['js/build/quiz.js'] 64 | }, 65 | } 66 | }, 67 | imagemin: { 68 | static: { 69 | options: { 70 | optimizationLevel: 0, 71 | progressive: true 72 | } 73 | }, 74 | dynamic: { 75 | files: [{ 76 | expand: true, 77 | cwd: 'img/', 78 | src: ['**/*.{png,jpg,gif}'], 79 | dest: 'img/' 80 | }] 81 | } 82 | }, 83 | sassyclean: { 84 | options: { 85 | modules: ['sass/modules/**/*.scss', 'sass/themes/**/*.scss', 'sass/layout/**/*.scss', 'sass/base/**/*.scss'], 86 | buildfiles: ['sass/**/*.scss'], 87 | remove: false, 88 | days: null 89 | }, 90 | }, 91 | watch: { 92 | css: { 93 | files: ['sass/**/*.scss'], 94 | tasks: ['sass:dist'], 95 | options: { 96 | spawn: false, 97 | livereload: true 98 | }, 99 | }, 100 | scripts: { 101 | files: ['js/**/*.js'], 102 | tasks: ['jshint','newer:browserify', 'newer:uglify'], 103 | options: { 104 | livereload: true 105 | } 106 | }, 107 | // json: { 108 | // files: ['**/*.json'], 109 | // tasks: ['newer:jsonlint'], 110 | // options: { 111 | // spawn: false 112 | // } 113 | // }, 114 | images: { 115 | files: ['img/**/*.{png,jpg,gif}'], 116 | tasks: ['newer:imagemin'], 117 | options: { 118 | spawn: false 119 | } 120 | }, 121 | livereload: { 122 | files: ['*.html', '*.php', 'js/**/*.{js,json}', 'css/*.css','img/**/*.{png,jpg,jpeg,gif,webp,svg}'], 123 | options: { 124 | livereload: true 125 | } 126 | } 127 | } 128 | }); 129 | grunt.loadNpmTasks('grunt-sass'); 130 | grunt.loadNpmTasks('grunt-sassyclean'); 131 | grunt.loadNpmTasks('grunt-contrib-watch'); 132 | grunt.loadNpmTasks('grunt-contrib-jshint'); 133 | grunt.loadNpmTasks('grunt-contrib-uglify'); 134 | grunt.loadNpmTasks('grunt-contrib-imagemin'); 135 | grunt.loadNpmTasks('grunt-newer'); 136 | grunt.loadNpmTasks('grunt-browserify'); 137 | grunt.loadNpmTasks('grunt-jsonlint'); 138 | grunt.loadNpmTasks('grunt-spell'); 139 | grunt.registerTask('default',['watch']); 140 | }; -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Front End Quiz 2 | ============= 3 | A trivia quiz for front end engineering questions. 4 | 5 | [DEMO](http://coderesponsible.com/front-end-developer-quiz/) 6 | 7 | Open to pull requests for more questions in the questions.json file. 8 | 9 | ## Release History 10 | * 0.1.0: Initial release. 11 | 12 | ## Contributing 13 | 1. Fork it 14 | 2. Create your feature branch (`git checkout -b my-new-feature`) 15 | 3. Commit your changes (`git commit -am "Add some feature"`) 16 | 4. Push to the branch (`git push origin my-new-feature`) 17 | 5. Create new Pull Request -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | .row,.answers,.start{margin-left:auto;margin-right:auto}html{font-size:62.5%}body{margin:0;padding:0;width:100%;font-size:14px;font-size:1.4rem;font-family:Helvetica,Arial,sans-serif;line-height:1.3}ul{list-style:none;margin:0;padding:0}ul li{margin:0;padding:0}ol{margin:0;padding:0}p{padding:0;margin:0px 0px 5px 0px;margin:0rem 0rem 0.5rem 0rem}h1,h2,h3,h4,h5,h6{padding:0;margin:0px 0px 10px 0px;margin:0rem 0rem 1rem 0rem;font-weight:normal}fieldset{border:none;margin:0;padding:0}button{cursor:pointer}.row{max-width:600}header{text-align:center;padding:10px;border-bottom:1px solid #ccc}header h1{font-size:30px;font-size:3rem}header .timer{font-size:22px;font-size:2.2rem}.question{margin-top:30px;text-align:center}.answers{max-width:600px;padding:0 30px;margin-bottom:60px}.answers li{text-align:center;margin-bottom:10px}.answers a{display:-moz-inline-stack;display:inline-block;vertical-align:top;zoom:1;*display:inline;background:#ccc;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;width:90%;padding:15px;color:black;text-decoration:none}.answers a.wrong{background:red}.answers a.correct{background:green}.answers a:hover,.answers a:focus{background:#a6a6a6}.results{margin-top:30px;text-align:center}.results h2{font-size:28px;font-size:2.8rem}.results h2.fail{color:red}.results h2.pass{color:green}.start{background:green;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;color:white;width:90%;max-width:400px;padding:15px;text-decoration:none;display:block;text-align:center;margin-top:30px}.start:hover,.start:focus{background:#00b300} -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Front End Quiz 5 | 6 | 7 | 8 | 11 | 12 | 25 | 26 | 27 |
28 |

Front End Quiz

29 |
30 |

0 of questions

31 | Fork me on GitHub 32 |
33 |
34 | Start 35 |

36 | 37 |
38 | 39 | 40 | -------------------------------------------------------------------------------- /js/build/quiz-min.js: -------------------------------------------------------------------------------- 1 | !function a(b,c,d){function e(g,h){if(!c[g]){if(!b[g]){var i="function"==typeof require&&require;if(!h&&i)return i(g,!0);if(f)return f(g,!0);var j=new Error("Cannot find module '"+g+"'");throw j.code="MODULE_NOT_FOUND",j}var k=c[g]={exports:{}};b[g][0].call(k.exports,function(a){var c=b[g][1][a];return e(c?c:a)},k,k.exports,a,b,c,d)}return c[g].exports}for(var f="function"==typeof require&&require,g=0;ga?"0"+a:a,m.innerHTML="00:"+a,b--,0>b&&(clearInterval(f),console.log("time up"),c())},1e3)}function c(){var a="",f=g.length;if(l.innerHTML="",k.innerHTML="",e=Math.floor(Math.random()*f),-1===t.indexOf(e)&&q>r){t.push(e),r++,n.innerHTML=r,l.innerHTML=g[e].question,d=g[e].category;for(var h=i(g[e].answers),m=0;m'+h[m].answer+"";k.innerHTML=a,b()}else if(q>r)c();else{var o=parseInt(s.length/q*100,10),p="pass";50>=o&&(p="fail"),j.innerHTML='

'+o+"%

"+s.length+"/"+q+"

"}}var d,e,f,g,h=a("./modules/get"),i=a("shuffle-array"),j=document.getElementById("content"),k=document.getElementById("answers"),l=document.getElementById("question"),m=document.getElementById("timer"),n=document.getElementById("current-number"),o=document.getElementById("total-questions"),p=document.getElementById("start"),q=25,r=0,s=[],t=[];o.innerHTML=q,h("questions.json").then(function(a){g=JSON.parse(a)},function(a){console.error("Failed!",a)}),p.addEventListener("click",function(){p.style.display="none",c()}),document.querySelector("body").addEventListener("click",function(a){if("answer"===a.target.className){a.preventDefault();for(var b=!1,d=g[e].answers,h=document.getElementsByClassName("answer"),i=0;i numberAsked){ 139 | 140 | // add the current question to questionsAsked array so it isn't asked again 141 | questionsAsked.push(currentQuestion); 142 | 143 | //increase the number of questions asked 144 | numberAsked++; 145 | 146 | // update the current question number 147 | currentNum.innerHTML = numberAsked; 148 | 149 | // add question to HTML 150 | question.innerHTML = data[currentQuestion].question; 151 | 152 | // the question category 153 | currentCat = data[currentQuestion].category; 154 | 155 | 156 | 157 | // get the multiple choice answsers for the question 158 | var ans = shuffleArray(data[currentQuestion].answers); 159 | for (var i = 0; i < ans.length; i++){ 160 | answerList += '
  • ' + ans[i].answer + '
    • '; 161 | } 162 | // add multiple choice answers to DOM 163 | answers.innerHTML = answerList; 164 | 165 | //start timer 166 | startTimer(); 167 | 168 | }else if(quizTotal > numberAsked){ 169 | // load another question 170 | loadQuestion(); 171 | }else{ 172 | // all questions have been answered 173 | var percent = parseInt((correct.length / quizTotal) * 100, 10); 174 | var failPass = 'pass'; 175 | if(percent <= 50){ 176 | failPass = 'fail'; 177 | } 178 | content.innerHTML = '

    '+ percent +'%

    '+ correct.length + '/' + quizTotal+'

    '; 179 | } 180 | } 181 | },{"./modules/get":1,"shuffle-array":3}],3:[function(require,module,exports){ 182 | 'use strict'; 183 | 184 | /** 185 | * Randomize the order of the elements in a given array. 186 | * @param {Array} arr - The given array. 187 | * @param {Object} [options] - Optional configuration options. 188 | * @param {Boolean} [options.copy] - Sets if should return a shuffled copy of the given array. By default it's a falsy value. 189 | * @param {Function} [options.rng] - Specifies a custom random number generator. 190 | * @returns {Array} 191 | */ 192 | function shuffle(arr, options) { 193 | 194 | if (!Array.isArray(arr)) { 195 | throw new Error('shuffle expect an array as parameter.'); 196 | } 197 | 198 | options = options || {}; 199 | 200 | var collection = arr, 201 | len = arr.length, 202 | rng = options.rng || Math.random, 203 | random, 204 | temp; 205 | 206 | if (options.copy === true) { 207 | collection = arr.slice(); 208 | } 209 | 210 | while (len) { 211 | random = Math.floor(rng() * len); 212 | len -= 1; 213 | temp = collection[len]; 214 | collection[len] = collection[random]; 215 | collection[random] = temp; 216 | } 217 | 218 | return collection; 219 | }; 220 | 221 | /** 222 | * Pick one or more random elements from the given array. 223 | * @param {Array} arr - The given array. 224 | * @param {Object} [options] - Optional configuration options. 225 | * @param {Number} [options.picks] - Specifies how many random elements you want to pick. By default it picks 1. 226 | * @param {Function} [options.rng] - Specifies a custom random number generator. 227 | * @returns {Object} 228 | */ 229 | shuffle.pick = function(arr, options) { 230 | 231 | if (!Array.isArray(arr)) { 232 | throw new Error('shuffle.pick() expect an array as parameter.'); 233 | } 234 | 235 | options = options || {}; 236 | 237 | var rng = options.rng || Math.random, 238 | picks = options.picks || 1; 239 | 240 | if (typeof picks === 'number' && picks !== 1) { 241 | var len = arr.length, 242 | collection = arr.slice(), 243 | random = [], 244 | index; 245 | 246 | while (picks) { 247 | index = Math.floor(rng() * len); 248 | random.push(collection[index]); 249 | collection.splice(index, 1); 250 | len -= 1; 251 | picks -= 1; 252 | } 253 | 254 | return random; 255 | } 256 | 257 | return arr[Math.floor(rng() * arr.length)]; 258 | }; 259 | 260 | /** 261 | * Expose 262 | */ 263 | module.exports = shuffle; 264 | 265 | },{}]},{},[2]); 266 | -------------------------------------------------------------------------------- /js/modules/get.js: -------------------------------------------------------------------------------- 1 | module.exports = function(url){ 2 | // Return a new promise. 3 | return new Promise(function(resolve, reject) { 4 | // Do the usual XHR stuff 5 | var req = new XMLHttpRequest(); 6 | req.open('GET', url); 7 | 8 | req.onload = function() { 9 | // This is called even on 404 etc 10 | // so check the status 11 | if (req.status === 200) { 12 | // Resolve the promise with the response text 13 | resolve(req.response); 14 | } 15 | else { 16 | // Otherwise reject with the status text 17 | // which will hopefully be a meaningful error 18 | reject(Error(req.statusText)); 19 | } 20 | }; 21 | 22 | // Handle network errors 23 | req.onerror = function() { 24 | reject(Error('Network Error')); 25 | }; 26 | 27 | // Make the request 28 | req.send(); 29 | }); 30 | }; -------------------------------------------------------------------------------- /js/quiz.js: -------------------------------------------------------------------------------- 1 | var get = require('./modules/get'), 2 | shuffleArray = require('shuffle-array'), 3 | content = document.getElementById('content'), 4 | answers = document.getElementById('answers'), 5 | question = document.getElementById('question'), 6 | timer = document.getElementById('timer'), 7 | currentNum = document.getElementById('current-number'), 8 | totalNum = document.getElementById('total-questions'), 9 | start = document.getElementById('start'), 10 | quizTotal = 25, 11 | numberAsked = 0, 12 | correct = [], 13 | questionsAsked = [], 14 | currentCat, 15 | currentQuestion, 16 | time, 17 | data; 18 | 19 | // set the number of questions being asked 20 | totalNum.innerHTML = quizTotal; 21 | 22 | // load questions json 23 | get('questions.json').then(function(response) { 24 | data = JSON.parse(response); 25 | }, function(error) { 26 | console.error('Failed!', error); 27 | }); 28 | 29 | // start quiz 30 | start.addEventListener('click', function(event) { 31 | start.style.display = 'none'; 32 | loadQuestion(); 33 | }); 34 | 35 | // check if answer is correct 36 | document.querySelector('body').addEventListener('click', function(event) { 37 | if (event.target.className === 'answer') { 38 | event.preventDefault(); 39 | 40 | var rightWrong = false, 41 | ans = data[currentQuestion].answers; 42 | var atag = document.getElementsByClassName('answer'); 43 | for (var i = 0; i < ans.length; i++){ 44 | 45 | // highlight the correct answer 46 | if(atag[i].innerHTML === ans[i].answer && ans[i].value === true){ 47 | atag[i].style.background = 'green'; 48 | atag[i].style.color = 'white'; 49 | } 50 | 51 | // set the answer to right if it's correct 52 | if(ans[i].answer === event.target.innerHTML && ans[i].value === true){ 53 | rightWrong = true; 54 | } 55 | } 56 | 57 | // if answered correct push to correct array 58 | if(rightWrong === true){ 59 | correct.push(1); 60 | }else{ 61 | event.target.style.background = 'red'; 62 | event.target.style.color = 'white'; 63 | } 64 | 65 | // clear previous timer 66 | clearInterval(time); 67 | 68 | // load another question 69 | setTimeout(function(){ 70 | loadQuestion(); 71 | }, 1500); 72 | } 73 | }); 74 | 75 | function startTimer() { 76 | var seconds, 77 | thirtySecs = 30; 78 | 79 | time = setInterval(function() { 80 | seconds = parseInt(thirtySecs % 30); 81 | seconds = seconds < 10 ? '0' + seconds : seconds; 82 | 83 | timer.innerHTML ='00:' + seconds; 84 | thirtySecs--; 85 | 86 | if(thirtySecs < 0){ 87 | clearInterval(time); 88 | console.log('time up'); 89 | loadQuestion(); 90 | } 91 | 92 | }, 1000); 93 | } 94 | 95 | function loadQuestion(){ 96 | var answerList = '', 97 | numberQuestions = data.length; 98 | 99 | // clear previous question/answer 100 | question.innerHTML = ''; 101 | answers.innerHTML = ''; 102 | 103 | // randomly get question 104 | currentQuestion = Math.floor(Math.random() * numberQuestions); 105 | 106 | if(questionsAsked.indexOf(currentQuestion) === -1 && quizTotal > numberAsked){ 107 | 108 | // add the current question to questionsAsked array so it isn't asked again 109 | questionsAsked.push(currentQuestion); 110 | 111 | //increase the number of questions asked 112 | numberAsked++; 113 | 114 | // update the current question number 115 | currentNum.innerHTML = numberAsked; 116 | 117 | // add question to HTML 118 | question.innerHTML = data[currentQuestion].question; 119 | 120 | // the question category 121 | currentCat = data[currentQuestion].category; 122 | 123 | 124 | 125 | // get the multiple choice answsers for the question 126 | var ans = shuffleArray(data[currentQuestion].answers); 127 | for (var i = 0; i < ans.length; i++){ 128 | answerList += '
  • ' + ans[i].answer + '
    • '; 129 | } 130 | // add multiple choice answers to DOM 131 | answers.innerHTML = answerList; 132 | 133 | //start timer 134 | startTimer(); 135 | 136 | }else if(quizTotal > numberAsked){ 137 | // load another question 138 | loadQuestion(); 139 | }else{ 140 | // all questions have been answered 141 | var percent = parseInt((correct.length / quizTotal) * 100, 10); 142 | var failPass = 'pass'; 143 | if(percent <= 50){ 144 | failPass = 'fail'; 145 | } 146 | content.innerHTML = '

    '+ percent +'%

    '+ correct.length + '/' + quizTotal+'

    '; 147 | } 148 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "front-end-quiz", 3 | "version": "1.0.0", 4 | "description": "A trivia quiz for front end engineering questions", 5 | "main": "Gruntfile.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "dependencies": {}, 11 | "devDependencies": { 12 | "grunt": "^0.4.5", 13 | "grunt-browserify": "^3.3.0", 14 | "grunt-contrib-imagemin": "^0.9.2", 15 | "grunt-contrib-jshint": "^0.10.0", 16 | "grunt-contrib-uglify": "^0.7.0", 17 | "grunt-contrib-watch": "^0.6.1", 18 | "grunt-jsonlint": "^1.0.4", 19 | "grunt-newer": "^1.1.0", 20 | "grunt-sass": "^0.17.0", 21 | "grunt-sassyclean": "^0.1.1", 22 | "grunt-spell": "^0.2.1", 23 | "jshint-stylish": "^1.0.0", 24 | "shuffle-array": "^0.1.0" 25 | }, 26 | "author": "Ryan Burgess (http://everernote.com/)", 27 | "license": "MIT" 28 | } 29 | -------------------------------------------------------------------------------- /questions.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "question": "What does doctype in HTML do?", 4 | "category":"HTML", 5 | "answers": [ 6 | {"answer": "Tells the browser how to render the HTML markup", "value": true}, 7 | {"answer": "Loads all references to external JavaScript files", "value": false}, 8 | {"answer": "Adds CSS styles to the HTML page", "value": false}, 9 | {"answer": "It doesn't do anything it's just there as a comment to other developers", "value": false} 10 | ] 11 | }, 12 | { 13 | "question": "What's the difference between standards and quirks mode?", 14 | "category":"HTML", 15 | "answers": [ 16 | {"answer": "When W3C standards came out browsers couldn't start using them right away so there was two modes standards and quirks mode", "value": true}, 17 | {"answer": "Quirks mode refers to WebKit browsers and standards mode refers to IE", "value": false}, 18 | {"answer": "Quirks mode is used for testing and standards mode is used in production websites", "value": false}, 19 | {"answer": "Quirks mode refers to the developer tools and standards mode refers to the browser window", "value": false} 20 | ] 21 | }, 22 | { 23 | "question": "What maybe a problem with serving pages as application/xhtml+xml?", 24 | "category":"HTML", 25 | "answers": [ 26 | {"answer": "Browsers that don't accept it render plain text/html", "value": true}, 27 | {"answer": "There are performance issues", "value": false}, 28 | {"answer": "The browser only displays the CSS and not the HTML", "value": false}, 29 | {"answer": "Fonts render at 62.5%", "value": false} 30 | ] 31 | }, 32 | { 33 | "question": "How do you declare the language in HTML?", 34 | "category":"HTML", 35 | "answers": [ 36 | {"answer": "A language attribute can be added to the HTML tag", "value": true}, 37 | {"answer": "A language attribute should be added to the body tag", "value": false}, 38 | {"answer": "There's no way to declare it in HTML, it requires JavaScript", "value": false}, 39 | {"answer": "By adding a class to the body tag", "value": false} 40 | ] 41 | }, 42 | { 43 | "question": "What are data- attributes good for?", 44 | "category":"HTML", 45 | "answers": [ 46 | {"answer": "Provide the ability to embed custom data attributes on all HTML elements", "value": true}, 47 | {"answer": "Create a way to not have to use classes and IDs for styling", "value": false}, 48 | {"answer": "They aren't good because they are legacy attributes that are no longer used in HTML5", "value": false}, 49 | {"answer": "They are good for accessibility", "value": false} 50 | ] 51 | }, 52 | { 53 | "question": "What is NOT an HTML5 element?", 54 | "category":"HTML", 55 | "answers": [ 56 | {"answer": "block", "value": true}, 57 | {"answer": "audio", "value": false}, 58 | {"answer": "canvas", "value": false}, 59 | {"answer": "section", "value": false} 60 | ] 61 | }, 62 | { 63 | "question": "What is the difference between sessionStorage and localStorage?", 64 | "category":"HTML", 65 | "answers": [ 66 | {"answer": "localStorage stores data with no expiration date", "value": true}, 67 | {"answer": "sessionStorage can only be used once", "value": false}, 68 | {"answer": "sessionStorage holds more data", "value": false}, 69 | {"answer": "There's no difference they both accomplish the same thing", "value": false} 70 | ] 71 | }, 72 | { 73 | "question": "How can you make a script run asynchronous?", 74 | "category":"HTML", 75 | "answers": [ 76 | {"answer": "script async", "value": true}, 77 | {"answer": "asynchronous", "value": false}, 78 | {"answer": "async script", "value": false}, 79 | {"answer": "script asynchronous", "value": false} 80 | ] 81 | }, 82 | { 83 | "question": "What is WAI-ARIA?", 84 | "category":"HTML", 85 | "answers": [ 86 | {"answer": "Web Accessibility Initiative – Accessible Rich Internet Applications", "value": true}, 87 | {"answer": "Web Access Internationaly - All Real Internet Areas", "value": false}, 88 | {"answer": "Web standards", "value": false}, 89 | {"answer": "A group that focuses on helping browser load times", "value": false} 90 | ] 91 | }, 92 | { 93 | "question": "What is the difference between classes and IDs in CSS?", 94 | "category":"CSS", 95 | "answers": [ 96 | {"answer": "IDs can only be used once in the HTML", "value": true}, 97 | {"answer": "IDs can be accessed by JavaScript", "value": false}, 98 | {"answer": "Classes are used on children elements", "value": false}, 99 | {"answer": "Classes can't be added to the body element", "value": false} 100 | ] 101 | }, 102 | { 103 | "question": "What does 'reset' in CSS mean?", 104 | "category":"CSS", 105 | "answers": [ 106 | {"answer": "Resets the default browser styling", "value": true}, 107 | {"answer": "Normalizes styles accross all browsers", "value": false}, 108 | {"answer": "Removes inline CSS styles", "value": false}, 109 | {"answer": "Start the project over", "value": false} 110 | ] 111 | }, 112 | { 113 | "question": "What does z-index do?", 114 | "category":"CSS", 115 | "answers": [ 116 | {"answer": "Controls the vertical stacking order of elements that overlap", "value": true}, 117 | {"answer": "Moves elements off screen", "value": false}, 118 | {"answer": "Hides elements from the screen", "value": false}, 119 | {"answer": "Controls the horizontal stacking order of elements that overlap", "value": false} 120 | ] 121 | }, 122 | { 123 | "question": "What does clearfix in CSS do?", 124 | "category":"CSS", 125 | "answers": [ 126 | {"answer": "Fixes issues related to floating child elements within a parent element", "value": true}, 127 | {"answer": "Removes elements from the DOM", "value": false}, 128 | {"answer": "Hides content off screen", "value": false}, 129 | {"answer": "Used for continuous scroll", "value": false} 130 | ] 131 | }, 132 | { 133 | "question": "What are CSS sprites?", 134 | "category":"CSS", 135 | "answers": [ 136 | {"answer": "A collection of images put into a single image", "value": true}, 137 | {"answer": "CSS animations", "value": false}, 138 | {"answer": "Small images", "value": false}, 139 | {"answer": "Minified images", "value": false} 140 | ] 141 | }, 142 | { 143 | "question": "What are Sass, Stylus and LESS?", 144 | "category":"CSS", 145 | "answers": [ 146 | {"answer": "CSS pre-processors", "value": true}, 147 | {"answer": "CSS frameworks", "value": false}, 148 | {"answer": "Repsonsive CSS grid systems", "value": false}, 149 | {"answer": "Types of CSS", "value": false} 150 | ] 151 | }, 152 | { 153 | "question": "What is the box model?", 154 | "category":"CSS", 155 | "answers": [ 156 | {"answer": "All HTML elements can be considered as boxes", "value": true}, 157 | {"answer": "A way of stacking HTML elements", "value": false}, 158 | {"answer": "A way of styling HTML elements", "value": false}, 159 | {"answer": "Creates a way to position the browser grid", "value": false} 160 | ] 161 | }, 162 | { 163 | "question": "What does the 'C' in CSS stand for?", 164 | "category":"CSS", 165 | "answers": [ 166 | {"answer": "Cascading", "value": true}, 167 | {"answer": "Concatenate", "value": false}, 168 | {"answer": "Color", "value": false}, 169 | {"answer": "Complete", "value": false} 170 | ] 171 | }, 172 | { 173 | "question": "Which one of these is a CSS framework?", 174 | "category":"CSS", 175 | "answers": [ 176 | {"answer": "Bootstrap", "value": true}, 177 | {"answer": "Angular", "value": false}, 178 | {"answer": "Backbone", "value": false}, 179 | {"answer": "CSS Block", "value": false} 180 | ] 181 | }, 182 | { 183 | "question": "What is Flexbox?", 184 | "category":"CSS", 185 | "answers": [ 186 | {"answer": "Is a layout mode providing for the arrangement of elements", "value": true}, 187 | {"answer": "How the browser interprets CSS", "value": false}, 188 | {"answer": "A CSS animation framework", "value": false}, 189 | {"answer": "A way to change the width of the browser window", "value": false} 190 | ] 191 | }, 192 | { 193 | "question": "Why is it better to use translate() rather than an position:absolute Top/Right/Bottom/Left?", 194 | "category":"CSS", 195 | "answers": [ 196 | {"answer": "Better performance", "value": true}, 197 | {"answer": "More browser support", "value": false}, 198 | {"answer": "Easier to use", "value": false}, 199 | {"answer": "Position:absolute is only supported in legacy browsers", "value": false} 200 | ] 201 | }, 202 | { 203 | "question": "How do you create a DOM node with JavaScript?", 204 | "category":"JavaScript", 205 | "answers": [ 206 | {"answer": "document.createElement();", "value": true}, 207 | {"answer": "window.createElement();", "value": false}, 208 | {"answer": "createAElement();", "value": false}, 209 | {"answer": "document.createNewElement();", "value": false} 210 | ] 211 | }, 212 | { 213 | "question": "What is a function in JavaScript?", 214 | "category":"JavaScript", 215 | "answers": [ 216 | {"answer": "A function is a block of code designed to perform a task", "value": true}, 217 | {"answer": "A calculation method", "value": false}, 218 | {"answer": "A tool for writing JavaScript", "value": false}, 219 | {"answer": "Libraries or frameworks added to a project", "value": false} 220 | ] 221 | }, 222 | { 223 | "question": "What is an array?", 224 | "category":"JavaScript", 225 | "answers": [ 226 | {"answer": "Stores multiple values in a single variable", "value": true}, 227 | {"answer": "A way to sort numbers", "value": false}, 228 | {"answer": "Styles elements in the DOM", "value": false}, 229 | {"answer": "None of these are correct", "value": false} 230 | ] 231 | }, 232 | { 233 | "question": "What is a variable?", 234 | "category":"JavaScript", 235 | "answers": [ 236 | {"answer": "Is a container for storing data values", "value": true}, 237 | {"answer": "A contitional statement", "value": false}, 238 | {"answer": "A name for all functions", "value": false}, 239 | {"answer": "A way to log events to the browser", "value": false} 240 | ] 241 | }, 242 | { 243 | "question": "What is CommonJS?", 244 | "category":"JavaScript", 245 | "answers": [ 246 | {"answer": "Creates a way to include JavaScript modules within the current scope", "value": true}, 247 | {"answer": "Groups all common functions in JavaScript", "value": false}, 248 | {"answer": "An extensive list of JavaScript libraries and frameworks", "value": false}, 249 | {"answer": "A way to minify and Concatenate JavaScript files", "value": false} 250 | ] 251 | }, 252 | { 253 | "question": "In JavaScript when will a variable be undefined?", 254 | "category":"JavaScript", 255 | "answers": [ 256 | {"answer": "When a variable hasn't be defined with a value", "value": true}, 257 | {"answer": "A variable can never be undefined", "value": false}, 258 | {"answer": "Variable exists and is set to null", "value": false}, 259 | {"answer": "When a variable isn't declared with 'var'", "value": false} 260 | ] 261 | }, 262 | { 263 | "question": "What does asynchronous mean?", 264 | "category":"JavaScript", 265 | "answers": [ 266 | {"answer": "A script will send a request to the server, and continue its execution without waiting for the reply", "value": true}, 267 | {"answer": "A task calls another task", "value": false}, 268 | {"answer": "Order of operation", "value": false}, 269 | {"answer": "One task waits for the next task to finish before running", "value": false} 270 | ] 271 | }, 272 | { 273 | "question": "What does document.write() do?", 274 | "category":"JavaScript", 275 | "answers": [ 276 | {"answer": "Adds a string to the DOM", "value": true}, 277 | {"answer": "Deletes elements from the DOM", "value": false}, 278 | {"answer": "Writes string values to the console for debugging", "value": false}, 279 | {"answer": "Writes the date to a DOM element", "value": false} 280 | ] 281 | }, 282 | { 283 | "question": "What does AJAX mean?", 284 | "category":"JavaScript", 285 | "answers": [ 286 | {"answer": "Asynchronous JavaScript and XML", "value": true}, 287 | {"answer": "Alternative JavaScript Action XML", "value": false}, 288 | {"answer": "Accessible XML", "value": false}, 289 | {"answer": "None of the above", "value": false} 290 | ] 291 | }, 292 | { 293 | "question": "What is event bubbling?", 294 | "category":"JavaScript", 295 | "answers": [ 296 | {"answer": "The handler of the parent works even if the child is clicked", "value": true}, 297 | {"answer": "A type of animation easing", "value": false}, 298 | {"answer": "Events that cause errors in the browser", "value": false}, 299 | {"answer": "Surfacing an event", "value": false} 300 | ] 301 | }, 302 | { 303 | "question": "Difference between document load event and document ready event?", 304 | "category":"JavaScript", 305 | "answers": [ 306 | {"answer": "Ready event occurs after the HTML document is loaded, while the onload event occurs later, when all content is loaded", "value": true}, 307 | {"answer": "Both events accomplish the same thing", "value": false}, 308 | {"answer": "Ready event occurs when all HTML elements and images have been loaded, while the onload event occurs when the HTML Head is loaded", "value": false}, 309 | {"answer": "Document load doesn't work without document ready event", "value": false} 310 | ] 311 | }, 312 | { 313 | "question": "What is a problem with a single page app?", 314 | "category":"JavaScript", 315 | "answers": [ 316 | {"answer": "Can cause SEO issues", "value": true}, 317 | {"answer": "May not have enough pages", "value": false}, 318 | {"answer": "Can have HTML issues", "value": false}, 319 | {"answer": "May cause W3C validation errors", "value": false} 320 | ] 321 | }, 322 | { 323 | "question": "How do JavaScript closures work?", 324 | "category":"JavaScript", 325 | "answers": [ 326 | {"answer": "A function within another function, the inner function has access to variables in the outer function", "value": true}, 327 | {"answer": "It's a way to close a function in JavaScript", "value": false}, 328 | {"answer": "JavaScript doesn't use closures", "value": false}, 329 | {"answer": "Closures help structure objects in JavaScript", "value": false} 330 | ] 331 | }, 332 | { 333 | "question": "What are JavaScript prototypes?", 334 | "category":"JavaScript", 335 | "answers": [ 336 | {"answer": "Prototypes allow you to easily define methods to all instances of a particular object", "value": true}, 337 | {"answer": "A JavaScript library", "value": false}, 338 | {"answer": "A JavaScript framework for building a prototype quick and easily", "value": false}, 339 | {"answer": "Prototypes are functions that can be written to update arrays", "value": false} 340 | ] 341 | }, 342 | { 343 | "question": "What does MVC mean?", 344 | "category":"JavaScript", 345 | "answers": [ 346 | {"answer": "Model view controller", "value": true}, 347 | {"answer": "Models virtually computed", "value": false}, 348 | {"answer": "Mixins variable commands", "value": false}, 349 | {"answer": "Messaging virtual computer", "value": false} 350 | ] 351 | } 352 | ] 353 | -------------------------------------------------------------------------------- /sass/base/_extends.scss: -------------------------------------------------------------------------------- 1 | %marginAuto { 2 | @include margin-auto(); 3 | } 4 | 5 | %clearfix { 6 | @include clearfix(); 7 | } 8 | 9 | %inlineBlock { 10 | @include inline-block(); 11 | } 12 | 13 | %hideText { 14 | @include hide-text(); 15 | } 16 | -------------------------------------------------------------------------------- /sass/base/_fonts.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/coderesponsible/front-end-quiz/a1733eb7fbc6dff0e43cf79f0bbbe917ba8bdb11/sass/base/_fonts.scss -------------------------------------------------------------------------------- /sass/base/_mixins.scss: -------------------------------------------------------------------------------- 1 | //------ SASS Useful Mixins ------ 2 | 3 | // by Ryan Burgess 4 | // https://github.com/ryanburgess/SASS-Useful-Mixins 5 | 6 | // ---------------------------------------------------------------------- 7 | 8 | // Alignment 9 | 10 | // ---------------------------------------------------------------------- 11 | @import "mixins/margin-auto"; 12 | 13 | // ---------------------------------------------------------------------- 14 | 15 | // Animation 16 | 17 | // ---------------------------------------------------------------------- 18 | @import "mixins/animate-link"; 19 | @import "mixins/animations"; 20 | @import "mixins/backface-visibility"; 21 | @import "mixins/keyframes"; 22 | @import "mixins/single-transform"; 23 | @import "mixins/transform"; 24 | @import "mixins/transitions"; 25 | @import "mixins/translate"; 26 | 27 | // ---------------------------------------------------------------------- 28 | 29 | // Functional 30 | 31 | // ---------------------------------------------------------------------- 32 | @import "mixins/hide-text"; 33 | @import "mixins/hover-focus"; 34 | @import "mixins/replace-text"; 35 | 36 | // ---------------------------------------------------------------------- 37 | 38 | // Gradients 39 | 40 | // ---------------------------------------------------------------------- 41 | @import "mixins/linear-gradient"; 42 | @import "mixins/linear-gradient-angle"; 43 | 44 | // ---------------------------------------------------------------------- 45 | 46 | // Layout 47 | 48 | // ---------------------------------------------------------------------- 49 | @import "mixins/background-cover"; 50 | @import "mixins/box-model"; 51 | @import "mixins/clearfix"; 52 | @import "mixins/inline-block"; 53 | 54 | // ---------------------------------------------------------------------- 55 | 56 | // Media Queries 57 | 58 | // ---------------------------------------------------------------------- 59 | @import "mixins/breakpoint"; 60 | @import "mixins/min-breakpoint"; 61 | @import "mixins/retina"; 62 | 63 | // ---------------------------------------------------------------------- 64 | 65 | // Styles 66 | 67 | // ---------------------------------------------------------------------- 68 | @import "mixins/box-shadow"; 69 | @import "mixins/inner-shadow"; 70 | @import "mixins/opacity"; 71 | @import "mixins/placeholder"; 72 | @import "mixins/rounded-corners"; 73 | @import "mixins/text-shadow"; 74 | @import "mixins/triangles"; 75 | 76 | // ---------------------------------------------------------------------- 77 | 78 | // Values 79 | 80 | // ---------------------------------------------------------------------- 81 | @import "mixins/rem"; -------------------------------------------------------------------------------- /sass/base/_reset.scss: -------------------------------------------------------------------------------- 1 | html { 2 | font-size:62.5%; 3 | } 4 | 5 | body { 6 | margin:0; 7 | padding:0; 8 | width:100%; 9 | @include rem("font-size", $regularSize); 10 | font-family:$helvetica; 11 | line-height:1.3; 12 | } 13 | 14 | ul { 15 | list-style:none; 16 | margin:0; 17 | padding:0; 18 | } 19 | 20 | ul li { 21 | margin:0; 22 | padding:0; 23 | } 24 | 25 | ol { 26 | margin:0; 27 | padding:0; 28 | } 29 | p { 30 | padding:0; 31 | @include rem("margin", 0, 0, 5, 0); 32 | } 33 | 34 | h1, h2, h3, h4, h5, h6 { 35 | padding:0; 36 | @include rem("margin", 0, 0, 10, 0); 37 | font-weight: normal; 38 | } 39 | 40 | fieldset { 41 | border:none; 42 | margin:0; 43 | padding:0; 44 | } 45 | 46 | button { 47 | cursor:pointer; 48 | } 49 | 50 | %clearfix { 51 | @include clearfix(); 52 | } 53 | -------------------------------------------------------------------------------- /sass/base/_variables.scss: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | // Layout Breakpoints 3 | // ---------------------------------------------------------------------- 4 | $maxWidth: 600; 5 | 6 | // ---------------------------------------------------------------------- 7 | // Colors 8 | // ---------------------------------------------------------------------- 9 | $grey:#ccc; 10 | 11 | // ---------------------------------------------------------------------- 12 | // Font Sizes 13 | // ---------------------------------------------------------------------- 14 | $regularSize: 14; 15 | 16 | 17 | // ---------------------------------------------------------------------- 18 | // Font Families 19 | // ---------------------------------------------------------------------- 20 | $helvetica: Helvetica, Arial, sans-serif; 21 | 22 | // ---------------------------------------------------------------------- 23 | // Grid 24 | // ---------------------------------------------------------------------- 25 | $grid-columns: 12; 26 | -------------------------------------------------------------------------------- /sass/base/mixins/_animate-link.scss: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | // Animated link that has a fade-in underline 4 | 5 | // ---------------------------------------------------------------------- 6 | 7 | // example: @include animate-link($screenGreen, $gothamMedium, 14); 8 | 9 | @mixin animate-link($color, $font, $fontSize) { 10 | 11 | font-family:$font; 12 | 13 | @include single-transition(border, 0.2s, ease-in-out, 0); 14 | text-decoration:none; 15 | 16 | color: $color; 17 | border-bottom:1px solid transparent; 18 | 19 | @include rem("font-size", $fontSize); 20 | 21 | &:focus, 22 | &:hover { 23 | border-color: $color; 24 | } 25 | } -------------------------------------------------------------------------------- /sass/base/mixins/_animations.scss: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | // Animations 4 | 5 | // ---------------------------------------------------------------------- 6 | 7 | // example: @include animation('slide-down 5s 3'); 8 | 9 | @mixin animation($str) { 10 | -webkit-animation: #{$str}; 11 | -moz-animation: #{$str}; 12 | -ms-animation: #{$str}; 13 | -o-animation: #{$str}; 14 | animation: #{$str}; 15 | } -------------------------------------------------------------------------------- /sass/base/mixins/_backface-visibility.scss: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | // Backface-visibility 4 | 5 | // ---------------------------------------------------------------------- 6 | 7 | // example: @include backface-visibility("hidden"); 8 | 9 | @mixin backface-visibility($value) { 10 | 11 | -webkit-backface-visibility: $value; 12 | -moz-backface-visibility: $value; 13 | backface-visibility: $value; 14 | } -------------------------------------------------------------------------------- /sass/base/mixins/_background-cover.scss: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | // Background cover 4 | 5 | // ---------------------------------------------------------------------- 6 | 7 | // example: @include background-cover(); 8 | 9 | @mixin background-cover(){ 10 | -webkit-background-size: cover; 11 | -moz-background-size: cover; 12 | -o-background-size: cover; 13 | background-size: cover; 14 | } -------------------------------------------------------------------------------- /sass/base/mixins/_box-model.scss: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | // Box Model 4 | 5 | // ---------------------------------------------------------------------- 6 | 7 | @mixin box-sizing($box-model) { 8 | -webkit-box-sizing: $box-model; 9 | -moz-box-sizing: $box-model; 10 | box-sizing: $box-model; 11 | } -------------------------------------------------------------------------------- /sass/base/mixins/_box-shadow.scss: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | // Box Shadow 4 | 5 | // ---------------------------------------------------------------------- 6 | 7 | // example: @include box-shadow(1px, 2px, 2px, 2px, #000); 8 | 9 | @mixin box-shadow($hoff: false, $voff: false, $blur: false, $spread: false, $color: false){ 10 | -webkit-box-shadow: $hoff $voff $blur $spread $color; 11 | -moz-box-shadow: $hoff $voff $blur $spread $color; 12 | box-shadow: $hoff $voff $blur $spread $color; 13 | } -------------------------------------------------------------------------------- /sass/base/mixins/_breakpoint.scss: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | // Media Query Breakpoints 4 | 5 | // ---------------------------------------------------------------------- 6 | 7 | // example @include breakpoint(940) { width:80%; } 8 | 9 | @mixin breakpoint($size) { 10 | @media only screen and (max-width: $size + px) { @content; } 11 | } -------------------------------------------------------------------------------- /sass/base/mixins/_clearfix.scss: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | // Clearfix after element 4 | 5 | // ---------------------------------------------------------------------- 6 | 7 | // example: @include clearfix(); 8 | 9 | @mixin clearfix() { 10 | & { 11 | *zoom: 1; 12 | } 13 | &:before, 14 | &:after { 15 | content: ""; 16 | display: table; 17 | } 18 | &:after { 19 | clear: both; 20 | } 21 | } -------------------------------------------------------------------------------- /sass/base/mixins/_hide-text.scss: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | // Hide Text 4 | 5 | // ---------------------------------------------------------------------- 6 | 7 | // example: @include hide-text(); 8 | 9 | @mixin hide-text() { 10 | position: relative; 11 | text-indent: -99999px; 12 | display: inline-block; 13 | } -------------------------------------------------------------------------------- /sass/base/mixins/_hover-focus.scss: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | // Hover and Focus 4 | 5 | // ---------------------------------------------------------------------- 6 | 7 | // example @include hoverFocus('text-decoration', 'none'); 8 | 9 | @mixin hoverFocus($property, $value) { 10 | &:hover, &:focus { 11 | #{$property}: $value; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /sass/base/mixins/_inline-block.scss: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | // Display inline block cross browser 4 | 5 | // ---------------------------------------------------------------------- 6 | 7 | // example: @include inline-block(); 8 | 9 | @mixin inline-block() { 10 | display: -moz-inline-stack; 11 | display: inline-block; 12 | vertical-align: top; 13 | zoom: 1; 14 | *display: inline; 15 | } -------------------------------------------------------------------------------- /sass/base/mixins/_inner-shadow.scss: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | // Inner Shadow 4 | 5 | // ---------------------------------------------------------------------- 6 | 7 | // example: @include inner-shadow(1px, 2px, 2px, #000); 8 | 9 | @mixin inner-shadow($hoff: false, $voff: false, $blur: false, $color: false) { 10 | -webkit-box-shadow: inset $hoff $voff $blur $color; 11 | -moz-box-shadow: inset $hoff $voff $blur $color; 12 | box-shadow: inset $hoff $voff $blur $color; 13 | } -------------------------------------------------------------------------------- /sass/base/mixins/_keyframes.scss: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | // Keyframes 4 | 5 | // ---------------------------------------------------------------------- 6 | 7 | // example: @include keyframes(slide-down) {0%{ opacity:1; } 90%{ opacity:0; }} 8 | 9 | @mixin keyframes($animation-name) { 10 | @-webkit-keyframes #{$animation-name} { 11 | @content; 12 | } 13 | @-moz-keyframes #{$animation-name} { 14 | @content; 15 | } 16 | @-ms-keyframes #{$animation-name} { 17 | @content; 18 | } 19 | @-o-keyframes #{$animation-name} { 20 | @content; 21 | } 22 | @keyframes #{$animation-name} { 23 | @content; 24 | } 25 | } -------------------------------------------------------------------------------- /sass/base/mixins/_linear-gradient-angle.scss: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | // Linear Gradient angle 4 | 5 | // ---------------------------------------------------------------------- 6 | 7 | // example: @include linear-gradient(-10, #cccccc, #333333); 8 | 9 | @mixin linear-gradient($angle, $colorStart, $colorStop){ 10 | background: #{$colorStart}; /* Old browsers */ 11 | background: -moz-linear-gradient($angle, #{$colorStart} 0%, #{$colorStop} 100%); /* FF3.6+ */ 12 | background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#{$colorStart}), color-stop(100%,#{$colorStop})); /* Chrome,Safari4+ */ 13 | background: -webkit-linear-gradient(45deg, #{$colorStart} 0%,#{$colorStop} 100%); /* Chrome10+,Safari5.1+ */ 14 | background: -o-linear-gradient(45deg, #{$colorStart} 0%,#{$colorStop} 100%); /* Opera 11.10+ */ 15 | background: -ms-linear-gradient(45deg, #{$colorStart} 0%,#{$colorStop} 100%); /* IE10+ */ 16 | background: linear-gradient(45deg, #{$colorStart} 0%,#{$colorStop} 100%); /* W3C */ 17 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$colorStart}', endColorstr='#{$colorStop}',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ 18 | } -------------------------------------------------------------------------------- /sass/base/mixins/_linear-gradient.scss: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | // Linear Gradients 4 | 5 | // ---------------------------------------------------------------------- 6 | 7 | // example: @include linearGradient(#cccccc, #333333); 8 | 9 | @mixin linearGradient($top, $bottom) { 10 | background: #{$top}; /* Old browsers */ 11 | background: -moz-linear-gradient(top, #{$top} 0%, #{$bottom} 100%); /* FF3.6+ */ 12 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #{$top}), color-stop(100%, #{$bottom})); /* Chrome,Safari4+ */ 13 | background: -webkit-linear-gradient(top, #{$top} 0%, #{$bottom} 100%); /* Chrome10+,Safari5.1+ */ 14 | background: -o-linear-gradient(top, #{$top} 0%, #{$bottom} 100%); /* Opera 11.10+ */ 15 | background: -ms-linear-gradient(top, #{$top} 0%, #{$bottom} 100%); /* IE10+ */ 16 | background: linear-gradient(to bottom, #{$top} 0%, #{$bottom} 100%); /* W3C */ 17 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$top}', endColorstr='#{$bottom}', GradientType=0 ); /* IE6-9 */ 18 | } -------------------------------------------------------------------------------- /sass/base/mixins/_margin-auto.scss: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | // Margin auto 4 | 5 | // ---------------------------------------------------------------------- 6 | 7 | // example: @include margin-auto(); 8 | 9 | @mixin margin-auto() { 10 | margin-left:auto; 11 | margin-right:auto; 12 | } -------------------------------------------------------------------------------- /sass/base/mixins/_min-breakpoint.scss: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | // Media Query Breakpoints 4 | 5 | // ---------------------------------------------------------------------- 6 | 7 | // example @include min-breakpoint(940) { width:80%; } 8 | 9 | @mixin min-breakpoint($size) { 10 | @media only screen and (min-width: $size + px) { @content; } 11 | } -------------------------------------------------------------------------------- /sass/base/mixins/_opacity.scss: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | // Opacity 4 | 5 | // ---------------------------------------------------------------------- 6 | 7 | @mixin opacity($opacity) { 8 | opacity: $opacity; 9 | $opacity-ie: $opacity * 100; 10 | filter: alpha(opacity=$opacity-ie); //IE8 11 | } -------------------------------------------------------------------------------- /sass/base/mixins/_placeholder.scss: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | // Change placeholder text color 4 | 5 | // ---------------------------------------------------------------------- 6 | 7 | // example: @include placeholder-color(#333); 8 | 9 | @mixin placeholder-color($color) { 10 | &.placeholder { 11 | color: $color 12 | } 13 | 14 | &:-moz-placeholder { 15 | color: $color 16 | } 17 | 18 | &::-webkit-input-placeholder { 19 | color: $color 20 | } 21 | 22 | &:-ms-input-placeholder { 23 | color: $color 24 | } 25 | } -------------------------------------------------------------------------------- /sass/base/mixins/_rem.scss: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | // REM Units with PX fallback 4 | 5 | // ---------------------------------------------------------------------- 6 | 7 | // example: @include rem("margin", 10, 5, 10, 5); 8 | // example: @include rem("font-size", 14); 9 | 10 | @mixin rem($property, $values...) { 11 | $n: length($values); 12 | $i: 1; 13 | 14 | $pxlist: (); 15 | $remlist: (); 16 | 17 | @while $i <= $n { 18 | $itemVal: (nth($values, $i)); 19 | @if $itemVal != "auto"{ 20 | $pxlist: append($pxlist, $itemVal + px); 21 | $remlist: append($remlist, ($itemVal / 10) + rem); // Use this if you've set HTML font size value to 62.5% 22 | //$remlist: append($remlist, ($itemVal / 16) + rem); 23 | } @else { 24 | $pxlist: append($pxlist, auto); 25 | $remlist: append($remlist, auto); 26 | } 27 | 28 | $i: $i + 1; 29 | } 30 | 31 | #{$property}: $pxlist; 32 | #{$property}: $remlist; 33 | } -------------------------------------------------------------------------------- /sass/base/mixins/_replace-text.scss: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | // Replace text 4 | 5 | // ---------------------------------------------------------------------- 6 | 7 | // example: @include replace-text(); 8 | 9 | @mixin replace-text() { 10 | border: 0; 11 | color: transparent; 12 | font: 0/0 a; 13 | text-shadow: none; 14 | } -------------------------------------------------------------------------------- /sass/base/mixins/_retina.scss: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | // Retina Images 4 | 5 | // ---------------------------------------------------------------------- 6 | 7 | // example: @include retina("logo2x.png", 100, 50); 8 | 9 | @mixin retina($image, $width, $height) { 10 | @media (min--moz-device-pixel-ratio: 1.3), 11 | (-o-min-device-pixel-ratio: 2.6/2), 12 | (-webkit-min-device-pixel-ratio: 1.3), 13 | (min-device-pixel-ratio: 1.3), 14 | (min-resolution: 1.3dppx) { 15 | background-image: url("#{$image}"); 16 | background-size: $width + px $height + px; 17 | //background-size: $width / 10 + rem $height / 10 + rem; // Use this if you've set HTML font size value to 62.5% 18 | background-size: $width / 16 + rem $height / 16 + rem; 19 | } 20 | } -------------------------------------------------------------------------------- /sass/base/mixins/_rounded-corners.scss: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | // Rounded Corners 4 | 5 | // ---------------------------------------------------------------------- 6 | 7 | // example: @include roundedCorners(10); 8 | 9 | @mixin roundedCorners($size) { 10 | -webkit-border-radius: $size + px; 11 | -moz-border-radius: $size + px; 12 | border-radius: $size + px; 13 | } 14 | 15 | // Rounded Corners Top Only 16 | @mixin roundedTop($size) { 17 | -webkit-border-radius: $size + px $size + px 0 0; 18 | -moz-border-radius: $size + px $size + px 0 0; 19 | border-radius: $size + px $size + px 0 0; 20 | } 21 | 22 | // Rounded Corner Top Left Only 23 | @mixin roundedTopLeft($size) { 24 | -webkit-border-radius: $size + px 0 0 0; 25 | -moz-border-radius: $size + px 0 0 0; 26 | border-radius: $size + px 0 0 0; 27 | } 28 | 29 | // Rounded Corner Top Right Only 30 | @mixin roundedTopRight($size) { 31 | -webkit-border-radius: 0 $size + px 0 0; 32 | -moz-border-radius: 0 $size + px 0 0; 33 | border-radius: 0 $size + px 0 0; 34 | } 35 | 36 | // Rounded Corners Bottom Only 37 | @mixin roundedBottom($size) { 38 | -webkit-border-radius: 0 0 $size + px $size + px; 39 | -moz-border-radius: 0 0 $size + px $size + px; 40 | border-radius: 0 0 $size + px $size + px; 41 | } 42 | 43 | // Rounded Corner Bottom Left Only 44 | @mixin roundedBottomLeft($size) { 45 | -webkit-border-radius: 0 0 0 $size + px; 46 | -moz-border-radius: 0 0 0 $size + px; 47 | border-radius: 0 0 0 $size + px; 48 | } 49 | 50 | // Rounded Corner Bottom Right Only 51 | @mixin roundedBottomRight($size) { 52 | -webkit-border-radius: 0 0 $size + px 0; 53 | -moz-border-radius: 0 0 $size + px 0; 54 | border-radius: 0 0 $size + px 0; 55 | } 56 | 57 | // Rounded Corners Left Only 58 | @mixin roundedLeft($size) { 59 | -webkit-border-radius: 0 0 $size + px $size + px; 60 | -moz-border-radius: 0 0 $size + px $size + px; 61 | border-radius: $size + px 0 0 $size + px; 62 | } 63 | 64 | // Rounded Corners Right Only 65 | @mixin roundedRight($size) { 66 | -webkit-border-radius: 0 $size + px $size + px 0; 67 | -moz-border-radius: 0 $size + px $size + px 0; 68 | border-radius: 0 $size + px $size + px 0; 69 | } -------------------------------------------------------------------------------- /sass/base/mixins/_single-transform.scss: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | // Single Transform 4 | 5 | // ---------------------------------------------------------------------- 6 | 7 | // example: @include flat-button($greyBlue, white, 5px 15px); 8 | 9 | @mixin single-transform($deg) { 10 | -ms-transform:rotate($deg); 11 | -webkit-transform:rotate($deg); 12 | transform:rotate($deg); 13 | } -------------------------------------------------------------------------------- /sass/base/mixins/_text-shadow.scss: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | // Text Shadow 4 | 5 | // ---------------------------------------------------------------------- 6 | 7 | // example: @include single-text-shadow(1px, 2px, 2px, #000); 8 | 9 | @mixin single-text-shadow($hoff: false, $voff: false, $blur: false, $color: false) { 10 | text-shadow: $hoff $voff $blur $color; 11 | } -------------------------------------------------------------------------------- /sass/base/mixins/_transform.scss: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | // Transform 4 | 5 | // ---------------------------------------------------------------------- 6 | 7 | // example: @include transform("origin", 0, 0); 8 | 9 | @mixin transform($type, $values...) { 10 | $n: length($values); 11 | $i: 1; 12 | 13 | $originVal: (); 14 | 15 | @while $i <= $n { 16 | $itemVal: (nth($values, $i)); 17 | @if $type == "rotate" or $type == "rotateY" or $type == "rotateX" { 18 | $originVal: append($originVal, $itemVal + deg); 19 | } @else { 20 | $originVal: append($originVal, $itemVal + px); 21 | } 22 | 23 | $i: $i + 1; 24 | } 25 | -webkit-transform: #{$type}($originVal); 26 | -moz-transform: #{$type}($originVal); 27 | transform: #{$type}($originVal); 28 | } -------------------------------------------------------------------------------- /sass/base/mixins/_transitions.scss: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | // Transitions 4 | 5 | // ---------------------------------------------------------------------- 6 | 7 | // example: @include single-transition(background, 1s, ease-in-out, 0); 8 | 9 | @mixin single-transition($property, $duration, $timing-function, $delay) { 10 | -webkit-transition: $property $duration $timing-function $delay; 11 | -moz-transition: $property $duration $timing-function $delay; 12 | -o-transition: $property $duration $timing-function $delay; 13 | transition: $property $duration $timing-function $delay; 14 | } 15 | 16 | // example: @include double-transition(background, 1s, ease-in-out, 0, opacity, .1s, ease-in-out, 0); 17 | 18 | @mixin double-transition($property1, $duration1, $timing-function1, $delay1, $property2, $duration2, $timing-function2, $delay2) { 19 | -webkit-transition: $property1 $duration1 $timing-function1 $delay1, $property2 $duration2 $timing-function2 $delay2; 20 | -moz-transition: $property1 $duration1 $timing-function1 $delay1, $property2 $duration2 $timing-function2 $delay2; 21 | -o-transition: $property1 $duration1 $timing-function1 $delay1, $property2 $duration2 $timing-function2 $delay2; 22 | transition: $property1 $duration1 $timing-function1 $delay1, $property2 $duration2 $timing-function2 $delay2; 23 | } -------------------------------------------------------------------------------- /sass/base/mixins/_translate.scss: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | // Translate 4 | 5 | // ---------------------------------------------------------------------- 6 | 7 | // example: @include translate(0); 8 | 9 | @mixin translate($value) { 10 | -webkit-transform: translatez($value); 11 | -moz-transform: translatez($value); 12 | -ms-transform: translatez($value); 13 | -o-transform: translatez($value); 14 | transform: translatez($value); 15 | } -------------------------------------------------------------------------------- /sass/base/mixins/_triangles.scss: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | // Arrows / Triangles 4 | 5 | // ---------------------------------------------------------------------- 6 | 7 | // example: @include arrow("left", #cccccc, 10); 8 | 9 | @mixin arrow($direction, $color, $size) { 10 | $pxSize: $size + px; 11 | $remSize: ($size / 10) + rem; 12 | 13 | width: 0; 14 | height: 0; 15 | 16 | @if $direction == "left"{ 17 | border-top: $pxSize solid transparent; 18 | border-right: $pxSize solid $color; 19 | border-bottom: $pxSize solid transparent; 20 | 21 | border-top: $remSize solid transparent; 22 | border-right: $remSize solid $color; 23 | border-bottom: $remSize solid transparent; 24 | }@else if $direction == "right"{ 25 | border-top: $pxSize solid transparent; 26 | border-bottom: $pxSize solid transparent; 27 | border-left: $pxSize solid $color; 28 | 29 | border-top: $remSize solid transparent; 30 | border-bottom: $remSize solid transparent; 31 | border-left: $remSize solid $color; 32 | }@else if $direction == "up"{ 33 | border-left: $pxSize solid transparent; 34 | border-right: $pxSize solid transparent; 35 | border-bottom: $pxSize solid $color; 36 | 37 | border-left: $remSize solid transparent; 38 | border-right: $remSize solid transparent; 39 | border-bottom: $remSize solid $color; 40 | }@else if $direction == "down"{ 41 | border-left: $pxSize solid transparent; 42 | border-right: $pxSize solid transparent; 43 | border-top: $pxSize solid $color; 44 | 45 | border-left: $remSize solid transparent; 46 | border-right: $remSize solid transparent; 47 | border-top: $remSize solid $color; 48 | } 49 | 50 | } -------------------------------------------------------------------------------- /sass/layout/_grid.scss: -------------------------------------------------------------------------------- 1 | .row{ 2 | @extend %marginAuto; 3 | max-width:$maxWidth; 4 | } -------------------------------------------------------------------------------- /sass/modules/_answers.scss: -------------------------------------------------------------------------------- 1 | .answers{ 2 | max-width:600px; 3 | @extend %marginAuto; 4 | padding:0 30px; 5 | margin-bottom:60px; 6 | 7 | li{ 8 | text-align:center; 9 | margin-bottom:10px; 10 | } 11 | 12 | a{ 13 | @include inline-block(); 14 | background:$grey; 15 | @include roundedCorners(5); 16 | width:90%; 17 | padding:15px; 18 | color:black; 19 | text-decoration:none; 20 | 21 | &.wrong{ 22 | background:red; 23 | } 24 | 25 | &.correct{ 26 | background:green; 27 | } 28 | 29 | &:hover, &:focus{ 30 | background:darken($grey, 15%); 31 | } 32 | } 33 | } -------------------------------------------------------------------------------- /sass/modules/_header.scss: -------------------------------------------------------------------------------- 1 | header{ 2 | text-align:center; 3 | padding:10px; 4 | border-bottom:1px solid $grey; 5 | 6 | h1{ 7 | @include rem("font-size", 30); 8 | } 9 | 10 | .timer{ 11 | @include rem("font-size", 22); 12 | } 13 | } -------------------------------------------------------------------------------- /sass/modules/_questions.scss: -------------------------------------------------------------------------------- 1 | .question{ 2 | margin-top:30px; 3 | text-align:center; 4 | } -------------------------------------------------------------------------------- /sass/modules/_results.scss: -------------------------------------------------------------------------------- 1 | .results{ 2 | margin-top:30px; 3 | text-align:center; 4 | 5 | h2{ 6 | @include rem("font-size", 28); 7 | 8 | &.fail{ 9 | color:red; 10 | } 11 | 12 | &.pass{ 13 | color:green; 14 | } 15 | } 16 | } -------------------------------------------------------------------------------- /sass/modules/_start.scss: -------------------------------------------------------------------------------- 1 | .start{ 2 | background:green; 3 | @include roundedCorners(5); 4 | color:white; 5 | width:90%; 6 | max-width:400px; 7 | padding:15px; 8 | text-decoration:none; 9 | @extend %marginAuto; 10 | display:block; 11 | text-align:center; 12 | margin-top:30px; 13 | 14 | &:hover, &:focus{ 15 | background:lighten(green, 10%); 16 | } 17 | } -------------------------------------------------------------------------------- /sass/style.scss: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | // Base 3 | // ---------------------------------------------------------------------- 4 | @import "base/mixins"; 5 | @import "base/variables"; 6 | @import "base/extends"; 7 | @import "base/reset"; 8 | @import "base/fonts"; 9 | 10 | // ---------------------------------------------------------------------- 11 | // Layout 12 | // ---------------------------------------------------------------------- 13 | @import "layout/grid"; 14 | 15 | // ---------------------------------------------------------------------- 16 | // Modules 17 | // ---------------------------------------------------------------------- 18 | @import "modules/header"; 19 | @import "modules/questions"; 20 | @import "modules/answers"; 21 | @import "modules/results"; 22 | @import "modules/start"; 23 | 24 | // ---------------------------------------------------------------------- 25 | // Themes 26 | // ---------------------------------------------------------------------- 27 | 28 | --------------------------------------------------------------------------------