Example
Business Maths Essentials
Hello everyone...
For this week’s challenge, I decided to experiment with a simple combination of Articulate Rise, ChatGPT and PowerPoint. What started as a small idea quickly developed into a complete, scenario-based learning activity.
I created Business Maths Essentials for new starters, using Sam, a newly appointed accountant at BrightStart, to guide learners through key financial terms, classification activities, profit-and-loss calculations and a final decision-making task.
The learner supports Sam, a new accountant at BrightStart, as he works through four practical tasks: understanding key financial terms, classifying business figures, calculating profit or loss, and interpreting the wider financial position.
The activities were created as responsive HTML, CSS and JavaScript components that can be placed inside Articulate Rise Code Blocks.
The design uses clear instructions, immediate feedback, running totals, simple calculations and accessible keyboard controls.
Consistent TS4 branding, restrained 44 px emojis and visual status cues help learners navigate the content without distracting from the learning objective.
The modular structure also allows each activity to be used separately or combined into a complete learner journey.
For the course banner, I adapted a template created by Tom and used PowerPoint’s Morph transition to produce a simple animated GIF, which I placed in different locations.
Attached is the Rise Banner Template I used - Source : E-learning Heroes
View the course: Business Maths Essentials
Enjoy
Dr Nadia
3 Replies
I really like this.. It has a good flow and variety of interactions. One point to note; whilst I like the look of the animated background used, in terms of accessibility it doesn't respect the users Windows reduced motion setting (Accessibility - visual effects - animation effects) for people with motion sensitivity. I found it quite distracting as an animated background in the blocks myself tbh... I'd have it as a static image
Thank you DShaw,
I really appreciate the feedback. That’s a helpful point about motion sensitivity and reduced-motion settings. I agree that a static background would be more accessible and less distracting.
Or fewer graphics, simpler animations with subtle movements...
Do you have any accessibility testing tools, checklists or useful links you would recommend for future projects?
These are just my suggestions 🧐 An animated background is okay in a header but it should really still respect a users Windows motion settings. You obviously know how to use Rise code blocks so my advice would be to create the same headers you want to use as code and embed any animated backgrounds into the code rather than using the standard Rise style block background. That way you can use the code to respect the users Windows motion settings. You mentioned using chatgpt; so that will be able to add the code to do this for you. I wouldn't use animated backgrounds behind content. The content should be the focus and the background should just be there to help highlight the content. Animations just distract from it. If you want your courses to be AAA accessible then any animation should be able to be disabled by the user via their browser setting or other manual means within the course…
All just my thought's
Getting Started with the E-Learning Challenges
Find practical answers to common questions about the E-Learning Challenges, a weekly event that helps you build skills, create your portfolio, and grow as an e-learning professional.