### Build and Serve Adapt Course

Source: https://github.com/adaptlearning/adapt_framework/wiki/Common-Issues

Builds the course content and starts a local development server. Required before running `grunt server` to avoid 'Cannot GET /' errors.

```sh
grunt build
grunt server
```

--------------------------------

### Start Development Server (Manual)

Source: https://github.com/adaptlearning/adapt_framework/blob/master/INSTALL.md

Run this command to start a local development server. The sample course will be accessible at http://localhost:9001/. Press CTRL+c to terminate.

```bash
grunt server
```

--------------------------------

### Install Framework Dependencies (Manual)

Source: https://github.com/adaptlearning/adapt_framework/blob/master/INSTALL.md

Run this command in the extracted framework folder to install package dependencies. Ensure all prerequisites are installed first.

```bash
npm install
```

--------------------------------

### Install Dependencies and Plugins

Source: https://github.com/adaptlearning/adapt_framework/wiki/Git-flow

Installs project dependencies and downloads necessary plugins using npm and adapt devinstall.

```bash
npm install && adapt devinstall
```

--------------------------------

### Configure Multiple Start Pages by Device Type

Source: https://github.com/adaptlearning/adapt_framework/wiki/Content-starts-with-course.json

Use '_startIds' to define multiple start pages, each with specific '_className' conditions for device size and touch support. '_force' ensures one of these start pages is always displayed.

```json
_start": {
    "_isEnabled": true,
    "_startIds": [
        {
            "_id": "co-05",
            "_skipIfComplete": false,
            "_className": ".size-small.touch, .size-medium.touch",
        },
        {
            "_id": "co-10",
            "_skipIfComplete": false,
            "_className": ".size-small.no-touch, .size-medium.no-touch"
        }
    ],
    "_force": true
}
```

--------------------------------

### Install Adapt CLI Globally

Source: https://github.com/adaptlearning/adapt_framework/wiki/Common-Issues

Installs the Adapt Command Line Interface globally. Ensure Node.js and Git are installed first.

```sh
npm install -g adapt-cli
```

--------------------------------

### Configure Default Start Page - JSON

Source: https://github.com/adaptlearning/adapt_framework/wiki/Content-starts-with-course.json

Sets 'co-05' as the default start page and forces routing to it, regardless of URL parameters. Useful for development or specific course flows.

```json
{
    "_isEnabled": true,
    "_id": "co-05",
    "_force": true
}
```

--------------------------------

### Download Adapt Plugins (Manual)

Source: https://github.com/adaptlearning/adapt_framework/blob/master/INSTALL.md

After installing package dependencies, run this command to download all necessary Adapt plug-ins to the framework.

```bash
adapt install
```

--------------------------------

### Install Adapt CLI and Grunt CLI

Source: https://github.com/adaptlearning/adapt_framework/wiki/Setting-up-your-development-environment

Installs the Adapt command-line interface and Grunt command-line interface globally. These are essential for managing Adapt projects and running build tasks.

```bash
npm install adapt-cli -g
npm install grunt-cli -g
```

--------------------------------

### Build Course with Custom Theme and Menu

Source: https://github.com/adaptlearning/adapt_framework/wiki/Setting-up-your-development-environment

Customize the build process by specifying a theme and menu. Replace 'adapt-new-theme' and 'adapt-new-menu' with your installed theme and menu names.

```bash
grunt build --theme=adapt-new-theme --menu=adapt-new-menu
```

--------------------------------

### Run Local Development Server

Source: https://github.com/adaptlearning/adapt_framework/blob/master/GRUNT.md

Starts a local server to test your course. Opens a browser window with the course URL. Use `--host` and `--port` to specify network settings.

```bash
grunt server [--host=x.x.x.x] [--port=xxxx]
```

--------------------------------

### Update adapt-cli Globally

Source: https://github.com/adaptlearning/adapt_framework/wiki/Converting-a-Course-from-Version-1-to-Version-2

Ensure you have the latest version of the adapt-cli installed globally before starting the conversion process.

```bash
npm update -g adapt-cli
```

--------------------------------

### Run Local Development Server

Source: https://github.com/adaptlearning/adapt_framework/wiki/Compiling,-testing-and-deploying-your-Adapt-course

The `server` task starts a local web server and opens your course in a browser for local testing. Check the console output for the specific URL.

```bash
server
```

--------------------------------

### Configure Conditional Start Page - JSON

Source: https://github.com/adaptlearning/adapt_framework/wiki/Content-starts-with-course.json

Sets 'co-05' as the start page, but only if it has not been completed. If completed, the course will default to the main menu. This ensures users can revisit content after completion.

```json
{
    "_isEnabled": true,
    "_startIds": [
        {
            "_id": "co-05",
            "_skipIfComplete": true
        }
    ],
    "_force": true
}
```

--------------------------------

### Configure Start Page with URL Priority

Source: https://github.com/adaptlearning/adapt_framework/wiki/Content-starts-with-course.json

Defines a primary start page ('co-05') for specific device conditions and a fallback ('co-10'). Any URL-specified route will take precedence, ensuring continuity upon page refresh.

```json
_start": {
    "_isEnabled": true,
    "_startIds": [
        {
            "_id": "co-05",
            "_skipIfComplete": false,
            "_className": ".size-small.touch, .size-medium.touch"
        }
    ],
    "_id": "co-10"
}
```

--------------------------------

### Install a specific plugin version

Source: https://github.com/adaptlearning/adapt_framework/wiki/Registering-a-plugin

Use this command to install a particular version of a registered plugin by appending '#<version-number>' to the plugin name.

```bash
adapt install hello-world#0.0.2
```

--------------------------------

### Example Plugin Replacement Workflow

Source: https://github.com/adaptlearning/adapt_framework/wiki/Migration-scripts

Demonstrates a complete plugin replacement workflow including checking source and target plugins, migrating settings, removing the old plugin, and adding the new one.

```javascript
describe('QuickNav to PageNav migration', async () => {
  whereFromPlugin('from quickNav', { name: 'adapt-contrib-quickNav' });
  whereToPlugin('to pageNav', { name: 'adapt-contrib-pageNav' });

  // Migrate settings from quickNav to pageNav format
  mutateContent('transform quickNav config', async (content) => {
    // Transform logic here
    return true;
  });

  removePlugin('remove quickNav', { name: 'adapt-contrib-quickNav' });
  addPlugin('add pageNav', { name: 'adapt-contrib-pageNav', version: '1.0.0' });
});
```

--------------------------------

### Example Less Variables

Source: https://github.com/adaptlearning/adapt_framework/wiki/Making-an-existing-theme-editable

These are examples of Less variables that can be exposed to the Authoring Tool.

```less
@blue: #4287f5;
@black: #040405;
```

--------------------------------

### Switching Themes in Adapt

Source: https://github.com/adaptlearning/adapt_framework/wiki/Styling-your-course

To change the active theme, uninstall the current one and install the desired theme, followed by a build process.

```bash
adapt uninstall adapt-contrib-vanilla
adapt install some-other-theme
grunt build
```

--------------------------------

### Minimal Custom Menu Plugin Example

Source: https://github.com/adaptlearning/adapt_framework/wiki/Developers-Guide-‐-Menu

Create a basic custom menu plugin by extending core Adapt menu classes and registering it with the components system.

```javascript
import components from 'core/js/components';
import MenuView from 'core/js/views/menuView';
import MenuModel from 'core/js/models/menuModel';

class MyMenuView extends MenuView {
  className() {
    return `${super.className()} mymenu`;
  }
}

MyMenuView.template = 'myMenu.jsx';

components.register('course menu', {
  view: MyMenuView,
  model: MenuModel
});

export default MyMenuView;
```

--------------------------------

### Create New Course with Adapt-CLI

Source: https://github.com/adaptlearning/adapt_framework/blob/master/INSTALL.md

Use this command to create a new Adapt course. Replace 'My Course Name' with your desired course title. Package dependencies and core plug-ins are installed automatically.

```bash
adapt create course "My Course Name"
```

--------------------------------

### Adapt Plugin Compile-time Script Example

Source: https://github.com/adaptlearning/adapt_framework/wiki/Developing-plugins

A Node.js script designed to run during the Adapt Framework's build process. It receives file system utilities, path manipulation tools, a logger, build options, and a callback function. The `options` object provides paths to source, output, and the plugin directory.

```javascript
//src/extensions/adapt-extensionName/scripts/postbuild.js
module.exports = function(fs, path, log, options, done) {
    /* where
    options = {
        sourcedir: "/path/to/root/src",
        outputdir: "/path/to/root/build",
        plugindir: "/path/to/root/src/extension/adapt-extensionName"
    };
   */
   log(JSON.stringify(options, null, 4));
   done();
};
```

--------------------------------

### Manage Node.js Versions with NVM

Source: https://github.com/adaptlearning/adapt_framework/wiki/Common-Issues

Installs and switches to a specific Node.js version. Useful for resolving version mismatch errors.

```sh
nvm install 18
nvm use 18
```

--------------------------------

### Start SCORM Test Server

Source: https://github.com/adaptlearning/adapt_framework/wiki/Setting-up-your-development-environment

Run a local server that emulates SCORM 1.2 tracking behavior for testing. This allows you to test your SCO without constant uploads to an LMS.

```bash
grunt server-scorm
```

--------------------------------

### Configure Feedback Image and Text Alignment

Source: https://github.com/adaptlearning/adapt_framework/wiki/Question-model

Example JSON configuration for feedback within a question component. Demonstrates how to set up titles, body text, image alignment, and image source for different feedback states like correct, incorrect, and partly correct. Supports backward compatibility with older `_feedback` objects.

```json
        "_feedback": {
          "title": "Global feedback title",
          "_classes": "",
          "_correct": {
            "altTitle": "",
            "title": "",
            "body": "Correct feedback final",
            "_classes": "",
            "_imageAlignment": "left",
            "_graphic": {
              "_src": "course/en/images/single-width.png",
              "alt": "",
              "attribution": ""
            }
          },
          "_incorrectNotFinal": {
            "altTitle": "",
            "title": "",
            "body": "Incorrect feedback not final",
            "_classes": "",
            "_imageAlignment": "right",
            "_graphic": {
              "_src": "course/en/images/single-width.png",
              "alt": "",
              "attribution": ""
            }
          },
          "_incorrectFinal": {
            "altTitle": "",
            "title": "",
            "body": "Incorrect feedback final",
            "_classes": "",
            "_imageAlignment": "left",
            "_graphic": {
              "_src": "course/en/images/single-width.png",
              "alt": "",
              "attribution": ""
            }
          }
        }
```

--------------------------------

### Example bower.json for Adapt Plugin

Source: https://github.com/adaptlearning/adapt_framework/wiki/Developing-plugins

Defines the metadata for an Adapt Framework plugin, including its name, version, repository, main JavaScript file, keywords, and build scripts. Ensure the `keywords` array includes an Adapt-specific value like `adapt-component`.

```js
{
  "name": "adapt-hello-world",
  "version": "0.0.4",
  "repository": "git://github.com/cajones/adapt-hello-world.git",
  "homepage": "https://github.com/cajones/adapt-hello-world",
  "authors": [
    "Chris Jones <chris.jones@spongeuk.com>"
  ],
  "description": "a really simple adapt plugin",
  "main": "/js/helloWorld.js",
  "keywords": [
    "adapt-component"
  ],
  "scripts": {
    "adaptpostbuild": "/scripts/postbuild.js"
  },
  "license": "GPLv3"
}
```

--------------------------------

### Define Adapt Plugin as AMD Module

Source: https://github.com/adaptlearning/adapt_framework/wiki/Developing-plugins

Implement a new plug-in by defining its view and model as AMD modules. This example shows how to register a custom plug-in named 'myplugin' with its associated view and model.

```javascript
// /js/helloworld.js
define([
    "core/js/adapt",
    "core/js/views/componentView",
    "core/js/models/componentModel"
], function(Adapt, ComponentView, ComponentModel) {

    var MyPluginView = ComponentView.extend({
       // implement your component view
    });

    var MyPluginModel = ComponentModel.extend({
       // implement your component model
    });

    return Adapt.register("myplugin", {
       view: MyPluginView,
       model: MyPluginModel
    });
   
});
```

--------------------------------

### Configure Global Priority Labels

Source: https://github.com/adaptlearning/adapt_framework/wiki/Priority-labels

Add the `_priorityLabels` object to `_globals` in your course.json to control label display across all content types. This example shows default settings.

```json
"_globals": {
  "_priorityLabels": {
    "_iconClassOptional": "",
    "_iconClassRequired": "icon-exclamation",
    "_menu": {
      "_showWhenOptional": true,
      "_showWhenRequired": false
    },
    "_menuItem": {
      "_showWhenOptional": true,
      "_showWhenRequired": false
    },
    "_page": {
      "_showWhenOptional": true,
      "_showWhenRequired": false
    },
    "_article": {
      "_showWhenOptional": false,
      "_showWhenRequired": false
    },
    "_block": {
      "_showWhenOptional": false,
      "_showWhenRequired": false
    },
    "_component": {
      "_showWhenOptional": false,
      "_showWhenRequired": false
    }
  }
}
```

--------------------------------

### Build Sample Course (Manual)

Source: https://github.com/adaptlearning/adapt_framework/blob/master/INSTALL.md

Execute this command in the framework's root directory to build the included sample course. This is a step before serving the application.

```bash
grunt build
```

--------------------------------

### Install Bower Globally

Source: https://github.com/adaptlearning/adapt_framework/wiki/Developing-plugins

Installs the Bower package manager globally on your system. This is a prerequisite for managing plugin dependencies.

```bash
npm install -g bower
```

--------------------------------

### Build Course for Production

Source: https://github.com/adaptlearning/adapt_framework/blob/master/GRUNT.md

Compiles course files into a production-ready minified version. Use options to specify languages, menu, theme, source, and output directories, or JSON file extension.

```bash
grunt build [--languages=xx,yy] [--menu=xx] [--theme=xx] [--sourcedir=xx] [--outputdir=xx] [--jsonext=xxx]
```

--------------------------------

### Markdown Code Block Example

Source: https://github.com/adaptlearning/adapt_framework/wiki/Writing-documentation

Use code blocks with syntax highlighting for longer code examples in Markdown.

```javascript
const example = "like this";
```

--------------------------------

### Run Local Server with SCORM Interface

Source: https://github.com/adaptlearning/adapt_framework/blob/master/GRUNT.md

Provides a dummy SCORM interface for testing course tracking locally. Use `--host` and `--port` to specify network settings.

```bash
grunt server-scorm [--host=x.x.x.x] [--port=xxxx]
```

--------------------------------

### Navigate to Course Directory

Source: https://github.com/adaptlearning/adapt_framework/wiki/Setting-up-your-development-environment

Change to the root directory of your Adapt course project. This is typically the directory created by the `adapt create course` command.

```bash
cd my-adapt-course
```

--------------------------------

### Retrieve a Registered Tooltip

Source: https://github.com/adaptlearning/adapt_framework/wiki/Tooltips-in-Adapt

Get a tooltip instance by its ID to check its properties or use it in other functions.

```javascript
const tooltip = tooltips.getTooltip('my-button');
if (tooltip && tooltip.get('_isEnabled')) {
  // Tooltip exists and is enabled
}
```

--------------------------------

### Build Course for Development

Source: https://github.com/adaptlearning/adapt_framework/blob/master/GRUNT.md

Similar to `build`, but includes source maps for JavaScript and Less, and runs the `watch` task to automatically update the build on file changes.

```bash
grunt dev [--languages=xx,yy] [--menu=xx] [--theme=xx] [--sourcedir=xx] [--outputdir=xx] [--jsonext=xxx]
```

--------------------------------

### Reset Tracking IDs Sequentially

Source: https://github.com/adaptlearning/adapt_framework/blob/master/GRUNT.md

Resets all tracking IDs in the `blocks.json` file, starting sequentially from 0.

```bash
grunt tracking-reset
```

--------------------------------

### Get Parent Model - AdaptModel

Source: https://github.com/adaptlearning/adapt_framework/wiki/Adapt-API

Retrieves the parent of the current model. Useful for navigating up the model hierarchy.

```javascript
var myParent = Adapt.articles.models[0].getParent();
// returns the article's page model.
```

--------------------------------

### Initialize Git Repository

Source: https://github.com/adaptlearning/adapt_framework/wiki/Git-flow

Use this command to turn the current folder into a Git project. This initializes a new local repository.

```bash
$ git init
```

--------------------------------

### Get Children Models - AdaptModel

Source: https://github.com/adaptlearning/adapt_framework/wiki/Adapt-API

Retrieves the children of the current model. Useful for traversing the model hierarchy.

```javascript
var myChildren = Adapt.articles.models[0].getChildren();
// returns the article's blocks as a collection.
```

--------------------------------

### Register a new plugin

Source: https://github.com/adaptlearning/adapt_framework/wiki/Registering-a-plugin

Run this command from within an Adapt Framework project or with the ADAPT_REGISTRY environment variable set to register a new plugin.

```bash
adapt register
```

--------------------------------

### Create a New Adapt Course

Source: https://github.com/adaptlearning/adapt_framework/wiki/Setting-up-your-development-environment

Uses the Adapt CLI to create a new course project. This command scaffolds the necessary files and directories for a new Adapt course.

```bash
adapt create course
```

--------------------------------

### Reset Tracking Identifiers

Source: https://github.com/adaptlearning/adapt_framework/wiki/Compiling,-testing-and-deploying-your-Adapt-course

The `tracking-reset` task resets all tracking IDs in your JSON files, starting the sequence from 0.

```bash
tracking-reset
```

--------------------------------

### Get Siblings Models - AdaptModel

Source: https://github.com/adaptlearning/adapt_framework/wiki/Adapt-API

Retrieves siblings of the current model. An optional boolean parameter can include the model itself in the returned collection.

```javascript
var mySiblings = Adapt.blocks.models[0].getSiblings();
// returns siblings if I'm a block but not return self.
```

```javascript
var mySiblings = Adapt.blocks.models[0].getSiblings(true);
// returns my siblings if I'm a block and return self
```

--------------------------------

### Basic Event Implementation with Adapt.on and Adapt.trigger

Source: https://github.com/adaptlearning/adapt_framework/wiki/Adapt-API

Demonstrates triggering and listening to global events using Adapt.on and Adapt.trigger. Use Adapt.off to remove event listeners.

```javascript
define(['coreJS/adapt'], function(Adapt) {
        
        Adapt.on('pluginName:changed', function() {
            console.log('callback fired');
        });

        Adapt.trigger('pluginName:changed');
        // output - 'callback fired'
 
        Adapt.off('pluginName:changed');

        Adapt.trigger('pluginName:changed');
        // output - no callback fired as event was removed with 'off'
        
        var View = new Backbone.View.extend({

            initialize: function() {
                this.listenTo(Adapt, 'pluginName:updated', this.callbackFromEvent);
                this.listenToOnce(Adapt, 'pluginName:stopListening', this.stopListeningToEvent);
            },

            callbackFromEvent: function() {
                console.log('listenTo callback fired');
            },

            stopListeningToEvent: function() {
                this.stopListening(Adapt, 'pluginName:updated');
            }

        });

        Adapt.trigger('pluginName:updated');
        // output - 'listenTo callback fired'

        Adapt.trigger('pluginName:stopListening');
        // output - calls the View.stopListeningToEvent method only once and removes the callback once fired

        Adapt.trigger('pluginName:updated');
        // output - nothing is called as the last event has remove the callback

    });
```

--------------------------------

### Add Item to Drawer

Source: https://github.com/adaptlearning/adapt_framework/wiki/Core-modules

Register an item to the Drawer's item list after the framework has started. This item can trigger a callback event when clicked.

```javascript
import drawer from 'core/js/drawer';
import Adapt from 'core/js/adapt';

drawer.addItem({
    title: 'Resources',
    description: 'View course resources',
    className: 'is-resources',
    drawerOrder: 0
}, 'resources:showResources');

Adapt.on('resources:showResources', () => {
    drawer.openCustomView(new ResourcesView());
});
```

--------------------------------

### Adapt.scrollTo

Source: https://github.com/adaptlearning/adapt_framework/wiki/Adapt-API

Wraps the ScrollTo plugin to enable events on the start and end of a scroll action. It allows for custom callbacks when scrolling begins or finishes.

```APIDOC
## Adapt.scrollTo

### Description
Wraps the ScrollTo plugin to enable events on start and end of the scroll.

### Syntax
```javascript
Adapt.scrollTo(element, options);
```

### Parameters
* **element** (string | HTMLElement) - The target element to scroll to.
* **options** (object) - Configuration options for scrolling. See [jquery.scrollTo](https://github.com/flesler/jquery.scrollTo) for details.

### Events Triggered
* ``'page:scrollTo'`` - Triggered before scrolling a page.
* ``'menu:scrollTo'`` - Triggered before scrolling a menu.
* ``'page:scrolledTo'`` - Triggered after scrolling a page has ended.
* ``'menu:scrolledTo'`` - Triggered after scrolling a menu has ended.

### Example
```javascript
Adapt.scrollTo('.a-05', {
    onAfter: function() {
        console.log('trigger this after page has scrolled');
    }
})
```
```

--------------------------------

### JSX Button with Dynamic Tooltip ID

Source: https://github.com/adaptlearning/adapt_framework/wiki/Tooltips-in-Adapt

Example of integrating tooltips within a JSX template, dynamically setting the `data-tooltip-id` using component properties.

```jsx
<button
  className="nav__btn"
  data-tooltip-id={this.model.get('_id')}
  aria-label={ariaLabel}
>
  {children}
</button>
```

--------------------------------

### Prevent Default Navigation

Source: https://github.com/adaptlearning/adapt_framework/wiki/Core-modules

Plugins can override default navigation behavior by setting '_canNavigate' to false. This example shows how to prevent navigation for the '_pageLevelProgress' plugin.

```javascript
Adapt.router.set('_canNavigate', false, {pluginName: '_pageLevelProgress'});
```

--------------------------------

### List Available Grunt Tasks

Source: https://github.com/adaptlearning/adapt_framework/blob/master/GRUNT.md

Run `grunt help` to list all available Grunt tasks and their descriptions. Running `grunt` without any arguments has the same effect.

```bash
grunt help
```

--------------------------------

### Build Course with Custom JSON Extension

Source: https://github.com/adaptlearning/adapt_framework/wiki/Common-Issues

Builds the course while treating files with a specified extension (e.g., `.txt`) as JSON files. Use when the server does not support the JSON mime-type.

```sh
grunt build --jsonext=txt
```

--------------------------------

### Scroll to Element with Events

Source: https://github.com/adaptlearning/adapt_framework/wiki/Adapt-API

Wraps the ScrollTo plugin to enable events on scroll start and end. Use this to trigger actions before or after scrolling to a specific element.

```javascript
// Syntax: Adapt.scrollTo(element, options);
Adapt.scrollTo('.a-05', {
    onAfter: function() {
        console.log('trigger this after page has scrolled');
    }
})
```

--------------------------------

### List Available Grunt Tasks

Source: https://github.com/adaptlearning/adapt_framework/wiki/Compiling,-testing-and-deploying-your-Adapt-course

Use the `help` task to list all available Grunt tasks and their descriptions directly from the command line. Running `grunt` without any task name also displays help information.

```bash
help
```

--------------------------------

### Navigate to Project Directory

Source: https://github.com/adaptlearning/adapt_framework/wiki/Git-flow

Changes the current directory to the specified project folder.

```bash
cd 123-core-issue-description
```

--------------------------------

### Trigger Plugin Route Event

Source: https://github.com/adaptlearning/adapt_framework/wiki/Core-modules

When navigating to a plugin route, Adapt triggers a 'router:plugin:pluginName' event. This example shows how to trigger this event for a hypothetical plugin.

```javascript
// If the plugin route was
// #/myPluginName/views/edit
// Then Adapt will trigger:
Adapt.trigger('router:plugin:myPluginName');
// Passing out the three levels of the route
```

--------------------------------

### Handlebars Template for Adapt Plugin

Source: https://github.com/adaptlearning/adapt_framework/wiki/Developing-plugins

Example Handlebars template for a plug-in's user interface. This template defines the structure for the 'myplugin' component, including a 'Hello World!' message.

```handlebars
{{!-- /templates/myplugin.hbs --}}
<div class="component-inner myplugin-inner">
    {{> component this}}
    <div class="component-widget">
        Hello World!
    </div>
</div>
```

--------------------------------

### Create a New Version 2 Course

Source: https://github.com/adaptlearning/adapt_framework/wiki/Converting-a-Course-from-Version-1-to-Version-2

Use this command to create a new, empty course structure for version 2. Replace 'My Course' with your desired course name. Do not overwrite your existing v1 course.

```bash
adapt create course "My Course"
```

--------------------------------

### Listen to Core Event: device:resize

Source: https://github.com/adaptlearning/adapt_framework/wiki/Core-Events

Triggered when the browser window resizes. The `Adapt.device.screenWidth` is passed as an argument.

```javascript
Adapt.on('device:resize', function(screenWidth) {
    console.log('Window resized to:', screenWidth);
});
```

--------------------------------

### Build Project with Source Maps

Source: https://github.com/adaptlearning/adapt_framework/wiki/Git-flow

Builds the project with source mapping enabled, useful for debugging during development.

```bash
grunt dev
```

--------------------------------

### Build Course for Production

Source: https://github.com/adaptlearning/adapt_framework/wiki/Compiling,-testing-and-deploying-your-Adapt-course

The `build` task compiles all source files into a minified and compressed version suitable for production. It includes error checking, asset copying, Less compilation, Handlebars template compilation, dynamic configuration generation, tracking ID insertion, and JavaScript compilation.

```bash
build
```

--------------------------------

### Initialize Bower Package

Source: https://github.com/adaptlearning/adapt_framework/wiki/Developing-plugins

Interactively creates a `bower.json` file in your plugin's root directory. This file is essential for defining your plugin's metadata and dependencies.

```bash
bower init
```

--------------------------------

### Override Priority Labels on Individual Elements

Source: https://github.com/adaptlearning/adapt_framework/wiki/Priority-labels

Use the `_priorityLabels` object on individual content elements to override global settings. This example forces required labels to show and optional labels to hide for a specific element.

```json
"_priorityLabels": {
  "_isOverride": true,
  "_showWhenRequired": true,
  "_showWhenOptional": false
}
```

--------------------------------

### Listen for Adapt Router Location Changes

Source: https://github.com/adaptlearning/adapt_framework/wiki/Adapt-API

Subscribe to the 'router:location' event to react to changes in the user's navigation within Adapt. This example demonstrates how to conditionally lock the default back button navigation.

```javascript
Adapt.on('router:location', function(locationObject) {
    // Listen to location and if it's a page lock the default back button to not navigate back
    if (locationObject._contentType == 'page' && locationObject._currentId == 'co-05') {
        Adapt.router.set('_canNavigate', false, {pluginName:'_lockedPageNavigation'});
    } else {
    // If the location is anything else - return to the default navigation
        Adapt.router.set('_canNavigate', true, {pluginName:'_lockedPageNavigation'});
    }
});
```

--------------------------------

### Import Tooltip Module

Source: https://github.com/adaptlearning/adapt_framework/wiki/Tooltips-in-Adapt

Import the singleton tooltip module to access its API for managing tooltips.

```javascript
import tooltips from 'core/js/tooltips';
```

--------------------------------

### Adapt Utility Modules

Source: https://github.com/adaptlearning/adapt_framework/wiki/Adapt-API

Access to utility modules for drawer management, device information, and location tracking.

```APIDOC
## Adapt.componentStore

### Description
Used by BlockView when creating components. Allows searching for and rendering the correct component.

### Method
N/A (Property of the Adapt object)

### Endpoint
N/A

### Parameters
None

### Request Example
None

### Response
Provides access to the component store.
```

```APIDOC
## Adapt.drawer

### Description
Used to access the Drawer module for managing drawers.

### Method
N/A (Property of the Adapt object)

### Endpoint
N/A

### Parameters
None

### Request Example
None

### Response
Provides access to the Drawer module.
```

```APIDOC
## Adapt.device

### Description
Returns an object containing information about the user's device and browser.

### Method
N/A (Property of the Adapt object)

### Endpoint
N/A

### Parameters
None

### Request Example
None

### Response
An object with the following properties:
- **browser** (string): The user's browser name (e.g., 'Chrome').
- **version** (string): The user's browser version (e.g., '31').
- **OS** (string): The user's operating system (e.g., 'OS').
- **screenSize** (string): The current screen size ('large', 'medium', or 'small').
- **screenWidth** (number): The current screen width (e.g., 1024).
- **touch** (boolean): Indicates if the device is touch-enabled.
```

```APIDOC
## Adapt.location

### Description
Tracks the current location of the user within the Adapt framework, updated by the router.

### Method
N/A (Property of the Adapt object)

### Endpoint
N/A

### Parameters
None

### Request Example
```javascript
Adapt.on('router:location', function(locationObject) {
    // Listen to location and if it's a page lock the default back button to not navigate back
    if (locationObject._contentType == 'page' && locationObject._currentId == 'co-05') {
        Adapt.router.set('_canNavigate', false, {pluginName:'_lockedPageNavigation'});
    } else {
    // If the location is anything else - return to the default navigation
        Adapt.router.set('_canNavigate', true, {pluginName:'_lockedPageNavigation'});
    }
});
```

### Response
An object with the following properties:
- **_contentType** (string | null | undefined): The type of the current content ('menu', 'page', or null/undefined).
- **_currentId** (string): The ID of the current core object (course, contentObject, article, block, or component).
- **_currentLocation** (string): The current location string (e.g., 'course', 'menu-ID', 'page-ID', or 'pluginName-location-action').
- **_lastVisitedMenu** (string): The ID of the last visited menu.
- **_lastVisitedPage** (string): The ID of the last visited page.
- **_lastVisitedType** (string): The type of the last visited content ('menu' or 'page').
- **_previousContentType** (string | null | undefined): The content type of the previous location.
- **_previousId** (string | null | undefined): The ID of the previous location.
```

--------------------------------

### Adding Editable Menu Padding Variable to properties.schema

Source: https://github.com/adaptlearning/adapt_framework/wiki/Making-an-existing-theme-editable

New groups of variables can be added by creating additional objects within the 'variables' object. This example adds a '_menu' object to define editable properties for menu padding.

```json
{
  "type":"object",
  "$schema": "https://json-schema.org/draft-04/schema",
  "id": "https://jsonschema.net",
  "$ref": "http://localhost/plugins/content/theme/model.schema",
  "properties":{
    "variables": {
      "_colors": {
        "type": "object",
        "required": false,
        "title": "Colours",
        "properties": {
          "blue": {
            "title": "Blue",
            "help": "This is the blue colour used in the theme.",
            "type": "string",
            "inputType": "ColourPicker",
            "default": "#078292"
          },
          "black": {
            "title": "Black",
            "help": "This is the black colour used in the theme.",
            "type": "string",
            "inputType": "ColourPicker",
            "default": "#4b4e4f"
          }
        }
      },
      "_menu": {
        "type": "object",
        "required": false,
        "title": "Menu",
        "properties": {
          "menu-item-button-padding": {
            "title": "Menu button padding",
            "help": "Applied to menu buttons.",
            "type": "string",
            "inputType": "Text",
            "default": "10px"
          }
        }
      }
    }
  }
}
```

--------------------------------

### Compress Course Images

Source: https://github.com/adaptlearning/adapt_framework/blob/master/GRUNT.md

Optimizes JPEG, PNG, and SVG images for web delivery using imagemin. Operates on images in `src/course` by default. Use `--outputdir` to specify a different output location.

```bash
grunt compress [--outputdir=xx]
```

```bash
grunt compress --outputdir=build
```

--------------------------------

### Style Locked Menu Items with Less

Source: https://github.com/adaptlearning/adapt_framework/wiki/Locking-objects-with-'_isLocked'-and-'_lockType'

This Less CSS example defines styles for menu items, specifically changing the background image when a menu item has the 'locked' class. This visually indicates to the user that the item is locked.

```less
.menu-item-inner {
    background-image: url('course/en/images/menu-item.png');
    background-repeat: no-repeat;
    &.locked {
        background-image: url('course/en/images/menu-item-locked.png');
        background-repeat: no-repeat;
    }
}
```