quizes v1.5.0

Quizes Web Component

This is a pet project that was born as I saw no libraries to do a Quiz that was OpenSource.

I intend to use it on my blog where I write FrontEnd tutorials and wanted to create some quiz from time to time. As a result, initially it is very scarce in features and is unstable.

As of now, this project status is being maintained.

Using this component

There are three strategies we recommend for using web components built with Stencil.

Script tag

• Put a script tag similar to this <script src='https://unpkg.com/quizes@1.0.0/dist/quizes.esm.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run npm install quizes --save
• Import import { defineCustomElements } from 'quizes';
• Run defineCustomElements()

In a stencil-starter app

• Run npm install quizes --save
• Add an import to the npm packages import quizes;
• Then you can use the element anywhere in your template, JSX, html etc

Usage

The main element is quiz-es and has the following parameters:

The component has the following slots:

Questions, should be within an object on the window obeject and should have the following structure:

window.questions = [
  {
    title: "", // Title of the question
    choices: [
      ""       // List of possible choices
    ],
    answer: -1 // Index of the correct answer
  },
  ...
]

Events

The component fires a quizCompleted event with the following data as the detail of the event:

This is fired right before the content changes which gives you the chance to customise the detail screen.

Development

Clone this repo to a new directory:

git clone git@github.com:Antonio-Laguna/Quizes.git
cd Quizes

and run:

npm install
npm start

To build the component for production, run:

npm run build