Authors

Video Tutorials

Rise 360: How to Use Code Block (Beta)

Code block is still under development and will receive updates during the beta. Functionality will change over time. Based on feedback and feature stability, some options will be modified, and others may be removed.

Want to offer deeper, richer experiences to your learners? Now you can create code-based projects directly in Rise 360 with code block. Develop interactive tools and demos with an in-app code editor, or upload your own completed projects. Not sure where to start? Check out this training for inspiration, or read on to try it yourself.

  1. Insert a Code Block
  2. Modify the Block Settings
  3. Accessibility Information
  4. Beta Considerations

Note: Code blocks can only use the resources available in the block itself, and what’s written affects only that block’s environment. Code written in HTML, CSS, and JavaScript works best for custom code blocks. 

Step 1: Insert a Code Block

  1. Open a Rise 360 course, then edit an existing lesson or create a new one.
  2. Select All Blocks from the blocks shortcut bar. Or, click the insert block icon (+) that appears when you mouse over a boundary between blocks.
  3. From the sidebar, choose the Code category.
  4. Select an option depending on how you've compiled your code project.
    • Click Add code to enter and edit code directly. Changes you make are reflected in real time. 
    • Click Upload project to upload a ZIP file that meets the following criteria:
      • Includes an an index.html file at the root level 
      • Includes all assets for your project, including source files such as images
      • Isn't larger than 5 GB
  5. When the block displays, click the action button or hover over the block to access the left-hand design toolbar. Then, click the Content icon. In the sidebar, add your code or upload your zipped project.
    • In the Add code block, use the search/replace, copy, and delete icons to quickly make changes to your entire code block.
    • In the Upload project block, use the delete icon to clear out the currently uploaded ZIP file.

Your project will run immediately once added to Rise 360.

Completion Parameters 

To ensure learners complete a code block activity before proceeding, set completion parameters for your code block. With the following steps completed, continue blocks recognize when learners have completed the activity within the block.

  1. Either edit the content of an existing code block or add a new block. 
  2. Enable the Set completion requirements toggle.
  3. Copy the code snippet that displays: window.parent.postMessage({ type: 'complete' }, '*');
  4. Paste the code into the code window or into your existing project. For existing upload project blocks, you'll need to re-import your project after adding the completion code snippet.

That's it! Now Rise 360 continue blocks will recognize when the code block activity has been completed. 

Note: Activating the completion toggle and including a completion-based continue block without including the code snippet in your project will block learners from continuing the training.

Inspiration Gallery

Both blocks have one-click access to our tutorial course with sample projects. Take a look and see what's possible, then build your own based on the provided code and assets! Just click the Need help getting started? button to check it out. 

Vibe Coding

If you use a third-party LLM to generate code (also known as "vibe coding"), use the following as your prompt template to ensure enhanced compatibility with Rise 360. Replace the text in square brackets with your own content.

  1. Create an `index.html` file that can contain HTML, CSS, and JavaScript and doesn't include external web requests
  2. This `index.html` file will be used inside an `<iframe>`
  3. In the `index.html` file, create [describe your project], give it a transparent background
  4. Encode that once [describe completion parameters], the application should call `window.parent.postMessage({ type: 'complete' }, '*');` to let the parent window know that the interaction has been completed

Step 2: Modify the Block Settings

Modify how your content looks on the screen by hovering over an existing block to access the left-hand design toolbar. Click the Style icon to access block background options. The Format menu provides options for changing the block padding, content width, and max height of the block.

Accessibility Information

Custom code accessibility is still being assessed, but you can improve accessibility by using an accessibility checker plug-in such as axe DevTools provided by Deque or the Wave accessibility checker to verify your code. 

Looking for more accessibility design tips? Check out the following resources:

Beta Considerations

Since the custom code feature is still in active development, we recommend not using it for critical deliverables. Currently, code blocks have the following known issues:

  • Publishing your training to PDF doesn't produce a one-to-one reproduction of code block content. 
  • Articulate Localization isn't supported.
Updated 11 hours ago
Version 4.0
Articulate 360
rise 360
User Guide