Custom HTML code blocks inside Rise 360: six short examples

Hi all,

As  many have been doing, I’ve been building my own HTML blocks to sit inside Rise 360, and wanted to share where they’ve got to.

Why build my own? Rise has some limitations and glitches, and it doesn’t always let me have full branding and style. I like the look of CSS and JavaScript branding tokens and behaviours... those micro-interactions that support the learner’s journey.

Code blocks are also really useful for quizzes and knowledge checks. Build those in Rise 360 and an update tends to reset progress in some LMSs, even with a connected package. As a code block, it doesn’t cause that issue.

What caught me out this round:
• Mobile: getting every build working on phones, using a full device emulator as best as possible.
• Glitches between pages, and not just pages, between clicks. Rather like Storyline, you just have to make sure everything’s lined up.

Each course holds one block, as a learner would see it:
• Confidence self-check: https://360.articulate.com/review/content/d58cf155-636e-4f43-82c9-1832035cd504/review
• 3D molecule viewer with a case study: https://360.articulate.com/review/content/438ac80f-37c1-4fc9-9e63-bf352321f713/review
• Reveal cards: https://360.articulate.com/review/content/ce4bf4c4-569b-4952-a194-979d0c778cec/review
• Chart-choice swipe: https://360.articulate.com/review/content/f520b311-9cc7-49d2-aa67-f79c8dba84ff/review
• Magnifier: https://360.articulate.com/review/content/52955237-15b1-4735-a948-9dd001060ae2/review
• Reflection notepad: https://360.articulate.com/review/content/b9fdc4cf-8d53-4cf5-8200-828eba12524a/review

The main thing I want to show is that you don’t have to step away completely from Rise 360. You can supplement and enhance it with bespoke blocks, once you understand the learner journey and those interactions... interactive WITHOUT being gimmicky.

Happy to talk through how I built any of them and pass on my "coding" pitfalls 😁