Works in Preview but won't upload to Wordpress website

21

oam = zip is great to know! Thanks!!

22

Any idea why adding layouts would stop the quiz from working?

23

Can you post the new version with them.

But I would suspect that you need to use class names or Additional Attributes to id the elements. When you create layouts the duplicate elements do not get the same id as the original scene elements because that is not allowed. So they will be assigned one by the run time.
To get around this you will need to change to using Class names or attributes to find the currently correct element with the code.

To achieve this before you make your layouts give each element a class name.
I would use the same word you used for the id.
I,e where you have an element with the id of title1 give it a class name of title1.
Do the same for all you elements.

Doing this before you create the layouts will copy over the class names and save you an lot of time doing it manually on each layout.

--

You will need to adjust you code to use the class names.
But you have to find the correct element with that class on the correct layout.

Since the element that is calling the initialize functions are the layout ( on layout load ) we can use that.

Change your code to something like this for each element update.

 var title1_ = element.querySelector('.title1').id
 hypeDocument.getElementById(title1_).innerHTML = this.title;

and

    var questionDisplay_ = element.querySelector('.questionDisplay').id
	var answerADisplay_ = element.querySelector('.answerADisplay').id
	var answerBDisplay_ = element.querySelector('.answerBDisplay').id
	var answerCDisplay_ = element.querySelector('.answerCDisplay').id
	var answerDDisplay_ = element.querySelector('.answerDDisplay').id
	var answerEDisplay_ = element.querySelector('.answerEDisplay').id
	
	
	hypeDocument.getElementById(questionDisplay_).innerHTML = this.questions[this.currentSlide];
	hypeDocument.getElementById(answerADisplay_).innerHTML = this.answerA[this.currentSlide];
	hypeDocument.getElementById(answerBDisplay_).innerHTML = this.answerB[this.currentSlide];

Also

var temp2 = "answer" + this.temp1[0] + "Display";
	
	var temp2_ = element.querySelector("." + temp2).id
	
	hypeDocument.getElementById(temp2_).style.visibility = "hidden";
	this.temp1.shift();

Now this does not fully take into account resizing.
It will still mostly work but if the user is already progressing on a layout and then resizes things like the count down etc will probably reset. So you will need to account for that.

You may want to look at putting the count down time into a var along with its timeline position..

2 Likes
24

Mark, thank you so much for all that!
I'll do my best to implement it!

As requested, here's the version with layouts.

25

I wanted to implement layouts because I didn't like the big black area above the quiz on vertical iPhones. But my head is going to explode from trying to figure out the JavaScript and I have so much other work to do on this project that I'll just assume people will turn their phones horizontally for the quiz

However, I so appreciate your effort to share code with me that I'd be happy to make free commercials (sponsored time travel videos) for those of you who have helped me so far (once I'm ready to launch the website.)

In the meantime, is there code you think I might understand that would allow me to save people's scores and post them?