625 lines
24 KiB
JavaScript
625 lines
24 KiB
JavaScript
|
|
|
|
// In modular applications:
|
|
// import { Model } from "survey-core";
|
|
// import { ContrastDark } from "survey-core/themes/contrast-dark";
|
|
// import { ContrastLight } from "survey-core/themes/contrast-light";
|
|
|
|
function SurveyComponent(survey) {
|
|
// const survey = new Model(json);
|
|
// const survey = new Survey.Model(surveyJson);
|
|
survey.onComplete.add((sender, options) => {
|
|
console.log(JSON.stringify(sender.data, null, 3));
|
|
});
|
|
survey.onUploadFiles.add((_, options) => {
|
|
const formData = new FormData();
|
|
options.files.forEach((file) => {
|
|
formData.append(file.name, file);
|
|
});
|
|
|
|
fetch("https://api.surveyjs.io/private/Surveys/uploadTempFiles", {
|
|
method: "POST",
|
|
body: formData
|
|
})
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
options.callback(
|
|
options.files.map((file) => {
|
|
return {
|
|
file: file,
|
|
content: "https://api.surveyjs.io/private/Surveys/getTempFile?name=" + data[file.name]
|
|
};
|
|
})
|
|
);
|
|
})
|
|
.catch((error) => {
|
|
console.error("Error: ", error);
|
|
options.callback([], [ 'An error occurred during file upload.' ]);
|
|
});
|
|
});
|
|
|
|
async function deleteFile(fileURL, options) {
|
|
try {
|
|
const name = fileURL.split("=")[1];
|
|
const apiUrl = `https://api.surveyjs.io/private/Surveys/deleteTempFile?name=${name}`;
|
|
const response = await fetch(apiUrl, {
|
|
method: "DELETE"
|
|
});
|
|
|
|
if (response.status === 200) {
|
|
console.log(`File ${name} was deleted successfully`);
|
|
options.callback("success");
|
|
} else {
|
|
console.error(`Failed to delete file: ${name}`);
|
|
options.callback("error");
|
|
}
|
|
} catch (error) {
|
|
console.error("Error while deleting file: ", error);
|
|
options.callback("error");
|
|
}
|
|
}
|
|
|
|
survey.onClearFiles.add(async (_, options) => {
|
|
if (!options.value || options.value.length === 0)
|
|
return options.callback("success");
|
|
if (!options.fileName && !!options.value) {
|
|
for (const item of options.value) {
|
|
await deleteFile(item.content, options);
|
|
}
|
|
} else {
|
|
const fileToRemove = options.value.find(
|
|
(item) => item.name === options.fileName
|
|
);
|
|
if (fileToRemove) {
|
|
await deleteFile(fileToRemove.content, options);
|
|
} else {
|
|
console.error(`File with name ${options.fileName} is not found`);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
function getStyle1(){
|
|
return {
|
|
"backgroundImage": "",
|
|
"backgroundImageFit": "cover",
|
|
"backgroundImageAttachment": "scroll",
|
|
"backgroundOpacity": 1,
|
|
"themeName": "default",
|
|
"isPanelless": true,
|
|
"colorPalette": "light",
|
|
"cssVariables": {
|
|
"--sjs-general-backcolor": "rgba(255, 255, 255, 1)",
|
|
"--sjs-general-backcolor-dark": "rgba(248, 248, 248, 1)",
|
|
"--sjs-general-backcolor-dim": "rgba(255, 255, 255, 1)",
|
|
"--sjs-general-backcolor-dim-light": "rgba(249, 249, 249, 1)",
|
|
"--sjs-general-backcolor-dim-dark": "rgba(243, 243, 243, 1)",
|
|
"--sjs-general-forecolor": "rgba(0, 0, 0, 0.91)",
|
|
"--sjs-general-forecolor-light": "rgba(0, 0, 0, 0.45)",
|
|
"--sjs-general-dim-forecolor": "rgba(0, 0, 0, 0.91)",
|
|
"--sjs-general-dim-forecolor-light": "rgba(0, 0, 0, 0.45)",
|
|
"--sjs-primary-backcolor": "rgba(0, 176, 82, 1)",
|
|
"--sjs-primary-backcolor-light": "rgba(0, 176, 82, 0.1)",
|
|
"--sjs-primary-backcolor-dark": "rgba(0, 161, 75, 1)",
|
|
"--sjs-primary-forecolor": "rgba(255, 255, 255, 1)",
|
|
"--sjs-primary-forecolor-light": "rgba(255, 255, 255, 0.25)",
|
|
"--sjs-base-unit": "8px",
|
|
"--sjs-corner-radius": "4px",
|
|
"--sjs-secondary-backcolor": "rgba(255, 152, 20, 1)",
|
|
"--sjs-secondary-backcolor-light": "rgba(255, 152, 20, 0.1)",
|
|
"--sjs-secondary-backcolor-semi-light": "rgba(255, 152, 20, 0.25)",
|
|
"--sjs-secondary-forecolor": "rgba(255, 255, 255, 1)",
|
|
"--sjs-secondary-forecolor-light": "rgba(255, 255, 255, 0.25)",
|
|
"--sjs-shadow-small": "0px 1px 2px 0px rgba(0, 0, 0, 0.15)",
|
|
"--sjs-shadow-small-reset": "0px 0px 0px 0px rgba(0, 0, 0, 0.15)",
|
|
"--sjs-shadow-medium": "0px 2px 6px 0px rgba(0, 0, 0, 0.1)",
|
|
"--sjs-shadow-large": "0px 8px 16px 0px rgba(0, 0, 0, 0.1)",
|
|
"--sjs-shadow-inner": "inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15)",
|
|
"--sjs-shadow-inner-reset": "inset 0px 0px 0px 0px rgba(0, 0, 0, 0.15)",
|
|
"--sjs-border-light": "rgba(0, 0, 0, 0.09)",
|
|
"--sjs-border-default": "rgba(0, 0, 0, 0.16)",
|
|
"--sjs-border-inside": "rgba(0, 0, 0, 0.16)",
|
|
"--sjs-special-red": "rgba(229, 10, 62, 1)",
|
|
"--sjs-special-red-light": "rgba(229, 10, 62, 0.1)",
|
|
"--sjs-special-red-forecolor": "rgba(255, 255, 255, 1)",
|
|
"--sjs-special-green": "rgba(25, 179, 148, 1)",
|
|
"--sjs-special-green-light": "rgba(25, 179, 148, 0.1)",
|
|
"--sjs-special-green-forecolor": "rgba(255, 255, 255, 1)",
|
|
"--sjs-special-blue": "rgba(67, 127, 217, 1)",
|
|
"--sjs-special-blue-light": "rgba(67, 127, 217, 0.1)",
|
|
"--sjs-special-blue-forecolor": "rgba(255, 255, 255, 1)",
|
|
"--sjs-special-yellow": "rgba(255, 152, 20, 1)",
|
|
"--sjs-special-yellow-light": "rgba(255, 152, 20, 0.1)",
|
|
"--sjs-special-yellow-forecolor": "rgba(255, 255, 255, 1)",
|
|
"--sjs-article-font-xx-large-textDecoration": "none",
|
|
"--sjs-article-font-xx-large-fontWeight": "700",
|
|
"--sjs-article-font-xx-large-fontStyle": "normal",
|
|
"--sjs-article-font-xx-large-fontStretch": "normal",
|
|
"--sjs-article-font-xx-large-letterSpacing": "0",
|
|
"--sjs-article-font-xx-large-lineHeight": "64px",
|
|
"--sjs-article-font-xx-large-paragraphIndent": "0px",
|
|
"--sjs-article-font-xx-large-textCase": "none",
|
|
"--sjs-article-font-x-large-textDecoration": "none",
|
|
"--sjs-article-font-x-large-fontWeight": "700",
|
|
"--sjs-article-font-x-large-fontStyle": "normal",
|
|
"--sjs-article-font-x-large-fontStretch": "normal",
|
|
"--sjs-article-font-x-large-letterSpacing": "0",
|
|
"--sjs-article-font-x-large-lineHeight": "56px",
|
|
"--sjs-article-font-x-large-paragraphIndent": "0px",
|
|
"--sjs-article-font-x-large-textCase": "none",
|
|
"--sjs-article-font-large-textDecoration": "none",
|
|
"--sjs-article-font-large-fontWeight": "700",
|
|
"--sjs-article-font-large-fontStyle": "normal",
|
|
"--sjs-article-font-large-fontStretch": "normal",
|
|
"--sjs-article-font-large-letterSpacing": "0",
|
|
"--sjs-article-font-large-lineHeight": "40px",
|
|
"--sjs-article-font-large-paragraphIndent": "0px",
|
|
"--sjs-article-font-large-textCase": "none",
|
|
"--sjs-article-font-medium-textDecoration": "none",
|
|
"--sjs-article-font-medium-fontWeight": "700",
|
|
"--sjs-article-font-medium-fontStyle": "normal",
|
|
"--sjs-article-font-medium-fontStretch": "normal",
|
|
"--sjs-article-font-medium-letterSpacing": "0",
|
|
"--sjs-article-font-medium-lineHeight": "32px",
|
|
"--sjs-article-font-medium-paragraphIndent": "0px",
|
|
"--sjs-article-font-medium-textCase": "none",
|
|
"--sjs-article-font-default-textDecoration": "none",
|
|
"--sjs-article-font-default-fontWeight": "400",
|
|
"--sjs-article-font-default-fontStyle": "normal",
|
|
"--sjs-article-font-default-fontStretch": "normal",
|
|
"--sjs-article-font-default-letterSpacing": "0",
|
|
"--sjs-article-font-default-lineHeight": "28px",
|
|
"--sjs-article-font-default-paragraphIndent": "0px",
|
|
"--sjs-article-font-default-textCase": "none"
|
|
}
|
|
}
|
|
}
|
|
|
|
function _constructSurvey(surveyJson){
|
|
const survey = new Survey.Model(surveyJson);
|
|
|
|
function displayResults (sender) {
|
|
const results = JSON.stringify(sender.data, null, 4);
|
|
document.querySelector("#surveyResults").textContent = results;
|
|
document.querySelector("#resultsContainer").style.display = "block"
|
|
}
|
|
|
|
survey.onComplete.add(displayResults);
|
|
|
|
$(function() {
|
|
$("#surveyContainer").Survey({ model: survey });
|
|
});
|
|
|
|
}
|
|
|
|
function MultiForm(){
|
|
const surveyJson = {
|
|
triggers: [
|
|
{
|
|
type: "complete",
|
|
expression: "{gave_birth_before} = 3"
|
|
},
|
|
{
|
|
type: "complete",
|
|
expression: "{documented} = 4"
|
|
},
|
|
{
|
|
type: "complete",
|
|
expression: "{age} = 3"
|
|
},
|
|
{
|
|
type: "complete",
|
|
expression: "{age} = 2"
|
|
}
|
|
],
|
|
completedHtmlOnCondition: [
|
|
{
|
|
expression: "{gave_birth_before} = 3",
|
|
html:"Feel free to check out our Resource Directory at <a href='/pages/resources'>Resource Directory</a> for a list of other local agencies that may be able to help! If you have any questions, feel free to give us a call at 832-987-2076)."
|
|
},
|
|
{
|
|
expression: "{documented} = 4",
|
|
html:"Feel free to check out our Resource Directory at <a href='/pages/resources'>Resource Directory</a> for a list of other local agencies that may be able to help! If you have any questions, feel free to give us a call at 832-987-2076)."
|
|
},
|
|
{
|
|
expression: "{age} = 3",
|
|
html:"Feel free to check out our Resource Directory at <a href='/pages/resources'>Resource Directory</a> for a list of other local agencies that may be able to help! If you have any questions, feel free to give us a call at 832-987-2076)."
|
|
},
|
|
{
|
|
expression: "{age} = 2",
|
|
html:"Feel free to check out our Resource Directory at <a href='/pages/resources'>Resource Directory</a> for a list of other local agencies that may be able to help! If you have any questions, feel free to give us a call at 832-987-2076)."
|
|
}
|
|
],
|
|
pages: [
|
|
{
|
|
elements: [{
|
|
type: "html",
|
|
html: "<h4>Press start when your ready to begin application.</h4>"
|
|
}]
|
|
},
|
|
|
|
// page1
|
|
{
|
|
"name": "page3",
|
|
elements: [
|
|
{
|
|
name: "age",
|
|
title: "What is your age?",
|
|
type: "radiogroup",
|
|
choices: [
|
|
{ value: 5, text: "13-17" },
|
|
{ value: 4, text: "18-20" },
|
|
{ value: 3, text: "I'm 21 or older" },
|
|
{ value: 2, text: "I'm under the age of 13" }
|
|
],
|
|
isRequired: true
|
|
}
|
|
]
|
|
},
|
|
|
|
// page2
|
|
{
|
|
"name": "page2",
|
|
elements: [
|
|
{
|
|
name: "gave_birth_before",
|
|
title: "I gave birth to my first child BEFORE I turned 20?",
|
|
type: "radiogroup",
|
|
choices: [
|
|
{ value: 5, text: "Yes, this is correct" },
|
|
{ value: 4, text: "No, I was 20 or older when my first child was born" },
|
|
{ value: 3, text: "I'm currently pregnant with my first child" }
|
|
],
|
|
isRequired: true
|
|
}
|
|
]
|
|
},
|
|
|
|
// page3
|
|
{
|
|
"name": "page3",
|
|
elements: [
|
|
{
|
|
name: "documented",
|
|
title: "I am a documented US Citizen or have a lawful status",
|
|
type: "radiogroup",
|
|
choices: [
|
|
{ value: 5, text: "Yes" },
|
|
{ value: 4, text: "No" },
|
|
{ value: 3, text: "I'm not sure" }
|
|
],
|
|
isRequired: true
|
|
}
|
|
]
|
|
},
|
|
|
|
// page4
|
|
{
|
|
|
|
title: "Cradle2Career - Youth Parent intake form",
|
|
name: "page4",
|
|
elements: [
|
|
|
|
// fullname
|
|
{
|
|
name: "fullname",
|
|
title: "What is your first and last name?",
|
|
type: "text",
|
|
isRequired: true
|
|
},
|
|
|
|
// email
|
|
{
|
|
name: "email",
|
|
title: "Email Address",
|
|
type: "text",
|
|
isRequired: true
|
|
},
|
|
|
|
// phone_number
|
|
{
|
|
name: "phone_number",
|
|
title: "What is your phone number?",
|
|
type: "text",
|
|
isRequired: true
|
|
},
|
|
|
|
// children_count
|
|
{
|
|
name: "children_count",
|
|
title: "How many children do you have?",
|
|
type: "radiogroup",
|
|
choices: [
|
|
{ value: 4, text: "1" },
|
|
{ value: 3, text: "2" },
|
|
{ value: 2, text: "3" },
|
|
{ value: 1, text: "Currently pregnant" }
|
|
],
|
|
isRequired: true
|
|
},
|
|
|
|
// gender
|
|
{
|
|
name: "gender",
|
|
title: "What is the sex of your child/children?",
|
|
type: "radiogroup",
|
|
choices: [
|
|
{ value: 3, text: "Boy" },
|
|
{ value: 2, text: "Girl" },
|
|
{ value: 1, text: "Unknown" }
|
|
],
|
|
isRequired: true
|
|
},
|
|
|
|
//hear_about
|
|
{
|
|
name: "hear_about",
|
|
title: "How did you hear about Cradle2Career?",
|
|
type: "radiogroup",
|
|
showOtherItem: true,
|
|
choices: [
|
|
{ value: 7, text: "TV" },
|
|
{ value: 6, text: "Google" },
|
|
{ value: 5, text: "Instagram" },
|
|
{ value: 4, text: "X (Twitter)" },
|
|
{ value: 3, text: "Facebook" },
|
|
{ value: 2, text: "Friend/Family" }
|
|
],
|
|
isRequired: true
|
|
},
|
|
|
|
// file
|
|
{
|
|
"type": "file",
|
|
"title": "You can upload any additional files here.",
|
|
"name": "files",
|
|
"storeDataAsText": false,
|
|
"waitForUpload": true,
|
|
"allowMultiple": true,
|
|
"maxSize": 102400,
|
|
"hideNumber": true
|
|
},
|
|
|
|
// confirm_consent
|
|
{
|
|
"type": "boolean",
|
|
"name": "confirm_consent",
|
|
"title": "I understand if younger than 13 need parent or legal guardian consent.",
|
|
"defaultValue": "false",
|
|
"renderAs": "checkbox",
|
|
"validators": [
|
|
{
|
|
"type": "expression",
|
|
"text": "Please confirm consent",
|
|
"expression": "{confirm_consent} = true"
|
|
}
|
|
],
|
|
"titleLocation": "left",
|
|
"label": "",
|
|
"showTitle": true
|
|
}
|
|
|
|
]
|
|
}
|
|
],
|
|
showQuestionNumbers: "off",
|
|
pageNextText: "Next",
|
|
completeText: "Submit",
|
|
showPrevButton: true,
|
|
firstPageIsStarted: true,
|
|
startSurveyText: "Start",
|
|
completedHtml: "Thank you for your feedback!",
|
|
showPreviewBeforeComplete: "showAnsweredQuestions",
|
|
|
|
showProgressBar: "top",
|
|
completedHtml: "Thank you for your submission. Someone from our staff will be in touch with you soon!",
|
|
|
|
};
|
|
|
|
_constructSurvey(surveyJson);
|
|
|
|
}
|
|
function MultiForm1(){
|
|
const surveyJson = {
|
|
pages: [{
|
|
elements: [{
|
|
type: "html",
|
|
html: "<h4>In this survey, we will ask you a couple questions about your impressions of our product.</h4>"
|
|
}]
|
|
}, {
|
|
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
|
|
}]
|
|
}, {
|
|
elements: [{
|
|
name: "what-would-make-you-more-satisfied",
|
|
title: "What can we do to make your experience more satisfying?",
|
|
type: "comment",
|
|
visibleIf: "{satisfaction-score} = 4"
|
|
}, {
|
|
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,
|
|
}],
|
|
visibleIf: "{satisfaction-score} >= 4"
|
|
}, {
|
|
elements: [{
|
|
name: "how-can-we-improve",
|
|
title: "In your opinion, how could we improve our product?",
|
|
type: "comment"
|
|
}],
|
|
visibleIf: "{satisfaction-score} = 3"
|
|
}, {
|
|
elements: [{
|
|
name: "disappointing-experience",
|
|
title: "Please let us know why you had such a disappointing experience with our product",
|
|
type: "comment"
|
|
}],
|
|
visibleIf: "{satisfaction-score} =< 2"
|
|
}],
|
|
showQuestionNumbers: "off",
|
|
pageNextText: "Forward",
|
|
completeText: "Submit",
|
|
showPrevButton: false,
|
|
firstPageIsStarted: true,
|
|
startSurveyText: "Press start when your ready to begin application",
|
|
completedHtml: "Thank you for your feedback!",
|
|
showPreviewBeforeComplete: "showAnsweredQuestions"
|
|
};
|
|
|
|
const survey = new Survey.Model(surveyJson);
|
|
|
|
function displayResults (sender) {
|
|
const results = JSON.stringify(sender.data, null, 4);
|
|
document.querySelector("#surveyResults").textContent = results;
|
|
document.querySelector("#resultsContainer").style.display = "block"
|
|
}
|
|
|
|
survey.onComplete.add(displayResults);
|
|
|
|
$(function() {
|
|
$("#surveyContainer").Survey({ model: survey });
|
|
});
|
|
}
|
|
function SingleForm(){
|
|
|
|
function saveSurveyResults(url, json) {
|
|
console.log(url);
|
|
console.log(json);
|
|
// fetch(url, {
|
|
// method: 'POST',
|
|
// headers: {
|
|
// 'Content-Type': 'application/json;charset=UTF-8'
|
|
// },
|
|
// body: JSON.stringify(json)
|
|
// })
|
|
// .then(response => {
|
|
// if (response.ok) {
|
|
// // Handle success
|
|
// console.log(response)
|
|
// } else {
|
|
// // Handle error
|
|
// }
|
|
// })
|
|
// .catch(error => {
|
|
// // Handle error
|
|
// });
|
|
}
|
|
function surveyComplete (survey) {
|
|
const userId = "hjghg";/* ... Getting the user ID ... */
|
|
survey.setValue("userId", userId);
|
|
|
|
saveSurveyResults(
|
|
"https://your-web-service.com/" + SURVEY_ID,
|
|
survey.data
|
|
)
|
|
}
|
|
|
|
|
|
const surveyJson = {
|
|
elements: [{
|
|
name: "FirstName",
|
|
title: "Enter your first name:",
|
|
type: "text"
|
|
}, {
|
|
name: "LastName",
|
|
title: "Enter your last name:",
|
|
type: "text"
|
|
}]
|
|
};
|
|
|
|
const SURVEY_ID = 1;
|
|
const survey = new Survey.Model(surveyJson);
|
|
survey.completedHtml = "<h4>Thank you for filling out form</h4>";
|
|
$("#surveyContainer").Survey({ model: survey });
|
|
survey.applyTheme(getStyle1());
|
|
survey.onComplete.add(surveyComplete);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function Other1(){
|
|
const surveyJson = {
|
|
"elements": [{
|
|
name: "FirstName",
|
|
title: "Enter your first name:",
|
|
type: "text"
|
|
}, {
|
|
name: "LastName",
|
|
title: "Enter your last name:",
|
|
type: "text"
|
|
},{
|
|
name: "disappointing-experience",
|
|
title: "Please let us know why you had such a disappointing experience with our product",
|
|
type: "comment"
|
|
},{
|
|
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
|
|
},{
|
|
"type": "tagbox",
|
|
"isRequired": true,
|
|
"choicesByUrl": {
|
|
"url": "https://surveyjs.io/api/CountriesExample"
|
|
},
|
|
"name": "countries",
|
|
"title": "Which countries have you visited within the last three years?",
|
|
"description": "Please select all that apply."
|
|
},{
|
|
"type": "file",
|
|
"title": "Please upload your files",
|
|
"name": "files",
|
|
"storeDataAsText": false,
|
|
"waitForUpload": true,
|
|
"allowMultiple": true,
|
|
"maxSize": 102400,
|
|
"hideNumber": true
|
|
},{
|
|
"type": "signaturepad",
|
|
"name": "signature",
|
|
"title": "Please sign here",
|
|
"isRequired": true,
|
|
"signatureWidth": 600
|
|
},{
|
|
"name": "subscribed",
|
|
"type": "boolean",
|
|
"renderAs": "checkbox",
|
|
"title": "I agree to receive weekly newsletters"
|
|
}]
|
|
}
|
|
|
|
const survey = new Survey.Model(surveyJson);
|
|
const subscribedQuestion = survey.getQuestionByName("subscribed");
|
|
subscribedQuestion.value = true;
|
|
$("#surveyContainer").Survey({ model: survey });
|
|
SurveyComponent(survey);
|
|
}
|
|
|
|
|
|
// SingleForm();
|
|
// Other1();
|
|
MultiForm()
|