From cd9215db091237c135a67e080aa9eebe4097cc53 Mon Sep 17 00:00:00 2001 From: RomanTsukanov Date: Fri, 16 Aug 2024 18:53:23 +0400 Subject: [PATCH] Add vanilla JS examples --- dashboard-table-view/vanillajs/README.md | 3 + dashboard-table-view/vanillajs/index.html | 28 +++++++ dashboard-table-view/vanillajs/index.js | 54 +++++++++++++ get-started-analytics/vanillajs/README.md | 3 + get-started-analytics/vanillajs/index.html | 23 ++++++ get-started-analytics/vanillajs/index.js | 60 +++++++++++++++ get-started-creator/vanillajs/README.md | 3 + get-started-creator/vanillajs/index.html | 19 +++++ get-started-creator/vanillajs/index.js | 77 +++++++++++++++++++ .../vue3/src/components/SurveyCreator.vue | 41 +++++----- get-started-library/knockout/index.html | 2 +- get-started-library/vanillajs/README.md | 3 + get-started-library/vanillajs/index.html | 16 ++++ get-started-library/vanillajs/index.js | 50 ++++++++++++ get-started-pdf/vanillajs/README.md | 3 + get-started-pdf/vanillajs/index.html | 21 +++++ get-started-pdf/vanillajs/index.js | 49 ++++++++++++ 17 files changed, 434 insertions(+), 21 deletions(-) create mode 100644 dashboard-table-view/vanillajs/README.md create mode 100644 dashboard-table-view/vanillajs/index.html create mode 100644 dashboard-table-view/vanillajs/index.js create mode 100644 get-started-analytics/vanillajs/README.md create mode 100644 get-started-analytics/vanillajs/index.html create mode 100644 get-started-analytics/vanillajs/index.js create mode 100644 get-started-creator/vanillajs/README.md create mode 100644 get-started-creator/vanillajs/index.html create mode 100644 get-started-creator/vanillajs/index.js create mode 100644 get-started-library/vanillajs/README.md create mode 100644 get-started-library/vanillajs/index.html create mode 100644 get-started-library/vanillajs/index.js create mode 100644 get-started-pdf/vanillajs/README.md create mode 100644 get-started-pdf/vanillajs/index.html create mode 100644 get-started-pdf/vanillajs/index.js diff --git a/dashboard-table-view/vanillajs/README.md b/dashboard-table-view/vanillajs/README.md new file mode 100644 index 0000000..5e5dd1b --- /dev/null +++ b/dashboard-table-view/vanillajs/README.md @@ -0,0 +1,3 @@ +# Table View - SurveyJS Dashboard + +This example is used in the following help topic: [Table View for Survey Results in a JavaScript Application](https://surveyjs.io/dashboard/documentation/set-up-table-view/vanillajs). To run the example, open `index.html` in your browser. \ No newline at end of file diff --git a/dashboard-table-view/vanillajs/index.html b/dashboard-table-view/vanillajs/index.html new file mode 100644 index 0000000..4cdecc2 --- /dev/null +++ b/dashboard-table-view/vanillajs/index.html @@ -0,0 +1,28 @@ + + + + Table View: SurveyJS Dashboard + + + + + + + + + + + + + + + + + + + + + +
+ + diff --git a/dashboard-table-view/vanillajs/index.js b/dashboard-table-view/vanillajs/index.js new file mode 100644 index 0000000..15e69f9 --- /dev/null +++ b/dashboard-table-view/vanillajs/index.js @@ -0,0 +1,54 @@ +const surveyJson = { + elements: [{ + name: "satisfaction-score", + title: "How would you describe your experience with our product?", + type: "radiogroup", + choices: [ + { value: 5, text: "Fully satisfying" }, + { value: 4, text: "Generally satisfying" }, + { value: 3, text: "Neutral" }, + { value: 2, text: "Rather unsatisfying" }, + { value: 1, text: "Not satisfying at all" } + ], + isRequired: true + }, { + name: "nps-score", + title: "On a scale of zero to ten, how likely are you to recommend our product to a friend or colleague?", + type: "rating", + rateMin: 0, + rateMax: 10, + }], + showQuestionNumbers: "off", + completedHtml: "Thank you for your feedback!", +}; + +const survey = new Survey.Model(surveyJson); + +function randomIntFromInterval(min, max) { + return Math.floor(Math.random() * (max - min + 1) + min); +} +function generateData() { + const data = []; + for (let index = 0; index < 100; index++) { + const satisfactionScore = randomIntFromInterval(1, 5); + const npsScore = satisfactionScore > 3 ? randomIntFromInterval(7, 10) : randomIntFromInterval(1, 6); + data.push({ + "satisfaction-score": satisfactionScore, + "nps-score": npsScore + }); + } + return data; +} + +Survey.slk( + "OWQyYzczMzktMWI5NS00OTMxLWE0YjgtMDRhMGY0NzZhOWZhJmRvbWFpbnM6c3VydmV5anMuaW8sc3VydmV5anN0ZXN0LmF6dXJld2Vic2l0ZXMubmV0OzE9MjIyNC0wMi0wOCwyPTIyMjQtMDItMDgsND0yMjI0LTAyLTA4" +); + +const surveyDataTable = new SurveyAnalyticsTabulator.Tabulator( + survey, + generateData() +); + +document.addEventListener("DOMContentLoaded", function() { + surveyDataTable.render("surveyDataTable"); +}); \ No newline at end of file diff --git a/get-started-analytics/vanillajs/README.md b/get-started-analytics/vanillajs/README.md new file mode 100644 index 0000000..3750bab --- /dev/null +++ b/get-started-analytics/vanillajs/README.md @@ -0,0 +1,3 @@ +# Get Started with SurveyJS Dashboard + +This example is used in the following help topic: [Add SurveyJS Dashboard to a JavaScript Application](https://surveyjs.io/dashboard/documentation/get-started-vanillajs). To run the example, open `index.html` in your browser. \ No newline at end of file diff --git a/get-started-analytics/vanillajs/index.html b/get-started-analytics/vanillajs/index.html new file mode 100644 index 0000000..7b6047a --- /dev/null +++ b/get-started-analytics/vanillajs/index.html @@ -0,0 +1,23 @@ + + + + SurveyJS Dashboard + + + + + + + + + + + + + + + + +
+ + diff --git a/get-started-analytics/vanillajs/index.js b/get-started-analytics/vanillajs/index.js new file mode 100644 index 0000000..aebf919 --- /dev/null +++ b/get-started-analytics/vanillajs/index.js @@ -0,0 +1,60 @@ +const surveyJson = { + elements: [{ + name: "satisfaction-score", + title: "How would you describe your experience with our product?", + type: "radiogroup", + choices: [ + { value: 5, text: "Fully satisfying" }, + { value: 4, text: "Generally satisfying" }, + { value: 3, text: "Neutral" }, + { value: 2, text: "Rather unsatisfying" }, + { value: 1, text: "Not satisfying at all" } + ], + isRequired: true + }, { + name: "nps-score", + title: "On a scale of zero to ten, how likely are you to recommend our product to a friend or colleague?", + type: "rating", + rateMin: 0, + rateMax: 10, + }], + showQuestionNumbers: "off", + completedHtml: "Thank you for your feedback!", +}; + +const survey = new Survey.Model(surveyJson); + +const surveyResults = [{ + "satisfaction-score": 5, + "nps-score": 10 +}, { + "satisfaction-score": 5, + "nps-score": 9 +}, { + "satisfaction-score": 3, + "nps-score": 6 +}, { + "satisfaction-score": 3, + "nps-score": 6 +}, { + "satisfaction-score": 2, + "nps-score": 3 +}]; + +const vizPanelOptions = { + allowHideQuestions: false +} + +Survey.slk( + "OWQyYzczMzktMWI5NS00OTMxLWE0YjgtMDRhMGY0NzZhOWZhJmRvbWFpbnM6c3VydmV5anMuaW8sc3VydmV5anN0ZXN0LmF6dXJld2Vic2l0ZXMubmV0OzE9MjIyNC0wMi0wOCwyPTIyMjQtMDItMDgsND0yMjI0LTAyLTA4" +); + +const vizPanel = new SurveyAnalytics.VisualizationPanel( + survey.getAllQuestions(), + surveyResults, + vizPanelOptions +); + +document.addEventListener("DOMContentLoaded", function() { + vizPanel.render(document.getElementById("surveyVizPanel")); +}); \ No newline at end of file diff --git a/get-started-creator/vanillajs/README.md b/get-started-creator/vanillajs/README.md new file mode 100644 index 0000000..ec480e7 --- /dev/null +++ b/get-started-creator/vanillajs/README.md @@ -0,0 +1,3 @@ +# Get Started with Survey Creator / Form Builder + +This example is used in the following help topic: [Add Survey Creator / Form Builder to a JavaScript Application](https://surveyjs.io/survey-creator/documentation/get-started-vanillajs). To run the example, open `index.html` in your browser. \ No newline at end of file diff --git a/get-started-creator/vanillajs/index.html b/get-started-creator/vanillajs/index.html new file mode 100644 index 0000000..bc1efad --- /dev/null +++ b/get-started-creator/vanillajs/index.html @@ -0,0 +1,19 @@ + + + + Survey Creator / Form Builder + + + + + + + + + + + + +
+ + diff --git a/get-started-creator/vanillajs/index.js b/get-started-creator/vanillajs/index.js new file mode 100644 index 0000000..aada8a9 --- /dev/null +++ b/get-started-creator/vanillajs/index.js @@ -0,0 +1,77 @@ +const creatorOptions = { + showLogicTab: true, + isAutoSave: true +}; + +const defaultJson = { + pages: [{ + name: "Name", + elements: [{ + name: "FirstName", + title: "Enter your first name:", + type: "text" + }, { + name: "LastName", + title: "Enter your last name:", + type: "text" + }] + }] +}; + +const creator = new SurveyCreator.SurveyCreator(creatorOptions); +creator.text = window.localStorage.getItem("survey-json") || JSON.stringify(defaultJson); +creator.saveSurveyFunc = (saveNo, callback) => { + window.localStorage.setItem("survey-json", creator.text); + callback(saveNo, true); + // saveSurveyJson( + // "https://your-web-service.com/", + // creator.JSON, + // saveNo, + // callback + // ); +}; + +// creator.onUploadFile.add((_, options) => { +// const formData = new FormData(); +// options.files.forEach(file => { +// formData.append(file.name, file); +// }); +// fetch("https://example.com/uploadFiles", { +// method: "post", +// body: formData +// }).then(response => response.json()) +// .then(result => { +// options.callback( +// "success", +// // A link to the uploaded file +// "https://example.com/files?name=" + result[options.files[0].name] +// ); +// }) +// .catch(error => { +// options.callback('error'); +// }); +// }); + +document.addEventListener("DOMContentLoaded", function() { + creator.render("surveyCreator"); +}); + +// function saveSurveyJson(url, json, saveNo, callback) { +// fetch(url, { +// method: 'POST', +// headers: { +// 'Content-Type': 'application/json;charset=UTF-8' +// }, +// body: JSON.stringify(json) +// }) +// .then(response => { +// if (response.ok) { +// callback(saveNo, true); +// } else { +// callback(saveNo, false); +// } +// }) +// .catch(error => { +// callback(saveNo, false); +// }); +// } \ No newline at end of file diff --git a/get-started-creator/vue3/src/components/SurveyCreator.vue b/get-started-creator/vue3/src/components/SurveyCreator.vue index 0a65007..1d1c7bb 100644 --- a/get-started-creator/vue3/src/components/SurveyCreator.vue +++ b/get-started-creator/vue3/src/components/SurveyCreator.vue @@ -37,26 +37,27 @@ creator.saveSurveyFunc = (saveNo: number, callback: Function) => { // callback // ); }; -creator.onUploadFile.add((_, options) => { - const formData = new FormData(); - options.files.forEach((file: File) => { - formData.append(file.name, file); - }); - fetch("https://example.com/uploadFiles", { - method: "post", - body: formData - }).then(response => response.json()) - .then(result => { - options.callback( - "success", - // A link to the uploaded file - "https://example.com/files?name=" + result[options.files[0].name] - ); - }) - .catch(error => { - options.callback('error'); - }); -}); + +// creator.onUploadFile.add((_, options) => { +// const formData = new FormData(); +// options.files.forEach((file: File) => { +// formData.append(file.name, file); +// }); +// fetch("https://example.com/uploadFiles", { +// method: "post", +// body: formData +// }).then(response => response.json()) +// .then(result => { +// options.callback( +// "success", +// // A link to the uploaded file +// "https://example.com/files?name=" + result[options.files[0].name] +// ); +// }) +// .catch(error => { +// options.callback('error'); +// }); +// }); // function saveSurveyJson(url: string, json: object, saveNo: number, callback: Function) { // fetch(url, { diff --git a/get-started-library/knockout/index.html b/get-started-library/knockout/index.html index cb12c26..f409ed3 100644 --- a/get-started-library/knockout/index.html +++ b/get-started-library/knockout/index.html @@ -6,7 +6,7 @@ - + diff --git a/get-started-library/vanillajs/README.md b/get-started-library/vanillajs/README.md new file mode 100644 index 0000000..c0d0541 --- /dev/null +++ b/get-started-library/vanillajs/README.md @@ -0,0 +1,3 @@ +# Get Started with SurveyJS Form Library + +This example is used in the following help topic: [Add a Survey to a JavaScript Application](https://surveyjs.io/form-library/documentation/get-started-vanillajs). To run the example, open `index.html` in your browser. \ No newline at end of file diff --git a/get-started-library/vanillajs/index.html b/get-started-library/vanillajs/index.html new file mode 100644 index 0000000..9cdcebf --- /dev/null +++ b/get-started-library/vanillajs/index.html @@ -0,0 +1,16 @@ + + + + My First Survey + + + + + + + + + +
+ + diff --git a/get-started-library/vanillajs/index.js b/get-started-library/vanillajs/index.js new file mode 100644 index 0000000..bb2b40f --- /dev/null +++ b/get-started-library/vanillajs/index.js @@ -0,0 +1,50 @@ +// const SURVEY_ID = 1; + +const surveyJson = { + elements: [{ + name: "FirstName", + title: "Enter your first name:", + type: "text" + }, { + name: "LastName", + title: "Enter your last name:", + type: "text" + }] +}; + +const survey = new Survey.Model(surveyJson); + +function alertResults (sender) { + const results = JSON.stringify(sender.data); + alert(results); + // saveSurveyResults( + // "https://your-web-service.com/" + SURVEY_ID, + // sender.data + // ) +} + +survey.onComplete.add(alertResults); + +document.addEventListener("DOMContentLoaded", function() { + survey.render(document.getElementById("surveyContainer")); +}); + +// function saveSurveyResults(url, json) { +// fetch(url, { +// method: 'POST', +// headers: { +// 'Content-Type': 'application/json;charset=UTF-8' +// }, +// body: JSON.stringify(json) +// }) +// .then(response => { +// if (response.ok) { +// // Handle success +// } else { +// // Handle error +// } +// }) +// .catch(error => { +// // Handle error +// }); +// } \ No newline at end of file diff --git a/get-started-pdf/vanillajs/README.md b/get-started-pdf/vanillajs/README.md new file mode 100644 index 0000000..68bf307 --- /dev/null +++ b/get-started-pdf/vanillajs/README.md @@ -0,0 +1,3 @@ +# Export Survey to PDF + +This example is used in the following help topic: [Export Survey to PDF in a JavaScript Application](https://surveyjs.io/pdf-generator/documentation/get-started-vanillajs). To run the example, open `index.html` in your browser. \ No newline at end of file diff --git a/get-started-pdf/vanillajs/index.html b/get-started-pdf/vanillajs/index.html new file mode 100644 index 0000000..0c42c6f --- /dev/null +++ b/get-started-pdf/vanillajs/index.html @@ -0,0 +1,21 @@ + + + + Export Survey to PDF - SurveyJS + + + + + + + + + + + + + + +
+ + diff --git a/get-started-pdf/vanillajs/index.js b/get-started-pdf/vanillajs/index.js new file mode 100644 index 0000000..ce18b8d --- /dev/null +++ b/get-started-pdf/vanillajs/index.js @@ -0,0 +1,49 @@ +const surveyJson = { + elements: [{ + name: "satisfaction-score", + title: "How would you describe your experience with our product?", + type: "radiogroup", + choices: [ + { value: 5, text: "Fully satisfying" }, + { value: 4, text: "Generally satisfying" }, + { value: 3, text: "Neutral" }, + { value: 2, text: "Rather unsatisfying" }, + { value: 1, text: "Not satisfying at all" } + ], + isRequired: true + }, { + name: "how-can-we-improve", + title: "In your opinion, how could we improve our product?", + type: "comment" + }, { + name: "nps-score", + title: "On a scale of zero to ten, how likely are you to recommend our product to a friend or colleague?", + type: "rating", + rateMin: 0, + rateMax: 10, + }], + showQuestionNumbers: "off", + completedHtml: "Thank you for your feedback!", +}; + +const survey = new Survey.Model(surveyJson); + +const pdfDocOptions = { + fontSize: 12 +}; + +const savePdf = function (surveyData) { + const surveyPdf = new SurveyPDF.SurveyPDF(surveyJson, pdfDocOptions); + surveyPdf.data = surveyData; + surveyPdf.save(); +}; + +survey.addNavigationItem({ + id: "pdf-export", + title: "Save as PDF", + action: () => savePdf(survey.data) +}); + +document.addEventListener("DOMContentLoaded", function() { + survey.render(document.getElementById("surveyContainer")); +}); \ No newline at end of file