1

I've created a JavaScript web browser game. The HTML page, Game.html, within folder Game references several other JS/jQuery/CSS files stored in sub folders.

I simply want to add the Game folder, which includes the Game.html file and all of its related files to SharePoint 2013 as a page. That way people can play the game on SP 2013.

enter image description here

I've tried the following:

  • Clicked Add Page. This gives me the Master Page and only allows me to add web parts. So I tried adding a Content Editor Web Part and tried to reference the Game.html page, but then I can't reference the rest of the needed JavaScript.

  • Then I mapped my drive directly to the server and uploaded my Game folder to the server. From there, I created a Master Page of Game.html in Design Manager... this did not work.

Is there a simple way to add my Game.html page to SP 2013 and have it reference all of its required JS files and actually run the game?

Thanks

Edit: Okay, here's what I did:

1) I uploaded all assets to http://server/SiteAssets/Forms/AllItems.aspx, including main Game.html file, and supporting images and JS files.

2) Changed all references in Game.html to match the same folder that Game is in:

    <script src="http://Server/SiteAssets/createjs.js"></script>
    <script src="http://Server/SiteAssets/bootstrap.js"></script>
    <script src="http://Server/SiteAssets/jquery.js"></script>
etc...

3) Went to Settings -> Add a page, which is now at http://Server/Pages/Game.aspx.

4) Added Content Editor Web Part (CEWP) to new Page, titled Game. Edited the CEWP to get the Game.html file located in SiteAssets.

5) Game.html seems to render okay:

enter image description here

However, when I submit my name in the text box, it's supposed to run the JavaScript game. But it's not working. I know it's running JavaScript because I did:

Game.html: <body onload="test()">

Game.html: function test() { alert("working"); } Outputs "working".

There's no console output error. And the jQuery and rest of the code seems to render for a second, flicker, and then return to the static HTML...

Any thoughts?

Improve this question
4
  • add the virtual directory to your sharepoint site and convert it to an application, so the virtual path to it works, then have it referenced anywhere in your sharepoint site.
    – Mike
    Jan 24, 2014 at 15:26
  • @Mike How do I convert it to an app? Google search sharepoint 2013 conversion to application doesn't turn up anything useful.
    – user3871
    Jan 24, 2014 at 15:39
  • Now that I think about it, @tyshock's solution would work better.
    – Mike
    Jan 24, 2014 at 15:43
  • The only obvious thing I can think of is that a single page should have only one html tag and one body tag. Your embedded Game.html doc should not have <html> or <body>, as SharePoint's masterpage already has those tags.
    – tyshock
    Jan 24, 2014 at 18:35

1 Answer 1

Reset to default
1

If you are just looking for a one-off implementation, you could put the supporting files in a doc library ('Site Assets' would be a good one), Then, use the Content Editor Web Part route that you described above with the relative references within the 'Game.html' that point to those supporting file locations.

Improve this answer
4
  • Just a simple one-off. How would I add my Game.html main page as a page within SharePoint? Would I just create a generic page, and then create a Content Editor Web part and embed? But then I can't reference more than one JS file.
    – user3871
    Jan 24, 2014 at 15:28
  • In your 'Game.html', you can have multiple <script> tags that each pull in a js file.
    – tyshock
    Jan 24, 2014 at 15:30
  • Thanks I'll give that a try. Is there a way for me to enable explorer view? I don't want to upload each file one by one.
    – user3871
    Jan 24, 2014 at 15:32
  • Tyshock please see my update above.
    – user3871
    Jan 24, 2014 at 16:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.