Add vanilla JS examples

surveyjs · Aug 16, 2024 · cd9215d · cd9215d
1 parent dda8cbd
commit cd9215d
Show file tree

Hide file tree

Showing 17 changed files with 434 additions and 21 deletions.
diff --git a/dashboard-table-view/vanillajs/README.md 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.
diff --git a/dashboard-table-view/vanillajs/index.html b/dashboard-table-view/vanillajs/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Table View: SurveyJS Dashboard</title>
+    <meta charset="utf-8">
+    <script type="text/javascript" src="https://unpkg.com/survey-core/survey.core.min.js"></script>
+
+    <!-- jsPDF for export to PDF -->
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.0.10/jspdf.plugin.autotable.min.js"></script>
+
+    <!-- SheetJS for export to Excel -->
+    <script type="text/javascript" src="https://oss.sheetjs.com/sheetjs/xlsx.full.min.js"></script>
+
+    <!-- Tabulator -->
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.7.2/css/tabulator.min.css" rel="stylesheet">
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.7.2/js/tabulator.min.js"></script>
+
+    <!-- SurveyJS plugin for Tabulator -->
+    <link href="https://unpkg.com/survey-analytics/survey.analytics.tabulator.min.css" rel="stylesheet">
+    <script src="https://unpkg.com/survey-analytics/survey.analytics.tabulator.min.js"></script>
+
+    <script type="text/javascript" src="index.js"></script>
+</head>
+<body>
+    <div id="surveyDataTable"></div>
+</body>
+</html>
diff --git a/dashboard-table-view/vanillajs/index.js 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");
+});
diff --git a/get-started-analytics/vanillajs/README.md 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.
diff --git a/get-started-analytics/vanillajs/index.html b/get-started-analytics/vanillajs/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>SurveyJS Dashboard</title>
+    <meta charset="utf-8">
+    <script type="text/javascript" src="https://unpkg.com/survey-core/survey.core.min.js"></script>
+    <!-- Uncomment the following lines if you also display the survey on the page -->
+    <!-- <link href="https://unpkg.com/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet"> -->
+    <!-- <script type="text/javascript" src="https://unpkg.com/survey-js-ui/survey-js-ui.min.js"></script> -->
+
+    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+    <!-- Uncomment the following line if you use the Text, Multiple Text, or Comment question types in your surveys -->
+    <!-- <script src="https://unpkg.com/wordcloud/src/wordcloud2.js"></script> -->
+
+    <link href="https://unpkg.com/survey-analytics/survey.analytics.min.css" rel="stylesheet">
+    <script src="https://unpkg.com/survey-analytics/survey.analytics.min.js"></script>
+
+    <script type="text/javascript" src="index.js"></script>
+</head>
+<body>
+    <div id="surveyVizPanel"></div>
+</body>
+</html>
diff --git a/get-started-analytics/vanillajs/index.js 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"));
+});
diff --git a/get-started-creator/vanillajs/README.md 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.
diff --git a/get-started-creator/vanillajs/index.html b/get-started-creator/vanillajs/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Survey Creator / Form Builder</title>
+    <meta charset="utf-8">
+    <link  href="https://unpkg.com/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet">
+    <script src="https://unpkg.com/survey-core/survey.core.min.js"></script>
+    <script src="https://unpkg.com/survey-js-ui/survey-js-ui.min.js"></script>
+
+    <link  href="https://unpkg.com/survey-creator-core/survey-creator-core.min.css" type="text/css" rel="stylesheet">
+    <script src="https://unpkg.com/survey-creator-core/survey-creator-core.min.js"></script>
+    <script src="https://unpkg.com/survey-creator-js/survey-creator-js.min.js"></script>
+
+    <script type="text/javascript" src="index.js"></script>
+</head>
+<body style="margin: 0;">
+    <div id="surveyCreator" style="height: 100vh;"></div>
+</body>
+</html>
diff --git a/get-started-creator/vanillajs/index.js 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);
+//   });
+// }
diff --git 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
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <script type="text/javascript" src="https://unpkg.com/knockout/build/output/knockout-latest.js"></script>
 
-    <link href="https://unpkg.com/survey-jquery/defaultV2.min.css" type="text/css" rel="stylesheet">
+    <link href="https://unpkg.com/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet">
 
     <script type="text/javascript" src="https://unpkg.com/survey-core/survey.core.min.js"></script>
     <script type="text/javascript" src="https://unpkg.com/survey-knockout-ui/survey-knockout-ui.min.js"></script>

diff --git a/get-started-library/vanillajs/README.md 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.
diff --git a/get-started-library/vanillajs/index.html b/get-started-library/vanillajs/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>My First Survey</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="https://unpkg.com/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet">
+
+    <script type="text/javascript" src="https://unpkg.com/survey-core/survey.core.min.js"></script>
+    <script type="text/javascript" src="https://unpkg.com/survey-js-ui/survey-js-ui.min.js"></script>
+    <script type="text/javascript" src="index.js"></script>
+</head>
+<body>
+    <div id="surveyContainer"></div>
+</body>
+</html>