@dodona/widgets

v0.1.7

Published

2 months ago

This repository hosts web components for the Dodona platform. Currently, it contains a single component: the **Parsons Puzzle**.

0High
0Medium
0Low

Dodona Widgets (`@dodona/widgets`)

This repository hosts web components for the Dodona platform. Currently, it contains a single component: the Parsons Puzzle.

Project Structure

src/common/: Shared utilities and styles
src/parsons/: Parsons Widget source
- core/: Logic (Grader, Parser, i18n)
- dw-parsons-puzzle.ts: Main component
- dw-parsons-block.ts: Block component
demo/: Interactive Puzzle Builder & Demo page

Installation

npm install @dodona/widgets

[!IMPORTANT] This package requires lit and highlight.js as peer dependencies. Ensure they are installed in your project:
npm install lit highlight.js

Development

npm install
npm run dev
npm run build      # Build library (dist/)
npm run build:demo # Build demo application
npm run test
npm run lint:css
npm run format

Publishing

To publish a new version of the package:

Login to npm (if not already logged in):
```
npm login
```
Bump the version:
```
npm version patch # or minor, major
```
Publish:
```
npm publish
```
(This will automatically run the build script before publishing).

Parsons Puzzle (`dw-parsons-puzzle`)

A web component for Parsons Puzzles, built with Lit.

Features

Drag and Drop Interface: Drag code blocks from source to solution.
Indentation Support: Drag blocks horizontally or use buttons to indent/unindent.
Distractors: Support for distractor blocks (incorrect code options).
Custom Separators: Configure block separators via attributes.
Syntax Highlighting: Python syntax highlighting using Highlight.js.
Accessibility: Keyboard accessible controls and ARIA support.
Internationalization: Support for English and Dutch with automatic language detection.
Theming: Fully customizable via CSS variables.

Usage

Basic Example

<script type="module" src="/src/index.ts"></script>

<dw-parsons-puzzle>
  <pre>
def hello():
    print("Hello World")
</pre>
</dw-parsons-puzzle>

Configuration

[!NOTE] If no separators are found in the content, the component will automatically split the code into blocks by line.

Internationalization

The component fully supports English (en) and Dutch (nl). This includes all UI buttons, tooltips, and pedagogical feedback from the grader.

Language Detection Priority:

Direct Attribute: <dw-parsons-puzzle language="nl"></dw-parsons-puzzle>
Parent Attribute: Looks for the closest ancestor with a lang attribute (e.g., <html lang="nl">).
Fallback: Defaults to English (en).

The component automatically reacts to changes in the language attribute at runtime.

Events

The component dispatches a custom event when the solution is graded.

Event Detail Example (e.detail):

{
  "isCorrect": false,
  "feedback": [
    { "key": "wrong_indent", "params": { "line": 2 } }
  ],
  "blockStatuses": {
    "block-id-123": "correct",
    "block-id-456": "indent"
  }
}

Listening for the event:

document.querySelector('dw-parsons-puzzle').addEventListener('puzzle-graded', (e) => {
  console.log('Is correct:', e.detail.isCorrect);
});

Theming

The component uses CSS variables for styling.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Dodona Widgets (@dodona/widgets)