Dynamic scrolling page with quiz
July 23, 2023 12:00 AM
So i have this dynamic setup where i can create fully working quizzes, that then will be shown on a long scrolling page. The issue i have now is with formatting the text input into the input fields. Ideally i want the input fields to behave more like TinyMce fields in which the user can format the text somewhat more...spaces, bold, italic...things like that. My final texts ( as you can see in the sample ) now is just that...plain text. I need a simple way to add classes to specific texts and lines, so it looks better in the final result.
In the gif added you see it working. Especially when clicking 'Controleer' you can notice that the text showing the feedback is quite unformatted.
Is there an easy way to make inputfields act as TinyMCE like editors ?
Discussion (5)
Continuing with this i created a custom CKEditor with just the functionality i needed. That works great. I did notice that it works with variables too...at least partially. As you can see in the gif below the color of the text is used...the size and font not. im gonna do some testing whether sending it as html to a textfield works better.
Diving a bit deeper into this i found that Lectora uses CKEditor. So i downloaded a version of CKEditor, added it to the project and tried adding a WYSIWYG editor to a inputfield with this code.
var actualInputField = getDisplayDocument().querySelector("#frmobj265")
ClassicEditor
.create(actualInputField)
.catch( error => {
console.error( error );
} );
And that partially worked. It does show the classic CKEditor and it even works on the texts...but when saving that as variable it fails. As seen in the screen below.
Getting quite some error messages. As Lectora uses CKEditor there probably is some triv command to enable Rich Text editing on inputfields.
Maybe you can help Joe ?
As happens often... probably solved it already. When adding the CKEditor classnames change, thus another selection for the values to write to the variable is needed.
Before it was "#tobj265" but when adding the CKEditor and editing the Rich Texts... the selector will be something like getDisplayDocument().querySelector("#tobj265 > div > div.ck.ck-editor__main > div")...
Not sure though as i use only the variable...
Testing now if i get the variable...
var newText = VarinputVraag1.getValue();
console.log("newText: "+newText);
Varvraag.set(newText);
Yeah..somehow i don't update my variable properly anymore after the CKEditor is active..
Getting this in console.
newText: Vul de vraag hier in...
So the old value...
Well fixed this now to:
var myNewText = getDisplayDocument().querySelector("#tobj265 > div > div.ck.ck-editor__main > div").innerHTML;
console.log("myNewText: "+myNewText);
Varvraag.set(myNewText);
And that works in the sense that i now get the variable set to the proper text. Alas i loose my formatting due to the fact the formatting of the inline text where the var is shown is kept. So i probably need to redesign this, not using variables, but replacing innerHTML.
i still do get some errormessages when selecting a part of the typed text to format it.
If there is a way to directly use CKEditor used in Lectora...that probably is solved.
Can you share a video about how this works? I think that would give me a better idea, right now I'm a little confused where it runs, what it produces, and how it is used.