react-sn-question

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
}

Related

react-switchable

Contributing

All contributions are welcome.

License

MIT license @Alvaro Bernal G.