uestionnaire using React Components
This repo is a ReactJS based questionnaire it is intended to be modular and simple. It uses simple Twitter Bootstrap-based styling and simple CSS animations.
If you want to embed on your website download the compiled file and add the following code to your website.[![Download](/download_btn.png)](http://experiments.plethora.com.mx/react-questionnaire.zip) [![Try a demo!](/demo_btn.png)](http://experiments.plethora.com.mx/demo-react-questionnaire/#)
Then simply import the style and script files as shown (with the correct paths):
You must define an element on the DOM with id set to questions
Make sure you have all the node dependencies using
npm install on the root directory of this project.
To make your own Questionnaire simply modify the
skippable property is used to define an array of questions that can skipped.
Questions will be displayed based on the question number provided as an id.
question-typeproperty should be one of the following:
small-multiple-options: Used to display a small set of multiple options that could be selected with one or more answers.
small-unique-options: Used to display a small set of options but only one answer is selected.
small-text-input: Used to display a small text input that could be used to answer questions that need less than 100 characters.
Both the small-multiple-options and small-unique-options need to define the set of
options in an array of objects that have:
- A unique id
- A description of the answer
- A true or false value assigned to selected used to define if such option is selected as the default value.
The posturl is used to send the results, there is a sample server provided that uses NodeJS and SQLite3 to save the results.
To start the development server use
gulp watch, it will open a browser window with the Questionnaire.
How to hack
If you want to personalize or create your own question types then this guide is for you.
First you need to understand the basic structure of the project.
app/scripts/is where all the js live, everything is managed and compiled by babel and gulp.
app/styles/is where all the styles (css or less) go, there is a bootstrap npm module used to give bootstrapy styling; but
main.lessoverwrites some to give it a cleaner look.
app/configs/is where both the
questions.jsona JSON that has both the description of the questionnaire and the configurations of the components, and the
config.jsthat holds the variables that involve static configurations.
app/scripts/question-typeshere are all the React Components used to render the questions.
app/scripts/ui-libsmall components that help build a better experience for the questionnaire.
app/scripts/store.jsthis is a simple function to store the question answers. The question-type components use it to store the answers as they need.
app/scripts/generate_questions.jsthis function generates the questions based from the
questions.json.It generates an array of JSX elements that the Questionnaire Component then uses.
app/scripts/questionnaire.jsthis is the Questionnaire Component used to manage the logic behind displaying the questions and other components.
app/scripts/app.jsLoads the configs from
config.jsand injects the
question.jsonfile to the Questionnaire Component.