I want to create a survey app for my client for this I select surveyjs library to build the app.
I have created all tables like Survey, Questions, Answers, and Options now I want to pass dynamics questions and answers from database like
public function my_survey($slug)
{
$surveys = Survey::where('slug',$slug)->first();
$questions = Question::where('survey_id',$surveys->id)->with('answers')->get();
return view('user.my-survey', compact('surveys','questions'));
}
this will return the array of questions and options saved in database. and
this is Surveyjs script
Survey
.StylesManager
.applyTheme("modern");
var json = {
pages: [
{
questions: [
{
type: "matrix",
name: "Quality",
title: "Please indicate if you agree or disagree with the following statements",
columns: [
{
value: 1,
text: "Strongly Disagree"
}, {
value: 2,
text: "Disagree"
}, {
value: 3,
text: "Neutral"
}, {
value: 4,
text: "Agree"
}, {
value: 5,
text: "Strongly Agree"
}
],
rows: [
{
value: "affordable",
text: "Product is affordable"
}, {
value: "does what it claims",
text: "Product does what it claims"
}, {
value: "better then others",
text: "Product is better than other products on the market"
}, {
value: "easy to use",
text: "Product is easy to use"
}
]
}, {
type: "rating",
name: "satisfaction",
title: "How satisfied are you with the Product?",
isRequired: true,
mininumRateDescription: "Not Satisfied",
maximumRateDescription: "Completely satisfied"
}, {
type: "rating",
name: "recommend friends",
visibleIf: "{satisfaction} > 3",
title: "How likely are you to recommend the Product to a friend or co-worker?",
mininumRateDescription: "Will not recommend",
maximumRateDescription: "I will recommend"
}, {
type: "comment",
name: "suggestions",
title: "What would make you more satisfied with the Product?"
}
]
}, {
questions: [
{
type: "radiogroup",
name: "price to competitors",
title: "Compared to our competitors, do you feel the Product is",
choices: ["Less expensive", "Priced about the same", "More expensive", "Not sure"]
}, {
type: "radiogroup",
name: "price",
title: "Do you feel our current price is merited by our product?",
choices: ["correct|Yes, the price is about right", "low|No, the price is too low for your product", "high|No, the price is too high for your product"]
}, {
type: "multipletext",
name: "pricelimit",
title: "What is the... ",
items: [
{
name: "mostamount",
title: "Most amount you would every pay for a product like ours"
}, {
name: "leastamount",
title: "The least amount you would feel comfortable paying"
}
]
}
]
}, {
questions: [
{
type: "text",
name: "email",
title: "Thank you for taking our survey. Your survey is almost complete, please enter your email address in the box below if you wish to participate in our drawing, then press the 'Submit' button."
}
]
}
]
};
window.survey = new Survey.Model(json);
survey
.onComplete
.add(function (sender) {
document
.querySelector('#surveyResult')
.textContent = "Result JSON:\n" + JSON.stringify(sender.data, null, 3);
});
$("#surveyElement").Survey({model: survey});
I want to pass dynamic questions and options from laravel controller to the above script. please help me how to acheive this
In your my-survey view put questions in JSON format:
#isset($questions)
<script type="text/javascript">
window.questions= {!! $questions !!};
</script>
#endisset
In Surveyjs script put:
const json = window.questions;
window.survey = new Survey.Model(json);
Related
i try to do a bot who works as i want but i would like to implement some features (send mails, popups etc..) but i don't understand how can i console.log any elements .
there is my code:
import React from "react";
import ChatBot from "react-simple-chatbot";
import props from 'prop-types';
function Sendemail() {
console.log("test")
}
function CustomChatbot(props) {
const config = {
width: "300px",
height: "400px",
floating: true
};
return <ChatBot steps={steps} {...config} />;
}
export default CustomChatbot;
const steps = [
{
id: "Greet",
message: "Hello, Welcome to our website",
trigger: "Ask Name",
},
{
id: "Ask Name",
message: "Please type your name?",
trigger: "Waiting user input for name"
},
{
id: "Waiting user input for name",
user: true,
trigger: "ask questions"
},
{
id: "ask questions",
message: "Hi {previousValue}, I am Tony the bot, How can i help you!",
trigger: "informations"
},
{
id: "informations",
options: [
{
value: "Who founded Babycare",
label: "Who founded Babycare",
trigger: "Who founded"
},
{
value: "Contact",
label: "Contact",
trigger: "Contact"
}
]
},
{
id: "Who founded",
message: "ERWAN",
trigger: "informations"
},
{
id: "Contact",
message: "Ok, first, enter your adress-mail",
trigger: "Ask email"
},
{
id: "Ask email",
user: true,
trigger: "get-email"
},
{
id: "get-email",
message: "ok, {previousValue} !! Type your value now, please be fair",
trigger: "your question"
},
// {
// id: "your question",
// message: "Ok. Now, enter your message to the staff. Please be fair !!",
// trigger: "your message"
// },
{
id: "your question",
user: true,
trigger: "send mail"
},
{
id: "send mail",
message: "ok, there is your message : {previousValue} !! The support team will answer you as possible",
trigger: "thelast"
},
{
id: "thelast",
component: (
<div> {Sendemail()} </div>
),
end: true
},
];
THis code is my last try, on the last proposition, i just tried to put my function Sendmail() in the id:"the last". But i can't call function in array. I am quite lost, how can i do that?
Thanks for yours answers!
I am not sure what you are trying to achieve with Sendemail. But maybe this code will work
function SendEmail()
{
console.log('test')
return null
}
// in steps
{
id: "thelast",
component: (
<SendEmail/>
),
end: true
}
I was wondering if anybody could help me out with an explanation as to why the below code would cause the command line to exit without waiting for an answer from the user.
init();
function init() {
loadPrompts();
}
async function loadPrompts() {
const { choice } = await inquirer.prompt([
{
type: "list",
name: "choice",
message: "What would you like to do?",
choices: [
{
name: "View All Employees",
value: "VIEW_EMPLOYEES",
},
{
name: "View All Employees By Department",
value: "VIEW_EMPLOYEES_BY_DEPARTMENT",
},
{
name: "View All Employees By Manager",
value: "VIEW_EMPLOYEES_BY_MANAGER",
},
{
name: "Add Employee",
value: "ADD_EMPLOYEE",
},
{
name: "Remove Employee",
value: "REMOVE_EMPLOYEE",
},
{
name: "Update Employee Role",
value: "UPDATE_EMPLOYEE_ROLE",
},
{
name: "Update Employee Manager",
value: "UPDATE_EMPLOYEE_MANAGER",
},
{
name: "View All Roles",
value: "VIEW_ROLES",
},
{
name: "Add Role",
value: "ADD_ROLE",
},
{
name: "Remove Role",
value: "REMOVE_ROLE",
},
{
name: "View All Departments",
value: "VIEW_DEPARTMENTS",
},
{
name: "Add Department",
value: "ADD_DEPARTMENT",
},
{
name: "Remove Department",
value: "REMOVE_DEPARTMENT",
},
{
name: "Quit",
value: "QUIT",
},
],
},
]);
switch (choice) {
case "VIEW_EMPLOYEES":
return viewEmployees();
default:
return quit();
}
}
async function viewEmployees() {
const employees = await db.findAllEmployees();
console.table(employees);
loadPrompts();
}
The aim is a simple command-line application that asks the user to select an option - then depending on what they have selected a function will be executed. But what is happening is that the application is running, showing the options then immediately exiting...
You Should use await with loadPrompts() to work synchronously;
(async function init(){
await loadPrompts();
})();
I am trying to connect my facebook messenger chatbot with mongodb
database. It is a simple questionery chatbot which will take a text and display some buttons with options and if user clicks one outton it should display more buttons with options and so on... Here i have configured chatbot in nodejs and instead on hardcoding, I want to fetch the data from mongodb database and post requests to the same database. Can anyone help me how to connect messenger chatbot with mongodb database and also how should i write the schemas for posting and getting responses. Thanks in advance.
Here is my code of messenger chatbot.
if (received_message.text) {
// Get the URL of the message attachments
response = {
attachment: {
type: "template",
payload: {
template_type: "generic",
elements: [
{
title: "Welcome to Flying Sphaghetti Monster Restaurant!",
subtitle: "Choose any of the options below.",
image_url:
"https://content3.jdmagicbox.com/comp/hyderabad/h5/040pxx40.xx40.140516124003.h3h5/catalogue/flying-spaghetti-monster-restaurant-jubilee-hills-hyderabad-home-delivery-restaurants-p6kmmr.jpg",
default_action: {
type: "web_url",
url:
"https://content3.jdmagicbox.com/comp/hyderabad/h5/040pxx40.xx40.140516124003.h3h5/catalogue/flying-spaghetti-monster-restaurant-jubilee-hills-hyderabad-home-delivery-restaurants-p6kmmr.jpg",
webview_height_ratio: "tall"
},
buttons: [
{
type: "postback",
title: "Walkin!",
payload: "A"
},
{
type: "postback",
title: "Reserve table!",
payload: "B"
},
{
type: "postback",
title: "Feed back!",
payload: "C"
}
]
}
]
}
}
};
else if (received_message.attachments){ let attachment_url = received_message.attachments[0].payload.url;
response = {
attachment: {
type: "template",
payload: {
template_type: "generic",
elements: [
{
title: "What this picture is for?",
subtitle: "Tap a button to answer.",
image_url: attachment_url,
buttons: [
{
type: "postback",
title: "Review!",
payload: "yes"
},
{
type: "postback",
title: "Suggestion!",
payload: "yeah"
}
]
}
]
}
} callSendAPI(sender_psid, response);
};}
This is how i am handling postbacks...
function handlePostback(sender_psid, received_postback) {
let response;
let payload = received_postback.payload;
if (payload === "A")
{
response = {
attachment: {
type: "template",
payload: {
template_type: "generic",
elements: [
{
title: "you have choosen for walkin!",
subtitle: "please choose these available walkins!.",
image_url:
"https://content3.jdmagicbox.com/comp/hyderabad/h5/040pxx40.xx40.140516124003.h3h5/catalogue/flying-spaghetti-monster-restaurant-jubilee-hills-hyderabad-home-delivery-restaurants-p6kmmr.jpg",
default_action: {
type: "web_url",
url:
"https://content3.jdmagicbox.com/comp/hyderabad/h5/040pxx40.xx40.140516124003.h3h5/catalogue/flying-spaghetti-monster-restaurant-jubilee-hills-hyderabad-home-delivery-restaurants-p6kmmr.jpg",
webview_height_ratio: "tall"
},
buttons: [
{
type: "postback",
title: "4 PM",
payload: "a"
},
{
type: "postback",
title: "5 PM",
payload: "b"
},
{
type: "postback",
title: "6 PM",
payload: "c"
}
]
}
]`
my json:
{
locale: "en",
title: "Survey",
focusFirstQuestionAutomatic: false,
pages: [
{
name: "livingEnvironment",
elements: [
{
type: "html",
name: "navigationWarning",
html: "To navigate "
},
{
type: "html",
name: "IntroEnvironment",
html: "We will now ask you questions about your living environment"
},
{
type: "text",
name: "numhousehold",
width: "auto",
title: "How many people (including yourself) lived in your household",
validators: [
{
type: "numeric",
text: "Please enter a number between 1 and 99.",
minValue: 1,
maxValue: 99
}
],
inputType: "number"
},
{
type: "multipletext",
name: "householdtype",
width: "auto",
title: "Of these, how many (including yourself) were:",
items: [
{
name: "children",
inputType: "number",
title: "Children under 18 years old",
validators: [
{
type: "regex",
text: "One of the numbers below is out of range. Please enter 0, a positive number, or leave the box blank.",
regex: "^(\\s*|\\d+)$"
}
]
},
{
name: "adults",
inputType: "number",
title: "Adults between 18-59 years old",
validators: [
{
type: "regex",
text: "One of the numbers below is out of range. Please enter 0, a positive number, or leave the box blank.",
regex: "^(\\s*|\\d+)$"
}
]
},
{
name: "seniors",
inputType: "number",
title: "Seniors (60+)",
validators: [
{
type: "regex",
text: "One of the numbers below is out of range. Please enter 0, a positive number, or leave the box blank.",
regex: "^(\\s*|\\d+)$"
}
]
},
{
name: "disabled",
inputType: "number",
title: "Disabled",
validators: [
{
type: "regex",
text: "One of the numbers below is out of range. Please enter 0, a positive number, or leave the box blank.",
regex: "^(\\s*|\\d+)$"
}
]
}
}
]}
and my javascript is:
function serverValidateQuestion(survey, options) {
console.log('Validation called');
console.log(options.data.householdtype);
console.log(options.data.householdtype.children);
so i can access console.log(options.data.householdtype) and it gives me the list of items in the in household type. However i am trying to access the "children" value input from householdtype. and when i write console.log(options.data.householdtype.children) it gives me
`
Cannot read property of undefined” error. On google console mode,
"console.log(options.data.householdtype)" gives me this :
` "adults
:
"3"
children
:
"3"
disabled
:
"3"
pregnant
:
"3"
seniors
:
"3"
proto
:
Object
but i only want to access the children value and console.log(options.data.householdtype.children) doesn't work. Additionally, console.log(options.data.numhousehold) does give me a value that the user inputted. Also, these value are from an input box that users fill-out during a survey. Help me please.
ok so i figured it out It is because the on the first page of my html file console.log(options.data.householdtype); gives undefined. On second page of my html does it locate the householdtype then it is able to access console.log(options.data.householdtype.children); otherwise it doesn't work.
I'm using ddSlick dropdown because it also has images. When you select a value nothing happens. How do I make it go to facebook.com or twitter.com if they are selected? Here is code:
var ddData = [
{
text: "Facebook",
value: "FB",
description: "Description with Facebook",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
},
{
text: "Twitter",
value: "TWT",
description: "Description with Twitter",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
}
];
$('#demoBasic').ddslick({
data: ddData,
width: 300,
imagePosition: "left",
selectText: "Select your favorite social network",
onSelected: function (data) {
console.log(data);
}
});
It uses these files: jquery 1.7.2. and ddslick.js
kinda quick and dirty, but you can add additional attribute to the object that you pass:
var ddData = [
{
text: "Facebook",
value: "FB",
description: "Description with Facebook",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png",
url:"http://www.facebook.com"
},
{
text: "Twitter",
value: "TWT",
description: "Description with Twitter",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png",
url:"http://www.twitter.com"
}
];
$('#demoBasic').ddslick({
data: ddData,
width: 300,
imagePosition: "left",
selectText: "Select your favorite social network",
onSelected: function (data) {
window.location = data.selectedData.url;
}
});