Created the TreeView from scratch. Referred to Cheng Lou's implementation for ideas on keeping it minimal.

hello slack

As outlined by surveyman schema, there are a few properties that are missing / incomplete in the current Question type.

To be Extended

• freeText: Allow String
• ordered: Allow array of ids

To be Added

• 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?

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

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.

Not sure where to navigate to after executing npm run watch!

Refer to the existing code and see how ids 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.

@jvilk says nothing happens when dragging and dropping a block. Here's a screen shot from when I try to repeat:

Schemata - https://github.com/SurveyMan/Schemata/blob/gh-pages/survey_block.json. Subblocks can be nested arbitrarily.

This a use-case in which drag-and-drop really shines.

Add support for incrementally validating survey by making a ajax call to runner.jar.

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.

Idea

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.

Features

1. Blocks can be re-ordered (at the top level)
2. Questions can be moved to another block
3. Questions can be re-ordered within the block and also inside another block.

Implementation

Refer here for setting up nested dragSources and dropTargets. At the start, our application will have -

• 2 DragSources - Block and Question
• 1 DropTarget - Block

Todos

• Define new ItemTypes
• Setup nested dragSources
• Setup drop targets on blocks (for questions)
• Propagate changes to real survey
• Implement sortable on block
• Implement sortable on question

Move the React components to ES6 classes. Refer - http://babeljs.io/blog/2015/06/07/react-on-es6-plus/

Generate better alerts on events (replace current console.log statements)

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!

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 ?

Validate the survey generated against the json schema shared on the Surveyman page.

Replace the current js prompt with a modal with a textarea and multiple dropdowns for possible options (e.g. randomize etc.)

After the migration to Immutable is complete, create a history feature that can allow the users to undo a change.

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?

Add minimal transitions to the block / question addition and deletion.

Refer to the documentation and see if you can capture this change on onChange method - https://github.com/jedwatson/react-select#further-options

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.

• Lint configurations: https://github.com/airbnb/javascript/tree/master/linters
• ESLint - http://eslint.org/
• React linter - https://github.com/yannickcr/eslint-plugin-react

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 -

• Flux architecture - Used the Reflux library to implement the flux architecure in the application. Instead of top-level component acting as a controller and view both, all data changes happen in the 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 ║
╚═════════╝       ╚════════╝       ╚═════════════════╝
     ^                                      │
     └──────────────────────────────────────┘

• DropTargets: Replaced the existing 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.

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.

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?

• Agree Strongly.
• Agree
• Disagree
• Disagree Strongly.

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.

This is minor, but the package info still says it's running "react-shopping-cart-demo" and that the author is "".

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.

Figure out a way to display / enable branch map feature in Question type.

Schema

• Save survey to localStorage
• Clear survey
• Load survey from localstorage
• Provide the user the option to load from localstorage
• Load survey from a file
• Download survey to a file

Allow in-place editing and deletion of blocks and questions. For options refer to #15.

• Blocks
  • Delete
• Questions
  • Edit
  • Delete