react-sn-question

0.1.3 • Public • Published

react-sn-question

react-switchable npmversion dependencies Status





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

Try it online

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.

Package Sidebar

Install

npm i react-sn-question

Weekly Downloads

1

Version

0.1.3

License

MIT

Unpacked Size

28.2 kB

Total Files

5

Last publish

Collaborators

  • alvarob