iBooks Author Widget .js issues?

Exporting & Previewing iBooks
1

Hi all,

I'm trying to test export a 'simple' puzzle page on to iBooks widget, using an example by @h_classen (thanks!) here: How do you make an element draggable? - #8 by h_classen

It works as intended in a browser (desktop and mobile) but the scripts don't seem to run in iBook widget. I read this at Intro to Exporting iBooks Widgets :

iOS 11 has new restrictions on external content which causes HTML widgets, external video, and other external content to fail.

Does this mean that external scripts won't be loaded?

I embedded the external hitCheck.js in the <head> with <script> which again works in a browser but still not in iBooks..

Hype file: Puzzle.zip (1.8 MB)

2

i’ve got no experience with iBooks, but does it make a difference if you include the external js¿Puzzle_js_intern.hype.zip (1.8 MB)

1 Like
3

It means that ones from an online domain won't; your hitCheck.js that is embedded should be fine. You've done the correct steps to get it to run.

When I preview via iBooks Author to iBooks running on an iPad, the widget works for me and I'm able to play the puzzle. What are you seeing?

1 Like
4

Previewing on Mac iBooks works well for me, but I did hit an issue that when previewing it within iBooks Author the entire application immediately crashes.

The iOS 11 restrictions I mentioned in my intro post has to do with requests to external servers, but it looks like everything you’re doing is very local.

5

Apologies all, I must’ve used an earlier version of Hype export in which I had included the external script in the <head> which, upon closer inspection, broke the page.

Now working fine on iBooks author. @jonathan; iBooks Author won’t show the preview in the app itself for me either, but doesn’t crash. Works fine when previewed in Apple Books on MacOS and iPad.

@h_classen Thanks for the non-minified version too, helpful code in there!

6

Right, I was still having some gremlins in my export and realised there’s an issue with the naming of the export from Hype (more accurately, error rises in xxx_hype_generated_script.js). The file I attached in my initial post was just named ‘puzzle’ while my actual project name starts with a number.

I have now tested exporting the file starting with a number and with an alphabetic character. When exported, name starting with a number, I get this error in dev console:

Error in undefined: SyntaxError: Failed to execute 'querySelector' on 'Document': '#123_hype_container > .HYPE_scene[style*="block"]' is not a valid selector.

I tracked it back and the issue seems to be in the external script, in @h_classen’s attached version above ( Puzzle_js_intern.hype.zip ), lines 79-85:

/**
* hypeDocument.currentSceneElement 1.1
* @return {HTMLDivElement} gives you the current scene element
*/
hypeDocument.currentSceneElement = function(){
    return document.querySelector('#'+this.documentId()+' > .HYPE_scene[style*="block"]');
}

Why would this line cause exported to break, if you name your export starting with a number? I assume this is an issue with the external script, rather than how Hype generates xxx_hype_generated_script.js and exports the project?

Here are the exports:
a.zip (987.9 KB)
1.zip (987.9 KB)

7

with the last update Hype offers a method to get the current sceneid.

you can use this instead to get the element …

Anyway: it’s never a good idea to start filenames with numbers :slight_smile:

8

The document name becomes the ID; while technically it should be okay for an ID to start with a number in HTML5, it appears that are corners of browsers that don’t like it so much since this used to not be acceptable. We do have an item on our todo list to generate safer IDs.