bottom-editor — Platform Integrations

How to embed <bottom-editor>, <bottom-exercise>, and <kara-editor> inside common authoring platforms.

← Back to Embedding Guide

DokuWiki

The bottomeditor DokuWiki plugin passes <bottom-editor>, <bottom-exercise>, and <kara-editor> elements straight through the renderer and injects the required JavaScript on any page that contains them. No shortcode or special syntax is needed — authors write the elements directly in the page source using DokuWiki's HTML mode.

Installation

The easiest way is the DokuWiki plugin manager:

1. Go to Admin → Extension Manager → Search and Install
2. Search for bottomeditor or paste the plugin URL:
   https://www.dokuwiki.org/plugin:bottomeditor
3. Click Install.

Alternatively, download bottomeditor.zip and extract it into lib/plugins/ so the result is lib/plugins/bottomeditor/plugin.info.txt.

Configuration

Go to Admin → Configuration Settings → bottomeditor. The only setting is base_url, which defaults to https://bottom.ch/editor/stable. Change it to https://bottom.ch/editor/latest to track the latest build, or to a self-hosted URL.

Usage

Open a page in DokuWiki's source editor (not the WYSIWYG toolbar) and write elements directly:

<bottom-editor>
print("Hello from DokuWiki!")
</bottom-editor>

<bottom-exercise>
  Write a function sum_to(n).
  <script type="text/x-starter">
def sum_to(n):
    pass
  </script>
  <script type="text/x-test">
assert sum_to(5) == 15
  </script>
</bottom-exercise>

Note: Use the <script type="text/x-starter"> / <script type="text/x-test"> syntax for exercise code blocks rather than <template> elements, as DokuWiki's HTML renderer may reformat <template> content.

H5P

An H5P content type is available for embedding exercises inside any H5P-enabled platform (Moodle, DokuWiki with H5P plugin, standalone H5P.org, etc.). It wraps <bottom-exercise> as a self-contained H5P activity that can be reused across your content library.

Installation

1. Download H5P.BottomExercise-1.0.h5p.
2. In Moodle: Site admin → H5P → Manage H5P content types → Upload.
3. In DokuWiki with the H5P plugin: Admin → H5P → Libraries → Upload library.

Creating an exercise

Once installed, add an H5P activity to your course or page, choose Bottom Exercise as the content type, then fill in the prompt, starter code, test code, and solution directly in the form — no HTML required.

Note: The H5P Hub (the public content type registry) is not currently supported. The content type must be installed by uploading the .h5p file directly, as described above.

Moodle

Two complementary Moodle plugins are available.

Activity module — mod_bottomeditor

Adds a Python Exercise activity to the course activity chooser. Each instance is a single graded exercise on its own page. Student submissions are recorded in the Moodle gradebook.

Installation

1. Download mod_bottomeditor.zip.
2. Site admin → Plugins → Install plugins → upload the zip, or extract it manually into the mod/ directory of your Moodle installation.
3. Follow the on-screen upgrade steps.

Usage

In a course, Add activity → Python Exercise. Fill in the prompt, starter code, test code, optional solution, and grading settings. The exercise is rendered using the component loaded from the configured base URL (https://bottom.ch/editor/stable by default — change it in the plugin settings).

Filter plugin — filter_bottomeditor

Enables embedding exercises directly inside Page resources, Book chapters, Labels, course descriptions, and any other place Moodle renders HTML. Authors write <bottom-editor>, <bottom-exercise>, or <kara-editor> elements directly in the HTML source; the filter injects the required scripts automatically.

Installation

1. Download filter_bottomeditor.zip.
2. Extract it into filter/ so the result is filter/bottomeditor/filter.php (the Moodle web interface may not have write access to this directory; use SSH/SFTP if needed).
3. Visit Site admin — Moodle will detect the new plugin and run the upgrade.
4. Go to Site admin → Plugins → Filters → Manage filters and set Bottom Editor to On.

Authoring requirement — Trusted content

Moodle's HTML Purifier strips unknown custom elements when content is saved. To preserve <bottom-exercise> etc., the author must have the Trusted content capability (moodle/site:trustcontent):

1. Site admin → Users → Permissions → Define roles — add moodle/site:trustcontent to the roles held by content authors (e.g. Teacher, Manager).
2. In the text editor, switch to plain text / source mode to paste the element markup — the WYSIWYG editor may otherwise re-sanitize the HTML on the client side.

Without trust:content, the custom element tags are stripped on save and the filter has nothing to work with. The filter only handles script injection; it does not bypass the save-time HTML Purifier.

Usage

Inside a Page resource or Book chapter, switch to the HTML source view and write elements directly:

<bottom-editor id="hello">
print("Hello from Moodle!")
</bottom-editor>

<bottom-exercise id="ex1">
  Write a function sum_to(n).
  <script type="text/x-starter">
def sum_to(n):
    pass
  </script>
  <script type="text/x-test">
assert sum_to(5) == 15
  </script>
</bottom-exercise>

The filter detects the elements and injects bottom-exercise.js and kara-editor-page.js from the configured base URL once per page load. If the same page already has an explicit <script> tag loading the component (e.g. a different version), the filter's injection is suppressed to avoid a double-registration error.