Forum Discussion
A Growing List of Cool Code Block Examples
View the examples and grab the code
Hi everyone! 👋
I've been playing around and created a growing list of cool examples of using the code block. I've included the code that you can copy to use in your projects. If you have any questions, just leave a comment in the Review tool.
New:
- New interactions: Memory Match and Capture & Recall
Your Input
Suggestion Box
Interactions
Click & Reveal Checklist
Flip Cards
Glossary
Hover Definitions & Popup Info
Labeled Graphic
Matching Activity
Memory Match
Scratch Card Reveal
Sorting Interaction with Feedback
Timeline
Vertical & Horizonal Tabs
Effects
Animated Checklist
Confetti
Dividers
Graphics
Blended Image Slider
Image Compare Slider
Knowledge Check / Quizzes
Quiz Swipe Cards (updated)
Swipe Card Quiz
User Input
Capture & Recall
Course Completion Certificate
Persistent Learner Name
Notebook
Just For Fun!
Interactive Snow Globe
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.
