Long Scrolling Page with random dynamic Quiz
July 5, 2023 12:00 AM
So im back :-) As a long-time Lectora user, i was away for a while, but now with the scrolling pages i am diving into Lectora again.
So based on a template ( Sabre Course Starter ) i made a scrolling template. That works fine. Then the next step was creating a random quiz on it. Oops... those scrolling templates do not support random functionality. Ok...then make it myself by using some old Javascript tricks. Although the options in questions donot support variables.... damn another hurdle to overcome... i managed to get the template working completely random. So i now have a scrolling page that randomly out of a series of questions shows 10 of them. That all works and is fine.
But as the questions, options and feedback are random, i donot want to design a fixed layout, but want it to adapt to the length of the text in the question.
So i add images to a textfield, so i can nicely layout them... now the issue arises... when using a variable for the text... and adding a image below it. The moment i dynamically change the variable... the text runs behind the image. I want it to be pushed down !
Is that possible ?
Discussion (14)
Thanks Joe, that works when using the option on the right. Using a variable and after that calling that function. Weird thing however is that it doesnot work in the option on the left where i have a function that gets the text in the textfield and changes that. No problem for now however, i stick to using a variable :-)
Love this in the Lectora community. Even with this kind of complex Javascript related issues someone always helps :-)
Hi Joe,
Sharing a sample showing more or less what i want to achieve.
The button on top changes inline variables. The inline images in the textfield nicely jump down, so thats fine. But as i want quizzes, feedback and options in this setup... alas these Lectora elements cannot be put inline in a textfield.
So i am using the inline textfield as dummy. And want to get the y-position of the images inside it...so i can then move other elements to the same position. That way i can make a normal quiz with dynamic texts, feedback and options... and move the elements to the correct y-position.
If you check the sample however you will notice that somehow the y-value is off and the second element will not be moved down correctly.
Hope you can help.
Kind regards,
Math
If there was a fully exposed API it would be easy to detect a "size of text object changed" event and react programmatically.
Just today figured out that when using trivPage. in the browser console you get a load of functions related to the API.. not documented ofcourse, but a start
So at the moment i managed to create a single textfield that gets populated with dynamic variables and images.
As i want to make a long scrolling quiz of it i tried adding questions and/or buttons into the textfield so i can make them dynamic. That didnot work so now im remaking quizzes with just text and images in the textfield As in the sample above. If the text changes, images and other texts will be pushed down making it perfectly dynamic. Would be great if buttons and questions and quizzes also could be added inline to a textfield.
Hi Math! Welcome back, great to see you here!
Can you post a little example project? I'll take a look and see if I have any ideas.
I've been begging for API docs since before you and I met at the 2016 Lectora Users Conference.
Basically i figured out....that when manually editing the text in the editor... it nicely pushes the image down as expected. When however changing the text in a variable or dynamically changing the text... the image obscures the text.
So here is the cleaned up part with a textfield with an inline image. When you use normal static text in it, and add more text in the editor...the image gets pushed down normally. When you try to do something similar but then with dynamic text or a variable... then the text ( as showing in the sample ) will run in the back of the image.
I tried to give an extra to the last line of the texts, when you click the buttons you will see a red block appearing downbelow the textfield... but it doesnot appear at the last textline, but rather at the last part of the textfield as a whole. If we could target the last line of the text, we could get a y-position from that and reposition the image accordingly.
Hope this all makes sense to you Joe...if not, i will try and explain better :-)
Showing it in images here too.
The sample published.
Then clicking both buttons at top. Changing the texts.
As you can see the text runs behind the images ;-)
Doing this with static text in the editor results in the effect wanted.
This behaviour i want with variables or dynamic text too.
@
MathNotermans
we also opened a ticket for the dev team adjust where the embedded object is when text is changed
try a Run JavaScript action after doing the Modify Variable, put in this line:
trivPage.alignEmbObjs();
Thats great, thx. Joe's fix is working though :-) Documentation on the API to find solutions like this myself would be great :-)
Hi Joe, Have to say Lectora did change quite a bit the last years and it is improved :-)
Will clean up the project at hand and share it.
Kind regards,
Math
Oh my bringing back great memories. Yes that was quite a while ago :-) Actually working now on multiplayer games in Lectora ;-)