Skip to content

Antonio-Laguna/Quizes

Repository files navigation

Quizes Web Component Built With Stencil

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:

Parameter Description Default Value Required
questions-key Key within the window object where questions are stored. "questions" No
start-text Text for the button to start the quiz. "Start quiz" No
next-text Text for the button to go to the next question. "Next" No
count-edges Whether intro and end are counted for progress. false No

The component has the following slots:

Slot Name Description
quiz-title Renders as the title of the quiz.
quiz-description Renders as the description of the quiz.
quiz-result Last screen once the quiz has been completed.

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:

Key Description
answers Array of the indexes that matches the answers given.
correctAmount Number of correct answers.
correctPercent Percent of correct answers.

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