Develop Reference

Why doesn't my javascript quiz load properly?

I am trying to make a simple quiz. Somehow I always have an error
"Vue is not defined"
However, it actually is defined right there. I don't exactly undertand what is the reason. The website link is here.
The script is right in a head of the page. I have tried to use javascript code as a separate file, but the error is the same. I am a novice in javascript, so any help would be really appreciated.
"use strict";
window.onload = function() {
var quiz = {
title: 'What superhero are you?',
questions: [{
text: "How would you describe your personality?",
responses: [{
text: 'Im serious and dark',
value: 'Batman'
},
{
text: 'Arrogant, but charming',
value: 'Superman'
},
{
text: 'Fun and easy going',
value: 'The Flash'
}
]
},
{
text: "Why did you want to become a superhero?",
responses: [{
text: 'For the thrills',
value: 'The Flash'
},
{
text: 'For justice',
value: 'Batman'
},
{
text: 'For popularity',
value: 'Superman'
}
]
},
{
text: "Who would you most hang around with?",
responses: [{
text: 'Wonder Woman',
value: 'Superman'
},
{
text: 'Green Arrow',
value: 'The Flash'
},
{
text: 'Robin',
value: 'Batman'
}
]
},
{
text: "What's your favourite colour?",
responses: [{
text: 'Black',
value: 'Batman'
},
{
text: 'Red',
value: 'The Flash'
},
{
text: 'Blue',
value: 'Superman'
}
]
},
{
text: "When do you help people?",
responses: [{
text: 'Every chance I can',
value: 'The Flash'
},
{
text: 'At night',
value: 'Batman'
},
{
text: 'When they need me to',
value: 'Superman'
}
]
},
]
};
var app = new Vue({
el: '#app',
data: {
quiz: quiz,
questionIndex: 0,
userResponses: Array()
},
methods: {
// Go to next question
next: function() {
this.questionIndex++;
console.log(this.userResponses);
},
// Go to previous question
prev: function() {
this.questionIndex--;
},
score: function() {
//find the highest occurence in responses
var modeMap = {};
var maxEl = this.userResponses[0],
maxCount = 1;
for (var i = 0; i < this.userResponses.length; i++) {
var el = this.userResponses[i];
if (modeMap[el] == null)
modeMap[el] = 1;
else
modeMap[el]++;
if (modeMap[el] > maxCount) {
maxEl = el;
maxCount = modeMap[el];
}
}
return maxEl;
}
}
});
}

If you'll check the source code of your site You will see script for Vue is not loaded. So giving error Vue is not defined. Add below script in head of your page.
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.22/dist/vue.js"></script>
You can read here, how to use Vue in your project.

You are actually not loading Vue. Make sure to load Vue before instantiating an instance of it.
You can either load the script using a CDN, as Ashish showed, or save the script to your local machine, and including it in your page.
<script src="/js/vue-2.5.22.min.js" type="text/javascript"/>
Where /js/vue-2.5.22.min.js is the relative path to the location of Vue.

What does this 'child' in my javascript array mean?

I keep getting these 'child' things in my Javascript collection after certain operations. The 'child' keyword is showing up in my terminal after logging the Javascript collection.
Whats strange is that I can't actually find good documentation anywhere online on what this means. Seems like it should be a basic concept.
When I do google it I just get a ton of results for 'child' in context of HTML and the DOM.
What does it mean in javascript? And how could I fix this collection to have these nested collections without the 'child' thing.
Gosh I wish I could speak about it with more sophistication :p
More Context on How This 'Bad' Collection is Generated
So I'm trying to populate JSON data from my Mongodb database and return it to the frontend. Essentially I have nested collections like so:
Institution
|
------------> memberOrganizations
|
---------------------> associatedVIPs
Where I'm originally grabbing Institutions I can populate collections one level down using built in populate functionality.
Doing like so:
Institution.find()
.populate('memberOrganizations')
.then(function (institutions) {
console.log("All institutions, memberOrganizations populated no problem.");
return res.json(institutions);
});
The problem is coming in when I try to go populate collections inside those member organizations, and replace existing memberOrganizations data with that.
Institution.find()
.populate('memberOrganizations')
.then(function (institutions) {
var populateOrganizationOrderManagers = _.map(institutions, function (institution) {
var masterInstitution = _.cloneDeep(institution);
return new Promise(function (resolve, reject) {
var ids = _.map(institution.memberOrganizations, 'id');
Organization.find(ids).populate('associatedVIPs').then(function (orgs) {
masterInstitution.memberOrganizations = orgs;
resolve(masterInstitution);
});
});
});
return Promise.all(populateOrganizationOrderManagers)
.then(function (institutionsWithOrderManagers) {
return res.json(institutionsWithOrderManagers);
});
})
Printouts of the JSON data using console.log to print to my terminal
(Simplified all data by a bit to make it easier to make a point)
What it looks like:
[ child {
memberOrganizations:
[ { associatedVIPs:
[ { firstName: 'Gregory',
lastName: 'Parker',
email: 'info#parker2018.com',
id: '5ab94183164475010026184b' } ],
institution: '5ab940b71644750100261845',
name: 'Greg Parker',
type: 'Student',
id: '5ab941401644750100261847' },
{ associatedVIPs:
[ { firstName: 'Irma',
lastName: 'Francisco',
email: 'irmaf#houstontransporter.com',
id: '5ae348da1ef63b245a74fe2d' } ],
institution: '5ab940b71644750100261845',
name: 'Transporter Inc',
type: 'Other',
id: '5ae3488d1ef63b2c8f74fe29' } ],
name: 'Corporate',
createdAt: 2018-03-26T18:49:27.955Z,
updatedAt: 2018-07-05T15:00:02.562Z,
id: '5ab940b71644750100261845' }
What I'd like it to look like:
{ memberOrganizations:
[ {
name: 'Tau Kappa Epsilon',
type: 'Greek - Fraternity',
institution: '5a3996d47bab3401001cc1bc',
id: '5a3ae7ebdfd69201001aa54d'
associatedVIPs:
[ { firstName: 'Irma',
lastName: 'Francisco',
email: 'irmaf#houstontransporter.com',
id: '5ae348da1ef63b245a74fe2d' },
{ firstName: 'Zach',
lastName: 'Cook',
email: 'zach#google.com',
id: '5ae348da1ef63b245a74f' } ]
},
{ name: 'Farmhouse',
type: 'Greek - Fraternity',
institution: '5a3996d47bab3401001cc1bc',
id: '5a4e71e806b97a01003bd313' } ],
name: 'Troy University',
createdAt: '2017-12-19T22:46:44.229Z',
updatedAt: '2018-07-05T15:18:03.182Z',
id: '5a3996d47bab3401001cc1bc' },
{ memberOrganizations:
[ { name: 'Alpha Epsilon Pi',
type: 'Greek - Fraternity',
institution: '5a4d534606b97a01003bd2f1',
id: '5a4f95c44ec7b6010025d2fb' },
{ name: 'Alpha Delta Chi',
type: 'Greek - Sorority',
institution: '5a4d534606b97a01003bd2f1',
id: '5a74a35e1981ef01001d0633' },
{ name: 'Phi Sigma Kappa',
type: 'Greek - Fraternity',
institution: '5a4d534606b97a01003bd2f1',
id: '5a7ba61821024e0100be67b7' } ],
name: 'University of Alabama',
createdAt: '2018-01-03T22:03:50.929Z',
updatedAt: '2018-07-05T15:18:03.182Z',
id: '5a4d534606b97a01003bd2f1' }

VueJs How to duplicate object from v-repeat?

Functionality allows you to add/delete description, title and time for the event.
I can not deal with the duplication(cloning) of the object which is created through v-model = (event.name, event.description and event.date)
All works fine with the removing selected object, it works like this:
deleteEvent: function(index){
if(confirm('Are you sure?')) {
this.events.$remove(index);
}
}
Here's an example of my code for a application to adding and changing events.
var vm = new Vue({
el: '#events',
data:{
event: { name:'', description:'', date:'' },
events: []
},
ready: function(){
this.fetchEvents();
},
methods: {
fetchEvents: function() {
var events = [
{
id: 1,
name: 'TIFF',
description: 'Toronto International Film Festival',
date: '2015-09-10'
},
{
id: 2,
name: 'The Martian Premiere',
description: 'The Martian comes to theatres.',
date: '2015-10-02'
},
{
id: 3,
name: 'SXSW',
description: 'Music, film and interactive festival in Austin, TX.',
date: '2016-03-11'
}
];
this.$set('events', events);
},
addEvent: function() {
if(this.event.name) {
this.events.push(this.event);
this.event = { name: '', description: '', date: '' };
}
},
deleteEvent($index)"
deleteEvent: function(index){
if(confirm('Вы точно хотите удалить данную запись?')) {
this.events.$%remove(index);
}
},
cloneItem: function(index) {
}
}
});
there full code
http://codepen.io/Monocle/pen/ojLYGx

I found undocumented built it extend function Vue.util.extend that is equivalent to jQuery's extend.
In this case, you can avoid the enumerating the object properties
cloneItem: function(index) {
this.events.push(Vue.util.extend({},this.events[index]));
}

Access the cloned object via this.events[index], and then use it's properties to create new object and push it into events array:
cloneItem: function(index) {
this.events.push({ name: this.events[index].name,
description: this.events[index].description,
date: this.events[index].date });
}
Demo: http://codepen.io/anon/pen/MajKZO

Sails.js: Bootstrap encountered an error

I have the following code in my /config/bootstrap.js that inserts some dummy data for development.
/* global User */
/* global Category */
var insertDummyUsers = function() {
sails.log.info('Inserting dummy users');
var users = [
{ email: 'test#test.com' },
{ email: 'test1#testdomain.gr' },
{ email: 'test2#cnn.com'}
];
return User.create(users);
};
var insertDummyCategories = function() {
sails.log.info('Inserting dummy categories');
var categories = [
{ name: 'Furniture' },
{ name: 'Lighting' },
{ name: 'Computers' },
{ name: 'Networking' },
{ name: 'Telecommunications' },
{ name: 'TV & Audio' }
];
return Category.create(categories);
};
module.exports.bootstrap = function(cb) {
User.count().then(function(err,count){
if (count > 0) {
cb();
} else {
// Insert some dummy users
insertDummyUsers()
.then(insertDummyCategories)
.then(cb);
}
});
};
When I lift the app I am getting:
info: Inserting dummy users
info: Inserting dummy categories
error: Bootstrap encountered an error: see(below)
error: [ { name: 'Networking, id: 4, createdAt: ..., updatedAt: ... }]
[... so on]
However I can see that the data is being persisted in the database but the app is not getting lifted.
What's going on here? It really gives no clue.
EDIT
migrate: is set to drop
The Category model is defined as follows:
module.exports = {
attributes: {
name: {
type: 'string'
},
/* Associations */
subcategories: {
collection: 'Subcategory',
via: 'parentCategory'
}
}
};

I find this really bizarre, when I edit your create function like below. It works even when the callback function is empty.
I'll have to look a bit more, but this could be a bug that needs to be reported.
return Category.create(categories, function(err, returnModel) {
sails.log.debug('This should work!!! -- Error : ' + err + 'model : ' +
returnModel); });

PDF Acro javascript dialog box issue

I am working on creating a custom PDF dialog box and am having an issue getting the values that were entered. I have checked the code and cant find the issue. When I press accept and display the value that was entered into field1 it says "undefined". Any pointers on where the bug is would be helpful Thanks in advance.
[// Dialog Definition]
var oDlg = {
field1: "",
field2: "",
field3: "",
field4: "",
// [* initialize: Method that runs when the dialog is created*]
initialize: function(dialog) {
var dlgInit = {
"firstLine":this.field1,
"secondLine":this.field2,
"thirdLine":this.field3,
"forthLine":this.field4,};
dialog.load(dlgInit);
},
// [* commit: Method called when OK button is selected*]
commit: function(dialog) {
var data = dialog.store();
this.field1 = data["firstLine"];
this.field2 = data["secondLine"];
this.field3 = data["thirdLine"];
this.field4 = data["forthLine"];
},
// [* description: Actual dialog box fields *]
description: {
name: "Test Dialog",
elements: [ {
type: "view",
elements: [ {
name: "Additional Information",
type: "static_text",
},
{
name: "(For Further Credit, Reference of other Information)",
type: "static_text",
},
{
item_id: "firstLine",
type: "edit_text",
char_width: 35
},
{
item_id: "secondLine",
type: "edit_text",
char_width: 35
},
{
item_id: "thirdLine",
type: "edit_text",
char_width: 35
},
{
item_id: "forthLine",
type: "edit_text",
char_width: 35
},
{
type: "ok_cancel",
},
] },
] }
};
[// Dialog Activation]
if( "ok" == app.execDialog(oDlg)) { // [* ok_cancel button was pressed with ok *]
app.alert("The value is: "+oDlg.field1,3);
}

http://www.aiim.org/documents/standards/pdf/AcroJS.pdf
Page 99 - Description of item_id:
"An ItemID for this dialog, which is a unique 4- character string."
Your question is kind of old now, but maybe my answer can help someone else. ;)