Making a solid circle blink & Password controlled form

Works Great Mark Your a genius.

Thanks,
Rudy

Ok. I still need to setup the localStorage before you deploy as I already stated.

By the way,

I noticed that in my last project I had some items in the wrong groups. I ‘Password’ element.

I have updated the post with the correct file.

So the structure is correct.

Hi @Rudylucasdiaz Rudy,

Ok. I think I have everything working now.

We are now using localStorage

This means if the page is reloaded, the browser is closed or quit, the settings and password used info will persist.

We do not store the actual passwords in the localStorage but use their index number in the password array that you set and add password to manually.

You will also see that the Teacher has a bypass password. that can be used to reset ALL UI and password usage to default.

You should read up on localStorage so you understand how it works.
But any settings it store will not move to machine to machine. So if the page is used on tow machines. They each will have their own localStaorage.

This is also the same per browser on each Machine.

I really like the way this has progressed. The password stuff has been fun with a dash headache :smile:

Please test this out and get back to me…

teachervPSWORDSAVE3.4Working.hypetemplate.zip (40.9 KB)

WOW !!! Mark it works great. Listen send me your address. I have a little something I would like to send you in appreciation for what you have done for me and my students. People like you are rare to find.

Thanks

Rudy
Sent from my iPad

1 Like

Hey Rudy,

Thanks for the kind words. ( see my pm )

I wanted to use your Location entry and store the info.

In this version.

When the student clicks the IN OUT button ( with correct password entered ) the Location form will jump to the IN OUT button position.

A UI will also show that has an ok button.

They enter their location and then hit the ok button.
Then the location form jumps back into place and hides its UI.

The is a shield above the Location form that stops it being used outside of the above. The shield stay in place and never moves.

To duplicate for other students do the the same as what you have done before.

The main group for the student now has a ID i.e joeBloggsGroup

The location form and its UI and shield are inside the main group

here using Joebloggs example are the new id and classes to make sure you have.

joeBloggs id = joeBloggsGroup


joeBloggsLocationGroup id = joeBloggsLocationGroup


Location id = joeBloggsLocation


joeBloggsLocationUI id = joeBloggsLocationUI
joeBloggsLocationUI class name = studentLocationUI


The sequence of events are.

IN OUT button action calls the password() function.
password() function does its stuff and then calls the buttonStyles() function
buttonStyles() function either sets the student back to IN state and stores that by calling the storage() function
or
it set them to OUT state and calls jumpLocationBoxUp() function

jumpLocationBoxUp() function will move the location form into place and also populate a global var to use later.

the ok button is then clicked and it’s click action will call the jumpLocationBoxDown() function function.
jumpLocationBoxDown() function function will move the location form back into its original place and then call the storage() function to store the changes.

teacherLocation.v1Working.hypetemplate.zip (44.5 KB)

Thats great Mark. That was what I had in mind, but I didn’t say anything cause I didn’t want to bother you anymore lol. My thoughts was to use the keyboard only and eliminate the mouse all together and use tabs to go to each area horizontally . The password would need to be executed entering the enter(return) key and the in/out would also be activated on that return key. And to “check in” the same thing in reverse. Also if the cursor can appear automatically when in the location form and also executed on a return key. You can leave the ok on the location form. If this is doable Great , This will also open the way for me to use a bar code scanner and maybe in the future I can use the scanner only having different barcodes representing location, and passwords and eliminating even the keyboard. After this I won’t bother you again lol. I hate myself for asking you all this. I’m just very ambitious thats why I need to learn Java. If it’s too complicated don’t worry its is great like it is and very greatful. On another note I insist on sending you what I have planned. How do I send a PM not sure?

Thanks
Rudy

Hi Rudy,

To use PM click on a name a hit the message button. Also under your profile you can access messages.

The only thing though is if you have a lot of students tabbing through to their name and then on is going to be a pain. ( If I understand you correctly)

Can you break this all down a bit more in to expected steps and behaviour and I will see what I can do.
I was already trying to simplify the location movement.

By the way using the enter key may be a problem. I now when I first started using the forms I disabled it. I think because it would reload the scene or something. I will test again…


Update

yep that was what it was… I will see if I can find a work around

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