From c6320b26e307cecf29686d61d159a225a7994432 Mon Sep 17 00:00:00 2001 From: VaibhavJindal7 Date: Mon, 23 Mar 2026 02:39:16 +0530 Subject: [PATCH 1/6] docs: enhance FSM page with state transition table, state labels, Moore vs Mealy comparison and quiz --- docs/seq-design/fsm.md | 112 ++++++++++++++++++++++++++++++++++++++++- 1 file changed, 111 insertions(+), 1 deletion(-) diff --git a/docs/seq-design/fsm.md b/docs/seq-design/fsm.md index 630b8d92..aaccba00 100644 --- a/docs/seq-design/fsm.md +++ b/docs/seq-design/fsm.md @@ -68,6 +68,19 @@ In the above figure, there are four states, namely A, B, C & D. These states and In general, the number of states required in Moore state machine is more than or equal to the number of states required in Mealy state machine. There is an equivalent Mealy state machine for each Moore state machine. So, based on the requirement you can use only one of them. +## Moore vs Mealy comparison + +| Feature | Moore Machine | Mealy Machine | +|---------|--------------|---------------| +| Output depends on | Present state only | Present state + Input | +| Output labeled on | Inside state circles | On transition arrows | +| Number of states | More or equal | Less or equal | +| Output changes | Only on clock edge | Immediately with input | +| Complexity | Simpler to design | More complex | + +### Simple way to remember +- **Moore** → Output is inside the circle +- **Mealy** → Output is on the arrow ## Interactive FSM @@ -95,9 +108,106 @@ There are quite some options like: 5. putting 10¢ followed by 5¢ and getting the can. 6. putting 5$ followed by 5¢ followed by 5¢ => getting a can. +## State transition table + +The vending machine FSM can be represented as a +state transition table. Each row shows what happens +in a given state when a coin is inserted: + +| Current State | Coin Input | Next State | Output | +|--------------|-----------|------------|--------| +| M0 (0¢) | 5¢ (01) | W5 | None | +| M0 (0¢) | 10¢ (10) | W10 | None | +| W5 | auto | M5 | None | +| W10 | auto | M10 | None | +| M5 (5¢) | 5¢ (01) | W10 | None | +| M5 (5¢) | 10¢ (10) | W15 | None | +| M10 (10¢) | 5¢ (01) | W15 | None | +| M10 (10¢) | 10¢ (10) | W20 | None | +| W15 | auto | M15 | None | +| W20 | auto | M20 | None | +| M20 | auto | M15 | Change | +| M15 | auto | M0 | Soda | + +**Note:** W states are temporary wait states where +the machine processes the coin before updating +the total amount collected. + ## FSM diagram Now translate the options which are listed above into an FSM diagram/flow-chart: {% include fsm.html %} -Lets try the soda can vending machine and look for the corresponding state changes FSM diagram in each of the above mentioned possibilities. +## Understanding the state labels + +Each state in the diagram is labeled with a symbol. +Here is what each symbol means: + +| Symbol | Meaning | +|--------|---------| +| M0 | 0¢ collected — Idle state | +| M5 | 5¢ collected | +| M10 | 10¢ collected | +| M15 | 15¢ collected — dispense soda | +| M20 | 20¢ collected — give change | +| W5 | Wait state after 5¢ inserted | +| W10 | Wait state after 10¢ inserted | +| W15 | Wait state at 15¢ | +| W20 | Wait state at 20¢ | + +The numbers on transition arrows represent binary input: + +| Arrow Label | Meaning | +|------------|---------| +| 00 | No coin / Reset | +| 01 | 5¢ coin inserted | +| 10 | 10¢ coin inserted | + +**Note:** The number "20" shown inside each circle +in the diagram is a display value used internally +by the animation — it is NOT the price of the soda. +The actual price is 15¢ as stated in the problem. + +## Experiment + +Lets try the soda can vending machine and look for +the corresponding state changes in the FSM diagram +for each of the above mentioned possibilities. + +## Quiz + +{:.quiz} + +1. In a Moore machine, the output depends on: + 1. Present state only + 2. Present state and present input + 3. Present input only + 4. Next state only + +2. How many flip-flops are needed to implement + an FSM with 8 states? + 1. 2 + 2. 8 + 3. 3 + 4. 4 + +3. A Mealy machine has 3 states and 2 inputs. + The minimum number of rows in its state + transition table will be: + 1. 3 + 2. 6 + 3. 8 + 4. 9 + +4. Which sequence of coins gives soda AND change? + 1. 5¢ + 5¢ + 5¢ + 2. 10¢ + 10¢ + 3. 5¢ + 10¢ + 4. 10¢ + 5¢ + +5. Converting a Mealy machine to Moore machine + will result in: + 1. Same number of states + 2. Fewer states + 3. More or equal number of states + 4. Exactly double the states \ No newline at end of file From 6ec73f62c2f8b0fdc3d97801e50b96584b126d4c Mon Sep 17 00:00:00 2001 From: VaibhavJindal7 Date: Mon, 23 Mar 2026 03:22:23 +0530 Subject: [PATCH 2/6] fix: remove misleading 20 from FSM circles and add status messages during wait states --- assets/js/interactive_soda_machine.js | 44 ++++++++++++++++++--------- 1 file changed, 30 insertions(+), 14 deletions(-) diff --git a/assets/js/interactive_soda_machine.js b/assets/js/interactive_soda_machine.js index 6f8f0ddf..ede34212 100644 --- a/assets/js/interactive_soda_machine.js +++ b/assets/js/interactive_soda_machine.js @@ -71,18 +71,30 @@ soda_machine_fsm.update = function() { } setTimeout(function() { switch (soda_machine_fsm.state) { - case 0: - soda_machine_graphics.clearCoins(); - break; + case 0: + soda_machine_graphics.clearCoins(); + soda_machine_graphics.statusText.attr('text', + 'Insert a coin to start'); + break; case 2: case 4: - break; - case 7: - soda_machine_graphics.dropChange(); - break; - case 8: - soda_machine_graphics.dropSoda(); - break; - } + soda_machine_graphics.statusText.attr('text', + 'Coin accepted! Insert more coins'); + break; + case 5: case 6: + soda_machine_graphics.statusText.attr('text', + 'Processing...'); + break; + case 7: + soda_machine_graphics.dropChange(); + soda_machine_graphics.statusText.attr('text', + 'Returning change!'); + break; + case 8: + soda_machine_graphics.dropSoda(); + soda_machine_graphics.statusText.attr('text', + 'Enjoy your soda!'); + break; +} with(soda_machine_fsm) { flashState(output[state][1]); @@ -280,7 +292,7 @@ soda_machine_graphics.initialize = function () { paper.path("M330,80 l0,170 ").attr({'stroke-width': '2'}); paper.text(505,140,'Sensor:').attr({'font-size': '20'}); sensorText = paper.text(550,140,'00').attr({'font-size': '20'}); - + soda_machine_graphics.statusText = paper.text(487.5,95,'Insert a coin to start').attr({'font-size': '14', 'fill': '#333'}); //lids lids[0] = paper.path("M123,253 , l60,0 ").attr({'stroke-width': '2'}); lids[1] = paper.path("M273,253 , l60,0 ").attr({'stroke-width': '2'}); @@ -321,6 +333,7 @@ soda_machine_graphics.enableButtons = function(input) { } } soda_machine_graphics.button_status = 0; + soda_machine_graphics.statusText.attr('text', 'Insert a coin to start'); } soda_machine_graphics.dropCoin = function(input) { @@ -328,6 +341,7 @@ soda_machine_graphics.dropCoin = function(input) { return; } soda_machine_graphics.button_status = 1; + soda_machine_graphics.statusText.attr('text', 'Processing coin...'); for (i=0;i<2;i++) { for (j=0;j<2;j++) { soda_machine_graphics.buttons[i][j].animate({opacity:'0'},0); @@ -361,10 +375,12 @@ soda_machine_graphics.dropCoin = function(input) { soda_machine_graphics.lids[2].animate({transform: "t0,0"},300); }, 3000); setTimeout (function () { - if (soda_machine_fsm.state <= 4) { + if (soda_machine_fsm.state === 0 || + soda_machine_fsm.state === 2 || + soda_machine_fsm.state === 4) { soda_machine_graphics.enableButtons(); } - }, 3300); +}, 4000); } From d734a32456973360e87215a2ff70018959669a95 Mon Sep 17 00:00:00 2001 From: VaibhavJindal7 Date: Mon, 23 Mar 2026 03:42:45 +0530 Subject: [PATCH 3/6] fix: address CodeRabbit review comments --- assets/js/interactive_soda_machine.js | 9 +++++++-- docs/seq-design/fsm.md | 8 ++++---- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/assets/js/interactive_soda_machine.js b/assets/js/interactive_soda_machine.js index ede34212..3781c4dc 100644 --- a/assets/js/interactive_soda_machine.js +++ b/assets/js/interactive_soda_machine.js @@ -73,8 +73,13 @@ soda_machine_fsm.update = function() { switch (soda_machine_fsm.state) { case 0: soda_machine_graphics.clearCoins(); - soda_machine_graphics.statusText.attr('text', - 'Insert a coin to start'); + if (soda_machine_fsm.state === 0) { + soda_machine_graphics.statusText.attr('text', + 'Insert a coin to start'); +} else { + soda_machine_graphics.statusText.attr('text', + 'Coin accepted! Insert more coins'); +} break; case 2: case 4: soda_machine_graphics.statusText.attr('text', diff --git a/docs/seq-design/fsm.md b/docs/seq-design/fsm.md index aaccba00..ad175d8a 100644 --- a/docs/seq-design/fsm.md +++ b/docs/seq-design/fsm.md @@ -73,9 +73,9 @@ In general, the number of states required in Moore state machine is more than or | Feature | Moore Machine | Mealy Machine | |---------|--------------|---------------| | Output depends on | Present state only | Present state + Input | -| Output labeled on | Inside state circles | On transition arrows | +| Output labelled on | Inside state circles | On transition arrows | | Number of states | More or equal | Less or equal | -| Output changes | Only on clock edge | Immediately with input | +| Output changes | Only on clock edge | Depends on current input (combinational path) | | Complexity | Simpler to design | More complex | ### Simple way to remember @@ -140,7 +140,7 @@ Now translate the options which are listed above into an FSM diagram/flow-chart: ## Understanding the state labels -Each state in the diagram is labeled with a symbol. +Each state in the diagram is labelled with a symbol. Here is what each symbol means: | Symbol | Meaning | @@ -170,7 +170,7 @@ The actual price is 15¢ as stated in the problem. ## Experiment -Lets try the soda can vending machine and look for +Let's try the soda can vending machine and look for the corresponding state changes in the FSM diagram for each of the above mentioned possibilities. From f1d7fc04be1321597e89a6ea539a8f0f7890932a Mon Sep 17 00:00:00 2001 From: VaibhavJindal7 Date: Mon, 23 Mar 2026 03:51:14 +0530 Subject: [PATCH 4/6] fix: address CodeRabbit review comments - fix status message logic and spelling --- assets/js/interactive_soda_machine.js | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/assets/js/interactive_soda_machine.js b/assets/js/interactive_soda_machine.js index 3781c4dc..5944f1e1 100644 --- a/assets/js/interactive_soda_machine.js +++ b/assets/js/interactive_soda_machine.js @@ -72,15 +72,10 @@ soda_machine_fsm.update = function() { setTimeout(function() { switch (soda_machine_fsm.state) { case 0: - soda_machine_graphics.clearCoins(); - if (soda_machine_fsm.state === 0) { + soda_machine_graphics.clearCoins(); soda_machine_graphics.statusText.attr('text', 'Insert a coin to start'); -} else { - soda_machine_graphics.statusText.attr('text', - 'Coin accepted! Insert more coins'); -} - break; + break; case 2: case 4: soda_machine_graphics.statusText.attr('text', 'Coin accepted! Insert more coins'); @@ -338,9 +333,12 @@ soda_machine_graphics.enableButtons = function(input) { } } soda_machine_graphics.button_status = 0; - soda_machine_graphics.statusText.attr('text', 'Insert a coin to start'); + if (soda_machine_fsm.state === 0) { + soda_machine_graphics.statusText.attr('text', 'Insert a coin to start'); + } else { + soda_machine_graphics.statusText.attr('text', 'Coin accepted! Insert more coins'); + } } - soda_machine_graphics.dropCoin = function(input) { if (soda_machine_graphics.button_status != 0) { return; From 3475319ebc2bfc71543644ead9696927d65a0c97 Mon Sep 17 00:00:00 2001 From: VaibhavJindal7 Date: Mon, 23 Mar 2026 09:10:59 +0530 Subject: [PATCH 5/6] fix: address CodeRabbit review comments - fix button logic, table header, state names and quiz --- assets/js/interactive_soda_machine.js | 8 +------- docs/seq-design/fsm.md | 8 ++++---- 2 files changed, 5 insertions(+), 11 deletions(-) diff --git a/assets/js/interactive_soda_machine.js b/assets/js/interactive_soda_machine.js index 5944f1e1..0f2a960b 100644 --- a/assets/js/interactive_soda_machine.js +++ b/assets/js/interactive_soda_machine.js @@ -77,6 +77,7 @@ soda_machine_fsm.update = function() { 'Insert a coin to start'); break; case 2: case 4: + soda_machine_graphics.enableButtons(); soda_machine_graphics.statusText.attr('text', 'Coin accepted! Insert more coins'); break; @@ -377,13 +378,6 @@ soda_machine_graphics.dropCoin = function(input) { setTimeout (function () { soda_machine_graphics.lids[2].animate({transform: "t0,0"},300); }, 3000); - setTimeout (function () { - if (soda_machine_fsm.state === 0 || - soda_machine_fsm.state === 2 || - soda_machine_fsm.state === 4) { - soda_machine_graphics.enableButtons(); - } -}, 4000); } diff --git a/docs/seq-design/fsm.md b/docs/seq-design/fsm.md index ad175d8a..3c06342c 100644 --- a/docs/seq-design/fsm.md +++ b/docs/seq-design/fsm.md @@ -114,11 +114,11 @@ The vending machine FSM can be represented as a state transition table. Each row shows what happens in a given state when a coin is inserted: -| Current State | Coin Input | Next State | Output | +| Current State | Input / Condition | Next State | Output | |--------------|-----------|------------|--------| | M0 (0¢) | 5¢ (01) | W5 | None | | M0 (0¢) | 10¢ (10) | W10 | None | -| W5 | auto | M5 | None | +| W0 | auto | M5 | None | | W10 | auto | M10 | None | | M5 (5¢) | 5¢ (01) | W10 | None | | M5 (5¢) | 10¢ (10) | W15 | None | @@ -150,7 +150,7 @@ Here is what each symbol means: | M10 | 10¢ collected | | M15 | 15¢ collected — dispense soda | | M20 | 20¢ collected — give change | -| W5 | Wait state after 5¢ inserted | +| W0 | Wait state after 5¢ inserted | | W10 | Wait state after 10¢ inserted | | W15 | Wait state at 15¢ | | W20 | Wait state at 20¢ | @@ -191,7 +191,7 @@ for each of the above mentioned possibilities. 3. 3 4. 4 -3. A Mealy machine has 3 states and 2 inputs. +3. A Mealy machine has 3 states and one binary input. The minimum number of rows in its state transition table will be: 1. 3 From 0303aa5e7d181cb9d6551c80db59575b44a91690 Mon Sep 17 00:00:00 2001 From: VaibhavJindal7 Date: Mon, 23 Mar 2026 09:46:31 +0530 Subject: [PATCH 6/6] fix: fix hyphenation and formatting in fsm.md --- docs/seq-design/fsm.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/seq-design/fsm.md b/docs/seq-design/fsm.md index 3c06342c..7617926f 100644 --- a/docs/seq-design/fsm.md +++ b/docs/seq-design/fsm.md @@ -172,7 +172,7 @@ The actual price is 15¢ as stated in the problem. Let's try the soda can vending machine and look for the corresponding state changes in the FSM diagram -for each of the above mentioned possibilities. +for each of the above-mentioned possibilities. ## Quiz @@ -191,7 +191,7 @@ for each of the above mentioned possibilities. 3. 3 4. 4 -3. A Mealy machine has 3 states and one binary input. +3. A Mealy machine has 3 states and one binary input. The minimum number of rows in its state transition table will be: 1. 3