Making a solid circle blink & Password controlled form

I was afried it was for the other Project and when playing with this before I was thinking a single button.

It Can be done in JS but it would be with timers and creating either multiple on the fly of globally creating one for each student. While trying this out, (and giving my self a nose bleed trying to do them on the fly :scream: ) I realised we could just use a symbol with its own blink timeline.

And add the symbol to the group/s.

The symbol is always blinking. But hitting the In-Out button will toggle it’s Opacity.

Each blink symbol will use the same type of ID the other elements need to function.

So for JoBloggs the symbol will use joeBloggsBlink as it’s ID

Love it, now nice and simple. :smile:

teacherv2.hypetemplate.zip (23.7 KB)

1 Like

nothing like a good nosebleed!!
:smile:

1 Like

Thank You Mark it works great. This has motivated me to learn some basic java script

Thanks again

Rudy

2 Likes

Hi Mark If I am bothering you too much please let me know I am very handy and usually can resolve things on my own but this coding thing is totally out of my field of experience.
I am ecstatic with the results i got with your help. But as I saw how i will be implementing it I had to include one more detail.

It would be awesome if I had another column where it would ask for a password (it could just be one password) and if the student typed the password correctly then a green rectangle with the word permission granted would appear if not the correct password then a red rectangle would appear with the word permission denied.

This password would be located on the Hall pass that i require them to take when they go out.
if possible when they enter the password it could be private like ************
It will be only one password for all my students. I’ll just make it complicated and ill change it every now and then
This column does not have to have any interaction with the other columns you created for me.

I know that this is a lot to ask But this would make my class project for my students complete. Since this is a personal thing im doing in my class just for my students we don’t have the funds to purchase software already designed for this.

Thanks Mark I would really appreciate this as well as my students

Rudy

Ha ha, I was wondering when this part would come up.

Hype by itself really isn’t designed for this. It uses JavaScript, which can simply be downloaded and read. So, where would the passwords be stored? That’s usually handed with something like PHP/MySQL.

If you want to learn more about JavaScript, here’s a nice site… http://www.w3schools.com/js/default.asp

Hi Rudy,

I don’t mind, If I have time to do this stuff I will as I use these questions as a way of learning for myself.

Do you mean each student has a password by their name?.

So the students click themselves in and out?
If so is this password to show that they have actually permission to be out if the have clicked out.

Would it be better to link the password to actual permission to change IN/OUT.

Can you give some more detail on typical usage… And if possible (with names changed) you post your own project so I can get a better idea of it.

Cheers

1 Like

First of all Thank Yinout Great.hype.zip (23.1 KB) ou very much for your time
Attached is the file

I would like the default state of the password box to be grey. If the student inputs the correct password it will be green and state “permission granted”. As permission is granted I would like the students personal box to turn red indicating they are “OUT”. If the student enters the incorrect password then the grey button will turn red and state "permission denied"and their personal box will remain green “IN”. I would like for there to be five possible passwords to trigger “permission granted”. The passwords when typed in should be in the format “*****”. When the last password digit is entered I would like it to trigger the response of “permission denied” and “permission granted” without having to hit enter, if possible.

Then when the student returns and is ready to log back in from their “out” state as already designed I would like the password box to return back to grey, the default.

I hope that helps

Thank You so much
Rudy

So I was thinking along the lines of,

There is no need to have something saying denied or granted. Normally you would only see this for a brief period of time and then it would disappear.

One of the reasons that having denied or granted. labels would not be useful is that it would lead to conflicting statements.
They have had access to change but because the button is clicked again it say the have not. Using it to tell if someone has attempted to gain access would only work if you were logging attempts.

So the simpler way is to shield the IN/OUT buttons access with the password.
Entering a correct code gives them 30 seconds to change IN/OUT before the shield closes again.

This way you only have one statement. They are either IN or OUT regardless of if the try and change it with a wrong password.

Hope that makes sense.

Limiting password usage may take a bit more thought.
Can you go into more details of what you expect.
For example do the used password come back in to circuit when a student is back IN ?


inout Great_1.hypetemplate.zip (34.9 KB)

1 Like

Mark it looks really good. It would be nice with limited pw usage only because at times I have 2 or three students that will go out at the same time . So I wouldn’t want one student to enter and share the password for both while only taking one hall pass. So It would be good if one password would go out of circulation while it is being used until that password is checked back in . Only of course if it isn’t too much trouble. Other than that I am very grateful for what you have done.
Thanks
Rudy

Mark I know you are probably very busy . I’m excited to use this in my class . Do u think this is something u can still help me with? And as a reminder yes, I will need when the pw is used then that same password would be used to check back in and not until it is checked back in can it be used by another student .That would make this project complete. Again thank you so much assistance.
Sorry for being such a pain.

Rudy

Hi Rudy,
I will PM you in a sec.

Hi @Rudylucasdiaz,

I think I have most of it working now, Can you test this to make sure it works as expected.

It is not ready to deploy yet as I have not done the code for loacalStorage so every thing will be lost if the page is reloaded or closed.

So bearing that in mind this is just so you can look at the behaviour yourself, not for you students yet.

There are five passwords listed in the password function.

A student will enter the password and then click the IN OUT button.

If the Password is wrong or not entered. No change will take place.

If the password is correct and the Student is not already using a another password the IN OUT will toggle.
If the password is correct and the Student IS already using a another password the IN OUT will NOT toggle.

Any passwords in use cannot be used under another name until it is put back in the pool of password.
This is done by the student using the password twice. They can only use it under one name.
I have got rid of the unlock and shield as once I had the password code done I realised that they could unlock the IN OUT button but not change anything. This would through the passwords into not being used correctly i.e a student would be locked out and unable to make a change, therefore misinforming you if they are in or out.

The simple solution was to use the IN OUT button to fire the password check and then fire the IN OUT code.

Hope that makes sense.


Updated…

teachervPSWAORDSAVE2_2Working.hype.zip (33.2 KB)

1 Like

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