QuizEra Demonstration

Welcome. Here you will find a demonstration of my JavaScript library, QuizEra. The primary utility of QuizEra is to allow developers to easily generate interactive timeline quizzes that can be embedded anywhere in a site's HTML. Quizzes present the user with a timeline populated with proportionally spaced events called 'nodes', each displaying a year and a blank answer field upon click. The task of the user is to drag each of the choices displayed beneath the timeline and place them in what they believe is the appropriate corresponding node's answer field. Once the user is finished they can click the 'Done' button to receive a score based on the number of correctly placed events.

Let's consider an example use case: Say we are a developer running a history blog and we just wrote a post covering a simplified history of the Western Roman Empire, QuizEra would then be a perfect tool to improve our readers' engagement and test their comprehension. We can create a timeline quiz with a few QuizEra function calls. Embedded to the right is such a quiz, generated with the following JavaScript code:

                     
const quiz = new QuizEra();
quiz.createNode(80, 'The colosseum is built in Rome by emperor Vespasian.');
quiz.createNode(166, 'Trade is established between Rome and China');
quiz.createNode(306, 'Constantine becomes the emperor of Rome');
quiz.createNode(380, 'Christianity becomes the official religion of Rome');
quiz.createNode(410, 'The city of Rome is sacked by an army of Visigoths.');
quiz.generateQuiz(550, false, '#quiz-1');
// signature: generateQuiz(width (int), border (str), parent_element_id (str))

Try it out! Click a node on the timeline to display its answer field, then drag and drop the appropriate event. Press done when you're finished.

As you can see, it is incredibly easy to create your own custom quiz. Simply create a QuizEra instance and add up to 26 nodes using the createNode() function, and generate the quiz using the generateQuiz() function. Each have the following signatures:

createNode(year [int], description [String]) - Creates a node/event with the specified year and description.

generateQuiz(width [int], border [bool], parent_element_id [String]) - Generates the quiz with the specified width (pixels), whether to generate a border, and the jQuery selector for the parent element in the DOM.

Quizzes have a height of 400px and can have any width greater than 300px. The order of draggable nodes and their respective alphabetical tags is randomly determined upon generation. Nodes on the timeline are proportionally spaced based on their years; the nodes with the earliest and latest years go on either end of the timeline, and the nodes in-between are spaced relative to them. QuizEra depends on jQuery, so make sure it is loaded before QuizEra.js. Our final example will be a larger American history timeline quiz showcasing the capabilities of QuizEra:

QuizEra was created by: Nathan Raymant

American history timeline reference: dummies.com