Qality NPM | npm.io

QAlity.js

Multiple-Choice QA System for JavaScript

Features:

Versatile: Several question types: multiple choice, input fields, timed and untimed questions
Evaluation system: Provide result scores and targeted feedback
Animations: customizable animations based on the performant gsap library
Visual Editor: create quizzes interactively using a visual frontend
Markdown support: implemented via markdown-it
Math support: blazingly fast rendering via KaTeX
Customizable Design: change appearance of all elements via CSS

Getting Started

Create a quiz on on the QAlity Frontend, grab the created JavaScript object and insert on your page via one of the following options.

Installation:

CDN

Include the following two lines in your head and you are ready to go:

<script src="https://cdn.rawgit.com/Planeshifter/qality.js/d02a37d884cd658448ee64a058cd32ceb7df4dfb/dist/QAreader.min.js"</script>
<link href="https://cdn.rawgit.com/Planeshifter/qality.js/d02a37d884cd658448ee64a058cd32ceb7df4dfb/css/exam.css" media="screen" rel="stylesheet" type="text/css"/>

See the following minimal working example:

<!DOCTYPE html>
<html>
  <head>
      <script src="https://cdn.rawgit.com/Planeshifter/qality.js/d02a37d884cd658448ee64a058cd32ceb7df4dfb/dist/QAreader.min.js"></script>
      <link href="https://cdn.rawgit.com/Planeshifter/qality.js/d02a37d884cd658448ee64a058cd32ceb7df4dfb/css/exam.css" media="screen" rel="stylesheet" type="text/css"/>
  </head>
  <body>
    <script>
        new QAlity({"sequence":{"nodes":[{"id":0,"type":"input","question":"Who is the current president of the United States?","right_answer":"Barack Obama","transition_in":"dynamic","transition_out":"dynamic","points":1,"duration":"0","background":"none"}]},"evaluation":{"seperator":[{"start":0.33,"id":0},{"start":0.66,"id":1}],"sorted":[],"ranges":[{"id":0,"text":"RANGE 1","start":0,"end":0.33},{"id":1,"text":"RANGE 2","start":0.33,"end":0.66},{"id":2,"text":"RANGE 3","start":0.66,"end":1}]}},
        {"div":"quizHolder"});
    </script>
    <div id = "quizHolder"></div>
  </body>
</html>

To render your own quiz, replace the first argument passed to the QAlity function.

npm

npm install qality

Use browserify and render a quiz with only a few lines:

var QAlity = require( 'qality' );

new QAlity(<qa object>, {
  "div":"<div to render to>"
}, <optional callback>);

bower

bower install qality

Require the necessary files in your index.html document:

<!DOCTYPE html>
<html>
  <head>
    <!-- Load QA Reader, which exposes constructor function QAlity to the window object -->
    <script src="bower_components/qality/dist/QAreader.min.js"></script>
    <!-- Load the standard CSS or provide your own -->
    <link href="bower_components/qality/css/exam.css" media="screen"
      rel="stylesheet" type="text/css"/>
  </head>
  <body>
    <!-- your code comes here -->
  </body>
</html>