<!DOCTYPE html>
<html>
<head>
<title>Welcome to JQuery</title>
<script src="https://unpkg.com/jquery"></script>
<script src="https://unpkg.com/survey-jquery"></script>
<link rel="stylesheet" href="https://getbootstrap.com/dist/css/bootstrap.css">
<link rel="stylesheet" href="./index.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css" type="text/css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
</head>
<body>
<div id="surveyElement"></div>
<div id="surveyResult"></div>
<script src="./index.js"></script>
</body>
</html>
var json = {
"pages": [
{
"elements": [
{
"type": "matrixdynamic",
"addRowText": "Add Subject",
"cellType": "radiogroup",
"choices": [
{
"value": 1,
"text": "Yes"
},
{
"value": 0,
"text": "Sometimes"
},
{
"value": -1,
"text": "No"
}
],
"columnColCount": 1,
"columnMinWidth": "120px",
"columns": [
{
"name": "subject",
"title": "Select a subject",
"choices": [
"English: American Literature",
"English: British and World Literature",
"Math: Consumer Math",
"Math: Practical Math",
"Math: Developmental Algebra",
"Math: Continuing Algebra",
"Math: Pre-Algebra",
"Math: Algebra",
"Math: Geometry",
"Math: Integrated Mathematics",
"Science: Physical Science",
"Science: Earth Science",
"Science: Biology",
"Science: Chemistry",
"History: World History",
"History: Modern World Studies",
"History: U.S. History",
"History: Modern U.S. History",
"Social Sciences: U.S. Government and Politics",
"Social Sciences: U.S. and Global Economics",
"World Languages: Spanish",
"World Languages: French",
"World Languages: German",
"World Languages: Latin",
"World Languages: Chinese",
"World Languages: Japanese"
],
"cellType": "dropdown",
"minWidth": "300px"
},
{
"name": "date",
"title": "Your favorite date 1:",
"cellType": "text",
"inputType": "date"
},
{
"name": "date1",
"title": "Your favorite date 2:",
"cellType": "text",
"inputType": "date"
},
{
"name": "num",
"title": "Number",
"cellType": "text",
"inputType": "number"
},
{
"name": "interesting",
"title": "Makes class interesting"
},
{
"name": "effective",
"title": "Uses class time effectively"
},
{
"name": "cooperation",
"title": "Encourages cooperation and participation"
},
{
"name": "improvements",
"title": "What do you wish this teacher would do differently that would improve this class?",
"cellType": "comment",
"minWidth": "250px"
}
],
"horizontalScroll": true,
"name": "teachersRate",
"rowCount": 0,
"title": "Please rate your teachers"
},
{
"type": "comment",
"name": "suggestions",
"title": "What would make you more satisfied with the Product?"
}
]
},
{
"elements": [
{
"type": "matrixdynamic",
"choices": [
1,
2,
3,
4,
5
],
"columns": [
{
"name": "Column 1"
},
{
"name": "Column 2"
},
{
"name": "Column 3"
}
],
"name": "question1"
}
],
"name": "page1"
}
]
};
Survey.defaultBootstrapCss.navigationButton = "btn btn-primary";
Survey.Survey.cssType = "bootstrap";
Survey.JsonObject.metaData.addProperty("matrixdropdowncolumn", {
name: "renderAs",
default: "default",
choices: ["default", "select2tagbox"]
});
var widget = {
name: "datepicker",
htmlTemplate: "<input class='widget-datepicker' type='text' style='width: 100%;'>",
isFit : function(question) { return question.getType() === 'text' && question.inputType === 'date'; },
afterRender: function(question, el) {
var widget = $(el).find('.widget-datepicker').datepicker({dateFormat: question.dateFormat});
widget.on("change", function (e) {
question.value = $(this).val();
});
question.valueChangedCallback = function() {
widget.datepicker('setDate', new Date(question.value));
}
widget.datepicker('setDate', new Date(question.value || Date.now));
}
}
Survey.CustomWidgetCollection.Instance.addCustomWidget(widget);
var widget1 = {
name: "select2tagbox",
htmlTemplate: "<select multiple='multiple' style='width: 100%;'></select>",
//isFit : function(question) { return question.name === 'subject'; },
isFit : function(question) { return question["renderAs"] === 'select2tagbox'; },
afterRender: function(question, el) {
var $el = $(el).find("select");
var widget = $el.select2({
tags: "true",
theme: "classic"
});
$el.on('select2:unselect', function (e) {
var index = (question.value || []).indexOf(e.params.data.id);
if(index !== -1) {
var val = question.value;
val.splice(index, 1);
question.value = val;
}
});
question.choicesChangedCallback = function() {
$el.select2({tags: "true", data: question.visibleChoices.map(function(choice) { return { id: choice.value, text: choice.text }; })});
}
$el.on('select2:select', function (e) {
question.value = (question.value || []).concat(e.params.data.id);
});
var updateHandler = function() {
$el.val(question.value).trigger("change");
};
question.valueChangedCallback = updateHandler;
question.choicesChangedCallback();
updateHandler();
}
,
willUnmount: function(question, el) {
var $select = $(el).find("select").select2();
$select.each(function(i,item){
$(item).select2("destroy");
});
}
}
Survey.CustomWidgetCollection.Instance.addCustomWidget(widget1);
var model = new Survey.Model(json);
window.survey = model;
survey.onComplete.add(function(result) {
document.querySelector('#surveyResult').innerHTML = "result: " + JSON.stringify(result.data);
});
window.survey.onMatrixCellCreated.add(function(model, options) {
if(options.column.cellType === 'dropdown' ) {
options.cellQuestion.renderAs = options.column.renderAs ;
}
});
var data = {"teachersRate":[{"subject":"Math: Pre-Algebra","date":null,"date1":null,"num":null,"interesting":null,"effective":null,"cooperation":null,"improvements":null},{"subject":"Math: Pre-Algebra","date":null,"date1":null,"num":null,"interesting":null,"effective":null,"cooperation":null,"improvements":null}],"suggestions":"frghfghfghfg","question1":[{"Column 1":"3","Column 2":null,"Column 3":"3"},{"Column 1":null,"Column 2":"2","Column 3":null}]};
//var data = {};
$("#surveyElement").Survey({
model:model,
data:data
});
#surveyElement {
-background-image: url(http://surveyjs.org/images/promo.png);
-background-color: lightblue;
}