I have a simple quiz that works as intended at 700 px wide. So I went to add the other layouts and it the names of the elements couldn’t be the same as the ones in the 700 wide lay out so gave the new elements the same name but added 500 (the new width) but it doesn’t seem to work. I don’t know if I’m chasing my tail here or is there a simple way to get the element names from layout to lay out?
Are you trying to set the Unique Element ID or the Element’s name in the Element list? When it doesn’t work could you describe a bit more about what you are seeing?
I’m not really good at coding so I might not be using the right terminology.
In my quiz I have the users pick a button to decided their answer. When they do, if they are correct a java script makes the yes element go from 0 opacity to .80 opacity. It does that by using the unique element ID. A Next button is also then set so people can see it and the java script becomes active and resets all the elements to 0 for the next question. That works in my first layout. I didn’t anticipate any issues when I added new layouts. But it didn’t work. So I looked into to it and all the Unique Element IDs were missing, when I added them back, I got errors that they needed to be unique from the last layout. That was a lot of new java scripts and element IDs just to have a responsive design. But I got to work and added all that new content and then one of the buttons didn’t work. It was the next button. It was just never able to find all the elements and turn them to their proper opacity. I’m not sure why. I eventually just bailed on the responsive aspect and made one at 300 wide.
Beyond what was wrong with that specific button, is there information, in a general way, on how to work with responsive designs, unique ids and java scripts? Some kind of road map?
We don’t really do anything that’s not responsive any more so making these little games responsive is job one.
We do really love Hype 3 at my shop, however. I really thought that all I was going to need to do was make the quiz work in one layout and then move stuff around in the next layout and be done with it. That’s clearly not the case! lol
Thanks for any help!
The unique element ID’s are pretty much as advertised. You can’t have more than one with the same name in any Hype document.
What I’d probably try doing is setting up a variable at the load of any given layout, something that indicates what the layout’s dimension is. Maybe something like
window.thisDimension = '500';
Then, you can name your elements appropriately in the unique element ID fields:
control_500
control_300
…and so on, placing all the ‘300’ items in the 300-wide layout, the '500’s in the 500, etc. To address them, you’d access them as:
'control_' + thisDimension;
…feeding the result into your unique element ID code.
I wonder about the workflow here, though; is there a reason you’re not just letting the entire Hype document scale, setting up the various elements to respond with the pinning options in the Metrics inspector?
Remembering the width and setting the unique ids appropriately as @warrenao suggests is definitely a good approach.
Another option is to use Class Names instead of Unique Element ids. Many elements can share the same Class Name and then you can just iterate through elements that have that class and set the properties you want.
A third option is to add a timeline with the same name to every scene, for example ‘correctAnswer’. Then when your js evaluates a correct answer simply call:
hypeDocument.startTimelineNamed('correctAnswer', hypeDocument.kDirectionForward);
This timeline could set the appropriate elements opacity and innerHTML.
1 Like