surveyjs example


<!DOCTYPE html>
<html>

<head>
    <title>Welcome to JQuery</title>
    <script src="https://unpkg.com/jquery"></script>
    
    <script src="https://surveyjs.azureedge.net/0.12.19/survey.jquery.js"></script>
    
    
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div id="surveyElement"></div>
    <div id="surveyResult"></div>
    <script src="./index.js"></script>
</body>

</html>


Survey.Survey.cssType = "bootstrap";
Survey.defaultBootstrapCss.navigationButton = "btn btn-green";

window.survey = new Survey.Model( { questions: [
     {name:"name", type:"text", title: "Please enter your name:", placeHolder:"Jon Snow", isRequired: true},
     {name:"birthdate", type:"text", inputType:"date", title: "Your birthdate:", isRequired: true},
     {name:"color", type:"text", inputType:"color", title: "Your favorite color:"},
     {name:"email", type:"text", inputType:"email", title: "Your e-mail:", placeHolder:"jon.snow@nightwatch.org", isRequired: true, validators: [{type:"email"}]}
]});
survey.onComplete.add(function(result) {
	document.querySelector('#surveyResult').innerHTML = "result: " + JSON.stringify(result.data);
});

//Example of adding new locale into the library.
var mycustomSurveyStrings = {
    pagePrevText: "Previous",
    pageNextText: "Next",
    completeText: "Submit",
    otherItemText: "Other (describe)",
    progressText: "Page {0} of {1}",
    emptySurvey: "There is no visible page or question in the survey.",
    completingSurvey: "Thank you for completing the survey!",
    loadingSurvey: "Survey is loading...",
    optionsCaption: "Choose...",
    requiredError: "Please answer the question.",
    requiredInAllRowsError: "Please answer questions in all rows.",
    numericError: "The value should be numeric.",
    textMinLength: "Please enter at least {0} symbols.",
    textMaxLength: "Please enter less than {0} symbols.",
    textMinMaxLength: "Please enter more than {0} and less than {1} symbols.",
    minRowCountError: "Please fill in at least {0} rows.",
    minSelectError: "Please select at least {0} variants.",
    maxSelectError: "Please select no more than {0} variants.",
    numericMinMax: "The '{0}' should be equal or more than {1} and equal or less than {2}",
    numericMin: "The '{0}' should be equal or more than {1}",
    numericMax: "The '{0}' should be equal or less than {1}",
    invalidEmail: "Please enter a valid e-mail address.",
    urlRequestError: "The request returned error '{0}'. {1}",
    urlGetChoicesError: "The request returned empty data or the 'path' property is incorrect",
    exceedMaxSize: "The file size should not exceed {0}.",
    otherRequiredError: "Please enter the other value.",
    uploadingFile: "Your file is uploading. Please wait several seconds and try again.",
    addRow: "Add row",
    removeRow: "Remove",
    choices_Item: "item",
    matrix_column: "Column",
    matrix_row: "Row",
    savingData: "The results are saving on the server...",
    savingDataError: "An error occurred and we could not save the results.",
    savingDataSuccess: "The results were saved successfully!",
    saveAgainButton: "Try again"
};
Survey.surveyLocalization.locales["my"] = mycustomSurveyStrings;
survey.locale = "my";

$("#surveyElement").Survey({model:survey});

var footer = document.querySelector(".panel-footer")
var cancelBtn = document.createElement("button");

cancelBtn.onclick = function() {
  if (confirm("Do you want to cancel the survey?")) {
    //you code here
    alert("Stop Survey!!!")
  }
}

cancelBtn.innerHTML = "Cancel";
cancelBtn.className = "btn btn-red"

footer.appendChild(cancelBtn);


.btn-green {
  background-color: #1ab394;
  color: #fff;
  border-radius: 3px;
}

.btn-red {
  background-color: red;
  color: #fff;
  border-radius: 3px;
}

.btn-red:hover, .btn-red:focus {
    background-color: #cc0000;
    color: #fff;
}

.btn-green:hover, .btn-green:focus {
    background-color: #18a689;
    color: #fff;
}

.panel-footer {
    text-align: right;
    background-color: #fff;
}