0

Not sure if this was the right way to organize/build my first website game but I have 5 different html files and their corresponding js and css files. When an event is triggered I would like to slide in from the right the next content from the the next html file and the accompanying JS and css files until the user is finished going through the game.

Think of it like the app Duolingo, trigger the correct answer for the question and move on to the next question till the lesson is complete. How should I go about sliding in the other content?

pigusan
  • 109
  • 9
  • https://developer.mozilla.org/en/docs/Web/API/History_API could be interesting for you. Push, pop, a bit of AJAX to load the desired content and you're done. On `.load()` callback you simply animate the container. – Roko C. Buljan Aug 01 '17 at 00:08
  • 1
    If you don't need to focus on SEO, you could simply organize your quiz into an Array `[]` of Objects `[{}, {}, {}]` where an object looks like `{question:"qqq?", answers:["An1","answ2"], correct: 1}` and construct your logic and animations without using separate pages. – Roko C. Buljan Aug 01 '17 at 00:11

1 Answers1

0

You can use jQuery .load() and $.getScript() methods to replace HTML and load JavaScript at existing document

// make sure no necessary `<script>` elements are within `<body></body>`
$("body").load("/path/to/html #idOfFragment", function() {
  // do stuff when new HTML is loaded in `document.body`
  // for example, load CSS
  $.when($.getScript("/path/to/script"), $.get("/path/to/css"))
  .then(function() {
    // do stuff when script and CSS is loaded
  })
});
guest271314
  • 1
  • 15
  • 104
  • 177
  • Is there a way to have both html files on the page simultaneously and then move the first one out of view using the load function? – pigusan Aug 01 '17 at 00:25
  • @pigusan Yes. You can load all resources at the same time using `` element with `rel` attribute set to `"import"` or `"stylesheet"`, see https://stackoverflow.com/questions/42586310/include-file-in-html-by-javascript-or-jquery-dynamically/42586440#42586440, https://stackoverflow.com/questions/38853539/how-to-use-a-variable-in-my-links-href-path-in-html/38854126#38854126, https://stackoverflow.com/questions/39824927/is-there-a-way-to-know-if-a-link-script-is-still-pending-or-has-it-failed/39908873#39908873 – guest271314 Aug 01 '17 at 00:30