prakhar1989 / react-surveyman Goto Github PK
View Code? Open in Web Editor NEWSurveyMan in React
Home Page: http://prakhar.me/react-surveyman
License: BSD 2-Clause "Simplified" License
SurveyMan in React
Home Page: http://prakhar.me/react-surveyman
License: BSD 2-Clause "Simplified" License
Add support for incrementally validating survey by making a ajax call to runner.jar.
Replace the current js prompt with a modal with a textarea and multiple dropdowns for possible options (e.g. randomize etc.)
As outlined by surveyman schema, there are a few properties that are missing / incomplete in the current Question
type.
freeText
: Allow Stringordered
: Allow array of ids
answer
correlation
"freetext": {
"description": "The freetext object can be a boolean value or a string representing the default value, or a regex",
"oneOf": [
{
"type": "boolean"
},
{
"type": "string"
}
]
},
"answer": {
"type": "string",
"description": "The id of the correct answer for this question. It should be a valid Option Id present in the options properties."
},
"correlation": {
"oneOf": [
{
"type": "string"
},
{
"type": "array",
"items": {
"type": "string"
}
}
]
},
"ordered": {
"oneOf": [
{
"type": "boolean"
},
{
"type": "array",
"items": {
"type": "string"
}
}
]
},
"permitBreakoff": {
"type": "boolean"
}
@etosch: Do you have some ideas on how the non-boolean types of properties should be displayed in the question item?
Move the React components to ES6 classes. Refer - http://babeljs.io/blog/2015/06/07/react-on-es6-plus/
Since options will be added more frequently, an interface like drag-and-drop can become exhausting for the user. A better idea can be to add a tag-like input so that multiple options can be added quickly in one go. This will be similar to Gmail's recipient field in Compose window.
Refer to Ghost's tagging input and Re-tag library for inspiration.
Users should be allowed to duplicate an existing block / question at a click of a button which will it easier for them to add and edit items which are similar.
This is minor, but the package info still says it's running "react-shopping-cart-demo" and that the author is "".
Refer to the existing code and see how id
s of new blocks / questions and options are assigned.
In cases where drag-and-drop gets cumbersome, there should be a way to add an item via a simple button click. Look at how a +
button can be added on each parent so that child is automatically created.
Instead of having a big store, investigate how you can use multiple stores for separating functionality and keeping re-rendering to a minimum. In the same vein, read about shouldComponentUpdate.
Hey! this looks great. Congratulations.
I wasn't able to find license reference in readme.md. Does package.json one ("license": "MIT") applies to the project?
Thanks in advance!
hello slack
Current bundle.js stands at a whopping 280kb (gzipped). Use correct browserify flags in order to reduce the footprint of the compiled JS file.
Refer here for pointers.
I`m trying to run this app but without success,the $npm run start command return this log :
0 info it worked if it ends with ok
1 verbose cli [ 'C:\Program Files (x86)\nodejs\node.exe',
1 verbose cli 'C:\Program Files (x86)\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'start' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info prestart [email protected]
6 info start [email protected]
7 verbose unsafe-perm in lifecycle true
8 info [email protected] Failed to exec start script
9 verbose stack Error: [email protected] start: ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --progress --colors --port 8090
9 verbose stack Exit status 1
9 verbose stack at EventEmitter. (C:\Program Files (x86)\nodejs\node_modules\npm\lib\utils\lifecycle.js:213:16)
9 verbose stack at EventEmitter.emit (events.js:110:17)
9 verbose stack at ChildProcess. (C:\Program Files (x86)\nodejs\node_modules\npm\lib\utils\spawn.js:24:14)
9 verbose stack at ChildProcess.emit (events.js:110:17)
9 verbose stack at maybeClose (child_process.js:1015:16)
9 verbose stack at Process.ChildProcess._handle.onexit (child_process.js:1087:5)
10 verbose pkgid [email protected]
11 verbose cwd C:\Users\Dev\react-surveyman
12 error Windows_NT 6.3.9600
13 error argv "C:\Program Files (x86)\nodejs\node.exe" "C:\Program Files (x86)\nodejs\node_modules\npm\bin\npm-cli.js" "run" "start"
14 error node v0.12.7
15 error npm v2.11.3
16 error code ELIFECYCLE
17 error [email protected] start: ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --progress --colors --port 8090
17 error Exit status 1
18 error Failed at the [email protected] start script './node_modules/webpack-dev-server/bin/webpack-dev-server.js --progress --colors --port 8090'.
18 error This is most likely a problem with the react-surveyman package,
18 error not with npm itself.
18 error Tell the author that this fails on your system:
18 error ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --progress --colors --port 8090
18 error You can get their info via:
18 error npm owner ls react-surveyman
18 error There is likely additional logging output above.
19 verbose exit [ 1, true ]
Any suggestion ?
Refer to the documentation and see if you can capture this change on onChange
method - https://github.com/jedwatson/react-select#further-options
Created the TreeView from scratch. Referred to Cheng Lou's implementation for ideas on keeping it minimal.
Add minimal transitions to the block / question addition and deletion.
After the migration to Immutable is complete, create a history feature that can allow the users to undo
a change.
The primary idea behind this feature is to allow users to reorder questions and blocks in the survey. Instead of manipulating the survey directly (which can be arbitrarily long) the user interacts with the minimap (or the treeview) and the changes are reflected in the survey when the drag-and-drop is over.
Refer here for setting up nested dragSources
and dropTargets
. At the start, our application will have -
Block
and Question
Block
Validate the survey generated against the json schema shared on the Surveyman page.
Schemata - https://github.com/SurveyMan/Schemata/blob/gh-pages/survey_block.json. Subblocks can be nested arbitrarily.
Not sure where to navigate to after executing npm run watch
!
It would very cool to have a button to show the user a valid perturbation of the survey contents. Barring randomizaton logic, how hard would it be to do this, UI-wise?
@jvilk says nothing happens when dragging and dropping a block. Here's a screen shot from when I try to repeat:
Hi @etosch, as a part of the weekly update, I'm creating an issue to highlight the key updates. Using GH issues will make it easier to track our discussion & your feedback. If you prefer, google groups / email for this task - let me know.
This week, I've completed two major pieces of functionality -
SurveyStore
which is responsible for mutating the survey JSON object. The views are responsible for catching user inputs and calling the relevant actions.╔═════════╗ ╔════════╗ ╔═════════════════╗
║ Actions ║──────>║ Stores ║──────>║ View Components ║
╚═════════╝ ╚════════╝ ╚═════════════════╝
^ │
└──────────────────────────────────────┘
DropZone
with drop targets on each type e.g. every Question is now a valid drop target for all Option types. This makes is possible to add any item type on any valid object instead of the earlier stack-like-additions. When a widget is picked from the Toolbox, the appropriate item type is highlighted for the user.These changes can be tested on my website.
Looking forward to your feedback.
In some surveys, there are options that get used over and over again, especially if the survey consists of many questions in a Likert scal, e.g.:
How strongly do you agree that chocolate is the best ice cream?
It would be very convenient if we had separate window for the most popular ones. You would then need to add a copyOption
action, or represent the cached option as a generator (looks like it would be similar to the DraggableBlock)
For long surveys (even the ones that have more than 3 blocks) the toolbox seems to move out of the viewport causing issues with drag and drop. Apply fixed positioning to the toolbox so that it moves along with the window.
Allow in-place editing and deletion of blocks and questions. For options refer to #15.
Generate better alerts on events (replace current console.log statements)
Figure out a way to display / enable branch map feature in Question type.
Separate CSS into state-based and appearance only. Move the state-based part into JSX. Refer to the awesome talk at React Europe by Micheal Chan.
I just cloned the repo, run npm install
and npm run start
as per the document and I get the following errors.
ERROR in ./js/components/Application.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../sub/surveyman.js/SurveyMan/surveyman in /Users/shankardevy/Projects/learn/react/react-surveyman/js/components
@ ./js/components/Application.js 20:16-66
ERROR in ./js/components/Pallet.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../sub/surveyman.js/SurveyMan/surveyman in /Users/shankardevy/Projects/learn/react/react-surveyman/js/components
@ ./js/components/Pallet.js 12:16-66
ERROR in ./js/stores/SurveyStore.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../sub/surveyman.js/SurveyMan/surveyman in /Users/shankardevy/Projects/learn/react/react-surveyman/js/stores
@ ./js/stores/SurveyStore.js 10:16-66
ERROR in ./js/components/TreeView.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../sub/surveyman.js/SurveyMan/surveyman in /Users/shankardevy/Projects/learn/react/react-surveyman/js/components
@ ./js/components/TreeView.js 8:16-66
ERROR in ./js/components/Survey.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../sub/surveyman.js/SurveyMan/surveyman in /Users/shankardevy/Projects/learn/react/react-surveyman/js/components
@ ./js/components/Survey.js 21:16-66
ERROR in ./js/components/Controls.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../sub/surveyman.js/SurveyMan/surveyman in /Users/shankardevy/Projects/learn/react/react-surveyman/js/components
@ ./js/components/Controls.js 6:16-66
ERROR in ./js/components/BlockNode.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../sub/surveyman.js/SurveyMan/surveyman in /Users/shankardevy/Projects/learn/react/react-surveyman/js/components
@ ./js/components/BlockNode.js 14:16-66
ERROR in ./js/components/Block.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../sub/surveyman.js/SurveyMan/surveyman in /Users/shankardevy/Projects/learn/react/react-surveyman/js/components
@ ./js/components/Block.js 24:16-66
ERROR in ./js/components/Question.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../sub/surveyman.js/SurveyMan/surveyman in /Users/shankardevy/Projects/learn/react/react-surveyman/js/components
@ ./js/components/Question.js 16:16-66
ERROR in ./js/components/Options.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../sub/surveyman.js/SurveyMan/surveyman in /Users/shankardevy/Projects/learn/react/react-surveyman/js/components
@ ./js/components/Options.js 13:16-66
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.