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
- PaSchlCommunity Member
this is really helpful thanks 💡
- DanBoylandUKCommunity Member
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! 🎉
- StephanieSuper Hero
That’s fantastic! I’m happy people are finding it useful. 👌
- hannahrad22Community Member
This is amazing, thank you so much!!
- AnnikaDellertCommunity Member
This is incredible, thank you for sharing!
- MarkSteinerCommunity Member
Not to be a dolt, but where/how do you grab the code? TY
- StephanieSuper Hero
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.
- MarkSteinerCommunity Member
Ooops! TY!!!
- LisaAnderson-57Community Member
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
- StephanieSuper Hero
In the format options for the block turn off auto resize and try a value off 455.
- DanBoylandUKCommunity Member
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;
}
- LisaAnderson-57Community Member
- StephanieSuper Hero
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.
- JessicaHoskinCommunity Member
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!
- RosaliaMarriottCommunity Member
Love this Stephanie, thanks for sharing! Can't wait to try several of these out.
Related Content
- 11 months ago
- 5 months ago
- 4 months ago