Forums
Thread
May 12, 2019
Quiz creation help
Basically I am working on a language application and this is the outcome I want: -user sees a picture of an animal -selects one of four different buttons to test for the correct answer -if correct...then a new picture swings in and new buttons swing in and we repeat
HERE is my question... The picture switch is pretty easy .... but I realize ( now that I have assigned actions and sounds to the first set of buttons ) that I cannot stack more options on top of these because they would be accessible from the very first slide...
I either need to bring in 4 buttons for one slide and then take them out and bring in a whole different 4 (which sounds SUPER wrong!) OR find a way to mask previous actions while going through the interface...
I hope I explained things well enough
THANK YOU SO MUCH!
Peter Lake,
I assume, I got your question clearly.
I do not see a need of bringing 4 different buttons on every slide. Are you getting the data for the slides from any db or store?
Can't create a data model that determines what would be the text content, picture, sound, action and behavior of the buttons and respective widget? You could construct the entire UI just by traversing through the data model and you do not have to manually attach anything or need to bring anything.
Consider a data model like this which nothing but an array of JSON.. (You can change/extend it based on your need, this is just the idea)
let animals = [ { 'image' : 'parrot.png', 'text': 'the parrot', 'onClick': function () { // dosomething}, . . . }, { } . . . ]Now build your html by parsing the above data model and each slide traversal could get the next, prev from the data model and render.
In this approach, you are always having 4 button instances. However you are changing their behavior based on the data model on every slide traversal(Prev or next). Let me know what do you think?