Forum Discussion

Stephanie's avatar
Stephanie
Legend
10 months ago

A Growing List of Cool Code Block Examples

➡️ View the examples and grab the code

Hi everyone! 👋

You'll find (42 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. You can reach me directly at [email protected].

Latest Updates:

  • A new Latest Updates section that lists existing snippets that have been updated to add new features based on user feedback. I've also moved the Update Log to the top so you can easily determine the latest version/date and details.
  • NEW - Two-Person Scenario helps you build a two-person scenario where the learn can take on the role of one of the characters, or as an observer. You can include your own characters, optional backgrounds and audio narration. There is a UI for this one to help you set up the details without editing the code directly.
  • NEW - Sentiment Check that mimics Rise's new survey block but can remember an earlier response. For example, at the beginning of a course, you check user confidence and, at the end, you recheck it.

Your Input
Buy Me a Coffee
Suggestion Box

Interactions

Click & Reveal Checklist
Display Cards
Drag and Drop
Flip Cards
Glossary You Can Print
Hover Definitions & Popup Info
Labeled Graphic
Matching Activity
Memory Match
Scratch Card Reveal
Scrolling Ticker
Sentence Builder
Sentiment Check
Sorting Interaction with Feedback
Spin the Wheel
Timeline
Vertical & Horizontal Tabs

Effects & Media
Animated Checklist
Confetti
Dividers
Multi-track audio Player

Graphics 
Blended Image Slider
Image Compare Slider

Knowledge Checks / 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)

Utilities
Compound Interest Calculator
Form Wrapper
Timer

E-Learning Challenges & Fun Stuff
#535 Snow Globe
#540 Valentine Oracle
Fire Triangle Simulator
Rise Code Block "Build-a-Thon" Submission

Getting Help
Introduction
Prompts, Workflow and QA
Building a Code Snippet
The Prompts
Editing HTML
Working in Other Languages

25 Replies

  • Caitlin_B's avatar
    Caitlin_B
    Community Member

    This is incredible! What a great way to share out the information as well. Thanks for all of the coding following the examples. Really inspiring me!

  • Thank you, Stephanie. Wow. So impressed...and grateful for your generosity.

    Would these interactions be accessible? I'm particularly interested in using the swipe card quiz and custom vertical and horizontal tabs.

  • KayleneWance's avatar
    KayleneWance
    Community Member

    Thank you for sharing! Your code block examples had me start thinking of the possibilities of code blocks! I'm going to try some of these out in my future projects.

  • Thanks Stephanie​ !
    I wonder about how the "Suggestion box" on your first page is done and the entries made persistent and saved. I would love to be able to understand this.

  • I've updated the code library and added 5 new snippets. Two of these were based on my most recent post about AI coding. 

      • Compound Interest Calculator
      • Drag and Drop
      • Fire Triangle Simulator
      • Form Wrapper
      • Timer