Few questions about controlling buttons


(Greg) #1

I’m working on quiz questions which I’m going to use while a video is playing and to do that I need to be able to control buttons in a more advanced way.

So I created four buttons, buttons 1,2 and 3 change background colour when clicked and the reset button resets all the other button colours. However, I want to take his to the next level and my two questions are:

Q1: Is it possible to use the if/else statement to toggle the background colour of a button? I created this statement which is triggered by clicking a button but it doesn’t work. I’m not sure if you can use Hex numbers here.

if (hypeDocument.getElementById(“button4”).style.backgroundColor === “#F0F0F0”) {
hypeDocument.getElementById(“button4”).style.backgroundColor = “#A3A3A3”;
} else {
hypeDocument.getElementById(“button4”).style.backgroundColor = “#F0F0F0”;

Q2: Is it possible to make buttons inactive / disabled? Again, I used the code below but it didn’t work.

document.getElementById(“button4”).disabled = true;

Here is my project if you need it Buttons.hype.zip (13.4 KB)

Thanks a lot for your help.


(Hans-Gerd Claßen) #2

you’ve got to close your if-else-clause:

if (hypeDocument.getElementById("button4").style.backgroundColor === "#F0F0F0") {
    hypeDocument.getElementById("button4").style.backgroundColor = "#A3A3A3";
} else {
    hypeDocument.getElementById("button4").style.backgroundColor = "#F0F0F0";
}

as hypes buttons are not reallly of elementkind button but div they’ve got no property disabled


(Greg) #3

Sorry, I did close it and it still doesn’t work:

if (hypeDocument.getElementById(“button4”).style.backgroundColor === “#F0F0F0”) {
hypeDocument.getElementById(“button4”).style.backgroundColor = “#A3A3A3”;
} else {
hypeDocument.getElementById(“button4”).style.backgroundColor = “#F0F0F0”;
}
}

Have a look at the example (it;s the toggle colour button): Buttons.hype.zip (19.3 KB)


(Hans-Gerd Claßen) #4

now you’ve got one bracket to much :slight_smile: just copy paste my posted code …


(Greg) #5

I did and it still doesn’t work. Besides, I thought I had to have two brackets, one to close the clause and the other to close the function. Did you manage to make it work in the example I included?


(Greg) #6

I don’t think this is a problem with syntax. I tried this instead:

colour = hypeDocument.getElementById(“button4”).style.backgroundColor = “#F0F0F0”;

if(colour == "#F0F0F0") {
hypeDocument.getElementById("button4").style.backgroundColor = "#A3A3A3"
}
else {
hypeDocument.getElementById("button4").style.backgroundColor = "#F0F0F0"
}

It changes the colour of the button when I click the first time but the second time I click it doesn’t do anything. So for some reason the function is executed only once or only the first condition is executed.


#7

Hi Greg,

The “background-color” style in Hype is represented as rgb values. e.g rgb(255, 255, 255).

So your code should be / could be

var colour = hypeDocument.getElementById("button4").style.backgroundColor;
if (colour == "rgb(240, 240, 240)"){
    hypeDocument.getElementById("button4").style.backgroundColor = "rgb(163, 163, 163)";
} else {
    hypeDocument.getElementById("button4").style.backgroundColor = "rgb(240, 240, 240)";
}

or if calling this function on the same element you want to change you can use Hype’s built in “element” parameter.

var colour = element.style.backgroundColor;
if ( colour === "rgb(240, 240, 240)") {
    element.style.backgroundColor = "rgb(163, 163, 163)";
} else {
    element.style.backgroundColor = "rgb(240, 240, 240)"; 
}

Here is a nice tool to choose colours and to get the different values:
http://www.w3schools.com/colors/colors_picker.asp

####Note: There will be solutions, hopefully in the future to use Hype’s getter/setter API to set these properties to make it easier.


(Greg) #8

Hi DBear

Thanks a lot for the code. The second option (with the element parameter) works like a charm but the first one still doesn’t.

Anyway, I have one more question. If I wanted to apply the same if/else statement with the element parameter to a group of objects which share the same class name, how would I do it? Is that possible?

Thanks
Greg


#9

I’ve updated the code. My bad. Doing things on the fly I was just typing away :slight_smile:

In answer to your next question.
Run the javascript function on the group and put this code in it.

var els = element.querySelectorAll('.myClass');
var colour;
	
for (i=0; i < els.length; i++){
		
    colour = els[i].style.backgroundColor;
    if (colour === "rgb(240, 240, 240)"){
        els[i].style.backgroundColor = "rgb(152, 152, 152)";
    } else {
        els[i].style.backgroundColor = "rgb(240, 240, 240)";
    }
}

Note that the background of each grouped element must be the same for them all to change. If you have different colours then you would have to change your condition to something like:

if (colour == "rgb(240, 240, 240)" || colour == "rgb(255, 38, 0)" || colour == "rgb(79, 143, 0)") {
   // ...
}

(Greg) #11

Hi DBear

Could you please help me with setting up some buttons? I’m using Hype to create quiz questions with answers.

So I created four buttons which the user can click and change the colour to green to indicate the selected answer. Then, I want to write an if/else statement which will check if all the buttons have been changed to green and if they were then I want a green tick to display if not all buttons are green then the red cross to display (see example).

quiz.hype.zip (31.8 KB)

I tried several approaches (getting the buttons by class name etc.) but failed miserable and would really appreciate your help.

Thanks!
Greg


#12

Apologies Greg, Have been away.

quiz-vDBear.hype.zip (28.9 KB)


(Greg) #13

No worries and thank you so much for writing this code. I came up with a similar solution but my code compared to yours is very primitive. I have a few questions though and it would be great if you could answer them.

I noticed you are using the following code:
hypeDocument.getElementById(‘tick’).style.display = “none/inline”;

I’m using
hypeDocument.getElementById(‘tick’).style.visibility = “visible/hidden”;

What’s the difference and what are the advantages of using one over the other?

Also, I noticed you are using the console.log("changing to green/“changed Back” / “removed element from Array”). What is the console log and where are those values ("changing to green/“changed Back” / “removed element from Array”) defined in the code. In other words, how does the software know what these values mean.

Finally, how would you simplify this code using the getElementsByClassName. I tried to lump all the elements (q1-4) into one if statement but failed. I guess it’s not enough just to use the getElementsByClassName you also need to input additional code.

if (hypeDocument.getElementById(“q1”).style.backgroundColor === “rgb(32, 232, 28)”
&& hypeDocument.getElementById(“q2”).style.backgroundColor === “rgb(32, 232, 28)”
&& hypeDocument.getElementById(“q3”).style.backgroundColor === “rgb(32, 232, 28)”
&& hypeDocument.getElementById(“q4”).style.backgroundColor === “rgb(32, 232, 28)” {
hypeDocument.getElementById(“correct”).style.visibility = “visible”;
} else {
hypeDocument.getElementById(“incorrect”).style.visibility = “visible”;
}

Thanks a lot DBear and I’m looking forward to your reply.

Greg


#14

Hi Greg,

CSS display and visibility are not that different to each other. The main difference is

display: none;

will take the element out of the DOM and any other elements (tags) around it will fill the space.

visibility: hidden;

will hide the element but will leave it in the DOM so you would see a space where the element would be.

Either or would be fine to use but In Hype though as most elements are absolutely positioned you won’t see much of a change.

console.log() is a built-in function in most browsers. If you open the console. (CMD-I normally) you will see the different strings being output whenever the functions are run. This way you can test to see what is going on at particular times.

When using “getElementsByClassName” you are inevitably going to get an array of items. The way I did it above kind of uses this logic without going down the class name route. Also, as Hype has the ‘element’ parameter as part of the method, you can use this to change the style of whatever element is calling the function.


(Greg) #15

Thanks a lot DBear. Much appreciated :slight_smile:


(Nirmala Legay) #16

I guess it is not possible to apply something like “transitionCrossFade” when the element change from inline to none ?


(Jonathan Deutsch) #17

Opacity is a visibility feature that allows for animation; so depending on your needs you’d want to set that to 0 and then you can animate however you’d like to 1 (via hype timelines, hype’s setter API, CSS etc…)


(Nirmala Legay) #18

absolutely right ! I know that is possible about opacity, but I wondered about “none/inline” which put in or out the element from the DOM. It’s very useful especially when you have 2 buttons superposing. In this case is there any possibility to animate it?
Thank you for your reply


(Jonathan Deutsch) #19

It can only be “animated” with instantaneous transitions; what you’d want to do is additionally use opacity to do the fade in.