antialias/soroban-abacus-flashcards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: correct tutorial bead highlighting to use rightmost column (ones place)

Browse Source 
Changed columnIndex from 0 to 4 in tutorial highlighting to ensure beads are
highlighted on the rightmost column where single-digit arithmetic should occur.
Column 0 represents ten-thousands place, column 4 represents ones place.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock
2025-09-21 15:15:11 -05:00
parent de1271275a
commit b6b1111594
2 changed files with 52 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
apps/web/src/components/GuidedAdditionTutorial.tsx
View File

@@ -56,7 +56,7 @@ const tutorialSteps: TutorialStep[] = [
description: 'Start by adding your first earth bead',
startValue: 0,
targetValue: 1,
highlightBeads: [{ columnIndex: 0, beadType: 'earth', position: 0 }],
highlightBeads: [{ columnIndex: 4, beadType: 'earth', position: 0 }],
expectedAction: 'add',
actionDescription: 'Click the first earth bead to move it up',
tooltip: {
@@ -76,7 +76,7 @@ const tutorialSteps: TutorialStep[] = [
description: 'Add the second earth bead to make 2',
startValue: 1,
targetValue: 2,
highlightBeads: [{ columnIndex: 0, beadType: 'earth', position: 1 }],
highlightBeads: [{ columnIndex: 4, beadType: 'earth', position: 1 }],
expectedAction: 'add',
actionDescription: 'Click the second earth bead to move it up',
tooltip: {
@@ -96,7 +96,7 @@ const tutorialSteps: TutorialStep[] = [
description: 'Add the third earth bead to make 3',
startValue: 2,
targetValue: 3,
highlightBeads: [{ columnIndex: 0, beadType: 'earth', position: 2 }],
highlightBeads: [{ columnIndex: 4, beadType: 'earth', position: 2 }],
expectedAction: 'add',
actionDescription: 'Click the third earth bead to move it up',
tooltip: {
@@ -116,7 +116,7 @@ const tutorialSteps: TutorialStep[] = [
description: 'Add the fourth earth bead to make 4',
startValue: 3,
targetValue: 4,
highlightBeads: [{ columnIndex: 0, beadType: 'earth', position: 3 }],
highlightBeads: [{ columnIndex: 4, beadType: 'earth', position: 3 }],
expectedAction: 'add',
actionDescription: 'Click the fourth earth bead to complete 4',
tooltip: {
@@ -138,7 +138,7 @@ const tutorialSteps: TutorialStep[] = [
description: 'Use the heaven bead to represent 5',
startValue: 0,
targetValue: 5,
highlightBeads: [{ columnIndex: 0, beadType: 'heaven' }],
highlightBeads: [{ columnIndex: 4, beadType: 'heaven' }],
expectedAction: 'add',
actionDescription: 'Click the heaven bead to activate it',
tooltip: {
@@ -158,7 +158,7 @@ const tutorialSteps: TutorialStep[] = [
description: 'Add 1 to 5 by activating one earth bead',
startValue: 5,
targetValue: 6,
highlightBeads: [{ columnIndex: 0, beadType: 'earth', position: 0 }],
highlightBeads: [{ columnIndex: 4, beadType: 'earth', position: 0 }],
expectedAction: 'add',
actionDescription: 'Click the first earth bead to make 6',
tooltip: {
@@ -181,8 +181,8 @@ const tutorialSteps: TutorialStep[] = [
startValue: 3,
targetValue: 7,
highlightBeads: [
{ columnIndex: 0, beadType: 'heaven' },
{ columnIndex: 0, beadType: 'earth', position: 0 }
{ columnIndex: 4, beadType: 'heaven' },
{ columnIndex: 4, beadType: 'earth', position: 0 }
],
expectedAction: 'multi-step',
actionDescription: 'First add heaven bead (5), then remove 1 earth bead',
@@ -208,8 +208,8 @@ const tutorialSteps: TutorialStep[] = [
startValue: 2,
targetValue: 6,
highlightBeads: [
{ columnIndex: 0, beadType: 'heaven' },
{ columnIndex: 0, beadType: 'earth', position: 0 }
{ columnIndex: 4, beadType: 'heaven' },
{ columnIndex: 4, beadType: 'earth', position: 0 }
],
expectedAction: 'multi-step',
actionDescription: 'Add heaven bead (5), then remove 1 earth bead',
@@ -235,9 +235,9 @@ const tutorialSteps: TutorialStep[] = [
startValue: 1,
targetValue: 4,
highlightBeads: [
{ columnIndex: 0, beadType: 'earth', position: 1 },
{ columnIndex: 0, beadType: 'earth', position: 2 },
{ columnIndex: 0, beadType: 'earth', position: 3 }
{ columnIndex: 4, beadType: 'earth', position: 1 },
{ columnIndex: 4, beadType: 'earth', position: 2 },
{ columnIndex: 4, beadType: 'earth', position: 3 }
],
expectedAction: 'multi-step',
actionDescription: 'Add 3 earth beads one by one',
@@ -264,10 +264,10 @@ const tutorialSteps: TutorialStep[] = [
startValue: 4,
targetValue: 6,
highlightBeads: [
{ columnIndex: 0, beadType: 'heaven' },
{ columnIndex: 0, beadType: 'earth', position: 0 },
{ columnIndex: 0, beadType: 'earth', position: 1 },
{ columnIndex: 0, beadType: 'earth', position: 2 }
{ columnIndex: 4, beadType: 'heaven' },
{ columnIndex: 4, beadType: 'earth', position: 0 },
{ columnIndex: 4, beadType: 'earth', position: 1 },
{ columnIndex: 4, beadType: 'earth', position: 2 }
],
expectedAction: 'multi-step',
actionDescription: 'Add heaven bead (5), then remove 3 earth beads',
@@ -295,11 +295,11 @@ const tutorialSteps: TutorialStep[] = [
startValue: 4,
targetValue: 5,
highlightBeads: [
{ columnIndex: 0, beadType: 'heaven' },
{ columnIndex: 0, beadType: 'earth', position: 0 },
{ columnIndex: 0, beadType: 'earth', position: 1 },
{ columnIndex: 0, beadType: 'earth', position: 2 },
{ columnIndex: 0, beadType: 'earth', position: 3 }
{ columnIndex: 4, beadType: 'heaven' },
{ columnIndex: 4, beadType: 'earth', position: 0 },
{ columnIndex: 4, beadType: 'earth', position: 1 },
{ columnIndex: 4, beadType: 'earth', position: 2 },
{ columnIndex: 4, beadType: 'earth', position: 3 }
],
expectedAction: 'multi-step',
actionDescription: 'Add heaven bead (5), then remove all 4 earth beads',
@@ -326,7 +326,7 @@ const tutorialSteps: TutorialStep[] = [
description: 'Add 3 to 2. You have space, so add directly.',
startValue: 2,
targetValue: 5,
highlightBeads: [{ columnIndex: 0, beadType: 'earth', position: 2 }],
highlightBeads: [{ columnIndex: 4, beadType: 'earth', position: 2 }],
expectedAction: 'add',
actionDescription: 'Add the third earth bead to complete 5',
tooltip: {
@@ -347,8 +347,8 @@ const tutorialSteps: TutorialStep[] = [
startValue: 1,
targetValue: 5,
highlightBeads: [
{ columnIndex: 0, beadType: 'heaven' },
{ columnIndex: 0, beadType: 'earth', position: 0 }
{ columnIndex: 4, beadType: 'heaven' },
{ columnIndex: 4, beadType: 'earth', position: 0 }
],
expectedAction: 'multi-step',
actionDescription: 'Add heaven bead (5), then remove 1 earth bead',

44
apps/web/src/utils/tutorialConverter.ts
View File

@@ -38,7 +38,7 @@ export const guidedAdditionSteps: ExistingTutorialStep[] = [
description: 'Start by adding your first earth bead',
startValue: 0,
targetValue: 1,
highlightBeads: [{ columnIndex: 0, beadType: 'earth', position: 0 }],
highlightBeads: [{ columnIndex: 4, beadType: 'earth', position: 0 }],
expectedAction: 'add',
actionDescription: 'Click the first earth bead to move it up',
tooltip: {
@@ -58,7 +58,7 @@ export const guidedAdditionSteps: ExistingTutorialStep[] = [
description: 'Add the second earth bead to make 2',
startValue: 1,
targetValue: 2,
highlightBeads: [{ columnIndex: 0, beadType: 'earth', position: 1 }],
highlightBeads: [{ columnIndex: 4, beadType: 'earth', position: 1 }],
expectedAction: 'add',
actionDescription: 'Click the second earth bead to move it up',
tooltip: {
@@ -78,7 +78,7 @@ export const guidedAdditionSteps: ExistingTutorialStep[] = [
description: 'Add the third earth bead to make 3',
startValue: 2,
targetValue: 3,
highlightBeads: [{ columnIndex: 0, beadType: 'earth', position: 2 }],
highlightBeads: [{ columnIndex: 4, beadType: 'earth', position: 2 }],
expectedAction: 'add',
actionDescription: 'Click the third earth bead to move it up',
tooltip: {
@@ -98,7 +98,7 @@ export const guidedAdditionSteps: ExistingTutorialStep[] = [
description: 'Add the fourth earth bead to make 4',
startValue: 3,
targetValue: 4,
highlightBeads: [{ columnIndex: 0, beadType: 'earth', position: 3 }],
highlightBeads: [{ columnIndex: 4, beadType: 'earth', position: 3 }],
expectedAction: 'add',
actionDescription: 'Click the fourth earth bead to complete 4',
tooltip: {
@@ -120,7 +120,7 @@ export const guidedAdditionSteps: ExistingTutorialStep[] = [
description: 'Use the heaven bead to represent 5',
startValue: 0,
targetValue: 5,
highlightBeads: [{ columnIndex: 0, beadType: 'heaven' }],
highlightBeads: [{ columnIndex: 4, beadType: 'heaven' }],
expectedAction: 'add',
actionDescription: 'Click the heaven bead to activate it',
tooltip: {
@@ -140,7 +140,7 @@ export const guidedAdditionSteps: ExistingTutorialStep[] = [
description: 'Add 1 to 5 by activating one earth bead',
startValue: 5,
targetValue: 6,
highlightBeads: [{ columnIndex: 0, beadType: 'earth', position: 0 }],
highlightBeads: [{ columnIndex: 4, beadType: 'earth', position: 0 }],
expectedAction: 'add',
actionDescription: 'Click the first earth bead to make 6',
tooltip: {
@@ -163,8 +163,8 @@ export const guidedAdditionSteps: ExistingTutorialStep[] = [
startValue: 3,
targetValue: 7,
highlightBeads: [
{ columnIndex: 0, beadType: 'heaven' },
{ columnIndex: 0, beadType: 'earth', position: 0 }
{ columnIndex: 4, beadType: 'heaven' },
{ columnIndex: 4, beadType: 'earth', position: 0 }
],
expectedAction: 'multi-step',
actionDescription: 'First add heaven bead (5), then remove 1 earth bead',
@@ -190,9 +190,9 @@ export const guidedAdditionSteps: ExistingTutorialStep[] = [
startValue: 2,
targetValue: 5,
highlightBeads: [
{ columnIndex: 0, beadType: 'heaven' },
{ columnIndex: 0, beadType: 'earth', position: 0 },
{ columnIndex: 0, beadType: 'earth', position: 1 }
{ columnIndex: 4, beadType: 'heaven' },
{ columnIndex: 4, beadType: 'earth', position: 0 },
{ columnIndex: 4, beadType: 'earth', position: 1 }
],
expectedAction: 'multi-step',
actionDescription: 'Add heaven bead (5), then remove 2 earth beads',
@@ -221,8 +221,8 @@ export const guidedAdditionSteps: ExistingTutorialStep[] = [
startValue: 6,
targetValue: 8,
highlightBeads: [
{ columnIndex: 0, beadType: 'earth', position: 1 },
{ columnIndex: 0, beadType: 'earth', position: 2 }
{ columnIndex: 4, beadType: 'earth', position: 1 },
{ columnIndex: 4, beadType: 'earth', position: 2 }
],
expectedAction: 'add',
actionDescription: 'Add two more earth beads',
@@ -245,8 +245,8 @@ export const guidedAdditionSteps: ExistingTutorialStep[] = [
targetValue: 11,
highlightBeads: [
{ columnIndex: 1, beadType: 'heaven' },
{ columnIndex: 0, beadType: 'earth', position: 0 },
{ columnIndex: 0, beadType: 'earth', position: 1 }
{ columnIndex: 4, beadType: 'earth', position: 0 },
{ columnIndex: 4, beadType: 'earth', position: 1 }
],
expectedAction: 'multi-step',
actionDescription: 'This will move to tens place: activate left heaven, remove 3 earth',
@@ -269,14 +269,24 @@ export const guidedAdditionSteps: ExistingTutorialStep[] = [
// Convert the existing tutorial format to our new format
export function convertGuidedAdditionTutorial(): Tutorial {
// Temporarily create many steps to test scrolling
const duplicatedSteps = []
for (let i = 0; i < 10; i++) {
duplicatedSteps.push(...guidedAdditionSteps.map(step => ({
...step,
id: `${step.id}-copy-${i}`,
title: `${step.title} (Copy ${i + 1})`
})))
}
const tutorial: Tutorial = {
id: 'guided-addition-tutorial',
title: 'Guided Addition Tutorial',
title: 'Guided Addition Tutorial (Testing Scrolling)',
description: 'Learn basic addition on the soroban abacus, from simple earth bead movements to five complements and carrying',
category: 'Basic Operations',
difficulty: 'beginner',
estimatedDuration: 20, // minutes
steps: guidedAdditionSteps,
steps: duplicatedSteps,
tags: ['addition', 'basic', 'earth beads', 'heaven beads', 'complements', 'carrying'],
author: 'Soroban Abacus System',
version: '1.0.0',