This is a
playground to test code. It runs a full
Node.js environment and already has all of
npm’s 400,000 packages pre-installed, including
react-questionnaire with all
npm packages installed. Try it out:
react-questionnaire lists no main file and has no index.js, so it can't be directly required. If this is a mistake, please let us know. It may however contain internal files that you can require manually:
This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.
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.
Then simply import the style and script files as shown (with the correct paths):
<script src="scripts/react-questionnaire.js"></script> <link rel="stylesheet" href="styles/main.css">
You must define an element on the DOM with id set to questions
<div id="questions"> </div>
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:
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.
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-types here are all the React Components used to render the questions.
app/scripts/ui-lib small components that help build a better experience for the questionnaire.
app/scripts/store.js this 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.js this 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.js this is the Questionnaire Component used to manage the logic behind displaying the questions and other components.
app/scripts/app.js Loads the configs from
config.js and injects the
question.json file to the Questionnaire Component.