Style Feedback Messages

dwinter5801

Hi there! I'm looking to style the question feedback "Display message" according to the screenshot(s) here. I can't seem to locate that option in Lectora Online. Anyone have any luck doing this?

jvalley4735

The short answer is No.

The long answer is Yes, but you're limited. You can adjust the window by changing the code (trivantis-dialog.js I believe) provided within your Lectora output.  The changes we recommend are minimal and don't match what you described.  Doing any more could cause some serious issues with your course.

Better than using the default option is to create a customized pop-up window!  These allow for style changes and additional content to be displayed, as well as, being able to adjust the background, size, and location.  It's just a page put at the end of your course that you customize the look and feel of.  Then when selecting your feedback options you choose to go to that page but in a new window.  Additional window properties which are updatable are available from there.

wheels

In my courses I use initially hidden text blocks and show them using feedback actions.  Then they can be formatted any way you want and as an added bonus they work better for mobile and do not require the student to click OK to dismiss the feedback.

If you really want to use the Display Message popup you can also enter HTML in the Message, for example I use this as one of my incorrect messages:

<p style="background-color:red;align:center"><span style="color:white;font-weight:bold">Incorrect</span></p>
No person under the age of 21 can possess alcoholic beverages on the street, highway or any public place.

See the attached image for how this looks.

You need to publish with Use Lightbox Popups enabled for HTML to work in Display Message. If you are doing an accessible title and cannot use Lightbox popups then you could maybe do some simple unicode formatting as described here: https://stackoverflow.com/questions/5278197/html-tags-in-javascript-alert-method

You can also modify all course dialog properties with CSS as described here.

Modifying the coure dialogs with CSS only works in Lectora Online, not the Desktop product.

 

dwinter5801

Thank you both so much for your solutions! I think I'll just do hidden objects that show upon correct / incorrect. I appreciate your help here!

wheels

Another quick tip for the initially hidden text blocks.  You can use On Show and On Hide actions on those feedback text blocks to do other things.  Such as, On Show of Correct Feedback Text Block -> Hide Incorrect Feedback Text Block, or On Show of Correct Feedback Text Block ->  Show Correct Feedback Image, or On Hide of Correct Feedback Text Block ->  Hide Correct Feedback Image, etc.

Once you have these setup it's easy to copy and reuse.

 

tmiller8924

I know this is an old thread, but wanted to thank everyone. This info was very helpful!