Push user to a scene on successful password entry

Did you change the “Scene Name” in the script? Its “main1” in the original

hypeDocument.showSceneNamed('main1', hypeDocument.kSceneTransitionCrossfade, 1.1)

It seems that I can only have one password in a hype document.

Here is password script 1:

function passwordValididator1(hypeDocument, element, event)  {
var password = document.getElementById("password").childNodes[1].value
if (password == "Fultz"){
    hypeDocument.showSceneNamed('Hall of Honor',
 hypeDocument.kSceneTransitionCrossfade, 1.1)

Here is script 2... A copy of the first one with changed pages and passwords.

function passwordValididator1(hypeDocument, element, event)  {
var password = document.getElementById("password").childNodes[1].value
if (password == "mike"){
 hypeDocument.kSceneTransitionCrossfade, 1.1)

Thanks for your help. I don't know scripts at all. I am a 6th grade teacher and need these for my gamified site.

They are both named the same, try renaming one of the scripts

Typo… They are passwordValididator1 and passwordValididator2

Still doesn’t work even with them named differently.

You are unable to have two elements with the same ID, and to functions with the same name, as the browser will not understand which it is meant to look at.

So the code you are looking for is like:

function passwordValididatorS1(hypeDocument, element, event)  {
    var password = document.getElementById("S1password").childNodes[1].value
if (password == "Fultz") {
    hypeDocument.showSceneNamed('Hall of Honor', hypeDocument.kSceneTransitionCrossfade, 1.1)

function passwordValididatorS2(hypeDocument, element, event)  {
    var password = document.getElementById("S2password").childNodes[1].value
if (password == "mike"){
    hypeDocument.showSceneNamed('last', hypeDocument.kSceneTransitionCrossfade, 1.1)

This means you would need a <input> element named accordingly in each scene.

1 Like

So the code below told me to make something like a square and paste this code in. I tried changing the imput type and it didn’t work. Any help would be great thanks… I think you are on to something. I just don’t know what you mean by make an imput that uses that code. Sorry I just can’t figure this out as I don’t know this code stuff at all. Much appreciated. [quote=“MarkHunte, post:2, topic:2027”]

Add a Rectangle elements to your first scene.

Then edit its innerHTML by double clicking on it and click the edit button that shows underneath it.

2,paste this code into it.

<div id=“password” class=“password”>
<input type=“password” id=“answer” class=“textInput” placeholder=“Password”>


Take a look at this:

passValidation.hype.zip (29.0 KB)

@MrAddy beat me to the punch…

Form password test.hype.zip (31.8 KB)

Pasword 1 = jawr
Pasword 2 = rawr


Hey Mark… I found this other post you had with the virtual keyboard:

Thank you, and very cool.
Now, the hard part… I am JS nobody (what comes before novice?) but need to find a way to incorporate these two files… Mr’Addy’s PassValidation and your Virtual Keyboard.

We are trying to produce a stand alone kiosk without keyboard, but require a password entry via keyboard.

Any suggestions on how one might combine these two?
If someone was able to help with this, we have budget.

Thanks Kindly.

Derek, ( @Chizz )

Here you go.

passwordKioskKeyboard.hypetemplate.zip (85.7 KB)

1 Like

Hey man… lol, that’s fantastic!
Thanks kindly…
What a great community - hopefully I can return the favor some where :smile:

1 Like

Hey Mark.
I copied your primary scene and pasted it into my file, works like a charm, thanks again.

I have tried to follow your code and even something as simple as dragging corner handles in the scene to try an enlarge the keyboard. Is there a line in the script somewhere that dictates the size of the keyboard? How does one do this? I need to make it about 3x as large.

Thanks again…

Hi Derek ( @Chizz ),

You need to select all the letter and symbol keys and drag a corner to resize them all together. Then change the Text size.
The is no magic button I am afraid.

Other buttons like the shift and enter you will need to do separately especially the Enter key which is made of two elements and in its own group.

Then re jig the layout in the Groups width and height to make sure everything will show correctly in the timelines.

Here is a example of it larger. It only took a couple of minutes to adjust. But I know how this project is setup. But you should be able to figure it out.

passwordKioskKeyboardv2-1.hypetemplate.zip (80.4 KB)

1 Like

Thanks Mark.
It was pretty simple.
As a new PRO user, the hardest part was figuring out what the hell all those yellow/pink outlines are, and how to manage them!

If any Hype support dudes are reading this - there’s an idea for your next tutorial :wink:
Thanks again… that was incredibly helpful.

Hey Mark…
I really hate to keep bugging you with my newbie requests… but if you have a minute and could impart some further wisdom, I would be grateful.

I have tried every way I know how to duplicate the symbol and all, so that I can use it on other pages - with a new or different password. I can get it on to other pages, but I guess the symbol stays the same and password entry on one page affects the other.

As a new PRO user, I can’t figure out how to save the symbol as a unique instance.

Also… can you provide some suggestions on how I could reset the password field, and scroll the keyboard back up on scene exit?

I realize it’s a lot to ask.
Thanks again for your time and assistance.


I just copied and pasted the symbol into a new scene.

Yes the symbol properties will stay the same.

So you want to look at it from a different angle.

Use code to determine which password scene you are in.
Then in the code set the password to check to what ever is for that scene.
Also at the same time set the jump to scene name to the corresponding correct password scene. ( I assume different for each person)

I have incorporated the back to last scene code that @Daniel created for use but used my Auto Title Scene code idea to watch for all scene unloads rather than add a call for each scene individually.

The keyboard already scrolls up on exit. I originally did this because if I left it down the click for the re-try button would also (not sure why) click a key on the keyboard when returning back.

So I had the keyboard go back up on exit and then come back down again. This stopped the key being clicked.

I have removed the behaviour trigger that dropped the keyboard back down after retry.

And I thought I had already set the code before to wipe the old attempt. But I must have forgot to add the extra line to do that which is just setting the textaera’s value to “”

thisName.value = "";

All of this is probably just one way of doing this and the simplest I could think of.

pswdTest.hype.zip (98.6 KB)


for the pinball-game i did a small custom user/Password-registration that uses localStorage and a small php-setup to save settings and results in a txtfile.


I haven’t had time to check through all of this yet, but again, your time and experience are very much appreciated.
Thank You.

Are there any more secure procedures to protect my password? Thank you for the example. I understood many things by following your tutorial that read the documentation. Thank you