lecture-slides.js: Additional HTML Tags

1. Description
2. Components
3. Installation
4. Copyright

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.

1. Grid
2. Info Box
3. Card
4. Tab Pages
5. Accordion
6. Slide Carousel
7. Youtube Video
8. Interactive Quiz
9. List with Emoji Symbols
10. Edit and Download GitHub Repositories Online
11. Modal Overlay Window

Installation

If you are using mini-tutorial.js:

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

In all cases:

1. Add this plugin to your presentation: $ npm add --save-dev @dschulmeis/ls-plugin-extra-tags
2. Import it in the index.js file
3. 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();
});

Copyright

lecture-slides.js: https://www.github.com/DennisSchulmeister/lecture-slides.js This plugin: https://github.com/DennisSchulmeister/ls-plugin-extra-tags © 2020 – 2025 Dennis Schulmeister-Zimolong [email protected] Licensed under the 2-Clause BSD License.