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.
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?
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.
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?
I’ve updated the code. My bad. Doing things on the fly I was just typing away
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:
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).
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.
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.
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…)
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
just copy paste my posted code …