The custom code tile allows you to embed your own HTML, CSS, and JavaScript directly into your lessons. This is perfect for adding custom interactive activities, mini-games, or specialized web content that goes beyond standard lesson elements.
Please note that the custom code tile is a premium feature. You must be on a Business+ plan to access and use this tile.
Uploading Your Code
You can easily upload your custom web content directly into the custom code tile. The tile currently supports standard .html files and .zip files containing your web assets.
To upload your files:
Add a custom code tile to your lesson layout.
Select the empty tile in the editor to view the upload options.
Drag and drop your
.htmlor.zipfile into the dashed upload area.Alternatively, click the upload area to browse your computer and select a file.
Once uploaded, your custom web content will immediately render inside the tile. If you need to replace the content, click the tile to open the floating settings menu and click the Remove button next to your file name.
Adjusting Tile Settings
After uploading your content, you can configure how the custom code tile behaves within your lesson. Click on the custom code tile to open the floating settings menu.
Auto Height
By default, the custom code tile uses the Auto Height setting. This ensures the tile automatically resizes to fit your embedded content perfectly without creating awkward scrollbars.
If you toggle Auto Height off, the tile will default to taking up a fixed amount of space in your layout row. You can then manually adjust the layout row's height if needed.
Require Completion
You can require learners to interact with your custom code activity before they are allowed to finish the lesson. Toggle on Require Completion in the settings menu to enable this requirement.
When enabled, your custom code must send a specific completion signal back to Mindsmith. In the settings menu, click Copy Instructions to get the exact details needed for this signal. You can share these copied instructions directly with your developer or paste them into an AI prompt when generating your custom code.
Learner Experience
When learners interact with the custom code tile, they will see your content seamlessly embedded into the lesson flow.
Learners can click the fullscreen icon on the tile to expand your custom activity across their entire screen. This is especially useful for detailed interactive exercises, software simulations, or mini-games.
If you enabled the "Require Completion" setting, learners will see a visual completion status indicator on the tile. This status will automatically update to a completed state once they successfully finish the requirements of your custom activity.