surveyjs / survey-library Goto Github PK
View Code? Open in Web Editor NEWFree JavaScript form builder library with integration for React, Angular, Vue, jQuery, and Knockout.
Home Page: https://surveyjs.io/form-library
License: MIT License
Free JavaScript form builder library with integration for React, Angular, Vue, jQuery, and Knockout.
Home Page: https://surveyjs.io/form-library
License: MIT License
Some surveys may have a lot of columns in dropdown/dynamic matrix question. They have to be scrollable and there should be an ability to set the min-width for the column.
Can you add type of question - datepicker?
Is there currently anything within the library API that would allow me to "focus" on the top most missing field. Currently on long forms, you may not see that error...
is it possible to get rid off the value "other"?
i think it's better to add the entered value in the data for the field directly.
as fas as i can see it seems to me that "other" is added to the fielddata and the entered data is
submitted as new "..-comment" field.
If survey.showQuestionNumber set to 'off' the question title has the dot '.' at the beginning: '. [questionTitle]'.
Workaround: in the current version (v0.9.10) use survey.questionTitleTemplate: "{require} {title}";
If I have a matrixdropdown, I cannot trigger on a field, only on the result of the entire question which does not work. I tested with "contains" but this does not work, either.
Would be much better to have something like this:
{ type: "visible", name: "myMatrix.row[3].field[5]", value: "sedan", questions: ["Sedan"] },
why the input json to create a survey isn't valid json?
Hi andrewtelnov , your surveyjs it's really cool and useful for me . I have a lot of requirements same with dxsurvey website https://dxsurvey.com
Thanks
Hi,
i am trying to achieve a custom data source for dropdown components, which will help dropdown to be populated from a different data source rather than defining in the editor.
please have a look at the below changes, confirm if this is the right place or will it cause some other problems.
Object.defineProperty(n.prototype, "choices", {
get: function () {
debugger;
//"dataServiceURL" is a new property in dropdown property bag.
if (this.dataServiceURL != undefined) {
this.choicesValues = []; //reinitialize the Array
//loading with a different source.
this.choices = ["1|1st modified Item", "2|2nd Modified Item"];
console.log(this.choicesValues);
return this.choicesValues;
} else {
return this.choicesValues
}
},
set: function (t) {
debugger;
e.ItemValue.setData(this.choicesValues, t)
}
There is no way to change the default text for question comment title. It is always: "Other (describe)".
A prioritize question type is a question where user is asked to order labels from most important to least important. It is usefull for website/app evolution prioritization.
It can be done either by drag and drop labels or putting the order number in front of each label.
Any chance of a wysiwyg editor? I have implemented one using tinymce and this binding handler.
Is there any chance you add this?
this is error #
node_modules/survey-react-bootstrap/dist/survey.react.bootstrap.js:4519
}(React.Component));
THANKS
matrixQuestion.value = {"rowValue1": "columnValue1", ...., "rowValueN": "columnValueN"}
This code doesn't work after the question is rendered already.
Thank you
On this page
http://surveyjs.org/examples/validators-event.html
the JS code references something called "computerType" but the survey does not contain such a question.
The default indent property value is 0. The available values are: {0, 1, 2, 3}. The default offset, margin-left, for 1 is 20px, 40px for 2 and 60px for 3. To change it, use survey.css.question.indent, default value is 20.
In survey.css there is:
.sv_window_title a, a:link, a:visited {
text-decoration: none;
font-size: 14px;
font-style: normal;
color: black; }
That hits too many "a"-tags, also outside of the survey markup. The correct styling probably is this:
.sv_window_title a {
text-decoration: none;
font-size: 14px;
font-style: normal;
color: black; }
.sv_window_title a:link {
text-decoration: none;
font-size: 14px;
font-style: normal;
color: black; }
.sv_window_title a:visited {
text-decoration: none;
font-size: 14px;
font-style: normal;
color: black; }
Prevents hidden question to be submitted.
Possible scenario
Q1. Do you have a car ? a. yes b. no
If yes Q2: What's the color of your car?
Now if no is selected then there's no meaning of Q2
Screenshot Of the Feature
Basic feature implemented for knockout
https://github.com/mirmdasif/surveyjs/tree/feature/dynamic-row-in-matrix-dropdwon
I have got a survey with a dropdown matrix question that has a lot of checkbox columns. Actually all columns are checkbox. Since the default editor is dropdown, all columns have cellType: "checkbox" attribute. It would be nice to have the cellType on the question/matrix level to change the default editor type.
The value of the rating question is exported as text in Excel.
I'm trying to embed a generated JSON survey in an existing website with the above error.
I have scaled back my example to the simplest possible config;
`
<script src="https://cdnjs.buttflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> <script src="js/survey.bootstrap.js"></script><div id= "mySurveyJSName" ></div>
<script>
var survey = new Survey.Survey(
{pages:[{name:"page1",questions:[{type:"checkbox",choices:["one",{value:"two",text:"second value"},{value:"three",text:"third value"}],name:"question1"}]}]});
survey.onComplete.add(function (s) {
alert("The results are:" + JSON.stringify(s.data));
});
survey.render("mySurveyJSName");
</script>
Pretty much as per the instructions on the "Embed Survey" tab in the visual editor, with the inclusion of some Bootstrap CSS (removal of which has no effect).
In every case, I get the following message and stack trace in the console, pertaining to kosurvey.ts
;
kosurvey.ts:73Uncaught TypeError: self.getProgress is not a function (anonymous function) @ kosurvey.ts:73 Pc @ knockout-min.js:51 Qc @ knockout-min.js:51 aa @ knockout-min.js:50 a.m.a.B @ knockout-min.js:49 SurveyBase.onBeforeCreating @ kosurvey.ts:73 SurveyModel @ survey.ts:83 SurveyBase @ kosurvey.ts:23 Survey @ koSurveybootstrap.ts:11 (anonymous function) @ surveytest2:16
I'm not too proficient with either JS or TS and have reached the end of my ideas!
{ type: "rating", name: "rateMe", rateValues: [ { value: "1", text: "A" }, "B","C","D" ]}
//This JSON is not parsed correctly. The rating question uses the default values [1, 2, 3, 4, 5]
Hi,
Could you please add Multiple statement feature to execute a single trigger, criteria could be 'n' numbers of statements for a single trigger.
for e,g;
if(Age > 24 And Gender == 'Male')
{
//visible trigger
}
Thanks for a wonderful survey engine.
Thanks,
Muhammad Faraz Khan
Rating control selections are not added to the survey result. This occurs using the default values (1 to 5), and when setting custom values.
If you make a Rating control 'Required' surveyjs will always identify it as unselected ("Please answer the question" alert appears).
Example survey:
var survey = new Survey.Survey(
{pages:[{name:"page1",questions:[{type:"rating",isRequired:true,name:"question1"}]}]});
By default the question title rendered as: "{no}. {require} {title}".
The default value of survey.questionTitleTemplate is empty string, the default template is used.
The template could be set to : "{no}) {title} ({require})", the example of tittle rendering:
"2) My Title (*)".
I cannot completely switch off the questions numbers. There is a dot that remains before the question title.
Optionally, add ability to use json object to define a property. For example:
Survey property: "showQuestionNumbers"
JsonObject.metaData.setPropertyValues("survey", "showQuestionNumbers", null, "on");
JsonObject.metaData.setPropertyChoices("survey", "showQuestionNumbers", ["on", "onPage", "off"]);
It can be define directly in the properties parameter as:
{name: "showQuestionNumbers", default: "on", choices: ["on", "onPage", "off"]}
It will make the code looks clear and speed-up the loading metadata.
I would like to use surveyjs to conduct tests of student knowledge. The problem is I want to separate out survey takers with greater knowledge that can answer the question with no extra help. Others may need a hint (or two) to be able to get started and then can make progress on their own. Still others may need several hints before they can do anything with a question. At a high level, the scoring we have to perform afterward will need to take the level of hinting required to get to a correct answer.
It's important that the survey model on the client does NOT contain the hints until they are asked for. It would be easy to bring up browser developer tools and see the additional hints in memory, thereby invalidating the meaning of the test because the taker had hints that were unaccounted for. The hard requirement is any hints must be dynamically added to the model on the client. In general a hint could change the question and the multiple choice answers, but to keep it simple we could probably limit it to just a more descriptive question and leave the answers the same.
It would be great if surveyjs supported this notion natively, with a user-defined callout like the validation code does now, but instead to ask the server for the hinted question title and call a surveyjs API to update the question title and hint level, and for the completed report to indicate the level of hint shown for each question. From looking at the examples and code it does not currently support this, so I'm looking for a workaround.
Is it possible to implement a parent React component that feeds the surveyjs component?
I don't see question responses being stored as state in the react components, so I presume this just lives in the DOM until advancing to the next page.
Would it be possible to add "customizable classes" to the generated tags?
For example, for a matrix style of question, I would like to add a "table-hover" class to the table tag.
Not seeing a way to do this effectively, without having to resort to using javascript (addClass to the DOM node).
Did something like $("div#surveyContainer table.table").addClass("table-striped surveyTable");
but it is disappearing when the page next button is clicked.
How to handle these kind of scenarios.
In some scenarios a column should have the value.
The question "no" (question index) by default starts from 1.
The default value of survey.questionStartIndex is empty string.
If survey.questionStartIndex = "100", the first question index will be 100.
If survey.questionStartIndex = "a", the first question index will be "a", the second question index - "b".
The typical example matrixdropdown has a few rows and columns.
Each has a select box with the same choices.
Now when one of the selectboxes is changed, all the selectboxes change to the same value.
Second issue: none of these values are kept so none of these can be stored.
Expected result: being able to set a different selection for each select box.
Hi first of all thanks for this awesome library. It's awesome and very promising. I convinced my team to use it production, good job.
In my use cases there is a scenario where I need a matrix or tabular question. And cells can not only be drop down's and radio but can also be text input, check boxes etc. I think it will be a handy feature for all.
Please add support for the file attachment capability during a survey.
I think, that upon attaching a file, it will encode as a Base64 string. The string would then be returned in the result object
Thanks
Plain copy/paste can cause encoding errors
UTF-8 seems not being supported by JSON5
Could you add a replace for accentuated chars like é->\u00e9 ? so that the problem is avoided once for all?
survey.setValue method doesn't check if the value is changed or not.
It should not call onValueChanged if value is not changed. You may create a stack overflow in react version.
It is false by default. If it sets to true, after all questions on page are completed and there is no errors - go to the next page or complete the survey.
Scroll to the first question on a page on page changing.
At the moment, the CSS class of all navigation buttons is equal. Would be really good if the next, prev and complete buttons could have different classes (e.g. "next" and "complete" in green, "prev" in grey).
Sample json working on survey builder broken in latest build
{
pages: [
{
name: "page1",
questions: [
{
type: "checkbox",
choices: [
"one",
{
value: "two",
text: "second value"
},
{
value: "three",
text: "third value"
}
],
name: "question1"
},
{
type: "text",
name: "question2",
visible: false
},
{
type: "text",
name: "question3",
visible: false
},
{
type: "text",
name: "question4",
visible: false
}
]
}
],
triggers: [
{
type: "visible",
operator: "contains",
value: "one",
name: "question1",
questions: [
"question2"
]
},
{
type: "visible",
operator: "contains",
value: "two",
name: "question1",
questions: [
"question3"
]
}
]
}
Here's the scenario.
-Q1
---Q2
--------Q3
Q1's answer triggers Q2. Q2's answer triggers Q3.
Now first user answer Q1 which makes Q2 visible. Then answer Q2 which makes question Q3 visible.
Now if user change answer of Q1 it will make Q2 invisible but as Q2's answer is not cleared Q3 will be visible. Which is kind of illegal state.
Q1
---------Q3
Here's the json to reproduce the scenario.
Steps:
Q1 = 1
Q2 = 1
Q3 = 1
now before submitting set
Q1 = 2
{
clearInvisibleValues: true,
pages: [
{
name: "page1",
questions: [
{
type: "radiogroup",
choices: [
"one",
{
value: "two",
text: "second value"
},
{
value: "three",
text: "third value"
}
],
name: "question1"
},
{
type: "radiogroup",
choices: [
"one",
{
value: "two",
text: "second value"
},
{
value: "three",
text: "third value"
}
],
indent: 1,
name: "question2",
visible: false
},
{
type: "radiogroup",
choices: [
"one",
{
value: "two",
text: "second value"
},
{
value: "three",
text: "third value"
}
],
indent: 2,
name: "question3",
visible: false
}
]
}
],
triggers: [
{
type: "visible",
operator: "equal",
value: "one",
name: "question1",
questions: [
"question2"
]
},
{
type: "visible",
operator: "equal",
value: "one",
name: "question2",
questions: [
"question3"
]
}
]
}
Hi dropdown and checkboxes in matrix question do not have other value property which seems a valid scenario.
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.