@dschulmeis/ls-plugin-extra-tags NPM

lecture-slides.js: Additional HTML Tags

Description

This plugin simplifies content creation with lecture-slides.js and mini-tutorial.js by defining additional HTML tags for complex elements.

Please note, that this requires the Bootstrap framework in your document. For lecture-slides.js this is no problem, as Bootstrap is already used for the main UI and can be used, anyway. For mini-tutorial.js projects Bootstrap must be manually added to the project as it is intentionally not defined as a dependency here.

Components

See the following pages for screenshots and detailed documentation.

Installation

If you are using mini-tutorial.js:

Add Bootstrap to you project, if you are using mini-tutorial.js.
Make sure your bundler allows loading of LESS stylesheets

In all cases:

Add this plugin to your presentation: $ npm add --save-dev @dschulmeis/ls-plugin-extra-tags
Import it in the index.js file
Use the HTML tags below in your presentation

Example for lecture-slides.js:

"use strict";

import SlideshowPlayer from "lecture-slides.js";
import LS_Plugin_ExtraTags from "ls-plugin-extra-tags";

window.addEventListener("load", () => {
    let player = new SlideshowPlayer({
        plugins: {
            ExtraTags: new LS_Plugin_ExtraTags({
                // Carousel control labels
                labelCarouselNext: "Next Step",
                labelCarouselPrev: "Previous Step",
                labelCarouselReset: "Restart",

                labelGithubEditOnline: "Start Online-IDE",
                labelGithubEditDownload: "Download Source Code",

                labelQuizPoints: "{1} from {2}",
                labelQuizEvaluate: "Correct",
                labelQuizNewTry: "New Try",
                quizExerciseHeading: "h2",

                githubEditUrlPrefix: "https://github.com/DennisSchulmeister/dhbwka-wwi-webprog-quellcodes/tree/master/",
                githubPagesUrlPrefix: "https://dennisschulmeister.github.io/dhbwka-wwi-webprog-quellcodes/",
            }),
        }
    });

    player.start();
});

Example for mini-tutorial.js:

import MiniTutorial from "@dschulmeis/mini-tutorial.js";
import LS_Plugin_ExtraTags from "ls-plugin-extra-tags";

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.bundle.min.js";

window.addEventListener("load", () => {
    let mt = new MiniTutorial({
        plugins: [
            new LS_Plugin_ExtraTags({
                // Same options as above
            }),
        ]
    });

    mt.start();
});