I’m currently working on an interactive quiz that handles the display of questions via JavaScript.
My intension was to use responsive layouts for different button sizes and arrangements in mobile devices.
Whenever I add a new layout, it appears Hype simply duplicates the existing content and puts it in a different layout container. All objects in this new layout lose their original ID an won’t be addressable via JavaScript, which means, they’re not the same objects with alternate attributes and positioning.
This is not exactly the idea of responsive that I had in mind for this project.
Did anyone here experience the same or find a workaround for the described matter? Thanks a lot in advance for any ideas or suggestions!
If you're using breakpoints, then just expand on your ID names. So, IDs could be... quiz360, quiz640, quiz960... then you just grab the size of the background to know which IDs to use. That's theoretical though. I haven't had the need to do anything that involved.
Hey Michael,
thanks a lot for your reply and your example file. That’s a very good and nicely elaborated piece.
I was just stunned to see that Hype duplicates the content as opposed to applying different styling to it.
Another issue is the fact that the timelines appears to progress when scaling the browser window (though that’s not very likely to happen during a quiz).
I’ll have a look at your suggestion for IDs with size refs (and will duplicate the .innerHTML calls accordingly).
It’s not about the styling. But I did assume that the content itself would be shared across layouts, then distributed, sized and styled according to viewport dimensions.
Standard HTML uses the exact same content across responsive layouts, just the styling differs. In Hype content is actually duplicated. No worries anyway, that can be dealt with.