AI Extention - Codio Load Scripts JavaScript Extension

Nick Updated by Nick

Internal Documentation — Instructional Technologies Group

Overview

The Codio Load Scripts JavaScript Extension provides a centralized way to load commonly used JavaScript libraries and helper scripts into Codio units without needing to manually edit each unit.

Instead of placing JavaScript files individually inside the Settings → JavaScript section of every Codio unit, this extension allows developers to define scripts in a single location (index.js) inside the extension repository.

When the extension is enabled, Codio automatically loads the scripts defined in index.js whenever a unit loads.

This allows the Instructional Technologies team to maintain shared JavaScript utilities and update them in one place instead of editing every unit individually.

Repository URL

Why This Extension Exists

Without this extention, if a Codio unit requires custom JavaScript, developers must:

  1. Open the unit
  2. Navigate to Settings
  3. Add JavaScript manually
  4. Repeat this process for every unit that requires the same scripts

This creates several problems:

  • Time consuming maintenance
  • Potential inconsistent configurations across units
  • Difficult updates when scripts change (remembering which units to update manually)

The Codio Load Scripts JavaScript Extension solves this problem by centralizing script loading.

With this extension:

  • JavaScript is defined once in index.js
  • All enabled units automatically load the same scripts
  • Updating the repository updates behavior everywhere the extension is enabled

This dramatically reduces maintenance time.

How the Extension Works

When a Codio unit loads, the Virtual Coach extension system executes the extension’s index.js file.

This script uses the Codio API function:

codioIDE.guides.addScript()

This function dynamically loads JavaScript files into the unit interface.

Because scripts are loaded sequentially using await, dependencies load in the correct order.

Example dependency order:

jQuery → Popper → Bootstrap → "custom utility file(s)" → custom scripts

This ensures libraries that depend on others load correctly.

Example index.js

The extension repository contains an index.js file that defines which scripts should load when a Codio unit starts.

Example implementation:

(async function (codioIDE, window) {
          
            // Load scripts in dependency order
            const scripts = [
              "https://code.jquery.com/jquery-3.4.1.min.js",
              "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js",
              "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js",
              "https://cdn.jsdelivr.net/gh/ecornellnick/codio_load_scripts_JS@main/utilities/utilities.js"
            ];
          
            for (const src of scripts) {
              await codioIDE.guides.addScript(src);
            }
          
          })(window.codioIDE, window);

How This Script Works

Async Wrapper

The script runs inside an asynchronous function so scripts can be loaded sequentially. 

(async function (codioIDE, window) { ... })

This allows the use of await when loading scripts.

Script List

The scripts array defines which JavaScript files will load when the Codio unit starts.

Example:

const scripts = [
            "https://code.jquery.com/jquery-3.4.1.min.js",
            "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js",
            "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js",
            "https://cdn.jsdelivr.net/gh/ecornellnick/codio_load_scripts_JS@main/utilities/utilities.js?v=toastfix1"
          ];

Scripts can include:

  • External CDN libraries (such as jQuery)
  • CDN utilities (such as Popper)
  • Framework libraries (such as Bootstrap)
  • Custom utilities files in the repo (utilities folder) via JSDeliver
  • Local custom scripts stored inside the extension repository

Sequential Script Loading

The loop below loads scripts one at a time:

for (const src of scripts) {
            await codioIDE.guides.addScript(src);
          }

Using await ensures scripts load in dependency order so libraries can safely reference each other.

Enabling the Extension

The extension can be enabled in two ways:

  1. Single Unit
  2. Entire Course

Enable for a Single Unit

To enable the extension for an individual unit:

  1. Open the Codio course
  2. Click Overview
  3. Select the Codio unit
  4. Click Settings
  5. Scroll down to the Virtual Coach section
  6. Enable the extension named: Codio Load Scripts JavaScript

Once enabled, the scripts defined in index.js will load whenever that unit opens.

Enable for an Entire Course

To enable the extension for every unit in a course:

  1. Open the Codio course
  2. Navigate to Admin
  3. Click Extensions
  4. Locate the extension named: Codio Load Scripts JavaScript
  5. Enable the extension

Once enabled, all units in the course will automatically load the scripts defined in the extension repository.

Benefits

Centralized Updates

Instead of editing scripts inside multiple units, developers update the index.js file once and all enabled units inherit the changes.

Reduced Maintenance

Without this extension, each unit must be edited manually whenever scripts change.

With this extension, script management is centralized.

Consistent Development Environment

All units load the same JavaScript libraries and utilities, ensuring consistency across courses.

Faster Iteration

Developers can improve or update scripts without modifying individual units.

Troubleshooting

Scripts Not Loading

Verify:

  • The extension is enabled
  • index.js syntax is valid
  • CDN URLs are accessible
  • Script order is correct

Dependency Errors

If a script depends on another library, ensure the dependency loads first.

Incorrect example:

Bootstrap before jQuery

Correct example:

jQuery before Bootstrap

Future Use Cases

This extension enables future shared functionality across Codio courses such as:

  • AI helper utilities
  • UI enhancements
  • Reusable learning tools
  • Debugging utilities
  • Analytics or event tracking

Centralizing these scripts simplifies future enhancements.

Summary

The Codio Load Scripts JavaScript Extension allows the Instructional Technologies team to centrally manage JavaScript dependencies across Codio units.

By defining scripts in a single index.js file and enabling the extension within Codio, developers can:

  • Avoid repetitive configuration
  • Ensure consistent environments
  • Apply updates globally
  • Significantly reduce maintenance effort

How did we do?

Codio AI Extensions - Virtual Coach Overview

Contact