https://github.com/pilotpirxie/quiz-system

❓ Simple quiz widget for websites build with the React. Could be append as a part of existing website or run as an external application.
https://github.com/pilotpirxie/quiz-system

Last synced: 8 days ago
JSON representation

❓ Simple quiz widget for websites build with the React. Could be append as a part of existing website or run as an external application.

• Host: GitHub
• URL: https://github.com/pilotpirxie/quiz-system
• Owner: pilotpirxie
• Created: 2020-04-19T10:20:24.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T03:46:44.000Z (almost 2 years ago)
• Last Synced: 2024-08-01T13:34:43.638Z (3 months ago)
• Language: JavaScript
• Homepage:
• Size: 4.23 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 25
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# quiz-system

Simple quiz widget for websites build with the React. Could be append as a part of existing website or run as an external application. Supports two types of the question:

* ``choice`` from multiple option,

* check if user ``response`` is correct. 

### How to use?

Development and deployment is very easy. Just follow instruction:

```bash

# clone with git

git clone

# open quiz directory

cd quiz

# install dependencies

yarn

# run dev server in cra directory

yarn start

# to deploy, use cra or babel

yarn build 

# or with babel, copy index.js to quiz-babel/src/quiz-system.js without imports, 

# install dependencies like with cra and then call

yarn yarn

```

### How to use on website?

* Append script on the end of the body

* Call ``Quiz.render()`` method with configuration object

### Sample configuration

```js

window.Quiz.render({

  appendId: 'quiz', // id of DOM element to render react app

  questions: [{ // array with questions

    type: 'choice', // type of question, one of: choice, response

    title: 'Question #1?', // question title

    answers: [ // array with answers, only for choice type of question

      'Answer #1',

      'Answer #2',

      'Answer #3',

      'Answer #4',

    ],

    correctAnswer: 1, // index of correct answer for choice type of question, otherwise valid answer, case insensitive  

    hint: 'Here hint', // hint to display when user click on the left button

  }, {

    type: 'choice',

    title: 'Question #2?',

    answers: [

      'Answer #1',

      'Answer #2',

    ],

    correctAnswer: 0,

    hint: 'Here hint',

  }, {

    type: 'response',

    title: 'Open question #3?',

    correctAnswer: 'correct answer',

    hint: 'Here hint',

  }]

});

```