Changing button colors when clicked

Elements
1

Hi I am a teacher and would love to make a type of electronic bulletin board for students to check out and check in when they are in class. So I thought I couls have a list with their names and a button that reads out and in and change colors when clicked . And create a time stamp if possible

I tried to make a simple button change colors when clicked on. I tried applying a Color when in normal state and then another Color when pressed but when I preview it . It turns to the new Color only while I have it pressed and goes back to the normal state again. How can I make it stay on the pressed Color. Also is there a way of inserting a time stamp when the button is pressed.

Thanks for any help. I am very new at this

2

This method is one way to toggle a button state: How to make a Single Toggle Button

3

I think for the type of button you want you could use a rectangle element and some javascript.

The reason is it will be easier to do for multiple buttons rather than using timelines.

In this example I have placed a button with two text elements. One button is for the name and the other for the timestamp.

All three elements are placed in a group to make it easier to duplicate.

Each button uses a class name attendanceButton which is used to iterate over on a init javascript at scene load.

 //--  We set the buttons up at sceneload
	var buttons = document.getElementsByClassName('attendanceButton');
	 
	 
	 for (var i =0;i < buttons.length; i++){
	 
	 
buttons[i].style.backgroundColor = "red";

buttons[i].innerHTML  =  "OUT";

Each button also has an ID that is the same as the name. i.e Student name ‘Joe Bloggs’ ID name joeBloggs.

Each date text element will use a similar ID joeBloggsDate

These IDs are used in the javascript to associate the button with the correct date text element.

	 var thisButton = element;
    var buttonBackgroundColor = element.style.backgroundColor ;
     var buttonDate =  hypeDocument.getElementById(element.id + 'Date');
     var thisTimeStamp =  new Date();
     
// console.log(buttonBackgroundColor);
 
if (buttonBackgroundColor == "red") {

thisButton.style.backgroundColor = "Green";
buttonDate.innerHTML  =    thisTimeStamp 
thisButton.innerHTML  =  "IN";
} else {

element.style.backgroundColor = "red";

buttonDate.innerHTML  =   thisTimeStamp 
thisButton.innerHTML  =  "OUT";
}

Screen Shot 2015-07-29 at 17.36.41.JPG1226×242 35.9 KB

When the scene loads all the entries look like Joe Bloggs in the image above.

Clicking the button will toggle it to in or out and time stamp it.

teacher.hype.zip (18.2 KB)

2 Likes
4

Thank you so much Mark. I can really use this now

Rudy

5

Mark. I loaded the scene and it works very well. I copied one of the buttons in order to add more students and pasted it and it also worked but the date did not stamp. I know I know I must be doing something wrong trying to add more students.

Thanks
Rudy

6

Rudy

You have to give the copied buttons unique ID’s.

look at the identity inspector for the previous buttons and the date fields and create ID’s in a similar way for your duplicated button.

So if you duplicate and your new student is Jim Bloggs for example then just give the elements ID’s such as jimBloggs and jimBloggsDate and so on

D

1 Like
7

Thank you Dbear it worked

Rudy

8

Hi DBear, I used your method and it worked perfectly. However, when I change the color name from “red” to hex code, it stops working. I’m new to Hype so I feel like I must be missing something very simple.

9

do you have your hex code in the quotes

"#ff0000";

also this code must match the element’s style background color.

One thing to note, I believe Hype uses rgb for it’s backgroundColor attribute so instead of Hex you could use rgb(num, num, num) (“num” representing a value from 0 - 255)

http://hex.colorrrs.com/ (converter from hex to rgb)

So, red would be rgb(255, 0, 0)

10

Still not working… I can get it to change color once but not change back. If I use hex code or RGB for the primary 16 colors, that works. But it doesn’t work for other colors. Thanks for your help!

11

It would probably be quicker if you share your document. :wink:

Not sure what you mean by “doesn’t work for the other colours” any hex code can be represented in rgb values. Make sure you write it with spaces. Also, the link I shared above would show you the rgb values for any hex colour.

if (element.style.backgroundColor == "rgb(255, 0, 0)") {
    ...
}

not

if (element.style.backgroundColor == "rgb(255,0,0)") {
    ...
}
1 Like
12

You solved it! It was the spaces. Thank you so much!!!