GEMATRI | Rhesa Tsaqif | Rhesa Tsaqif

GEMATRI

Interactive learning platform for geometric transformations using Batik motifs for middle school students

Overview

GEMATRI is an interactive web-based learning medium developed as a freelance project for an undergraduate thesis. The platform teaches geometric transformations (translation and reflection) to Indonesian Grade IX SMP students using Batik cultural motifs as visual context. Built with Next.js and Supabase, it combines interactive GeoGebra visualizations, a structured inquiry-based learning flow grounded in van Hiele theory, AI-powered per-section feedback via Gemini API, sequential tab-locking with mastery-based progression, and a module-level quiz engine with multi-attempt scoring and package randomization. The system was used in classroom teaching at SMP Negeri 4 Malang to validate its effectiveness in improving student understanding of geometric transformations.

Problems

Abstract geometric transformations are hard to visualize

Points, lines, and shapes moving across a coordinate plane are inherently abstract. Students struggle to connect translation vectors, reflection axes, and coordinate mapping with their daily experience, so the material becomes a memorization exercise rather than conceptual understanding.

Learning is passive and lacks scaffolding

Traditional instruction is teacher-centered. Students are not guided through a gradual progression from visual recognition to analysis and deduction (van Hiele levels 0 to 2), leaving no structured path to mastery and no way to verify understanding along the way.

No immediate, personalized feedback

Students have no way to know right away whether their reasoning is correct. Essay and open mathematical answers cannot be reliably graded by keyword matching, and there is no hint system or explanation to guide self-correction.

No cultural grounding in math problems

Standard geometry problems use generic shapes with no cultural relevance, and there is no sequential access control to ensure students master one concept before advancing to the next.

Solutions

Interactive visualization for every transformation

Built an inquiry-based learning flow (Pengamatan to Percobaan to Penyimpulan to Cek Pemahaman) around interactive GeoGebra canvases, transforming Batik motifs across a coordinate plane so each concept is seen and manipulated before it is abstracted. Each module applies GeoGebra visualization and Batik cultural context.

Two-attempt AI feedback with hints and explanations

Integrated Gemini AI to judge free-text essay reasoning. A correct first attempt returns a full explanation; a wrong first attempt returns a hint without revealing the answer and offers a "Coba Lagi" retry; a wrong second attempt returns detailed feedback with the official answer key and locks the input.

Mastery-based sequential unlocking

Implemented tab locking so students must complete every section of a tab before the next unlocks, and cross-module gating so Refleksi stays locked until the Translasi quiz is attempted. A server-side auto-unlock safety net reconciles progress so state always converges.

Scoring without demotivation

Replaced raw numeric scores with color indicators (gray, red, orange, green) so students see progress as a friendly signal, while raw scores are stored in the database for teachers.

Contributions

Architected the full Next.js 16 App Router frontend with TypeScript strict, feature-based modules, and three-layer API design

Implemented the Nusantara Rebel NeoBrutalism UI with shadcn, RetroUI, Material Symbols, hard shadows, and square cards

Built hybrid answer validation covering structured items deterministically and free-text essays via Gemini grading with hints and explanation

Developed mastery-based sequential tab unlocking with optimistic updates, transactional server reconciliation, and cross-module gating

Integrated Supabase with Drizzle schema, lazy DB access, and Gemini AI service with caching, key rotation, cooldowns, and RPD tracking

Inserted the full module content, 40-question MCQ quiz bank with scoring, and math notation for matrix and equation questions

Features

🏫

Two learning modules with multiple tabs

Delivered 10 learning tabs total (3 in Translasi: Titik, Garis, Bangun; 7 in Refleksi: Sumbu-X, Sumbu-Y, Titik 0,0, Garis x=y, Garis x=-y, Garis x=h, Garis y=h) plus a Bangun tab with a reduced section set, each with structured inquiry sections.

🔠

Eight interactive answer input types

Built 8 input mechanisms: matriks, koordinat, uraian, pilihan ganda, pilihan refleksi, urutkan (drag and drop), memasangkan, and checklist table, each with deterministic per-field correctness validation.

🔓

Sequential tab unlocking and cross-module locking

Enabled mastery-based progression with tabs locked by default, optimistic unlock with server reconciliation, and the Refleksi module gated behind the Translasi quiz, enforced with a full-screen LockOverlay instead of a redirect.

📄

Quiz system with package randomization and pembahasan

Built a 10-question MCQ quiz per module with two packages (40 questions total), random package assignment persisted across sessions, single-attempt official grading, and a result page with per-question pembahasan explanations and a full attempt history.

🤖

Gemini AI essay grading and feedback

Integrated Gemini API to judge uraian (essay) answers and grade the Penyimpulan sections, with AI responses cached (DB plus Redis read-through), validated against the answer key, and hardened with multi-key rotation, cooldowns, and retry with exponential backoff.

🔐

Supabase progress persistence and secure authentication

Persisted every answer, per-field correctness, score, feedback, and status across all attempts in the section_progress table, backed by BetterAuth email/password plus Google OAuth and session-based route protection.