Leveraging Interactive, Explanation-Driven Web Design to Improve Comprehension of Fuzzy Logic and Approximate String Matching for Non-Technical Learners.
Disclaimer
Fuzzy logic and approximate string matching sit behind things people use every day, autocorrect, search-engine typo handling, spell-checkers, yet the underlying idea is rarely explained in a way that clicks for someone without a technical background. Most explanations jump straight into formulas and matrices before establishing any intuition.
Fuzzy Logic Interactive takes the opposite approach. It's a browser-based tool that lets a learner type a misspelled word, watch the computer work out the closest match step by step, and see why it made that choice, before ever being shown a definition. A guide character, Detective Lex, frames the whole experience as a mystery to solve rather than a lecture to sit through. The tool was built as the practical component to investigate whether interactive, explanation-driven demos improve comprehension of fuzzy matching concepts compared to traditional teaching material, such as textbook definitions or slide decks that simply state the answer without showing the reasoning.
- Fuzzy logic and edit-distance concepts are usually taught through equations and pseudocode, which is a poor entry point for beginners or non-technical audiences.
- Learners can use autocorrect and fuzzy search every day without ever forming a correct mental model of how the underlying comparison works.
- Static explanations (textbook definitions, slide decks) don't let a learner test their own intuition against real input and get immediate, explained feedback.
- There was no lightweight, accessible tool to measure whether an interactive explanation actually improves understanding versus reading a definition.
- Build an interactive web tool that demonstrates fuzzy string matching using real user input, not canned examples.
- Make the reasoning behind each match visible - show the edits, not just the final score.
- Measure learning gain directly, by testing the same learner before and after they use the tool.
- Keep the experience accessible, so it works for keyboard and screen-reader users, not just mouse users.
- Package the core concepts (fuzzy sets, membership, edit distance, similarity scoring) into short, self-contained modules and a glossary for reference.
- Produce a working artifact that supports and demonstrates the findings of the accompanying dissertation.
- STEP 1 - The Warm-Up: A single-word input where the learner types a typo (e.g. "aple") and immediately sees the best-matching word, its similarity score, and a plain-language explanation of the edits used to get there.
- STEP 2 - The Main Tool: The learner compares two words of their own choosing. The tool computes the edit distance, converts it into a similarity percentage, visualises it on a fuzzy bar, and logs the comparison for later analysis.
- STEP 3 - Pre/Post Quiz: A short quiz is given before the learner touches the main tool and again after, so learning gain can be measured as the difference between the two scores rather than assumed.
- STEP 4 - Learning Modules: Five short modules ("What is Fuzzy Logic?", "Fuzzy Sets & Membership", "The Fuzzy Thinking Process", "How Computers Compare Words", "What is a Similarity Score?") let the learner revisit specific ideas at their own pace.
- STEP 5 - Glossary: A reference page defining the core terms (Fuzzy Logic, Levenshtein Distance, Fuzzy Set) in one or two plain sentences each, for anyone who wants a quick lookup instead of a full module.
- STEP 6 - Anonymous Analytics: Every session is authenticated anonymously via Firebase and tagged with a random session ID. Interaction events (quiz answers, comparisons made, reasoning-panel opens, active time on task) are written to Firestore to support the evaluation of the tool.
- HTML / CSS / JavaScript - the entire interactive front end is built with vanilla web technologies, no framework, to keep the tool lightweight and easy to host anywhere.
- Firebase Authentication - anonymous sign-in, used only to tie a session's events together without identifying the person behind it.
- Firebase Firestore - stores anonymized interaction logs (quiz scores, comparison history, timing data) used to evaluate the tool.
- Content Security Policy & security headers (
_headers) - restricts script, connect, and frame sources to the minimum needed, withX-Frame-Options,X-Content-Type-Options, and a locked-downPermissions-Policy. - ARIA roles and labels throughout - regions, live regions, and labelled controls so the tool works with screen readers and keyboard-only navigation, not just a mouse.
At the core of the tool is a Levenshtein distance implementation that doesn't just return a number - it reconstructs the actual sequence of insertions, deletions, and substitutions needed to turn one word into the other, so those edits can be shown back to the learner in plain language.
That distance is then converted into a similarity score using:
similarity = (1 - distance / max(length(word1), length(word2))) * 100
A score of 100% means a perfect match; anything lower is colour-coded (high / medium / low similarity) and paired with a sentence explaining how many edits it took to get there and why that translates to the percentage shown. The same engine powers both the single-word warm-up demo and the two-word comparison tool in Step 2, so the learner sees one consistent mental model reinforced twice, in two different contexts.
- Explanation-first design - every score comes with the reasoning behind it, not just the number.
- Detective Lex persona - frames the tool as an investigation rather than a lesson, used consistently across the warm-up, main tool, and quizzes.
- Pre/post quiz with measured learning gain - the tool doesn't assume it's working; it checks, per session.
- Modular learning content - five short modules plus a standalone glossary, so the depth of engagement is the learner's choice.
- Accessibility built in from the start - ARIA landmarks, live regions for dynamic results, and full labelling on interactive controls.
- Privacy-respecting analytics - anonymous auth, sanitized free-text input, and no personally identifying data collected at any point.
- Idle-aware active-time tracking - time-on-task is only counted while the learner is actually engaged, giving a more honest engagement metric than raw session duration.
- Expand the module set to cover fuzzy logic applications beyond string matching such as fuzzy control systems, fuzzy classification for learners who want to go further after the core demo.
- Add a difficulty ramp to the quiz, so returning learners aren't shown the same fixed question set every time.
- Surface aggregate (anonymized) learning-gain trends back to educators, so that the tool's effectiveness data can inform future teaching material.
- Extend accessibility testing with real screen-reader users, beyond ARIA compliance checks, to catch friction points that automated checks miss.
- Localize the content, since the plain-language explanation approach should translate well to other languages and could broaden who the tool is useful to.
Fuzzy Logic Interactive turns an abstract, formula-heavy topic into something a learner can poke at, break, and understand through direct feedback - without ever needing to read a definition first. By pairing a step-by-step, explanation-driven interface with a measured pre/post quiz, the tool doesn't just teach fuzzy matching, it produces evidence of whether the teaching actually worked. That combination of interactivity, transparency, and built-in evaluation is what ties the project back to its purpose whether explanation-driven interactive tools genuinely improve comprehension over static alternatives.