Extensions/Assessment/themes/canvas

Extensions add specific functionality to Items API. They rely on modules within LT being available.

Themes use sass files to style the UI. You will need to handle them using your build tool of choice. Here is a sample webpack config:

module.exports = {
    entry: {
        main: './src/index.js',
    },
    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.s[ac]ss$/i,
                use: ['style-loader', 'css-loader', 'sass-loader'],
            },
        ],
    },
};

--

This script loads a custom UI theme for Items API.

Canvas is a minimal theme based on the Canvas LMS New Quizzes look and feel.

Items are vertically stacked with a flag button for each item. Because the assessment player is still present, you can have a timed test, auto-save, and other features.

Use the following custom region configuration in Items API to load this theme:

{
    "config": {
        "title": "Assessment title",
        "subtitle": "Assessment subtitle",
        "regions": {
            "items": [
                {
                    "type": "vertical_element",
                    "vertical_stretch_option": false,
                    "scrollable_option": false
                }
            ],
            "top-left": [
                {
                    "type": "title_element"
                }
            ],
            "bottom-right": [
                {
                    "type": "submit_button"
                }
            ]
        },
        "configuration": {
            "question_indexing": true,
            "accessibility": {
                "headings": {
                    "question": false
                }
            }
        }
    }
}

import { LT } from '@caspingus/lt/src/assessment/core';
import * as theme from '@caspingus/lt/src/assessment/extensions/ui/themes/canvas/index';

LT.init(itemsApp); // Set up LT with the Items API application instance variable
theme.run();