Interactive Quiz

Poetry102.html.zip (8.3 KB) I have an interactive reading comprehension quiz, attached. I would like to embed it within a Hype document so some links trigger Hype animations (other links advance the quiz, of course). The result would be more of a multimedia interactive quiz or story.

I would greatly appreciate suggestions on how to make this work. Thanks.

I just tested your quiz, but I found out by hovering over the answers u can find out whats the right answer or not

It would say #sec_04 by hovering over the right answer or any other number for other questions, and the other 3 faulty answers show "Nay" when hovering over them.

Anyways, to come back to your question, I had the same question a few days ago, how interactions on a webpage can react with a Hype timeline. With some help from Daniel and Jonathan its pretty easy to link any timeline or scene to a javascript function: Able to start a timeline in external onpage Javascript?

Poetry102.hype.zip (34.6 KB)
Thanks for the reference. It led me to Tumult Hype Documentation.

I put my Poetry102.html into a Hype HTML Widget, which eliminates the right-answer give-away. For testing a trigger to animation, I added a button and hyperlink to go another scene.

<button type="button" onclick ="HYPE.documents['Poetry102'].showSceneNamed('Scene2',HYPE.documents['Poetry102'].kSceneTransitionPushRightToLeft);">
   Show Scene 2 (Push Right to Left)
 </button>
 
 <p><a href="#" onclick="HYPE.documents['Poetry102'].showNextScene(HYPE.documents['Poetry102'].kSceneTransitionCrossfade);">Crossfade to next Scene</a>.</p>

Neither work as intended. I suspect the code needed for the hypertext is capturing the click needed by the API, but that's beyond my JavaScript skillset.

Is there a workaround?

The issue is that your code is in an iframe, which is a separate webpage from the containing Hype document.

Generally speaking, you should be able to access the parent via using window.parent ahead of your calls to the hype document object:

<button type="button" onclick ="window.parent.HYPE.documents['Poetry102'].showSceneNamed('Untitled Scene 2',window.parent.HYPE.documents['Poetry102'].kSceneTransitionPushRightToLeft);">
   Show Scene 2 (Push Right to Left)
 </button>
 
 <p><a href="#" onclick="window.parent.HYPE.documents['Poetry102'].showNextScene(window.parent.HYPE.documents['Poetry102'].kSceneTransitionCrossfade);">Crossfade to next Scene</a>.</p>

Secondarily, I noticed that you were using "Scene2" when in that particular document it is titled as "Untitled Scene 2". I've corrected that in the above.

Note that you will need to export this to work so that the document is properly named, and probably also make sure you are using an HTTP/HTTPS web server (not a file:/// URL) to avoid browser security restrictions.

Thanks Jonathan. I think the onclick—whether for the button or link—is being taken by the code running the hypertext (acknowledged in the example). Perhaps it needs to be sequenced something like this: if a link is clicked, check whether it goes to an href; if not, check whether it goes to an animation; if not, declare it a broken link.

Here are some alternatives approaches to Quizzes:

Layer revealer based version

Hype Petite Vue version

Using (petite) Vue in Hype - #11 by MaxZieb

1 Like

Poetry102GSAP.html.zip (8.4 KB)

Thanks MaxZieb.

Perhaps I have been over-thinking the problem for my purposes. I managed to make it work with GreenSock by calling a function with the animation.

And it's not even Hype anymore :slight_smile: