Custom HTML and CSS Formatting
Are there any plans to allow customisation of HTML/CSS in the assessments within the LMS?
I've used platforms (e.g., Moodle) that allow you to toggle between rich text and HTML in the content window and custom CSS areas for user-specific styling. I know there is an 'advanced' area where CSS code can be pasted, but as far as I'm aware, it's only available for specific things, like images.
The ability to just edit the HTML in the content area and use inline styling would be great.
Thanks
Chris
-
Yeah, it's strange that templates allow full HTML and inline CSS, however the editors for questions and other areas do not support it. Security wise it's all data entry with similar/same risk, so I don't understand why they would have different editor levels besides changing the editor over time and not updating some. Whether that's due to features being built into the simpler editor than the HTML-supportive one, I'm unsure. It's definitely strange, though.
Makes me miss Moodle.
-
Hi Everyone
Thanks for your feedback. There are some challenges with the editor that we are using in the LMS that prevents us from allowing this kind of editing 'mode'.
Could I ask, what are you hoping to modify in your assessments that you're unable to do without HTML/CSS?
Thanks
Mark -
Hi Mark,
Out of curiosity, why are there different editors being used or two states of editor being used? I know I would love some technical insight as full stack is my background.
For us as an RTO, having the one editor in use across the LMS which support HTML and inline CSS would give us the ability to have more dynamic question layouts and to be able to have more control over styling of content. For example, the current Info item is a purple colour and does not fit with our branding, resulting in us needing to use cumbersome aXcelerate tables. The tables themselves are also quite difficult to work with because of default applied CSS, which we could override as needed to suit our purposes in different circumstances.
-
Hi Matt
Thanks for the additional feedback.
aXcelerate core (SMS) was started 15+ years ago, so a lot of the tech decisions in that part of the system were made a long time ago. When we built the LMS (approx six years ago), we recognised we needed something a bit more modern. Over the past six years, we've grown considerably in both overall business as well as engineering maturity, and we've since recognised that the editor in the LMS is probably not entirely fit for purpose for where we want to take the product over the long-term.
So I definitely hear you - we do want to replace it with something that will meet all the use-cases that we have across the entire product, but we have some big goals that we're hoping to showcase later this year at aXcelerate day that will need to come first.
Understanding your use cases for requesting custom styling is useful as it helps inform the decision that I described above.
To respond to your specific feedback, you are correct that the Info block won't match your styling but in case you weren't aware, the other preset content elements should display in your account's theme colour when presented to Learners. I know this isn't a perfect solution but hopefully it's somewhat helpful.
I do acknowledge tables are a bit tricky to work with - definitely one of the painpoints we will aim to address in any editor replacement or improvements that we make in the future.
Cheers
Mark -
Hi Mark,
In the LMS side of things we are required to use tables for structure but then can't format them very well. Perhaps for a cell you only want to show the border on the top and right, or maybe an image for a table background. I'm sure we use to be able to add CSS to a table, but this was taken out.
Even just being able to add inline CSS would be helpful but full HTML/CSS editing would be most helpful to create rich visually appealing assessments or lessons.
:)
Belinda -
Thanks for your quick response, Mark, and Belinda and Matt for your input.
Table formatting also comes to mind for me, especially for written assessments. We currently have our students complete large external portfolio assessments and submit PDFs, but we hope to split the portfolio into assessment chunks within aXc soon. A common task our students perform is completing health questionnaires, physical assessments and exercise/treatment plans, which are easy to create in G Doc/Word. Although they can be replicated in aXc with multiple response fields within a table, we couldn't make it look close to what they would encounter in the industry. And being such a complex table, viewing it on smaller screens may make it hard to complete, whereas we might be able to wrap cells with CSS (unless it does already by default - I haven't checked yet).
Overall, I think this feature would allow more creativity, but I understand it's not simple to add.
-
@Christopher Apps - Yeah, tabular forms are hard on mobile - even if you tailor them to the viewport, they're a pain to navigate. That's a hard one from a usability perspective.
You just made me dream of being able to use CSS media queries and JS to restructure a table as a form, though. How nice would that be? Desktop = standard form structured how you want. Mobile? A series of top-down inputs to complete with associated labels and accessibility controls. Sigh - The downside of being a developer and this not being open source, haha.
-
Thanks for the additional feedback everyone :)
I can also share that we're looking to add a form-specific question type to the assessment builder to help solve the problems you're experiencing with the tables. That way, we can build mobile responsiveness directly into that new question type.
As we our ongoing projects near completion I'll have more to share on our plans for what I've mentioned so far in this thread.
If you haven't purchased tickets already, I'd love to catch up with you in person at aXcelerate day in October.
Cheers
Mark -
Agree this would be a useful feature.
Our previous LMS Canvas allowed us to edit the HTML directly.
This was incredibly useful for moving content between different courses.
Fixing minor formatting issues.
Manually setting style (CSS) for certain formatting and overlapping banners.
We can see the Rich Content Editor being used is the TinyMCE
https://www.tiny.cloud/tinymce/
This is the same editor that Canvas uses.Here is an article by TinyMCE talking about how to enable the source editor
https://www.tiny.cloud/blog/source-code-editing/
https://www.tiny.cloud/tinymce/features/enhanced-code-editor/
This would allow us to edit the HTML source directly and solve 90% of the desire from this idea directly.
In addition to this, a central place to set the CSS used for the Content types would be great.
We would like to be able to adjust all <p> text to be 14pt by default for WCAG reasons.
-
Exploring this further, I have found if you use the developer tools in your browser, you can insert HTML directly into the body of the RCE. Then when you save it will save that HTML.
I only tested inserting a <hr>.
Almost certainly some validation is happening before it saves, so you may be limited to what you can insert. However if you need to quickly edit the size of an image, or debug something that is formatting bizarrely this trick should help.
A dirty workaround but hopefully helps in a pinch.
Please sign in to leave a comment.
Comments
11 comments