mwasiluk/angular-surveys

Angular survey / form builder inspired by Google Forms

angular-surveys

Angular.js survey / form builder inspired by Google Forms

Bootstrap Demo

Material Design Demo

Bower

You can install this package through Bower :

bower install angular-surveys --save

Wiki

Directives

angular-surveys's Issues

"Go to page based on answer" functioning correctly in demo?

Hey all, plugin looks great! I am using the builder from the online-demo to test the capabilities of branching. The surveys I will need to create will heavily use the "Go to page based on answer" feature of the radio buttons.

The problem I am running into is that no matter how I answer the first question, I am not taken to the desired page but am taken to the confirmation page.

I am not sure if I have setup the form incorrectly or if there is potentially a bug in the online-demo

Here is an overview of my setup:

I have 4 pages. Page one contains Question 1, a Yes or No question. If you select Yes you should taken to page 2 for "yes follow up". If you select No you should be taken to page 3 for "no follow up". Page four contains Question 2. After Question 2 is answered the survey should be finished.

So the flow should go:

*Here is the generated model: *
{ "pages": [ { "id": "3e85e01175c78021d0b552a72ecddd76", "number": 1, "name": null, "description": null, "pageFlow": { "page": { "id": "4ea50b65fff0e30f197d78ef82d5a946", "number": 4 }, "label": "mwForm.pageFlow.goToPage" }, "elements": [ { "id": "5615172be457d703997d93b4aeebf7fb", "orderNo": 1, "type": "question", "question": { "id": "18b4f70e0523f4910eca3f7c3053ec4a", "text": "YES OR NO?", "type": "radio", "required": true, "offeredAnswers": [ { "id": "3b8004d4db0fa88184fb509217d21203", "orderNo": 1, "value": "YES", "pageFlow": { "page": { "id": "45422016bd62ac25c9f10b9a569c8b28", "number": 2 }, "label": "mwForm.pageFlow.goToPage" } }, { "id": "6899c4ad88aeab991f5ccdf501f8d17f", "orderNo": 2, "value": "NO", "pageFlow": { "page": { "id": "723960d518e45fed949aff73f6b2149b", "number": 3 }, "label": "mwForm.pageFlow.goToPage" } } ], "pageFlowModifier": true } } ], "namedPage": false, "isFirst": true, "isLast": false }, { "id": "45422016bd62ac25c9f10b9a569c8b28", "number": 2, "name": "YES", "description": null, "pageFlow": { "page": { "id": "4ea50b65fff0e30f197d78ef82d5a946", "number": 4 }, "label": "mwForm.pageFlow.goToPage" }, "elements": [ { "id": "a83958320f9c743410210d299872cc3a", "orderNo": 1, "type": "question", "question": { "id": "b9f51a3e27ffc67cf869e88753def16f", "text": "Why did you answer yes?", "type": "text", "required": true, "pageFlowModifier": false } } ], "namedPage": true }, { "id": "723960d518e45fed949aff73f6b2149b", "number": 3, "name": "NO", "description": null, "pageFlow": { "nextPage": true, "label": "mwForm.pageFlow.goToNextPage" }, "elements": [ { "id": "8cd89a14b955b4189687ab7469d1c3b8", "orderNo": 1, "type": "question", "question": { "id": "974181c30bb3989bbf16fb785377db33", "text": "asdfasdfasdfasdfr", "type": "time", "required": true, "pageFlowModifier": false } } ], "namedPage": true }, { "id": "4ea50b65fff0e30f197d78ef82d5a946", "number": 4, "name": "Final", "description": null, "pageFlow": { "nextPage": true, "label": "mwForm.pageFlow.goToNextPage" }, "elements": [ { "id": "01ec89f92275c211ea6cd82b1b91bb82", "orderNo": 1, "type": "question", "question": { "id": "70d0d64e3ab4f20fcd11e9913516a75c", "text": "How good was this survey from 0 (horrible) to 10 (perfect)", "type": "range", "required": true, "pageFlowModifier": false, "min": 0, "max": 10 } } ], "namedPage": true } ], "name": "TEST", "description": "Test decision tree", "confirmationMessage": "DONE!" }

Thanks for the great work!

How to lauch the app

Hello
I am new to Angular and I tried to launch the app using npm install / npm start but it did not work. I could not found further details on the readme file.
I appreciate your help
Thank you

Any way around for angular 2?

The survey builder is really amazing. Can we get for angular 2 typescript as well?

Moving a questions between pages makes subsequent questions vanish

Scenario:

1. Create a few questions on page 1.
2. Create second page.
3. Add a few questions to page 2.
4. Drag a question from page 1 to page 2 and drop in between question 1 and 2.
5. Question 3 on page 2 will be hidden in UI.

Is this a known issue, or expected behaviour?

I can no longer clone and install the demo project

hey,

Firstly, awesome work, thanks. Just what I need.
Secondly, sorry, this might be a stupid issue.

So I originally installed the demo fine and was making edits ok. I then adding ngRoute as a dependency and installed it via bower. After this, although I am not convinced this is related, things went bad.

Running my modified demo app, using gulp serve now gives the follow error on loading -

angular.js:14324 TypeError: Cannot read property 'pages' of undefined
at new controller (form-builder.js:1119)
at Object.invoke (angular.js:4839)
at $controllerInit (angular.js:10692)
at nodeLinkFn (angular.js:9569)
at angular.js:9977
at processQueue (angular.js:16643)
at angular.js:16683
at Scope.$eval (angular.js:17958)
at Scope.$digest (angular.js:17772)
at Scope.$apply (angular.js:18066)(anonymous function) @ angular.js:14324

Also, the tests no longer pass, with these failures -

PhantomJS 2.1.1 (Mac OS X 0.0.0) form-viewer Replaces the element with the appropriate content FAILED Expected '<!-- ngIf: !ctrl.options.nestedForm --><!-- ngIf: ctrl.options.nestedForm -->' to contain 'Lorem ipsum'. /Users/cordial/formbuilder/builder-angular/test/form-viewer.spec.js:203:41 Expected '<!-- ngIf: !ctrl.options.nestedForm --><!-- ngIf: ctrl.options.nestedForm -->' to contain 'Form description. Lorem ipsum'. /Users/cordial/formbuilder/builder-angular/test/form-viewer.spec.js:204:41 Expected '<!-- ngIf: !ctrl.options.nestedForm --><!-- ngIf: ctrl.options.nestedForm -->' to contain '<button type="button" class="btn btn-default begin-response-button ng-scope" ng-click="ctrl.beginResponse()" translate="mwForm.buttons.begin">'. /Users/cordial/formbuilder/builder-angular/test/form-viewer.spec.js:205:41 PhantomJS 2.1.1 (Mac OS X 0.0.0) form-viewer Replaces the element with the appropriate content with autoStart option enabled FAILED Expected '<!-- ngIf: !ctrl.options.nestedForm --><!-- ngIf: ctrl.options.nestedForm -->' to contain 'Lorem ipsum'. /Users/cordial/formbuilder/builder-angular/test/form-viewer.spec.js:220:41 Expected '<!-- ngIf: !ctrl.options.nestedForm --><!-- ngIf: ctrl.options.nestedForm -->' to contain 'page 1 name'. /Users/cordial/formbuilder/builder-angular/test/form-viewer.spec.js:221:41 Expected '<!-- ngIf: !ctrl.options.nestedForm --><!-- ngIf: ctrl.options.nestedForm -->' to contain '<button type="button" ng-disabled="ctrl.form.$invalid" ng-if="ctrl.buttons.nextPage.visible" class="btn btn-default next-page-button ng-scope" ng-click="ctrl.goToNextPage()" disabled="disabled">'.

So, after much reverting and faffing, I decided to go back to the start and clone/reinstall a new version of the demo in a different location on my machine. However, I am still getting the same errors as above with even the original version of the demo. So, then I thought somehow something global had occured, so i removed all angular files from my user home .npm directory. This didn't help.

Any thoughts or ideas? I am somewhat at a loss now. When I run bower install angular-surveys --save, I get a message making me pick which angular to use, but whichever I choose I still get error messages when running (although the errors are different - the errors above are for 1.6.0).

cheers
david

how to attach/add image

Order of rows and columns of grid type questions are wrong in preview.

Button Remove Page

Is there a way to remove a single page?

Thanks in advance.

Best Regards
Giuseppe

Provide optional question code

For automatic answer-processing it is useful to have a question code determined by user.

Go to page based on answer not working

Go to page based on answer not working ..its working for continue for next page only.
Few observations on the survey

1. if i edit the default survey the Go to page based on answer is working for the existing pages
2. If the create a new page to the existing survey it is not navigating to the newly created page
   3)If i reset the survey and add the new survey with new pages , Go to page based on answer is not at all working
   Is it an known issue?
   I tested in the below url for bootstrap version
   http://wasiluk.io/angular-surveys/

How can we add a drop down list to the form?

Having a Select/Drop Down list seems like it should be a pretty standard addition to this utility. Before I go adding custom code, has anyone encountered/addressed the capability/need to add drop-downs to the survey forms?

Textbox Grid Question Type

Hi,
How can i support a grid type with Text box.
Please see the below attached screen of what i am expecting
Plz help me.

Dropdown from Database

How to bind dropdown values from database?

Angular version issue

Hi,

I have tried to run

bower install angular-surveys --save

But I'm getting the following message when it compiles

Unable to find a suitable version for angular, please choose one by typing one of the numbers below:
    1) angular#1.4.14 which resolved to 1.4.14 and is required by angular-mocks#1.4.14
    2) angular#1.5.8 which resolved to 1.5.8 and is required by angular-animate#1.5.8, angular-aria#1.5.8, angular-messages#1.5.8, angular-sanitize#1.5.8, angular-surveys
    3) angular#>=1.2.26 <1.6 which resolved to 1.5.8 and is required by angular-translate#2.12.1
    4) angular#>=1.2.x which resolved to 1.5.8 and is required by angular-ui-sortable#0.13.4
    5) angular#>=1.4.0 which resolved to 1.5.8 and is required by angular-bootstrap#1.3.3
    6) angular#>=1.0.6 which resolved to 1.5.8 and is required by angular-elastic#2.5.1
    7) angular#>=1.3.x which resolved to 1.5.8 and is required by angular-surveys#0.9.1
    8) angular#^1.4.8 which resolved to 1.5.8 and is required by angular-material#1.1.1

Prefix the choice with ! to persist it to bower.json

Any ideas.

Many thanks!

how add number page to questionResponse

Firebase

How to put this data as result in firebase or local mysql database?

install via Yarn or npm?

I think this is a great project! Is there any chance you'd add an install for yarn or npm?

decision tree

Hi, a 'decision tree' should allows to go to a page defined by the answer (if you anwser "yes" go to question 2, if "no" go to question 3). Is this possible?

Anyway, is angular-surveys 'production-ready'? I mean, it can be used in production or there are big known bug currently?

Optional additional information for an answer as well as checkbox, if additional information is useful for a particular question.

[bootstrap version] Range is not disabled on viewer- readonly

This happened to bootstrap version only. The range slider is not locked. I will try to fix it by tomorrow when I have time

Hide the form element

I want to give my user the facility to hide and show the element from the form. So the user can hide the element and can also make it available in future if he/she requires.
Looking forward to the reply.
Thanks.

Is there a quick way of removing the i18n from this module...

I am facing some issue with angular-translate module during config of the module and I really do not care for translation to other languages. Is there a quick way of excluding the internationalization?

What is template-data used for in the form viewer?

In the demo code, the form viewer has its template-data property set equal to a json object, but I'm unclear about its purpose.

The documentation for the form viewer doesn't describe this property either.

save changes callback

Is there any way to access the ctrl.save() callback of the generated "ready" button of the formbuilder?
I ask because I see the buttons onClick calls ctrl.save, my controller (called vm, for what it's worth) implements a method save(), yet the method is just not called.

Would be nice to actually store the model data some place other than 127.0.0.1

Upgrade Angular version

Hello,
Do you have upgraded your app the latest version of Angular ? Like the >= 2.3.0

Thank you

Adding static questions in form builder.

Hi,
I have a requirement where I need to set two default questions that user can't modify in the form-builder. I am thinking of adding two elements in JSON to the formData object but then these fields need not be edited or deleted, allowing user all other modification like adding extra questions, changing form name and properties etc. So, Is there any way to achieve this ? I guess a element level read-only would do the job but I didn't find anything.
Any help is deeply appreciated !!

Number question type displays extra input field

In either demo (bootstrap or material), if you had a question and set the type to "Number", an extra input field is display beneath the "min" and "max" fields.

The template being used explicitly creates this extra control so perhaps it just needs to be removed? Here's the relevant snippet from the bootstrap template:

<div ng-switch-when="number" class="form-inline">
                        <div class="range-config form-inline">
                            <span translate="mwForm.question.number.min">Min</span>: <input class="form-control" type="number" ng-model="ctrl.question.min" max="{{ctrl.question.max}}" ng-readonly="ctrl.readOnly"/> <span translate="mwForm.question.number.max">Max</span>: <input class="form-control" type="number" min="{{ctrl.question.min}}" ng-model="ctrl.question.max" ng-readonly="ctrl.readOnly"/>
                        </div>
                        <br/>
                        <input class="form-control" type="number" disabled >
</div>

How to add another checkbox like `Required` for the question element.

Is there a way to create another checkbox near Required, Can anyone help me with this, I cant find a way to do this.

Confirmation page not showing

Hi

The confirmation page is not showing any more ... you can test it with your own material demo page!

kind regards
c_bb

translate not working

screenshot added

please help @mwasiluk
Thanks in advance

response data not reset!

Hi

for me this is an issue e.x.

when you have a question - radio option:

question 2 - did you like the question
O yes ---> go to page 3
O no ---> go to page 4

if I then choose yes first and select an option on page 3, but then afterwards decide that i did not like the question and go pack to question 2 and choose no, then the data from page 3 is still in the response data, even though i have now selected no and only need the data from page 4.

hope you catch my drift.

you can test it with the demo pages, the "problem" also exists there

kind regards
C_bb

Question : Form submit button not always appear on form.

Hi Everyone,

I have a survey form created from builder using the material demo page.

If I click from builder, then viewer, I could see the submit button on the form.

If I remove the builder page, directly hit viewer the submit button won't show.

Anyone encountered this before?

To put it simply, how could I use the viewer directly without the builder?

issue with formdata and responsedata

is it necessary to pass same formData and responseData ?
can you tell how can i pass our own formData and responseData to form builder and form viewer .
please help @mwasiluk
Thanks in advance

Datepicker and Safari

Your date picker doesn't work in Safari as type="date" is not supported.

Main Page Not Working.

TypeError: Cannot read property 'pages' of undefined
at new controller (form-builder.js:1119)
at Object.invoke (angular.js:4839)
at $controllerInit (angular.js:10692)
at nodeLinkFn (angular.js:9569)
at angular.js:9977
at processQueue (angular.js:16643)
at angular.js:16683
at Scope.$eval (angular.js:17958)
at Scope.$digest (angular.js:17772)
at Scope.$apply (angular.js:18066)

Failed to instantiate module ng-sortable

Iam getting the below error even though i added the sortable.min.js and ng-sortable.js under the folder Sortable Folder

Failed to instantiate module ng-sortable due to:

Error: [$injector:nomod] Module 'ng-sortable' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

Error: [$injector:nomod] Module 'ng-sortable'

Child question

I need implement child question in my scenario.

I can link a page to a question, but i need link a question to a question.

Is there any way to do this?

Make it compatible with Angular2

I'm working on a project that it would fit perfectly, but it is written with Angular2. It would be awesome if I could just npm install it and work flawlessly.

how to add sound,video like image

what about adding sound and video

How to get selected answer value?

when i tried to console.log(ctrl.responseData);
it show the id of the answer, not the value.

RoadMap

Hello, the repository has roadmap? we would like to continue to contribute and know how we can collaborate and perform a work plan in order to avoid write the same features.

Thanks.

Remove the delete button

Is there any way to remove the delete button which is related to the form element. I want the user not to remove the element from the form while editing it. Looking forward to the reply.
Thanks.

how add correct answer a question?

add correct answer a question in checkbox or radiobuttons

later match questions and answers

thanks

Material Design

Hello, I want to contribute in your project, I need something similar with material design, I saw you have a branch whit some changes, How can I help you? Do you have a roadmap? in fact, I saw that there is a fork that has a lot of progress on that too:

https://github.com/theRichu/angular-surveys

Regards.

What folders do i need to move in to the hosting environment?

moving 'dist' folder do not seems to work

How to create response-data.json for my question set?

how i can create response-data.json for my newly created questions

Template customization

Hello,

I admire the work you've done so far. But I faced a bit of a challenge. I've seen in the form-builder.js source that there are templateUrl, example templateUrl: 'mw-question-priority-list-builder.html',..

I would like to know how i can customize these template files and apply these changes to the demos, if it can be done...

Thanks

Disable/Remove submit button

I want to show the preview of the created survey form by the Admin. So that other admin can see the form preview. I have used form-viewer for the preview is there some or the other way to disable or remove the submit button.

Looking forward for the answer. Thanks

Adding new elements

how can I add new form elements?
is there any demo video or any steps you have uploaded?
Please answer me quickly.

Thanks in Advance.

How to integrate in ASP.NET app?

Hello,
I would like to integrate the angular-surveys in my app such that a user can design a form, save the form and then later on open to submit an instance.

I really appreciate your assistance.
Bila