GROUP PROJECT REPORT

Q4 : FINITE STATE MACHINE

CSC510 - DISCRETE STRUCTURE

LECTURER’S NAME : TS. DR. CHEW CHIOU SHENG

NAME STUDENT ID GROUP

NIK AIMAN RAFAEI BIN NIK RIZAL 2024793073 CDCS2553B

AZMEEN BIN AZMAN 2024745717 CDCS2553B

ABDUL RAZIQ BIN MOHAMMAD 2024939039 CDCS2553B

MUHAMMAD FAZRIL BIN ESAM 2024905281 CDCS2553B

DATE OF SUBMISSION : 9 JULY 2024

 CSC510/PROJECT/MAC 2024
Sem– 2024 MAC Question chosen: 4 Group name: GROUP 8 (CDCS2553B)

Front - Page 1 (Rubric)

Group – Members (Name, Matric Number, and Group):

1. NIK AIMAN RAFAEI BIN NIK RIZAL (2024793073)

2. AZMEEN BIN AZMAN (2024745717)
3. ABDUL RAZIQ BIN MOHAMMAD (2024939039)
4. MUHAMMAD FAZRIL BIN ESAM (2024905281)

*Max. 4, min. 3
Project Rubric (Presentation) – CSC 510 (Discrete Structure)

No. Assessment Criteria Excellent (5) Good (4) Satisfactory (3) Poor (2)
1 Depth of knowledge Clear and easily understood. Certain areas show depth of Some understanding of subject but Show a surface knowledge only.
Shows depth of thought. Able to thought. Mostly clear but with little little depth. Somewhat clear and Unclear and confusing. Leaves the
answer questions in an intelligent confusion in the presentation. Able some confusion in the presentation. listener a little lost. Unable to
manner to answer question Able to answer some questions respond to questions
2 Use variety of presentation Presentation material/media are of Most material/media are of high Some materials/media are of high Material/media are inadequate or
materials high quality and useful quality. Some variety in material quality with some questionable barely minimum presentation
used sources materials or too small to see
3 Delivery skills Presenter speaks clearly and loud Presenter speaks clearly and loud Presenter’s voice is relatively clear, Presenter mumbles, mispronounces
enough for all in the audience to enough to be heard by most in the but too low to be heard by those in terms, and makes serious and
hear, makes no grammatical errors, audience, makes relatively few the back of the room. Presenter persistent grammatical errors
pronounces all terms correctly and grammatical errors, and makes some grammatical errors throughout the presentation.
precisely. Excellent eye contact pronounces most terms correctly. and mispronounces some terms. Presenters speak too quietly to be
Good eye contact Some eyes contact. heard by many in the audience. Very
poor eye contact
4 Overall organization of project Presenter has a smooth Presenter provides explanations Presenter provides explanations and There is no presentation flow. Goes
presentation presentation flow and provides and / or elaboration, use time / or insufficient elaboration and use over time limit or does not fully
good explanations and / or wisely of time cover the topics
elaboration, use time wisely
Solution Solution demonstration Very clearly demonstrated Clearly demonstrated Adequately demonstrated Not clearly demonstrated

Criteria 1 Criteria 2 Criteria 3 Criteria 4 Solution demonstration Total

(max 5m) (max 5m) (max 5m) (max 5m) (max 5m)

( / 25) =
CSC510/PROJECT/MAC 2024
Front - Page 2 (Rubric)

Project Rubric (Report & Product) – CSC 510 (Discrete Structure)

No. Assessment Criteria Excellent (2) Good (1.5) Satisfactory (1) Poor (0)
1 Report Submit and complete Submit and almost complete Submit but not complete No submission

2 Introduction Well-defined project Clear project background, Adequate project Unclear project
background, problem problem statement and background, problem background, problem
statement and scope scope statement and scope statement and scope

3 Roles and duty of each member Well-defined Clearly defined Adequate defined No defined

4 Algorithm of system Highly reflect to design Clearly reflect to design Adequately reflect to design Poorly reflect to design
(Flow chart or pseudocode)

5 Interface of system (welcome Professional looking (using GUI- Clear representation of the result. Adequate representation of the Result are no shown or are
screen, sample input output button, text field, radio button, result. inaccurate
etc.) image etc.) and accurate
representation of the result.

6 Analysis of result (result High critical analysis of the result Clear critical analysis of the result Adequate critical analysis of the No critical analysis of the result
discussion) result
7 Conclusion Conclusion includes the Conclusion includes the Conclusion includes the findings, No conclusion or
findings, lesson learned from findings, lesson learned from lesson learned from the project. recommendations were
the project. Future the project. Some recommendations for future included in the report
recommendations to real Recommendations for work is stated
life situations are well stated future work are stated

8 Programming code (All CODE Complete attached (with comment) Completed attached Adequate attached in appendix No attached
should be documented with in appendix (without/inadequate comment) in
comment). appendix

Product Requirement fulfillment Done with correct output Done with partial correct output Done but with incorrect output Not Done

Criteria 1 Criteria 2 Criteria 3 Criteria 4 Criteria 5 Criteria 6 Criteria 7 Criteria 8 Product Total
(max 2m) (max 2m) (max 2m) (max 2m) (max 2m) (max 2m) (max 2m) (max 2m) (max 9m)

( / 25) =
 Table of Contents

CONTENTS PAGES

INTRODUCTION 1

ROLES AND DUTY OF EACH MEMBER 2

ALGORITHM OF SYSTEMS 4

INTERFACE OF SYSTEM 5

ANALYSIS OF RESULT 6

CONCLUSION 7

PROGRAMMING CODE 8-14

PRESENTATION LINK 15
i. INTRODUCTION

A finite state machine defines a formal language by deriving strings from an

alphabet until a final state is reached. There are actually infinite ways to define a
formal language, including context-free grammars, but finite state machines (FSM)
are the easiest to physically implement in digital hardware. It is crucial that a student
learns to comprehend the conclusion of an FSM by considering the importance of
FSMs in both hardware and software design.

Finite state machine is defined as a theoretical machine consisting of a finite

set of states, a finite input alphabet and a state transition function which specifies the
machine’s state, given its present state and the current input. This concept is widely
used in computer science, engineering and various other fields to design, analyze
and implement systems with discrete and sequential behavior. Finite state machine
(FSM) helps control the behavior of a system or a robot by defining its different
states, the actions it can take in each state, and how it transitions between states
based on the commands or events it receives. It is similar to a rulebook that guides
the system’s decision-making process and helps it respond appropriately to different
situations.

In addition, a Finite state machine (FSM) is an excellent tool for developers

because it is flexible and predictable. FSMs are simple which is making them easy to
develop even for unskilled programmers. Finite State Machines can represent
various situations that make them a versatile option for code organization. Since an
FSM can only transition between a set number of states, the developer has a clear
idea of what actions are possible at any given point in time. This predictability allows
for easy debugging and troubleshooting. In short, FSMs are an excellent choice for
any development project where flexibility and predictability are essential
considerations. FSM is quick design, implementation and execution of the system
which allows for easy testing.

1
ii. ROLES AND DUTIES

MEMBERS ROLES DUTIES

● Manage tasks to all group

Project
members and complete them
Manager
within the given time.
● Recheck a task given.
● Distribute in codes of system.

Nik Aiman Rafaei Bin

Nik Rizal

2024793073

● Develop the function and

System
algorithms of the system.
Developer
● Identify and assess user needs
or system requirements.
● Design or configure systems
that meet those needs.

Muhammad Fazril Bin

Esam
2024905281

2
 ● Designing the look and feel of
User Interface
digital system interfaces.
Designer
● Conducting user research and
analysis of existing designs in
order to understand user needs
and product goals.

Azmeen Bin Azman

2024745717

● Analyze the code of the

System Analyst
system.
● Conduct usability testing to
evaluate the effectiveness and
usability of designs.
● Ensure system quality and
performance.
Abdul Raziq Bin
Mohammad
2024939039

3
iii. Algorithm of the System (Flowchart)

4
iv. Interface of the System

The main purpose of this system is to create a system that can state the
Finite State Machine (FSM) inserted by the user. Since the usage of this FSM is
being used by users, we decided to create a Graphical User-Interface (GUI) session
to ease the concept understanding and the manual of using this machine.After the
user insert the state,input and also next state, ‘Insert button’ need to be pressed and i
will display the informations in a single table.

Not only that, This machine will also collect the inputs inserted and display the
current string that occurs in this machine. When the users wanted to collect the
inputs, the ‘Collect Inputs’ button need to be clicked on, so that it will display the all
the inputs inserted to the table

Finally, we decided that this machine should have the function to determine whether
it can calculate the validation of the string. From that, we created a function where it
can give a string check whether the given string is accepted or rejected by FSM. It
will also give FSM type of the information whether it is DFA or NFA.

5
v. Analysis of the Result

Result User Manual

This session needs to be

inserted by the user to use
this machine. At first, the user
will insert the input with a
format.

<State-Input-NextState>.
After that , click the insert
button. It will display all the
inputs inserted in a single a
table

After the result has been

displayed, user will collect all
the inputs by clicking the
‘Collect Inputs’ button, it will
display the inputs in a textbox

Lastly, click the ‘Check String’

button to find the informations
of the string inserted

6
vi. Conclusion

Finite state machines (FSMs) are widely used in the construction of

engineered systems as tools for defining and implementing automata. When a finite
state machine reaches one of its final states, it produces the output desired by the
engineer constructing the system. This output could be a light turning on, a computer
program entering a new state, a weapon firing or any other artifact associated with
reaching a particular point in a series of events or program execution. For example,
many programmable logic controllers use FSMs as a basic component of their
design.

Last but not least, finite state machines are important in computer program
design in general. They provide a structured and systematic approach to designing
and analyzing complex systems, making them easier to understand, implement, and
maintain. Drawing the state transition diagram and table is relatively simple and
simulating an FSM with real input strings can also be readily done. However,
students should also be able to clearly articulate and intelligibly express the capability
the machine possesses. With the following explanations, students should be better
equipped to understand the true meaning of the machine and why it behaves the way
it does.

7
vii. Programming Code

<!DOCTYPE html>

<html>

<head>

<title>Finite State Machine Simulator</title>

<style>

@font-face{

font-family: 'Bad Brush';

src: url(Bad\ Brush.ttf);

body {

font-family: sans-serif;

background-color: rgb(0, 0, 0);

background-image: url(Gambar.jpg);

background-size: cover;

background-attachment: fixed;

height: 100%;

justify-content: center;

display: flex;

align-items: center;

#container {

display: flex;

flex-direction: column;

align-items: center;

background-color: wheat;

padding: 20px;

border-radius: 20px;

border: 10px double white;

8
h2{

font-family: 'Bad Brush';

font-size: 45px;

margin-top: -10px;

background-color: white;

width: 100%;

text-align: center;

border-radius: 10px;

#input {

margin-bottom: 20px;

justify-content: center;

Table {

border-collapse: collapse;

width: 300px;

margin-bottom: 20px;

Table th,

Table td {

border: 1px solid black;

padding: 8px;

text-align: center;

#output-area {

margin-bottom: 20px;

display: flex;

flex-direction: column;

9
 align-items: center;

#results {

width: 400px;

border: 1px solid white;

padding: 10px;

background-color: white;

border-radius: 10px;

#fsm-input {

border-radius: 10px;

background-color: white;

#input-string {

border-radius: 20px;

border-width: 0px;

width: 100%;

button {

border-radius: 20px;

border-width: 1px;

margin: 5px;

</style>

</head>

<body>

<div id="container">

<h2>Finite State Machine Project</h2>

<div id="input">

10
 <label for="fsm-input"><b>Enter FSM
Transitions:</b></label><br>

<textarea id="fsm-input" rows="10"

cols="40"></textarea><br>

<button onclick="SubmitBtn()">Insert</button>

</div>

<div id="Table-container">

<table id="Table">

<thead>

<tr>

<th>State</th>

<th>Input</th>

<th>Next State</th>

</tr>

</thead>

<tbody></tbody>

</table>

</div>

<div id="output-area">

<button onclick="collectInputs()">Collect
Inputs</button>

<label for="input-string">String Inserted:</label>

<input type="text" id="input-string" readonly>

<button onclick="checkString()">Check String</button>

<div id="results"></div>

</div>

</div>

<script>

let fsm = {};

let finalState;

let isDFA = true;

function SubmitBtn() {

11
 const input =
document.getElementById('fsm-input').value;

const transitions = input.split('\n').map(line =>

line.trim().split(' '));

const tableBody =
document.getElementById('Table').getElementsByTagName('tbody')[0]
;

tableBody.innerHTML = '';

fsm = {};

isDFA = true;

transitions.forEach(transition => {

const state = transition[0];

const inputSymbol = transition[1];

const nextState = transition[2];

if (!fsm[state]) {

fsm[state] = {};

// Check if DFA

if (fsm[state][inputSymbol]) {

isDFA = false;

if (!fsm[state][inputSymbol]) {

fsm[state][inputSymbol] = [];

fsm[state][inputSymbol].push(nextState);

const row = tableBody.insertRow();

row.insertCell().textContent = state;

row.insertCell().textContent = inputSymbol;

12
 row.insertCell().textContent = nextState;

});

finalState = transitions[transitions.length - 1][2];

const fsmType = isDFA ? "DFA" : "NFA";

console.log("FSM loaded:", fsm, "Final State:",

finalState, "FSM Type:", fsmType);

function checkString() {

const resultsDiv =
document.getElementById('results');

const inputString =
document.getElementById('input-string').value;

const startingState = Object.keys(fsm)[0];

if (inputString.length === 0) {

resultsDiv.innerHTML = 'Please enter a string to

check.';

return;

let currentState = startingState;

let valid = true;

for (let i = 0; i < inputString.length; i++) {

const inputSymbol = inputString[i];

if (currentState in fsm && inputSymbol in

fsm[currentState]) {

currentState =
fsm[currentState][inputSymbol][0]; // For DFA, take the first
transition

} else {

valid = false;

13
 break;

resultsDiv.innerHTML = `String: ${inputString}<br>`;

resultsDiv.innerHTML += `Accepted: ${valid &&

currentState === finalState}<br>`;

resultsDiv.innerHTML += `FSM Type: ${isDFA ? "DFA" :

"NFA"}`;

function collectInputs() {

const table = document.getElementById('Table');

const rows =
table.getElementsByTagName('tbody')[0].getElementsByTagName('tr')
;

let inputs = [];

for (let i = 0; i < rows.length; i++) {

const cells = rows[i].getElementsByTagName('td');

if (cells.length > 1) {

inputs.push(cells[1].textContent);

const inputString = inputs.join('');

document.getElementById('input-string').value =
inputString;

</script>

</body>

</html>

14
Link for presentation:

https://youtu.be/XZNDNHPXAkY

15