How do I modify exported files for PBS Learning Media?

Post reply
0 favourites
  • 4 posts
From the Asset Store
Learn The Alphabet
$15 USD
Game with complete Source-Code (Construct 3 / .c3p) + HTML5 Exported.
R Games's avatar
R Games

  • The good news:

    We just received word that PBS Learning Media http://www.pbslearningmedia.org is interested in several of the simulations and tutorials at http://www.simbucket.com. Everything on the site is made with Construct 2. It is a huge feather in Construct 2's cap, as PBS content is seen by millions of students around the US every year.

    The problem:

    PBS Learning Media has very strict guidelines for what can be ingested into their CMS system. The guidelines are available at https://projects.pbs.org/confluence/display/DLM/Media+Format+Guidelines#MediaFormatGuidelines-Interactives. I am having trouble modifying the exported project files to meet their requirements:

    [quote:134ipu7f]Only the index.html and the manifest.txt files should be located in the root of the archive. All other files should be contained in a subdirectory called content.

    I have attempted the following solutions:

    SOLUTION #1 - Create a folder called contents/, and put everything there except the index.html file. In order to do this, I need to modify all of the paths in index.html, c2runtime.js and data.js to refer to the contents/ folder for all resources. Does anyone know where I would change this in the exported code? I have tried every path reference I could find in c2runtime.js and data.js, and nothing seems to work. I have a few simulations made with previous versions of Construct 2 before the existence of the data.js file, and I can get those working fine.

    Ashley, is it possible to tweak something in C2 or in the exported files to achieve the proper directory reference?

    SOLUTION #2 - Set up an iframe within an index.html file in the root directory, then export the C2 project to a subdirectory called contents/. Here's my attempt so far: https://dl.dropboxusercontent.com/u/55106174/pbstest/index.html

    Here's what I have so far for the container index.html:

    <!DOCTYPE html>
<html>
<body>

<iframe src="content/index.html" style="min-height:100%;min-width:100%;">
  <p>Your browser does not support iframes.</p>
</iframe>

</body>
</html>[/code:134ipu7f]

It doesn't look great: The iframe shows up with a 1px border, the container document has a white background while the iframe has a black background, and the iframe content is slightly smaller (10 px maybe?) than the container document.  Are there any web gurus out there who know how to take care of these issues?

  • There are solutions to #2.

    You can remove the iframe border using a few different methods, or use other tags like embed, or object.

    You might need to check what platforms will be used, as those tags may not be ubiquitous yet.

  • So far no luck with Solution #1.

    Solution #2 is working fine on my desktop Safari browser, but it is doing weird things on my iPad, iPhone, and Nexus 5:

    1. Resizing no longer works correctly on screen rotations for mobile devices. It does not scale down below the menu bar, meaning the top portion of the display is covered by the menu bar.

    2. On my iPad it takes a very long time for the scale to autofit to the screen width. On my iPhone, it doesn't autofit at all. On my Nexus 5, it auto fits instantly and correctly. This appears to be a problem with the Q3D plugin, as the behavior completely changes when I set the Q3DMaster object scale/position to "Positioned" instead of "AutoFit". QuaziGNRLnose, any ideas?

    It is definitely good enough for desktops and chromebooks, but there are a lot of iPad-only schools (I work in one), and mobile users that PBS is hoping to target as well.

    https://dl.dropboxusercontent.com/u/55106174/pbstest/index.html

    Here is my code so far:

    <!DOCTYPE html>
<html>
<body style="background-color:black;margin:0;padding:0;overflow: hidden;">

<iframe src="content/index.html" style="width:100vw;height:100vh;min-height:100%;min-width:100%;border:none;">
  <p>Your browser does not support iframes.</p>
</iframe>

</body>
</html>[/code:3mkkjflx]

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • I just realized that I have been going about this all wrong. All I have to do is redirect the user to the new directory. Here is the final solution.

    <!DOCTYPE html>
<html>
<script type="text/javascript">
	window.location.href = "content/index.html";
</script>
</html>[/code:1qlphgbt]

If anyone is making games for AirConsole, or similar, this should work as a way to separate the controller.html and screen.html files.  Just use a redirect for each of them to the appropriate directory, and you are all set.
Post reply
  • 4 posts
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)