Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including react-sn-question with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var reactSnQuestion = require("react-sn-question")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-sn-question v0.1.3

A react component to easily create a toggleable question.

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

PropTypeRequiredDefaultDescription
titlestringYesThe title of the question.
resolutionMessagestringYesMessage to be displayed at the bottom of the container which represents the status of the question.
questionsArrayYesContains the questions data.
onChangefunctionNoundefinedFires whenever a button is toggled.
disablebooleanNofalseDisables 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.

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free