Making a solid circle blink & Password controlled form

Animation
28

Hi Rudy so here is v5.

Now working.

Enter key now submits the password and Location.

The initial problem with submitting the password form and location form was that the submit action would cause the page to reload. Which would have have been not ideal if we needed to target two forms one after another.

The sequence of javascript function calls needed to stay the same and this needed to be taken into consideration when submitting with the Enter key.

The solution is in a couple of parts.

First we capture form submissions with a bit of Javascript in the Head code.

The first bit of code allows us to identify the hypdocument and make calls to it’s APIs (function) from code outside of the hypdocument. i.e the Head code.

<script type="text/javascript"> 
 /* THIS IS USED TO ALLOW US TO US TO GET THE HYPE DOCUMENT */

function myCallback(hypeDocument, element, event) {
window.myhypedocument = hypeDocument;
}



if("HYPE_eventListeners" in window === false) {
window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":myCallback});
</script>

More on this can be found at linking-to-a-specific-scene-from-inside-and-outside-of-a-tumult-hype-document

We then set up a type of listener or trigger any time the submit action is actioned by use of the enter key while a form has focus.

<script>
 
 /* THIS IS FOR ALL THE SUBMIT FORMS. WE TRY AND ALLOW THE ENTER BUTTON TO BE USED.
 NORMALLY THE ENTER BUTTON ON A FORM SUBMIT WILL ALSO REFRESH THE PAGE.  RETURN FLASE STOPS THAT. WE ALSO HAVE TO PASS THE HYPDOCUMENT AND INOUT BUTTON ELEMENT TO THE FUNCTIONS
 
 
 */
$(this).submit(function ( ) {
 var mainID = $(event.target).closest('div').attr("id");
  var theID = mainID.split('Password')[0]
 
var thisElement = document.getElementById(theID);
 
 if  (mainID.split('Password').length >1 ){
 window.myhypedocument.functions().password(window.myhypedocument,thisElement); 
 return false;
 }else {
 
 window.myhypedocument.functions().jumpLocationBoxDown(window.myhypedocument);
  return false;
 }
});

 
</script>

(Note that using the GUI (IN OUT Button,ok button) to submit does not use the form submit action but makes calls directly to the needed function by button actions. )

Within this bit of code we use a simple way of determining which type of form triggered the submit action call, a password or Location.
Rather than test to see if say the text ‘Password’ exists in the id of the event.target’s id, we just split() the id into an array and count the arrays length. If it is greater than 1 then it was a password form.

This allows use to control which function is called next.

The functions are called in the same respect as previous version of this project and any other function thereafter will act the same and will make same additional calls they did before.

The Form

One change needs to be made to ALL the forms.

We need to change the submit actions behaviour of the forms.

Before we had code to inhibit a submit on Enter key:

<form onsubmit="return false">

we have now removed the onsubmit="return false" to allow Enter key submits which will be caught by the code in the Head discussed above. i.e:

<form>

Form Focus

We wanted the Location forms to auto focus when one pops up and becomes writable (They are set to ready-only outside of the password auth process)

This is a simple thing to do. Once we id which Location form was triggered we just tell it to focus()
This is done in the jumpLocationBoxUp()

Tabbing

We wanted to be able to tab from one entry to another in a sequential order.

Normally we would use the built in hype tab index options, and give each element a sequential index number.

But because we are using the innHTML of an element to create the form this will not work. It would focus the containing element and not the form within.

So each forms code needs to have its own sequential tab index number inline. i.e 1,2,3,4,5,…

tabindex="1"

Example.

<form>
 <input type="password" size="16" id="start" value="" tabindex="1" placeholder="Password" class="adate" style="background-color:white; 
              border: solid 0px #6E6E6E;
              height: 20px; 
              font-size:15px; 
              color:blue"><br>
 
</form>

I have only done this for the Password forms as we do not need it for the location forms since they are auto focused at the right time.

There are some changes in the Locations forms font and hight size which take into account the slight UI changes I have made.

The Location forms no longer jump to the password forms position and back since we are now using focus.

The IN OUT changes will still be stored before the location data is entered. But we now also have auto store/ok for the location data if the ok button or enter key is not used.

This will fire in 45seconds. and insures that the UI is set back to default as well as anything in the location form is stored if someone forgets.

Timestamp

We have changed the time stamp to reflect a 12 hour clock.

teacherV5.hypetemplate.zip (79.2 KB)

Please use the code in this examples functions as there may be other small changes to accommodate the changes above.
I have also introduce a small bit of jquery code and the jquery file must be included in the resources.

1 Like