qality

v0.1.4

Published

2 years ago

Multiple-Choice QA System for JavaScript

Downloads

0High
0Medium
0Low

planeshifter

question-answer multiple-choice examination

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>

Usage:

Running the Editor

A hosted version of the editor is accessible under the following link: QAlity Frontend.

To run your own version, clone this repository and run

make build

to compile the JavaScript necessary for running the frontend. The command

make server

starts a server at port 8000 and should automatically open the frontend in a browser.

API

Tests:

Run tests via the command npm test

License

MIT

Icon Credits

"Wrench" by Calvin Goodman
"Network" by José Campos
"Survey" by Ann Fandrey
"Close" by Mateo Zlatar
"Play" by Mike Rowe
"Add" by Vittorio Maria Vecchi
"Upload" by Thomas Le Bas
"Text" by Zyad Basheer
"Survey" by Icons8
"Marker" by Anton Gajdosik
"Box" by Arthur Schmitt

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme