The custom code tile embeds your own HTML, CSS, and JavaScript in a lesson. Use it for interactive activities, mini-games, or web content that the standard tiles do not support.
The custom code tile is available on Enterprise plans.
Uploading your code
Upload your web content directly to the custom code tile. The tile supports .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
New custom code tiles start with Auto Height turned off. In this mode, the tile uses the height of its layout row, which you can adjust in the editor.
Turn Auto Height on when your embedded content reports its height to Mindsmith and you want the tile to resize with it. If the embedded content does not report a height, adjust the layout row manually instead.
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
Learners see the custom content inside the lesson.
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.