https://github.com/matt-d-webb/javascript-quiz-using-json
A jquery quiz for scoring multiple choice questions
https://github.com/matt-d-webb/javascript-quiz-using-json
javascript json quiz
Last synced: 7 months ago
JSON representation
A jquery quiz for scoring multiple choice questions
- Host: GitHub
- URL: https://github.com/matt-d-webb/javascript-quiz-using-json
- Owner: matt-d-webb
- License: mit
- Created: 2015-03-17T16:30:44.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2017-04-29T22:54:37.000Z (about 9 years ago)
- Last Synced: 2025-06-27T09:05:55.821Z (12 months ago)
- Topics: javascript, json, quiz
- Language: JavaScript
- Size: 1020 KB
- Stars: 16
- Watchers: 3
- Forks: 8
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Javascript quiz using JSON :star:
[](https://codeclimate.com/github/Matt-Webb/javascript-quiz-using-json)
[](https://travis-ci.org/Matt-Webb/javascript-quiz-using-json)
[](https://codecov.io/gh/Matt-Webb/javascript-quiz-using-json)
[](https://david-dm.org/Matt-Webb/javascript-quiz-using-json?type=dev)
This simple project provides a clean API for rendering quiz questions with multiple choice answers. The data is supplied using [valid JSON](http://jsonlint.com/) and can be retrieved from any url end point which returns the data in the desirable format (see sample data).
Each question is assigned a score, this allows for a range of scores for each question or a specific answer.
###[v0.5.1](https://github.com/Matt-Webb/javascript-quiz-using-json/tree/v0.5.1-alpha)-Alpha
This project is currently in [ALPHA](https://github.com/Matt-Webb/javascript-quiz-using-json/tree/v0.5.1-alpha) and activity being worked on. [Contributions](./CONTRIBUTE.md) are welcome!
#### Via NPM
`npm i javascript-quiz-using-json`
#### How to use:
Add the following HTML into your page:
**HTML**
**JAVASCRIPT**
Basic initialisation.
Quiz.init({ id: "quizName" });
_Note: this needs to be done after referencing the script shown above._
**Sample JSON**
Here is a sample of the quiz question data:
{
"question": "What year was the film The Terminator released?",
"info": "The Terminator is a 1984 American science fiction action film directed by James Cameron. It stars Arnold Schwarzenegger as the Terminator, a cyborg assassin sent back in time from 2029 to 1984 to kill Sarah Connor (Linda Hamilton), whose son will one day become a savior against machines in a post-apocalyptic future.",
"options":
[
"1982",
"1983",
"1984",
"1984"
],
"scores":
[0,3,1,2]
}
## CONFIGURATIONS
var configurations = {
id: 'quizName', // the element reference within the DOM
dataSource: './data.json', // the json quiz data location
randomise: 'false', // randomise the order of the questions to the user
loadingGif: './img/loading.gif', // loading image between rendering
};
Quiz.init(configurations);
**HOW TO INSTALL**
Pull the package from npm:
`$ npm i javascript-quiz-using-json --save`
Install dev dependancies:
`$ npm install`
Build the package:
`$ npm run build`
This will generate the files in the the `dist` folder, i.e. `dist/quiz.umd.min.js`
### [CONTRIBUTING](./CONTRIBUTE.md)
`$ git clone`
`$ npm install`
`$ npm test`
`$ npm start`
### TO DO
* [ ] Add optional style sheets / using material design / bootstrap
* [ ] Add charts to result rendering
* [ ] Add Automated Acceptance Tests
* [ ] Set up semvar
* [ ] Abstract the rendered html question into templates for better customisation
* [ ] Add as npm package
* [x] Add webpack bundler
* [x] Remove jquery dependency
* [x] Move TODOs to issues with need-help flag
* [x] Update Travis Build
* [x] Add module bundler
* [x] Add test coverage badge
* [x] Refactor json data for better clarity e.g "answers" should be "options" etc.
* [x] Configurate as bower package
* [x] Remove Bower, Switch to npm
* [x] Add Unit Tests