lia-Mathe for LiaScript: Interactive Fraction Quizzes with Visual Feedback

Teaching fractions with static diagrams only goes so far. The lia-Mathe community plugin by MINT-the-GAP provides two visual fraction exercise types: a circle (pie) and a rectangle (grid). Students drag a slider to set the number of sections, then click the correct segments to represent the given fraction — and LiaScript grades the answer automatically.

Quick Start

<!--
import: https://raw.githubusercontent.com/MINT-the-GAP/lia-Mathe/main/README.md
-->

@circleQuiz — Pie chart fraction exercise

@circleQuiz(3/8)

Renders an interactive pie chart. The student uses a slider to set the number of sectors, then clicks the correct number of sectors to represent the fraction 3/8.

For a version with custom quiz options (e.g., limiting the solution button):

@circleQuizC(3/8,`<!-- data-solution-button="2" -->`)

@rectQuiz — Rectangle grid fraction exercise

@rectQuiz(1/3)

Renders an interactive rectangle. The student sets rows and columns using sliders, then clicks the correct cells to represent the fraction 1/3.

@rectQuizC(1/4,`<!-- data-solution-button="2" -->`)

Example: Fraction Worksheet

<!--
import: https://raw.githubusercontent.com/MINT-the-GAP/lia-Mathe/main/README.md
-->

# Fractions — Visual Exercises

## Task 1 — Mark 1/2 on the circle

Use the slider to set the number of sectors, then click the correct sectors to show 1/2.

@circleQuiz(1/2)

---

## Task 2 — Mark 3/4 on the rectangle

Set rows and columns, then click to shade exactly 3/4 of the rectangle.

@rectQuiz(3/4)

---

## Task 3 — Which fraction is shown?

The circle below represents a fraction.
Use the slider and clicks to match it.

@circleQuizC(2/5,`<!-- data-solution-button="4" -->`)

---

## Task 4 — Compare fractions

First shade 2/3 on the circle.

@circleQuiz(2/3)

Then shade 3/4 on the rectangle.
Which is larger?

@rectQuiz(3/4)

[( )] 2/3
[(X)] 3/4
[( )] They are equal

Try it live — use the sliders to set sections and click to shade the correct fraction:

Example: Combined with lia-coordinate

Fraction exercises pair naturally with coordinate exercises from lia-coordinate in the same course:

<!--
import: https://raw.githubusercontent.com/MINT-the-GAP/lia-Mathe/main/README.md
import: https://raw.githubusercontent.com/MINT-the-GAP/lia-coordinate/main/README.md
-->

# Math Worksheet

## Fractions

Mark 5/8 on the circle.

@circleQuiz(5/8)

---

## Coordinate Systems

Plot the point $A(3, 2)$ on the coordinate plane.

@CoordinateSystem(`xmin=-5;xmax=5;ymin=-4;ymax=4;width=700;id=c1`)
@CreatePoint(`c1;A;3;2`, ` `)

Full Template Demo

Use Cases

Primary math — Introducing fractions visually with the circle model (pie) and the area model (rectangle) side by side.

Fraction comparison — Students shade two different fractions and visually compare which is larger.

Equivalence exercises — Ask students to shade 2/4 on the rectangle and 1/2 on the circle to discover they are equal.

Combined with lia-freeze-v2 — Fraction quiz states are captured in the freeze snapshot and can be sent to the teacher for review.

Technical Facts

Try It

Related Templates

• lia-coordinate — interactive coordinate systems and function plotting
• JSXGraph — general-purpose interactive math with JSXGraph
• lia-canvas-ocr — handwrite fraction answers and auto-recognize via OCR
• lia-freeze-v2 — freeze quiz state and share with teacher for review