├── .gitignore ├── .babelrc ├── src ├── main.js └── App.vue ├── package.json ├── index.html ├── webpack.config.js ├── README.md └── data └── data.json /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | npm-debug.log 4 | dist/ -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["es2015", { "modules": false }] 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Questions from './App.vue' 3 | 4 | new Vue({ 5 | el: '#app', 6 | render: h => h(Questions) 7 | }) -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "quizini", 3 | "description": "Simple quiz app built on Vue.js 2", 4 | "author": "https://github.com/vimux", 5 | "private": true, 6 | "scripts": { 7 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot", 8 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 9 | }, 10 | "dependencies": { 11 | "vue": "^2.0.1" 12 | }, 13 | "devDependencies": { 14 | "babel-core": "^6.0.0", 15 | "babel-loader": "^6.0.0", 16 | "babel-preset-es2015": "^6.0.0", 17 | "cross-env": "^3.0.0", 18 | "css-loader": "^0.25.0", 19 | "file-loader": "^0.9.0", 20 | "node-sass": "^3.10.1", 21 | "sass-loader": "^4.0.2", 22 | "vue-loader": "^9.7.0", 23 | "webpack": "^2.1.0-beta.25", 24 | "webpack-dev-server": "^2.1.0-beta.0" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Quizini 7 | 8 | 9 | 10 |
11 |
12 | 13 |
14 | 15 |
16 | 17 | 20 |
21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | const path = require('path') 4 | const webpack = require('webpack') 5 | 6 | module.exports = { 7 | entry: './src/main.js', 8 | output: { 9 | path: path.resolve(__dirname, './dist'), 10 | publicPath: '/dist/', 11 | filename: 'build.js' 12 | }, 13 | module: { 14 | rules: [ 15 | { 16 | test: /\.vue$/, 17 | loader: 'vue-loader', 18 | exclude: /node_modules/ 19 | }, 20 | { 21 | test: /\.js$/, 22 | loader: 'babel-loader', 23 | exclude: /node_modules/ 24 | }, 25 | ] 26 | }, 27 | resolve: { 28 | alias: { 29 | 'vue$': 'vue/dist/vue' 30 | } 31 | }, 32 | devServer: { 33 | historyApiFallback: true, 34 | noInfo: true 35 | }, 36 | devtool: '#eval-source-map', 37 | } 38 | 39 | if (process.env.NODE_ENV === 'production') { 40 | module.exports.devtool = '#source-map' 41 | // http://vue-loader.vuejs.org/en/workflow/production.html 42 | module.exports.plugins = (module.exports.plugins || []).concat([ 43 | new webpack.DefinePlugin({ 44 | 'process.env': { 45 | NODE_ENV: '"production"' 46 | } 47 | }), 48 | new webpack.optimize.UglifyJsPlugin({ 49 | compress: { 50 | warnings: false 51 | } 52 | }), 53 | new webpack.LoaderOptionsPlugin({ 54 | minimize: true 55 | }) 56 | ]) 57 | } 58 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Quizini 2 | 3 | **Quizini** (Quiz mini) — simple quiz app built on Vue.js 2. 4 | 5 | **Nothing interesting, just my learning project.** 6 | 7 | ## Build Setup 8 | 9 | ```bash 10 | # Install dependencies 11 | npm install 12 | 13 | # Run dev server with hot reload at localhost:8080 14 | npm run dev 15 | 16 | # Build for production with minification 17 | npm run build 18 | ``` 19 | 20 | ## data.json example 21 | 22 | ```json 23 | { 24 | "questions": [ 25 | { 26 | "question": "What is the name of the galaxy of which our sun is a member?", 27 | "type": "radio", 28 | "correct": 2, 29 | "answers": [ 30 | "Sunflower Galaxy", 31 | "Cigar Galaxy", 32 | "Milky Way Galaxy", 33 | "Comet Galaxy" 34 | ] 35 | }, 36 | { 37 | "question": "What does the 'e' of e-mail stand for?", 38 | "type": "input", 39 | "correct": "electronic" 40 | }, 41 | { 42 | "question": "Michael Jordan's nicknames?", 43 | "caption": "Mark all that apply", 44 | "type": "checkbox", 45 | "correct": [0,2,3], 46 | "answers": [ 47 | "Air Jordan", 48 | "Black Dog", 49 | "Black Cat", 50 | "His airness" 51 | ] 52 | }, 53 | { 54 | "question": "What do you want if you send an S.O.S. signal?", 55 | "type": "radio", 56 | "correct": 1, 57 | "answers": [ 58 | "Back-up", 59 | "Help", 60 | "Digital Television" 61 | ] 62 | }, 63 | { 64 | "question": "What does CD stand for?", 65 | "type": "radio", 66 | "correct": 2, 67 | "answers": [ 68 | "Capacity Disk", 69 | "Copyable Disk", 70 | "Compact Disc", 71 | "Circular Disk" 72 | ] 73 | }, 74 | { 75 | "question": "Joseph Barbera and William Hannah created which cat and mouse duo?", 76 | "type": "radio", 77 | "correct": 3, 78 | "answers": [ 79 | "Mickey and Minnie", 80 | "James and Jerry", 81 | "Tom and Mickey", 82 | "Tom and Jerry" 83 | ] 84 | }, 85 | { 86 | "question": "Which Italian great mind, who made improvements to the telescope, is known as the 'father of modern science'?", 87 | "type": "radio", 88 | "correct": 1, 89 | "answers": [ 90 | "Venturi", 91 | "Galileo", 92 | "Rubia", 93 | "Galvani", 94 | "Leonardo da Vinci" 95 | ] 96 | } 97 | ] 98 | } 99 | ``` -------------------------------------------------------------------------------- /data/data.json: -------------------------------------------------------------------------------- 1 | { 2 | "questions": [ 3 | { 4 | "question": "What is the name of the galaxy of which our sun is a member?", 5 | "type": "radio", 6 | "correct": 2, 7 | "answers": [ 8 | "Sunflower Galaxy", 9 | "Cigar Galaxy", 10 | "Milky Way Galaxy", 11 | "Comet Galaxy" 12 | ] 13 | }, 14 | { 15 | "question": "What is special about a chameleon?", 16 | "type": "radio", 17 | "correct": 0, 18 | "answers": [ 19 | "It changes color", 20 | "It can live without food", 21 | "It has no eyes", 22 | "It can live without food and has no eyes", 23 | "It can breath underwater and fly" 24 | ] 25 | }, 26 | { 27 | "question": "Michael Jordan's nicknames?", 28 | "caption": "Mark all that apply", 29 | "type": "checkbox", 30 | "correct": [0,2,3], 31 | "answers": [ 32 | "Air Jordan", 33 | "Black Dog", 34 | "Black Cat", 35 | "His airness" 36 | ] 37 | }, 38 | { 39 | "question": "What does the 'e' of e-mail stand for?", 40 | "caption": "The answer should be written in lowercase", 41 | "type": "input", 42 | "correct": "electronic" 43 | }, 44 | { 45 | "question": "What animal is called 'the ship of the desert'?", 46 | "type": "radio", 47 | "correct": 2, 48 | "answers": [ 49 | "Snake", 50 | "Coyote", 51 | "Camel", 52 | "Turtle", 53 | "Fox" 54 | ] 55 | }, 56 | { 57 | "question": "What dogs are white with black spots all over them?", 58 | "type": "radio", 59 | "correct": 1, 60 | "answers": [ 61 | "Huskies", 62 | "Dalmatians", 63 | "Sheep dog", 64 | "Alsations" 65 | ] 66 | }, 67 | { 68 | "question": "What does WWW stand for?", 69 | "type": "radio", 70 | "correct": 2, 71 | "answers": [ 72 | "Widened Web World", 73 | "Wireless Wide Web", 74 | "World Wide Web", 75 | "Window Web World" 76 | ] 77 | }, 78 | { 79 | "question": "The name of which shampoo brand is made up of two different parts of the body?", 80 | "type": "radio", 81 | "correct": 1, 82 | "answers": [ 83 | "Herbal Essence", 84 | "Head & Shoulders", 85 | "Schauma", 86 | "Pantene" 87 | ] 88 | }, 89 | { 90 | "question": "What does the 'Big Bang Theory' deal with?", 91 | "type": "radio", 92 | "correct": 3, 93 | "answers": [ 94 | "Medicine", 95 | "Human Body", 96 | "Music", 97 | "Universe" 98 | ] 99 | }, 100 | { 101 | "question": "What word completes the following idiom. 'Easier Said Than...'?", 102 | "caption": "The answer should be written in lowercase", 103 | "type": "input", 104 | "correct": "done" 105 | }, 106 | { 107 | "question": "What does the acronym NASA stand for?", 108 | "caption": "Mark all that apply", 109 | "type": "radio", 110 | "correct": 2, 111 | "answers": [ 112 | "National Army and Soldiers Administration", 113 | "National Art and Sculpture Administration", 114 | "National Aeronautics and Space Administration", 115 | "National Airforce and Special Administration" 116 | ] 117 | }, 118 | { 119 | "question": "Complete the commonly used idiom. 'Better late than ...'", 120 | "caption": "The answer should be written in lowercase", 121 | "type": "input", 122 | "correct": "never" 123 | }, 124 | { 125 | "question": "What do you want if you send an S.O.S. signal?", 126 | "type": "radio", 127 | "correct": 1, 128 | "answers": [ 129 | "Back-up", 130 | "Help", 131 | "Digital Television" 132 | ] 133 | }, 134 | { 135 | "question": "What does CD stand for?", 136 | "type": "radio", 137 | "correct": 2, 138 | "answers": [ 139 | "Capacity Disk", 140 | "Copyable Disk", 141 | "Compact Disc", 142 | "Circular Disk" 143 | ] 144 | }, 145 | { 146 | "question": "Joseph Barbera and William Hannah created which cat and mouse duo?", 147 | "type": "radio", 148 | "correct": 3, 149 | "answers": [ 150 | "Mickey and Minnie", 151 | "James and Jerry", 152 | "Tom and Mickey", 153 | "Tom and Jerry" 154 | ] 155 | }, 156 | { 157 | "question": "Which is the shortest month of the year?", 158 | "type": "radio", 159 | "correct": 3, 160 | "answers": [ 161 | "September", 162 | "May", 163 | "April", 164 | "February" 165 | ] 166 | }, 167 | { 168 | "question": "On which continent would you find the fewest people?", 169 | "type": "radio", 170 | "correct": 0, 171 | "answers": [ 172 | "Antarctica", 173 | "South America", 174 | "Africa", 175 | "Europe" 176 | ] 177 | }, 178 | { 179 | "question": "Which Italian great mind, who made improvements to the telescope, is known as the 'father of modern science'?", 180 | "type": "radio", 181 | "correct": 1, 182 | "answers": [ 183 | "Venturi", 184 | "Galileo", 185 | "Rubia", 186 | "Galvani", 187 | "Leonardo da Vinci" 188 | ] 189 | }, 190 | { 191 | "question": "What is the chemical symbol for 'Germanium'?", 192 | "type": "radio", 193 | "correct": 3, 194 | "answers": [ 195 | "Be", 196 | "Ae", 197 | "Ce", 198 | "Ge" 199 | ] 200 | } 201 | ] 202 | } -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 76 | 77 | 193 | 194 | 195 | --------------------------------------------------------------------------------