I’m new to Hype and am trying to use it to build a multiple-choice quiz. I have gotten as far as using InnerHTML to build a radio button form. What I would like to do is script it so that submitting the form would jump you to one scene (in the same Hype document) if you choose the right answer, or an alternate scene if you have chosen incorrectly. I am a javascript neophyte so have been trial-and-erroring without much success. Is this possible to do without leaving or reloading the page?
Yeah sure. Best thing to do (almost always) is to .zip up a copy of your doc and post it here so that we can tailor a solution that is specific to your scenario. OR offer a better one 
but, to make sure we’re not going off on any tangents or offering something that conflicts it’s best to show us what you have.
Generally, you’ll want to have a function run when the checkbox changes state and then send the user to the appropriate scene depending on the id/class of the element (or some other identifier).
This attached file is basically it, I’ve removed all my trial-and-error javascript. The first scene is the multiple choice question. The idea is that submitting the right answer (“b”) would take you to the second scene that tells you answered correctly, any other choice would jump you to the third scene that tells you you got it wrong. Eventually I’d add a link to those answer scenes that would jump you to a scene containing question number two, and repeat the whole process again.
quiz.zip (44.7 KB)
ok. Strap yourself in… we’re going for a Javascript ride 
Just a few minor changes. First of all, we change the innerHTML (the form that was created) by removing the <form></form> tags we stop the page from refreshing. We keep everything else but change the submit button to not call the function ad give it an id so that we can grab it and use it.
<p>What day of the week comes between Monday and Wednesday?</p>
<input type="radio" name="day" value="Thursday" id="a"> A. Thursday<br>
<input type="radio" name="day" value="Tuesday" id="b"> B. Tuesday<br>
<input type="radio" name="day" value="January" id="c"> C. January<br>
<p></p>
<button id="submit">Submit</button>
Next we create a function that runs when the scene loads up (on scene load). Clicking the + icon next to On Scene Load in the inspector. Choosing “Run Javascript…” and then “New Function…”
In the window that pops up we can type in the following code: (I have commented it to explain)
// create references to the elements. Submit button plus the 3 checkboxes.
var submitBtn = hypeDocument.getElementById('submit');
var checkA = hypeDocument.getElementById('a');
var checkB = hypeDocument.getElementById('b');
var checkC = hypeDocument.getElementById('c');
// set up a click handler for the submit button and check if the 'a' checkbox has been checked. If true (checkbox.checked == true)
// go to the appropriate scene if any of the others are checked then go to the wrong scene.
submitBtn.onclick = function() {
if (checkA.checked){
hypeDocument.showSceneNamed('right', hypeDocument.kSceneTransitionCrossfade, 1.1)
} else {
hypeDocument.showSceneNamed('wrong', hypeDocument.kSceneTransitionCrossfade, 1.1)
}
}
Note: There are many ways to accomplish this. For example, by taking the submit button out and replacing it with a button in Hype. Then we can run a function on click of that button rather than on scene load, etc. This is probably the better solution for the moment based on what you’ve done.
We could have also placed a function named myFunction() in the Head HTML and left the submit button as is. Again, though, I think this is the better way.
quiz-vDBear.zip (40.1 KB)
2 Likes
This is a great help, thanks so much! I may try as you suggested and replace the submit button with a Hype button – I think I know just enough now to do it without breaking anything. Thanks again!
you’re welcome.
As a hint … you can use the same code above and just run it on mouse click of the new submit button and get rid of the submitBtn reference and take away the .onclick function.
1 Like