Sorry, to chime in. This code block is incorrect so won't change anything. Understand that you are new. Here is the way to layout what you want.
var rectangleA = hypeDocument.getElementById("Rectangle_A");
var rectangleB = hypeDocument.getElementById("Rectangle_B");
rectangleA.style.color="#69619C";
rectangleB.style.color="#94515F";
Hi,
I tried to apply the code here but ended up interfering with the remaining code and blocked all actions. I’m not a programmer and I’m learning a lot from you. Really I have many doubts and but I confess that I could not even understand the basics. For example, I could not understand the connection between the parts of the code. I commit to study better the code and try to understand how Mark did. I thank you all for help.
If all actions were blocked you probably entered a syntax error. ( mis-typed or not real code )
You will get an error being logged in the console. Do a google for browser console
Mark,
I want to thank you because you already helped me a lot. Much more than you think. These details, I want to implement the project, I will try to implement. I will also make the course the link you passed.
Good to know there are people like you!
Thank you very much! 
Hello Mark,
Good Morning!
I finished the project you were helping me and thank the code you did. I’m already getting better understand and even made a change to another scene and worked properly. 
I’ll send you the final aquiivo to send you as it became. I want to know if you could help me make the top bar stay the same color of the active group. I tried to do here but I did know not make it.
interatividade-Animais-final v3.zip (2.1 MB)
Can you help me?
Sorry could not resist in making some changes and getting rid of some duplication. ( not all)
I got rid of the third scene and the JS for it. And renamed scene two.
Both large selection images are both on scene two with opacity set to 0.
All Humanos and Mao image have a class list of “Humanos selectonElement” and “Moa selectonElement”
The Humanos actually has “Moa selectonElement” and the Moa has “Humanos selectonElement” for the very large ones on scene 2.
Al the other Humanos and Mao have their own name as expected.
The reason for this switching around the classes for the large images is because when you click either the small images or the images on scene one we can simply iterate over all the elements with either Humanos or Mao and hide or show them. So the large images on scene two need to be in reverse of the show or hide of the small images and scene 1 images.
You can click the selection in scene 1 and it will run a second JS function that works out which elements was clicked.
It will then hide or show all the Humanos or Mao in scene two.
The cinza elements by hiding behind the small Humanos and Mao element on top.
I removed the text background elements at the top. This means we can just colour the text background.
interatividade-Animais-final MHV5.hype.zip (1.3 MB)
Slight update forgot to setup the Animals Scale vs Hand and Animals Scale vs human text.
These now work the same as the Large images with the reverse class name.
Mark, you’re the man!
Really I want to learn javascript. You make it sound so easy! Thank you very much. However, the second scene has different animals from the scene 1. This is the reason for another scene. Do you think I get apply the code, bar color, in the version I sent you before?
Lol,
Sorry it looked the same to me. Just the Hand , Human text changed.
One sec…
Ok so tha was fun.
Keeping on last version I added back the other buttons to scene 2.
There is code now that shows/hides the buttons as needed and also some to reset the scene between changes of selection.
This is all done in the humanos_hand() function
UPDATED: forgot to reset the text fields
interatividade-Animais-final MHV6.hype.zip (2.0 MB)
if you just want to keep your original final with three scenes then add lines like text_A.style.backgroundColor = element.style.backgroundColor;
like shown here
//-- MAKE CHANGES TO THE IMAGES AND TEXT DEPENDING ON THE COUNTER NUMBER
switch( window.clickNumber) {
case 1:
comp_A.style.backgroundImage = "url('${resourcesFolderName}/" + element.id + "')" ;
text_A.innerHTML = element.id.substring(0, element.id.length - 4);
text_A.style.backgroundColor = element.style.backgroundColor;
subText_A.innerHTML = element.title
break;
case 2:
comp_B.style.backgroundImage = "url('${resourcesFolderName}/" + element.id + "')" ;
text_B.innerHTML = element.id.substring(0, element.id.length - 4);
text_B.style.backgroundColor = element.style.backgroundColor;
subText_B.innerHTML = element.title
//-- RESET THE COUNTER
window.clickNumber = 0;
break;
}Slight update above.
Thank you Mark. It was Fantastic!
I would appreciate see your work, you can give me links?
Most of my stuff I do for personal or for work so cannot really show you.
I have a lot of posts here though that have examples of things I have helped with like your problem which is one of the main reasons I am here… to help and expand my thinking…
Hello Mark, how are you? Finally the book is ready for publication at the Apple Ibooks Store. We delayed because we were not able to finalize the registration for interactive sales with Apple. Our editor is Brazilian.
Now, when everything was finally going well, the file gave an ITMS-9000 ERROR. I’ll attach the image here. If you can guide me I do not know how to correct.
Look, as I promised I put the credits on your contribution on the worksheet.
See the cover of the book how beautiful it was.
Thank you. thats really cool. 
The cover looks beautiful.
As to the error.
It say it it’s self the path is to long. Or rather the number of Characters exceeds 180.
My suggestion is to try and shorten the name of the project.
to something like
int_Animal_Well_Mod_final_v4
