Documentation

Global

Methods

AddRows(matrix, sourceRow, targetRow, scalar)

Help Component that Adds given Rows in a Matrix

Parameters:
Name Type Description
matrix Array.<Array.<number>>

Matrix passed by the challenge
sourceRow number

Row that's getting added to another
targetRow number

Row to add sourceRow on
scalar number

Multiplicator for the sourceRow
Returns:
Type
Array.<Array.<number>>

CalcButtons(DisableZV, DisableZA, DisableZM, matrix, setMatrix)

Component that displays Calculation function buttons in challenges

Parameters:
Name Type Description
DisableZV Boolean

Disables the Switch Button if true
DisableZA Boolean

Disables the Addition Button if true
DisableZM Boolean

Disables the Multiplication Button if true
matrix Array.<Array.<number>>

Matrix given from the Challenge
setMatrix function

Callback that displays the new matrix
Returns:
Type
JSX.Element

Content(part)

  • Automatically scrolls down when a new part is loaded.
  • Supports multiple content types:
    • "title": heading text
    • "text": paragraph text
    • "katex": mathematical formulas
    • "StaticMatrix": static matrix display (optional with CalcButtons)
    • "CalcButtons": calculation buttons for matrices
    • "EditableMatrix": editable matrix input
    • "Equations": equation display
    • "SelectionButtons": multiple-choice buttons
Parameters:
Name Type Description
part Number

Current part within the page
Returns:

A scrollable container with all content rows for the current part.

Type
JSX.Element

ContinueBtn(stage, onContinue)

Parameters:
Name Type Description
stage Number

0 (disabled), 1 (clickable), 2 (clickable and congrats)
onContinue function

Callback-function to continue
Returns:
Type
JSX.Element

EditableMatrix(rows, cols, resultCol, det, onChange)

Component that renders an empty matrix with room for user inputs

Parameters:
Name Type Description
rows number

number of rows
cols number

number of columns (including result column if resultCol is true)
resultCol boolean

is the last column a results column
det boolean

is the matrix a determinant
onChange Array.<Array.<fraction>>

Callback, that returns the current matrix as Fractions
Returns:
Type
JSX.Element

Equations(solMatrix)

React component that renders equations from a matrix.

Parameters:
Name Type Description
solMatrix Array.<Array.<number>> | Array.<Array.<fraction>>

The solution matrix.
Returns:

A rendered list of equations displayed with KaTeX via BlockMath.

  • Skips trivial identities 0 = 0.
  • Randomly moves some terms to the right-hand side (with sign inversion).
Type
JSX.Element

getFile(mode, id)

Utility to get the correct Filepath for a Level

Parameters:
Name Type Description
mode string

pass of level mode
id string

pass of level id
Returns:
Type
JSON.Response

LevelEndContent(nextLevelExists)

Component that renders a congratulation, a repeat level button and a next level buttons

Parameters:
Name Type Description
nextLevelExists boolean

if there is a next level
Returns:
Type
JSX.Element

LevelRenderer()

  • Fetches metadata from /data/{mode}/level_meta.json.
  • Loads level data via getFileData.
  • Tracks progress across pages and parts of the level.
  • Provides navigation functions (next, back, nextLevel).
  • Renders different navigation controls depending on mode:
    • Tutorial: navigation arrows
    • Challenge: continue button
  • At the end of a level, renders LevelEndContent with links to the next level.
Returns:

Rendered level view including toolbar, content, and navigation.

Type
JSX.Element

MatrixCreator( [solMatrix] [, solution] [, resultCol] [, transformations] [, maxNum] [, denominator] [, rows] [, cols] [, zeroCols])

Generates or transforms a matrix using randomized Gauss operations.

It returns the transformed matrix, the original solution matrix and the solution ("one", "no", "infinite").

Parameters:
Name Type Argument Default Description
solMatrix Array.<Array.<number>> | "random" <optional>
 "random"

A predefined matrix or "random" to auto‑generate one.
solution "random" | "one" | "no" | "infinite" <optional>
 "random"

solution type (irrelevant for a given solMatrix)
resultCol boolean <optional>
 false

matrix includes a result column (augmented matrix)
transformations Array.<number> <optional>
 []

matrix transformation sequence (example: [0,1,2,3]), no transformation: []

  • 0: upward Gauss
  • 1: downward Gauss
  • 2: shuffle
  • 3: multiply

solution still recognizable: [0,2,3]
maxNum number <optional>
 1

Maximum absolute value for random scalars used in row operations (from -maxNum to +maxNum).
denominator Array.<number> <optional>
 [1]

Allowed denominators for random fractions (example: [1,1,2,4]), used only in multiply tranformation.
rows Array.<number> <optional>
 [3]

number of rows (irrelevant for a given solMatrix)
cols Array.<number> <optional>
 [3]

number of columns (exclusive result col) (irrelevant for a given solMatrix)
zeroCols boolean <optional>
 true

Can there be zero columns?
Returns:

  • return.matrix: The transformed matrix after applying Gauss operations.

    Type
    Array.<Array.<number>>

  • return.solMatrix: The original (or generated) solution matrix before transformations.

    Type
    Array.<Array.<number>>

  • return.solution: The solution type of the generated matrix.

    Type
    "one" | "no" | "infinite"

MultiplyRow(matrix, Row, scalar)

Help Component that Multiplies a given Row in a Matrix

Parameters:
Name Type Description
matrix Array.<Array.<number>>

Matrix passed by the challenge
Row number

Row that's getting multiplied
scalar number

Multiplicator for the Row
Returns:
Type
Array.<Array.<number>>

Component that Renders a Forward and a Backward Arrow

Parameters:
Name Type Description
props.disableBack boolean

if true: backward button disabled
props.onBack function

Callback-function for the backward button
props.onNext function

Callback-function for the forward button
Returns:
Type
JSX.Element

setTheme(themeName)

Applies a given theme class to the document body by removing existing theme classes and adding the new one.

Parameters:
Name Type Description
themeName string

The CSS class name of the theme to apply (e.g., "theme-green").

SolutionVerifier(acceptance, solutionMatrix, userMatrix)

Parameters:
Name Type Description
acceptance Number
  • 0 (equivalent),
  • 1 (multiples),
  • 2 (lines swapped),
  • 3 (line swapped & multiples)
  • 4 (line swapped & multiples & ignore zero lines)
solutionMatrix Array.<Array.<number>> | Array.<Array.<fraction>>

The solution matrix.
userMatrix Array.<Array.<number>> | Array.<Array.<fraction>>

The user matrix.
Returns:
Type
boolean

StaticMatrix(data, resultCol, det)

Component that renders a given matrix

Parameters:
Name Type Description
data Array.<Array.<number>> | Array.<Array.<fraction>>

2-dim array with the matrix values (each inner list is a row)
resultCol boolean

is the last column a results column
det boolean

is the matrix a determinant
Returns:
Type
JSX.Element

SwitchRows(matrix, row1, row2)

Help component that Switches given Rows in a Matrix

Parameters:
Name Type Description
matrix Array.<Array.<number>>

matrix that get's passed by the challenge
row1 number

first row to switch
row2 number

second row to switch
Returns:
Type
Array.<Array.<number>>

ThemeChanger()

Renders a SpeedDial component that allows the user to switch between predefined themes.

Each SpeedDial item represents a theme option (green, blue, red) and applies the corresponding CSS class to the document body when selected.

Returns:

The rendered theme changer component.

Type
JSX.Element

Toolbar(mode, progressValue, heartCount, isSmallScreen)

Component that Renders a dynamic progress bar

Parameters:
Name Type Description
mode String

'tutorial' or 'challenge'
progressValue function

progress bar value (0 - 100)
heartCount function

only challenge: number of hearts (5 - 0)
isSmallScreen boolean

relevant for heartCount, but should actually be determined automatically
Returns:
Type
JSX.Element