Inserting .js and html files into a site page

  • I use an editor program called Squiffy to create text adventure games.

    The “BUILD” button (compile) creates 4 files that can be uploaded to the TextAdventures hosting site where folks can play the game. The site is buggy and not secure.

    The files types are attached to the end of this post for your reference.

    I used the iframe technique to port the game to my self hosted site on a “hidden” page. Pretty simple and the iframe version is handled nicely by the adaptive nature of my Theme (Brigsby) However, there is a lot of communication back and forth grabbing images from my site server to the TextAdventures serve and then sent back again to my iframe embedded page. Gets kinda buggy sometimes and TextAdventures sometimes does not refresh their site very often so it takes forever to see code changes take place.

      So, I would like to find out of there is a fairly easy way to use the information in the four files and paste them properly into the page on my WP site without modifying the site code. I already utilize the custom css dialog on a page site to customize THAT page, etc. But am lost for how to incorporate properly the code in the four files.

    style.css
    story.js
    jquery.min.js
    index.html

Viewing 11 replies - 1 through 11 (of 11 total)
  • Thread Starter mckinney3

    (@mckinney3)

    More….

    It would seem that I should paste the html code into the dialog for building a page using code.

    Looking at the code, it calls on the two .js files and the css file in the head and body of the html code. If I just knew where to put those files and keep them from bleeding into the rest of the site, I would be in business. =)

    Please help me.

    The contents the index.html file:

    <!DOCTYPE html>
    <html>
    <!–

    Created with Squiffy 5.0.0

    https://github.com/textadventures/squiffy

    –>
    <head>
    <title></title>
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
    <script src=”jquery.min.js”></script>
    <script src=”story.js” charset=”UTF-8″></script>

    <script>
    jQuery(function($){
    $(‘#squiffy’).squiffy();
    var restart = function () {
    $(‘#squiffy’).squiffy(‘restart’);
    };
    $(‘#restart’).click(restart);
    $(‘#restart’).keypress(function (e) {
    if (e.which !== 13) return;
    restart();
    });
    });
    </script>
    <link rel=”stylesheet” href=”style.css”/>
    </head>
    <body>
    <div id=”squiffy-container”>
    <div id=”squiffy-header”>
    Restart
    </div>
    <div id=”squiffy”>
    </div>
    </div>
    </body>
    </html>

    The index.html would contain all the HTML for the page, including the link for the style.css and the scripts.
    In WordPress terms, the HTML is the content that you enter in the editor. The theme or plugins load the CSS and JS for you. WordPress contains a copy of jquery already.

    So you could put your game into pages yourself, by breaking the index.html into parts (content and references to the CSS and JS).
    Or you could use a local iframe. Create a folder in your wp-content/uploads folder and put your files there. Use that address in an iframe. You can choose to modify the HTML to point to the WordPress version of jquery or keep multiple copies of it around.

    Thread Starter mckinney3

    (@mckinney3)

    Joy, thank you! I tried writing to you thru your contact form on your website but was unable to do that.

    Do you have another contact option?

    Thank you,

    dan mckinney

    Thread Starter mckinney3

    (@mckinney3)

    @joyously ,

    I can bluff my way thru most stuff but I sure don’t want to clobber this well structured site. =)

    How does this sound:
    I can use my File Manager using CPanel at GoDaddy who hosts the site.
    I can find and open the wp-admin/uploads folder
    I can create a new folder wp-admin/uploads/Fairy V

    So you advise that I use the upload feature in CPanel and add all four of the referenced files to that folder.

    Then somehow link to it in an iframe.

    I currently use this iframe code on the new page to “point” to the external site.

    What would the code look like to “point” to the newly added content to wp-admin/uploads/Fairy V

    Here is my current code that works nicely for me:

    <iframe src=”https://media.textadventures.co.uk/games/-kZHjwgAf0GBX–2kphVaw/Fairy%20Light%20Cache%20Quest%20V/index.html&#8221; width=”900″ height=”1000″ frameborder=”0″ align=”middle”></iframe>

    Thank you for helping me!

    Dan

    Thanks for letting me know about my contact form! I’ve had lots of trouble with that, so I switched to a different plugin.

    OK, there isn’t a wp-admin/uploads folder. It should be wp-content/uploads.
    Your iframe code would be almost the same, but you didn’t mention what your site is, so you’ll have to fix it…
    <iframe src=”https://yoursitehere/wp-content/uploads/Fairy%20V/index.html" width=”900″ height=”1000″ frameborder=”0″ align=”middle”></iframe>
    It’s better to not use spaces in file and folder names. They have to be replaced with %20 in the URLs.

    Thread Starter mckinney3

    (@mckinney3)

    Thank you I created the sub folder and uploaded my 4 files.
    style.css
    story.js
    jquery.min.js
    index.html

    I believe the address to the index.html file is:
    https://pixelpointgraphics.com/public_html/wp-content/uploads/fairy_v/index.html

    But that takes me to my blog page when paste into the url bar in a browser. And If I create the iframe of course it does the same thing. So I must have the address wrong.

    I see that you did not include the public_html in your example but that seems to be the path from the Cpanel.

    Need a little more direction…

    Thread Starter mckinney3

    (@mckinney3)

    I dropped the /public_html/ path like in your example and voila! the correct page will load and operate correctly if I place this path inn the url bar of a browser.

    https://pixelpointgraphics.com/wp-content/uploads/fairy_v/index.html

    BUT….

    If I place that code in the iframe, the page displays the Blog page of the structured site. =(
    Here is my iframe code:

    <iframe src=”https://pixelpointgraphics.com/wp-content/uploads/fairy_v/index.html”.com width=” 900″=”” height=”1000″ frameborder=”0″ align=”middle”></iframe>

    A little more help, PLEASE!

    Thread Starter mckinney3

    (@mckinney3)

    OK, S M A C K me in the head.

    Extraneous stuff in that iframe code.

    Correct iframe code

    <iframe src=”https://pixelpointgraphics.com/wp-content/uploads/fairy_v/index.html&#8221; width=” 900″ height=”1000″ frameborder=”0″ align=”middle”></iframe>

    Dan

    • This reply was modified 5 years, 1 month ago by mckinney3.

    Your iframe code has an extra .com outside the quotes for the src.
    This part is messed up also: width=" 900″="" . That should probably be width="900".

    Great! you found the problem yourself!
    Now I hope it isn’t a problem on mobile devices that aren’t 900 wide.

    Thread Starter mckinney3

    (@mckinney3)

    Yes, also a ” in the wrong spot.

    <iframe src=”https://pixelpointgraphics.com/wp-content/uploads/fairy_v/index.html&#8221; width=” 900″ height=”1000″ frameborder=”0″ align=”middle”></iframe>

    Not sure why when the post is published that it adds that &#8221 text after the addy. that should just be a closing ” I see more garbage in the code after editing

    Whats up with that?

    Anywhoo, thanks to YOU I got it working perfectly!

    • This reply was modified 5 years, 1 month ago by mckinney3.
Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Inserting .js and html files into a site page’ is closed to new replies.