@ovos-media/generic-quiz

[widget] generic quiz

A generic quiz widget which can display text, image, video or audio sources as answers or question. You may even define nested data structures as well as provide custom react components as answer or question elements.

This widget is a purely presentational component. It does not handle logic for you (e.g. correct/incorrect).

Usage

The easiest way to use the generic quiz widget is by specifying a string question, and an array of answer strings.

To handle correct / incorrect choices, pass a onChange prop to the Quiz element to get notified about "which" answer has been clicked. This callback will get the original answer data-object as a parameter so you can check if the answer was correct and do your stuff.

import { Quiz } from '@ovos-media/generic-quiz';

const question = 'Some Question';
const answers = ['Answer 1', 'Answer 2', 'Answer 3'];

function handleChange(answer) {
  if (answer.data === answers[0]) {
    console.log('Answer correct!');
  } else {
    console.log('Answer incorrect :(');
  }
}

export default function MyCoolQuiz() {
  return (
    <Quiz
      question={question}
      answers={answers}
      onChange={handleChange}
    />
  );
}

It is also possible to use so-called data objects as your question or answers.

const question = { type: 'image', src: 'pen.jpg' };
const answers = [
  { type: 'image', src: 'apple.jpg' },
  { type: 'image', src: 'pineapple.jpg' },
  { type: 'image', src: 'pen-pineapple-apple-pen.jpg' }
];

// other types would be
const video = { type: 'video', src: 'apple-pen.mp4' };
const audio = { type: 'audio', src: 'pineapple-pen.mp4' };
const string = { type: 'string', text: 'Pen-Pineapple-Apple-Pen' };

// in order to nest these objects, you just put them into an array
const multipleVideos = [
  { type: 'video', src: 'apple-pen.mp4' },
  'This is cool',
  { type: 'video', src: 'pineapple-pen.mp4' }
];

// these can also be nested. it's a recursive operation
const multipleImages = [
  [
    { type: 'image', src: 'whoop.jpg' },
    { type: 'image', src: 'whoop-whoop.jpg' }
  ],
  'Oppa Gangnam Style'
];

Theming

This block utilizes the fabulous amazing react-themeit library which allows you to customize the look of the widget easily.

Currently available elements for theming are:

• container: container of the widget
• question: the question
• answers: the container for answers
• answer: a single answer

To style the block you can utilize the various possibilities which react-themeit gives you, the simplest example is passing a js style object to the element:

import { Quiz } from '@ovos-media/generic-quiz';

export default function MyCoolQuiz() {
  const question = 'Some Question';
  const answers = ['Answer 1', 'Answer 2', 'Answer 3'];

  return (
    <Quiz
      question={question}
      answers={answers}
      styles={{
        container: {
          fontSize: 12
        },
        answer: {
          ':hover': {
            cursor: 'pointer'
          }
        }
      }}
      addFiles={cb => cb(require('myQuizTheme.less'))}
    />
  );
}

Development Commands

$ builder run start:dev # starts the dev version of the application (HMR, sourcemaps, ...)

$ builder run test-client # runs client tests using karma & runs tests in chrome
$ builder run test-server # runs server tests using mocha

$ builder run test-all:watch # watch mode for tests

License

(C) 2016 ovos media gmbh