React-sn-question NPM

react-sn-question

Installation

npm run install react-sn-question --save

Usage

import React from 'react';
import SNQuestion from 'react-sn-question';
import 'react-sn-question/dist/main.css';
import questions from './questions'

class App extends React.Component {

  state = {
    questions: questions
  }

  render() {
    const isQuestionCorrect = SNQuestion.isQuestionCorrect(this.state.questions)
    return (
      <SNQuestion
        title={"An animal cell contains:"}
        resolutionMessage={`The selected value is ${isQuestionCorrect ? 'correct': 'incorrect'}`}
        onChange={(value) => checkNewValue(value)}
        disable={isQuestionCorrect}
        questions={this.state.questions}
      />
    )
  }
}

Live demo

API

Prop	Type	Required	Default	Description
`title`	string	Yes		The title of the question.
`resolutionMessage`	string	Yes		Message to be displayed at the bottom of the container which represents the status of the question.
`questions`	Array	Yes		Contains the questions data.
`onChange`	function	No	undefined	Fires whenever a button is toggled.
`disable`	boolean	No	false	Disables the SNQuestion.

interface SNQuestion {
  title: string,
  resolutionMessage: string,
  questions: Array<Question>
  onChange?: (value: string, answerIndex: number, questionIndex: number) => void,
  disable?: bool,
}

interface Question {
  id: string,
  correct: number,
  selected: number,
  options: Array<Option>,
}

interface Option {
  name: string,
  value: string
}

react-switchable