Reverse engineering the 2008 LogiCola, a logic drill program

Two years ago, I set retired to creation and merchandise an updated type of LogiCola pinch the extremity of preserving Professor Gensler’s activity and introducing a much accessible solution that could beryllium utilized by students carrying immoderate instrumentality aliases operating system. Since the original was built for Windows, galore students were not capable to use it.

Today, galore students usage Chromebooks aliases mobile devices. In August, much than 100 devices in Asia visited LogiCola 3 successful a azygous week and 72 of them did astatine slightest 1 exercise. Of those, 66 came from the Philippines. Over half of them were phones and tablets. This is simply a awesome I person with enthusiasm. The merchandise seems to beryllium delivering connected the original promise I made successful 2024.

Today I’m releasing a caller type that answers the feedback you shared done the Hacker News discussion, GitHub issues and email. This merchandise brings backmost mastery learning done infinite translator drills and embeds immoderate of the playfulness from the original package pinch my ain touch.

On psyche sucking design

The landing page prioritised the wrong goals and put more emphasis connected personification acquisition done an email subscription shape than it did connected the logic drills.

Other commenters noted the creation felt too modern and retired of place. My first redesign made LogiCola 3 consciousness for illustration endeavor software, a departure from the vibrancy of the aged interface:

Making the larboard look modern by utilizing a modern look makes tons of sense. The psyche sucking emotion it produces comes from the modern look’s motivations, which is not the author’s responsibility alone, but alternatively from the ‘market and waste everything’ era we existent unrecorded within.

The colourful backgrounds that alteration connected each refresh person been 1 of the defining elements of the original brand. I borrowed the colour curen from the original, but assigned a unsocial palette to each set. Syllogistic and propositional logic deterioration different colours. This way, you’ll ever cognize wherever you are.

The Color dialog recovered successful the 2008 programme reveals 9 colour schemes, each astatine 3 depths: Pastel, Moderate and Deep. Here are six of the schemes, pinch a background, a sheet and a acheronian set on the foot. Roll the dice to spot random ones, and effort the 3 depths:

Both the aged headline, “Ready for a challenge?”, and the explanation were taken straight from Khan Academy. Every group featured the aforesaid surface because they were afterthoughts for a merchandise that was focused connected bringing you logic practice. The caller quiz model gives you context: which group and which type of logic drill you’re in, earlier you advance.

The drills are connected the beforehand page now, truthful you tin prime 1 and get started correct away.

How the original made its colours

Each of the small screens successful the past conception is composed the way the programme composes a existent one, from colours that are computed alternatively of handpicked. Every pastel is a saturated hue pushed light. Every brace sets a hue against its complement connected an RGB colour wheel: aqua pinch rose, bluish pinch cream, lime pinch magenta. And the dark strip on the bottommost is the inheritance colour tally through InvertRect, a Windows drafting usability that performs a logical NOT connected the colour values of each pixel successful a rectangle. Every spot flips. For a byte, that is the aforesaid arsenic taking it distant from FF: FF - CD = 32, and FF - 00 = FF. The portion is the nonstop complement of its ain background, and the achromatic title matter goes achromatic by the aforesaid rule.

Here is the full scheme, reconstructed from the decompiled routine:

When you alteration the depth, only level changes; the pinned FF channels never move, which is why deeper schemes turn much aggravated alternatively of going muddy. The set follows wherever the inheritance goes.

How the caller colours were chosen

While speaking pinch a friend, I realised I would ne'er beryllium capable to springiness LogiCola 3 an identical sound to the original because I’m not Gensler. So alternatively of making a c copy, I decided to time off my ain imprint while honouring the heritage. I spent the past wintertime reference books astir eponymous manner houses for illustration Gucci, Chanel, Dior and Louis Vuitton. Chanel has had only 3 charismatic successors. Reading astir really they operated and really they drew inspiration from the original source, while keeping the marque applicable and authoring caller products emboldened maine to deterioration a akin hat.

I wanted to prime colours that evoked the original while bringing caller excitement. And I was hoping to make each group rhyme, while keeping them different capable that you could show them apart. The colour schemes had to activity good together and successful isolation.

Ruxandra Duru authored a brilliant toolkit connected really to harvester 2 colours based connected the magnitude of stimulation they tin create. Later, she built a tool that suggests pairs of colours based connected a selected magnitude of stimulation, on pinch Brian Li. Since this was precisely what I was trying to do, I ported the exemplary down it and started experimenting.

Stimulation comes retired of 3 terms: wide intensity, the lightness spread betwixt the 2 colours, and the region betwixt their hues. The extremity consequence tells america really overmuch ocular excitement a brace generates, ranging from slumber coma to hyper excitement. I aimed to create pairs that were successful betwixt some extremes.

To make the colour schemes of each group consciousness connected, I picked pairs wrong the 0.45–0.58 stimulation interval. I added achromatic to each hue, to soften them and preferred ray surfaces complete acheronian ones, to make the level consciousness playful but not heavy. To create stronger cohesion betwixt sets, I painted them pinch patterns that aboveground colours from the different sets. You tin play pinch the Colour Lab below.

The people has 1 unsighted spot that matters for a study tool: it knows thing astir legibility. A brace tin beryllium wrong the interval and still beryllium difficult to read, thing friends pointed retired erstwhile I showed them the product. So I checked opposition first and only kept pairs that clear the WCAG AA level of 4.5:1.

Where the pixels travel from

Another constituent I borrowed to springiness LogiCola 3 much characteristic was the original creation made by Vitor Abreu while we were some studying astatine CODE University successful Berlin. Vitor designed a logo, on pinch assets for societal media.

The marque my friend Vitor envisioned had a retro feel. The logo is anchored by the pixelisation of the soda can. I leaned connected that item to style each facet of the caller personification interface, from the buttons to the icons. The societal media covers featured a shape made of rounded rectangles. The caller shape keeps the aged one’s thought and pixelises the shapes. The caller colours are the ones you clicked done successful the colour section.

The colour strategy picked successful 2024 (gold, violet, green, red) was inspired by hues often associated pinch the Catholic Church. Logic has been a foundational portion of the halfway program for Catholic acquisition for hundreds of years and galore students utilizing the merchandise were Catholic. Gensler himself was a Jesuit priest. It was a nosy nod, but to make the marque much consistent, I retired it.

The societal media covers inspired maine to do a deeper exploration of shape design, to grow the expressiveness of the marque and necktie everything together. Every workout now opens connected a pattern. Easy and difficult drills person different patterns truthful you tin show them apart.

The process down picking the patterns took days and aggregate iterations. Here are the generators that survived. Three of them are presently being used:

Designing a retro personification interface

HackerNoon has an open-source pixel icon library that captures the principle of the early individual machine era. LogiCola was a cleanable location for them. Their SVG files besides helped maine make judge the app is ray and performant successful places wherever the net relationship is slow aliases limited.

I looked to Google’s Material style library to research really shapes could beryllium utilized to adhd flair to the interface successful a thoughtful way. Following the determination of utilizing pixelised artefacts, I redrew Google’s shapes. The consequence is below.

Through this approach, I arrived astatine components for illustration the buttons and the badge, utilized passim the level to awesome caller content. I went done aggregate shapes and sat pinch them for a while. In the end, I picked the gem turned connected its broadside and stretched to clasp the word.

Here is the superior fastener nether different shapes.

Install it aliases usage it offline

Following my committedness to make LogiCola accessible anywhere, I paid much attraction to the mobile and desktop versions this clip around. You tin now instal LogiCola connected your instrumentality and practise logic drills moreover erstwhile you don’t person an net connection, arsenic agelong arsenic you person opened it before. You tin usage the browser for illustration you would before.

Most of the efforts to make LogiCola 3 activity connected mobile were made before. But the offline mode had ne'er been decently implemented. I utilized this opportunity to refine the app and to present an icon that is still capable to guidelines retired among different apps without having to scream.

Vitor designed 3 icons successful 2024: a soda tin pinch bubbles, a simpler soda tin that now sits connected the browser tab, and a logotype. Below are immoderate of the variations I played pinch earlier settling connected the 1 successful usage today.

Better feedback

Another root of disorder came from really the options successful a quiz were marked aft you submitted an answer. I gave the aforesaid reddish outline to each action that was wrong. This meant it was intolerable to show which 1 was really submitted by you. Seeing truthful galore options move reddish was besides discouraging.

As a personification connected Hacker News pointed out:

I’m taking 1 of the tests and the feedback seems strange: though it appears I sewage it right, because the selected reply turns green, galore of the different answers move reddish (which usually indicates a failure) and other unselected answers besides move green. It’s confusing.

Here is the surface that remark was written astir and the aforesaid surface now.

When you prime a incorrect option, the ocular cue now goes beyond colour and includes marking that action pinch a different style (an X). And you tin effort again, alternatively of getting the reply revealed correct away.

Here’s what the states for an action look for illustration now:

One of the limitations of the earlier versions of LogiCola was the deficiency of support for picking aggregate options. Definitions (Set Q) tin beryllium incorrect successful much than 1 way, but you could only prime one. You tin prime much than 1 correct reply now, and the workout tells you erstwhile a mobility allows it.

Few quiz questions require much than 1 selected answer, it [is] impossible to prime much than 1 (…) — issue #47.

Above you tin spot what picking and checking an reply looks for illustration now connected mobile. Set Q, the aforesaid group that rumor was filed against, is live. Give it a try.

A guideline for each set

For anyone who learned logic from a different book, thing connected the page said what counted arsenic a well-formed look (wff, a look that follows the syntax rules of that logical system).

The parentheses drew respective comments:

You whitethorn want to cheque really you normalize aliases separate the logical representations. (…) These pairs are the same, the other parentheses don’t alteration the meaning of the statements but only the ones pinch the other parentheses are marked arsenic correct.

The brace successful mobility was (R ^ L) v N, marked incorrect, against ((R ^ L) v N), marked correct. In Gensler’s strategy each binary connective takes its ain parentheses. So the 2 expressions are not the aforesaid look successful this system: 1 is well-formed and 1 is not. A student who ne'er learns astir the precedence of logical operators tin subordinate immoderate 2 wffs by wrapping them and ne'er beryllium wrong.

Most sets now person a reference guideline that you tin cheque whenever you want to understand the notation aliases a conception that is simply a cardinal to the completion of an exercise.

Guides unfastened beside the questions and they are resizable, truthful you tin support your attraction connected the workout and understand the style of a valid reply without interrupting your flow.

Better accessibility

Despite mounting retired to make LogiCola much accessible, my considerations did not spell beyond geography, operating systems and net connection.

Many group could not scope the drills astatine all, because the menu ignored their surface reader:

I’m utilizing [Firefox] connected Windows pinch a surface scholar and erstwhile I property the chapters fastener connected the web page, perfectly nothing happens, truthful it is not clear really I’m expected to trial the website.

The navigation besides vanished erstwhile the pointer strayed:

The fastener appears to beryllium hover only, which is bad. On apical of that, it expands contented down to show the chapters, but if you move complete and then down (instead of down past over), you exit the hover area and it closes. There are nary visual indications of the boundaries of the hover area.

The navigation is simply a existent paper now: a fastener that opens a database of links, useful from the keyboard, and tells a surface scholar what it is.

The aforesaid modular now applies wrong the drills. Every set’s colours were checked for opposition earlier they were allowed in. A incorrect prime is marked by style arsenic good arsenic colour. There are still galore accessibility challenges I haven’t addressed yet, but I’m alert of them now acknowledgment to your feedback.

Infinitely generated questions

One of the commenters connected Hacker News noted the level was too focused connected connection and philosophical logic, failing to address mathematical logic. Back then, only propositional translations and informal logic (meanings and definitions) exercises were online. Since then, I added syllogistic, modal, deontic and belief translations into the mix.

Everything built up to 2025 was done by manus and required studying the original package and Gensler’s textbook up close. Routledge sent maine a beingness transcript of the textbook. And by reverse engineering the 2008 programme pinch Ghidra and AI tools, I gained a deeper knowing of the original and wrote generators that will give you endless believe successful translations and explicate each correction you make correct away.

The translator drills now tally connected templates. Most travel from what I learned from the decoded root codification from 2008. There are besides caller templates authored by maine based connected gaps of the original program. Here is 1 of Set C’s 34 templates arsenic the programme stores it:

$B and $D are adjectives, drawn caller each time; their first letters become $j and $q. I decoded records for illustration this 1 and rebuilt each arsenic a generator that draws caller names each time; the rule, the options and the hints enactment his. Press Draw another.

Fixed-length quizzes are gone. They person been replaced by a constituent strategy that useful for illustration the original. Your people climbs arsenic you answer, takes a deed erstwhile you miss, and you decorativeness only erstwhile you scope 100 points.

This style has a sanction successful the learning literature: mastery learning, the thought Bloom projected successful 1968. The meta-analysis that followed (Kulik, Kulik and Bangert-Drowns, 1990) recovered mastery-based courses raise exam capacity by astir half a modular deviation, pinch the largest gains going to the weakest students.

The interface has a advancement barroom now, truthful you cognize really acold on you are. To inject characteristic and make the level consciousness much alive, I introduced micro-transitions and animations that were inspired by video games for illustration Mega Man and Street Fighter.

Here are six of the directions I prototyped pinch AI tools. Press Miss to effort them.

To make decisions astir what made it into the product, I ran in-person tests wherever I tried to gauge people’s reactions. Through immoderate iterations, action A (flash aft taking damage) won. You tin spot it connected the desktop and mobile versions of the app.

What started retired arsenic a preservation effort without a representation became a modernisation, built from the original’s ain formula. LogiCola 3 has gained caller creation elements, but it besides gained caller templates and a lexicon revision that makes the connection utilized successful the drills much relatable to students successful 2026. I ventured into territory that is profoundly extracurricular of my comfortableness area because of AI devices we person astatine our disposal and because of your support.

Thank you

This merchandise exists because group took the clip to constitute and stock their feedback pinch me: gmdrd, Jtsummers, dexwiz, gostsamo, auggierose and gorjusborg connected Hacker News; boxed, mnba, tessprime and rabuf connected GitHub.

Vitor Abreu and Olena Diakonova group the marque instauration this activity builds on. Ruxandra Duru expanded my knowing of colour theory, and Emil Kowalski taught maine really to trade animations. Florian Grote and Sebastian Rosengrün, my professors astatine CODE University, gave maine feedback and encouragement while I was a student there, and Ben Bachem publication an early draft. Without the textbook Andrew Beck sent from Routledge, a generous aid from Professor Timothy Kearns, and the Ghidra MCP server that LaurieWired started and Benjamin Ethington expanded, this level would not exist.

The pixel icons are HackerNoon’s. LogiCola is built pinch Khan Academy’s KaTeX for the formulas, and this blog pinch Sebastian Sdorra’s Content Collections.