I'm currently working on a project where I'm creating a playable ad I'd like to upload to Facebook.
According to Facebook's ad specifications: (https://www.facebook.com/business/help/412951382532338?helpref=faq_content)
They only accept a single HTML file of size less than 2mb for uploading. This means I need to inline all external references to a single HTML file. Which brings me to my problem:
In order to speed up development I use game engines like PlayCanvas and Phaser Editor. The issue I'm facing with most game engines is that they always have data stored in a JSON file that makes it difficult to reference into an HTML file. Is there any way I can inline this data into my file as well?
JSON data containing a base64 encoded image:
"section": [{
"type": "image",
"key": "logo",
"url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEn.........",
"overwrite": false
}],
"meta": {
"generated": "1543491968969",
"app": "Phaser Editor",
"url": "http://phasereditor.boniatillo.com",
"version": "1.0",
"copyright": "Arian Fornaris (c) 2015,2016"
}
}
Function that references this data in my HTML file:
Level.prototype.preload = function ()
{
this.load.pack('section', 'assets/pack.json');
};
Is there a way I can load the referenced data from the JSON file into this function? I've tried using
<script id="data" type="application/json">
{
JSON data here
}
</script>
and then inlining code inside the braces. Replacing 'assets/pack.json' with this code. I've also tried replacing 'section' with it's respective JSON data but I've not been successful. I hope there's someone out there who can understand how this function works and how it would be possible to inline this data there.
I'm also curious if there are any game engines or softwares that would output a single HTML file that I could use in my development.
I'd like to thank everyone in advance and I appreciate any help in solving this.
I think you can achieve this by creating a HTML field which is hidden and setting it's data- to be an object like this.
<div data-foobar='{"foo":"bar"}'></div>
Check out this link :
http://jsfiddle.net/GlauberRocha/Q6kKU/
Related
I want to have my initialization code import a JSON file, I don't know if I'm not looking up my question properly but I can't find a solution. Ideally, it would run completely offline. Right now I don't have any additional JavaScript library, so keeping it vanilla would be a plus.
Full context: I'm trying to make a game that runs on JavaScript (using an HTML to display everything), using nothing but local files so it can run offline. The JSON files would be used to import data like maps, characters, equipment, skills, and maybe plain text to make translating easier. It's for the latter purpose that I want to import the JSON files using JavaScript, so I can import the right file based on the language picked.
I'm fairly new to JavaScript.
Two options you have:
Include the JSON within your javascript code itself.
Request the file via an AJAX call.
According to this gist on Github, you can just import the json file just like a .js file.
The JSON needs to be an object as shown in the example below.
This is the example code I just tried:
HTML / JS:
<script type="text/javascript" src="file.json"></script>
<script>
console.log(data);
</script>
JSON:
data = {
"id": 5,
"name": "Marconymous",
"origin": "Switzerland"
}
Easy as using type="module" for script, which allows the use of import.
index.html
<script src="script.js" type="module"></script>
script.js
import jsonData from './json-file.json' assert {type : 'json'};
console.log(jsonData);
json-file.json
{
"name" : "John",
"age" : 26,
"height" : 1.78
}
We need to write a script to create a JSON-LD script for structured Data for a Component in JSP let say FAQ component, we have written script to generate JSON LD for Structured data,
faq.jsp :
<script type="application/ld+json">
{
"#context": "https://schema.org",
"type": "FAQPage",
"mainEntity": [
<c:forEach var='questionItem' items='${faq.faqQuestionList}' varStatus='itemsLoopSchema'>
{
<c:set var="trimmedAnswer" value="${fn:trim(questionItem.answer)}" />
"#type": "Question",
"name": "${questionItem.question}",
"acceptedAnswer": {
"#type": "Answer",
"text": "${fn:escapeXml(trimmedAnswer)}"
}
<c:choose>
<c:when test="${itemsLoopSchema.last}">
}
</c:when>
<c:otherwise>
},
</c:otherwise>
</c:choose>
</c:forEach>
]
}
</script>
Now when this JSP Component included Multiple time the script will run multiple time and create multiple JSON
Instead I want to load all the multiple FAQ component and then create JSON (or run script only once).
A single JSON LD where all the details will be there for multiple faq.jsp
*Restricting Script to run once and get the data of all the page DOM in JSON for SEO purpose in JSP
I know this may not be the answer you’re looking for but having multiple json+ld blocks on the same page is perfectly valid, even if they’re of the same type.
Additionally, I would recommend inlining the structured data into the FAQ markup you’re outputting using microformats (using itemscope, itemprop, and itemtype attributes).
Some ideas:
Add a Sling Model in the head of your page. query all FAQ components and generate the JSON+LD data. Sling Model just outputs the string
Create a FAQ Container where you drop each FAQ component. FAQWrapper Sling Model generates the JSON+LD just as above
Also, some recommendations:
Do the JSON generation in java, not in the JSP itself.
Look for a java library that generates the schema for you, otherwise is easy to make mistakes and generating invalid data. We implemented our own solution based on Lombok SuperBuilder, Delegate, and Jackson and it was a lot of work
Although google recommends using JSON+LD, I've seen websites using microformats and it works just fine, so consider Raphael's suggestion.
I am trying to fetch a Github repository and display the files inside of a specific folder, "hacks" (the repository in question is https://github.com/Prodigy-Hacking/ProdigyMathGameHacking). How would I do this in Javascript, without having to make a copy of the files and constantly have to update them?
Thanks in advance!
GitHub API REST Client (known as v3) it's very simple to use
GET https://api.github.com/repos/Prodigy-Hacking/ProdigyMathGameHacking
will give you everything you can query in that repo, and you will see that's a contents path, so trying that with the path:
GET https://api.github.com/repos/Prodigy-Hacking/ProdigyMathGameHacking/contents/hacks
and you can then loop through the return array and get each file, but if you really need to get the raw content of a specific file, then, let's assume, for this example we want /hacks/Character/customName.js
GET https://api.github.com/repos/Prodigy-Hacking/ProdigyMathGameHacking/contents/hacks/Character/customName.js
{
"name": "customName.js",
"path": "hacks/Character/customName.js",
"sha": "77b86151fbc3930d5f11e785333f82adbcc33ebf",
"size": 118,
"url": "https://api.github.com/repos/Prodigy-Hacking/ProdigyMathGameHacking/contents/hacks/Character/customName.js?ref=master",
"html_url": "https://github.com/Prodigy-Hacking/ProdigyMathGameHacking/blob/master/hacks/Character/customName.js",
"git_url": "https://api.github.com/repos/Prodigy-Hacking/ProdigyMathGameHacking/git/blobs/77b86151fbc3930d5f11e785333f82adbcc33ebf",
"download_url": "https://raw.githubusercontent.com/Prodigy-Hacking/ProdigyMathGameHacking/master/hacks/Character/customName.js",
"type": "file",
"content": "Ly8gQ3VzdG9tIG5hbWUgKENsaWVudCBzaWRlIG9ubHkpLiAoUHV0IHRleHQg\naW4gdGV4dCBoZXJlLikKaGFjay5pbnN0YW5jZS5wcm9kaWd5LnBsYXllci5n\nZXROYW1lID0gKCkgPT4gIlRFWFQgSEVSRSI7Cg==\n",
"encoding": "base64",
"_links": {
"self": "https://api.github.com/repos/Prodigy-Hacking/ProdigyMathGameHacking/contents/hacks/Character/customName.js?ref=master",
"git": "https://api.github.com/repos/Prodigy-Hacking/ProdigyMathGameHacking/git/blobs/77b86151fbc3930d5f11e785333f82adbcc33ebf",
"html": "https://github.com/Prodigy-Hacking/ProdigyMathGameHacking/blob/master/hacks/Character/customName.js"
}
}
hitting that download_url will give you
// Custom name (Client side only). (Put text in text here.)
hack.instance.prodigy.player.getName = () => "TEXT HERE";
it is well explained in GitHub Documentation
you can now, easily loop through the data at your own like ... remember that you should authenticate your calls, or you will hit the GitHub limit.
Sorry if this comes off super basic and I'm a Middleman newb, but I'm trying to take the JSON file in my data folder, parse the data in a Javascript file (I'm using jQuery), and then use it for SoundManager2.
I've done my research around the internet looking for answers, and here's where I've got:
My JSON file within the data folder for Middleman
{
"sound": [
{
"name": "Holidead",
"url": "https://dl.dropboxusercontent.com/u/80054631/music/Holidead.mp3"
},
{
"name": "Where Did It All Go",
"url": "https://dl.dropboxusercontent.com/u/80054631/music/Where%20Did%20It%20All%20Go_1.mp3"
},
{
"name": "When We Ride",
"url": "https://dl.dropboxusercontent.com/u/80054631/music/When%20We%20Ride.mp3"
}
]
}
Then in config.rb, I've tried doing this at the bottom of the file:
string = File.read('data/soundlist.json')
json = JSON.parse(string)
So my question is how do I connect the parsing in the config.rb with the Javascript file to read the JSON file in jquery Ajax? I want to turn the data into an array and use the URLs to play sounds with SoundManager2. I believe I'm missing a few steps between the Ruby file and the JS file.
I believe I'm missing a few steps between the Ruby file and the JS file.
Exactly! You can have file-name.js.erb files which will be processed by middleman as .html.erb files are processed. ie, anything in
<%= %>
will be evaluated
Put this in config.rb
string = File.read('data/soundlist.json')
config[:json] = JSON.parse(string)
have file name have extention .js.erb. say json-data.js.erb
var json_data = <%= config[:json] %>;
console.log('json_data');
now build the project using
middleman build
If you check build/json-data.js, you can see the variable json_data has the json value.
I have an XML file with the following content:
<directory>
<app>
<title>Carrot</title>
<url>www.carrot.com</url>
</app>
<app>
<title>Cucumber</title>
<url>www.cucumber.com</url>
</app>
</directory>
Assuming I had been able to read it and store the content as a string:
s = '<directory><app><title>Carrot</title><url>www.google.com</url></app><app><title>Cucumber</title><url>www.cucumber.com</url></app></directory>';
How do I convert it to a JavaScript object like the following?
{
"directory": {
"app": [
{ "title": "Carrot", "url": "www.carrot.com" },
{ "title": "Cucumber", "url": "www.cucumber.com" }
]
}
}
I use this plugin ... http://www.thomasfrank.se/xml_to_json.html
Its always worked a charm for me.
I think you are looking for the answer to the following question Convert XML to JSON (and back) using Javascript
XML <-> JSON conversion in Javascript
quoted answer
I think this is the best one: Converting between XML and JSON
Be sure to read the accompanying article on the Xml.com O'Reilly site (linked to at the >bottom). The writer goes into details of the problems with these conversions, which I think >you will find enlightening. The fact that O'Reilly is hosting the article should indicate >that Stefan's solution has merit.