Forum Discussion
A Growing List of Cool Code Block Examples
➡️ View the examples and grab the code
Hi everyone! 👋
You'll find (34 so far) examples of what you can do with the Rise Code Block. These are my tests that I've built to be responsive and accessible. I've provided the code for each so you can easily copy, paste, and insert them in your Rise courses.
There is a suggestion box if you'd like to upvote an idea or enter your own. If you have any comments, just drop them here in review. Yor can reach me directly at stephanie@stephanieharnett.ca.
Latest Examples:
- Spin the Wheel (fun tip spinner)
Your Input
Suggestion Box
Interactions
Click & Reveal Checklist
Flip Cards
Glossary You Can Print
Hover Definitions & Popup Info
Labeled Graphic
Matching Activity
Memory Match
Scratch Card Reveal
Scrolling Ticker
Sentence Builder
Sorting Interaction with Feedback
Timeline
Vertical & Horizonal Tabs
Effects & Media
Animated Checklist
Confetti
Dividers
Multi-track audio Player
Graphics
Blended Image Slider
Image Compare Slider
Knowledge Check / Quizzes
Card Order Question
Flashcard Self-Assessment
Row Order Question
Swipe Card Quiz
Yes/No Swipe Cards
User Input
Capture & Recall Reflections You Can Print
Course Completion Certificate
ElevenLabs Chatbot
Learner Name with Persistence
Notebook You Can Print
Pulse Check (no right/wrong answer question)
E-Learning Challenges & Fun Stuff
#535 Snow Globe
#540 Valentine Oracle
Rise Code Block "Build-a-Thon" Submission
24 Replies
this is really helpful thanks 💡
This is grand, you'll need your own forum soon 😁
I'm so glad you shared this here Stephanie. Thank you for compiling this!
We are going to share this is an upcoming ELH Weekly Newsletter, make sure you are subscribed if you want to see this in your inbox! 🎉
That’s fantastic! I’m happy people are finding it useful. 👌
This is amazing, thank you so much!!
This is incredible, thank you for sharing!
Not to be a dolt, but where/how do you grab the code? TY
If you click the link below the image, you can view the examples and below each is a button to view the code. You can then copy the code.
Ooops! TY!!!
Hi Stephanie,
Thank you for sharing these. They are fantastic. Great work!
In the notebook block, when copying and pasting the code into a Rise code block, the display looks like the attached screen shot. "My notes" displays in the center beneath the text block above it, but the text "type your notes, thoughts here, etc." doesn't show unless you select the down arrow to the far right, then the "type your notes" shows to the far left with no text box to type in the notes.
Thoughts?
Also, because I can't see the notebook block, I'm unable to enter text to test that whatever is typed is stored local. If this was in a course launched from a shared workstation all users with different logins would see the previous notes entered, unless the local storage was cleared, before the notebook block was launched; say a previous lesson. Am I right with that?
Looking forward to your thoughts on the display issue with copying the code.
Lisa
In the format options for the block turn off auto resize and try a value off 455.
I found the same issue with many of my code blocks, it seems the iframe wrapper doesn't like to play ball in rise for some "tall" code.
I found that adding a "hard floor" to the code also works as well as your suggestions Stephanie
html, body {
min-height: 800px;
height: auto;
}
Appreciate the quick response, Stephanie. That's awesome.
The auto resize worked for display. I'm not sure what or where you are referring for "value off 455." Here's an updated image.
With some of the code examples you will need to play with the height of the code block by turning off the auto resize option and then manually increasing the height using the scroll bar below the auto size option to set it to a specific height like 455. Sometimes leaving auto resize will just work. If there are continued height display issues, try Dan's suggestion above of the hard floor to force a specific height.
Wow this is fantastic stuff. My favourite is the persistent notebook; I can already think of ways I will use that. Also the Hover Definitions and Popup Info will be so useful to keep content looking clean and uncluttered while still making more information accessible. Thank you!
Love this Stephanie, thanks for sharing! Can't wait to try several of these out.
