I am working with Hype 5 to make small and simple animations for websites, but in this project I need some deeper HTML skills - would it be possible to finde here some help?
My little project is comparable with a simple login site, where you need to enter a password by pushing separate buttons.
Short Description:
I have 2 scenes (pages) in hype 5. The first one is a landing page, the second a configuration page.
) On the landing page you need to enter a password (number 0-9). Therefore you need to push buttons (individual graphics), with a similar design like a calculator. If you enter the correct number, you push enter to verify the code and jump to the second Scene. Otherwise you can push "Delete" to enter a new code.
on the second scene, you can change/set this password.
I would be very happy if someone can help me with this function. I set the buttons, but I am not able to link these with an input field to verify a password and link them to the next page if correctly.
Thank you very, very much in advance!
Best regards
Andreas
Attached you see the effect I am searching for. The picture is not my project, but looks very similar to it.
The following post (with demo file) by @MarkHunte might be close to what You are looking for - just a little adaption for clicking on the keypad numbers.
I've implemented the parental gate function and it works absolutely fine - thank you very much for your idea!
Would it be possible to get some extra for two little questions?:
How can I adjust this code to enter an individual code with 10 digits? Currently it works with an automatic shuffle code, so it set the password automatically. I guess it wouldn't be possible to enter and save an individual password on they succeed page - isn't it?
How can I implement my buttons "Enter" and "Delete". By pressing "Enter", the password will be verified, by pressing "Delete", your input will be reset.
HypeConditionLinker extends Hype to do some simple logic without the need of custom scripting. It provides the logic-management, but let's the functional-layout-setup for how, why, when to you. it takes some arguments from the attribute-panel and fires custom-behaviors regarding the progress of the linked conditions. the logic to setup a conditionLinker is described in the above linked thread...
if the shuffle-function is removed (it's been there just for fun) the conditions are defined by the entry in the attributes-panel. it can be of any length. in the examplefile i changed it to five numbers.
I've added a reset/delete-button. it's done by simply reloading the scene. the enter-button will appear if the right keys are entered. that's the easiest way to achieve this using the extension.
this'll be something that requires some additional coding which depends on how you want to enter a new combination and where the new combination should be stored -> You've got access to a database or just want to save it locally ... ¿
///
for anybody who likes to script the last part (individual password): a new condition will be activated by changing the data-attribute -> logicIf of the element that holds the condtionLinkerInstance on HypesScenePrepareForDisplay