Javascript quiz using JSON ⭐

This simple project provides a clean API for rendering quiz questions with multiple choice answers. The data is supplied using valid JSON 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-Alpha

This project is currently in ALPHA and activity being worked on. Contributions are welcome!

Via NPM

npm i javascript-quiz-using-json

How to use:

Add the following HTML into your page:

HTML

<!-- dom reference -->
<div id="quizName"></div>

<!-- quiz package -->
<script src="./javascript-quiz-using-json/dist/quiz.umd.min.js"></script>

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

$ 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
• Add webpack bundler
• Remove jquery dependency
• Move TODOs to issues with need-help flag
• Update Travis Build
• Add module bundler
• Add test coverage badge
• Refactor json data for better clarity e.g "answers" should be "options" etc.
• Configurate as bower package
• Remove Bower, Switch to npm
• Add Unit Tests