In this challenge we are creating an information board that displays key messages on a LED screen that consists of 4 rows of 20 characters.
We have created the HTML, and CSS code to render the board on the screen with a welcome message that, for now is hardcoded in the HTML code.
We have also created a Javascript function called clearBoard() to clear the content of the board and have started a new function called inputMessage(). This function will allow the user to input a message to display on the board. However this function is incomplete and your task will be to add the relevant code to convert the message typed by the end-user into a Javascript 2D array called board. This board will then be passed as a parameter to the displayBoard() function that displays the content of this 2D array on the information board.
Note that when displaying a message on the board, if a word cannot fit on a line, then it is added at the start of the next line of the board. (Words are not truncated or hyphenated!)
To complete this challenge, you will need to click on the “Edit on CodePen” button below, and edit the Javascript code from line 36.
The compilation process involves converting high-level source code into machine code that a computer can execute. It’s a multi-step process, and each stage plays an important role in ensuring that the code runs as expected. Here are the four main stages of the compilation process:
1. Lexical Analysis
The first step in the compilation process is lexical analysis. During this stage, the source code is read and converted into a sequence of tokens. A token is a basic unit of meaning, like keywords (if, while), variables, constants, operators (+, -), and punctuation.
During lexical analysis, the compiler also removes comments, annotations (like // or /*...*/), and whitespace (such as spaces, tabs, and newlines). These are ignored because they are not needed for understanding the logic of the program, but they help in writing human-readable code.
This step is performed by the lexer or scanner, which breaks down the source code into these tokens.
2. Syntax Analysis
The next stage is syntax analysis (also known as parsing). The compiler takes the tokens generated in the previous stage and checks whether they are arranged in a valid way according to the grammar (syntax) of the programming language.
A parser is used to create a parse tree or abstract syntax tree (AST). This tree represents the structure of the program, showing how different parts of the code relate to each other according to the language rules. For example, the parser will check if statements are correctly formed, like ensuring that an if statement has the proper condition and body.
The purpose is to ensure the code follows the language’s syntax rules and that the sequence of tokens makes sense logically in the structure of the program.
During the syntax analysis, if a syntax error is detected, the compilation process stops here and an error message is generated.
3. Code Generation
Once the program passes the syntax analysis and is considered structurally correct, the compiler moves to code generation. In this step, the compiler translates the high-level source code (like if (x > 5)) into machine code or intermediate code (such as bytecode for languages like Java).
The compiler uses the abstract syntax tree (AST) from the syntax analysis stage to generate the target code. This code can be directly executed by the computer’s processor or can be further processed into an executable program.
The purpose of code generation is to create an efficient machine-readable output (binary code) that the computer can execute.
4. Code Optimisation
Code optimisation is an optional but very important step where the generated code is improved for efficiency. The optimiser attempts to reduce the program’s runtime, memory usage, or both, without changing its functionality.
The optimisation process might involve eliminating redundant calculations, simplifying loops, or using more efficient data structures or algorithms. In some cases, it can rearrange the order of instructions to make the program run faster or take up less space.
The goal is to make the code run faster or more efficiently, improving its performance while keeping the logic of the program intact.
To Sum It Up…
Lexical Analysis: Breaks down the source code into tokens and removes comments, annotations, and whitespace.
Syntax Analysis: Checks the tokens against the syntax rules of the language, generating a parse tree or abstract syntax tree (AST).
Code Generation: Translates the valid code into machine-readable or intermediate code.
Code Optimisation: Improves the efficiency of the generated code, making it run faster or consume less memory.
Each of these stages is crucial in turning human-readable high-level code into a functional and efficient machine-executable program.
Task 1: Drag and Drop
Can you identify and describe the 4 stages of the compilation process?
Complete the fill in the gaps activity below to label the 4 stages of the compilation process with for each stage their input and output:
Answer the following questions, in the context of the above Local Area Network.
Question 1[6 marks]
Can you describe the purposes of the following network components used in the above Local Area Network:
Router:
Switch:
Firewall:
WAP:
File Server:
E-Mail Server:
Question 2[2 marks]
The above network is a Client Server network as it includes servers which provide a dedicated services to all the computers/workstations connected to the network. Can you identify two other types of servers, other than File Server and E-Mail Server, that can be used on a Client-Server network?
In this challenge, we will design, create and test a logic gates circuit to control a traffic lights made of 3 LEDs (Red Amber Green). This challenge is designed to be completed with a logic board such as the Logic & Arithmetic board designed by the University of Southampton and the UK Electronic Skills Foundation. You will be able to complete the circuit with just the Logic & Arithmetic board. However if you have access to breadboards and LEDs you will be able to create your own Red Amber Green traffic lights for a more realistic output.
A UK Traffic Lights follows a sequence of four different states:
In order to design a logic gates circuit for our traffic lights system we will need a circuit with two inputs (J and K) and 3 outputs (X, Y and Z). Our two inputs will give 4 different states to our circuit: 00, 01, 10 and 11. The following diagram shows the expected outputs for 4 possible states (input patterns):
Truth Table?
Your first task is to use the above diagram to complete the Truth Table for our Traffic Light Controller system:
Input J
Input K
Output X (Red)
Output Y (Amber)
Output Z (Green)
0
0
0
1
1
0
1
1
Logic Gates Diagrams
Using the information from the completed Truth table we can then work out the logic gates circuits needed to control each output based on the two inputs J and K.
You can try to create this diagrams by yourself using logic.ly or our online Logic Gates Diagram designer tool.
Here are the individual diagrams: Output X: Red Light: Output Y: Red Light: Output Z: Red Light:
All three diagrams can then be combined into a single diagram:
You can now recreate this circuit with your logic board:
Using RGB LEDs
The following diagram shows you how to connect your logic board to 3 LEDs on a breadboard.
Be careful when connecting your LEDs to detect where the anode and the cathode are on each LED:
Using Lego bricks…
You can also create your own traffic lights using Lego bricks and control them with your logic board!
Traffic Light Sequence using Logic Gates
By combining the above circuit with a 2-bit counter circuit, we can create a fully animated traffic light sequence. Click on the diagram below to test this circuit:
The following diagram is used to compare if two inputs are the same. The output (X) should be on if both inputs J and K are set to O or both inputs are set to 1. This circuit is used to implement the comparison operator == (“is equal to”).
Truth Table:
Input J
Input K
Output X
0
0
0
1
1
0
1
1
J<K? Less than operator
The following diagram is used to compare if input J is strictly lower than input K. The output (X) should be on if so (e.g. when J = 0 and K = 1). This circuit is used to implement the comparison operator < (“is less than”).
Truth Table:
Input J
Input K
Output X
0
0
0
1
1
0
1
1
J>K? Greater than operator
The following diagram is used to compare if input J is strictly greater than input K. The output (X) should be on if so (e.g. when J = 1 and K = 0). This circuit is used to implement the comparison operator > (“is greater than”).
Truth Table:
Input J
Input K
Output X
0
0
0
1
1
0
1
1
1-bit magnitude comparator
By combining all three logic gates circuits into one, we can create a 1-bit magnitude comparator that takes two inputs (J and K) and produces three outputs:
X = (J < K)
Y = (J == K)
Z = (J > K)
Here is the logic gates diagram for this comparator. You can recreate this circuit and test it on your logic board.
Truth Table:
Input J
Input K
Output X J < K ?
Output Y J == K ?
Output Z J > K ?
0
0
0
1
1
0
1
1
Extension Task: !=, <= and >= Comparison Operators
How could you combine and tweak the above diagrams to create logic gates circuits to implement the following comparison operators:
“is not equal to” (e.g. J != K)
“is lower than or equal to” (e.g. J <= K)
“is greater than or equal to” (e.g. J >= K).
Design your circuits, then recreate them and test them on the logic board to see if they “behave” as you would expect!
Find out more…
You can find out more about binary comparators on the following pages:
For each of the main logic gates, recreate the circuit as it appears on the diagram. Then use your circuit to compete the truth table for the logic gate.
NOT GateAND GateOR GateXOR GateNAND GateNOR Gate
Truth Table:
Input J
Output X
0
1
Truth Table:
Input J
Input K
Output X
0
0
0
1
1
0
1
1
Truth Table:
Input J
Input K
Output X
0
0
0
1
1
0
1
1
Truth Table:
Input J
Input K
Output X
0
0
0
1
1
0
1
1
Truth Table:
Input J
Input K
Output X
0
0
0
1
1
0
1
1
Truth Table:
Input J
Input K
Output X
0
0
0
1
1
0
1
1
Step 2: Logic Gates Circuits
By combining multiple logic gates together you can create a circuit that will “behave” a certain way. To record how the circuit “behaves” for any given set of inputs we use a Truth Table. For instance you can complete the Truth table for the following circuit:
Logic Gates Circuit
Truth Table:
Input J
Input K
Input L
Output X
0
0
0
0
0
1
0
1
0
0
1
1
1
0
0
1
0
1
1
1
0
1
1
1
Step 3: Logic Problems
Your task is to create and test a logic gate circuit for each of the given problems:
Car LightBurglar AlarmSmartphone Ringtone
A small car has 3 doors: 2 front doors and a hatchback. The internal light of the car is on when any of the car doors is open.
Create and test a logic gates circuit to control the internal light (X) of the car based on whether a door (J, K or L) is open (1) or closed (0).
Input J
Input K
Input L
Output X
0
0
0
0
0
1
0
1
0
0
1
1
1
0
0
1
0
1
1
1
0
1
1
1
A burglar alarm has three inputs:
Input J: Whether the burglar alarm is activated (1) or not (0).
Input K: A motion sensor can detect movement (1) or not (0).
Input L: A door sensor can detect if the front door is open (1) or is closed (0).
The alarm siren (X) should be on if the alarm is activated and the motion sensor detects a movement or the door sensor detects that the door is open.
Create and test a logic gates circuit to control the siren of this burglar alarm based on the three inputs J,K and L.
Input J
Input K
Input L
Output X
0
0
0
0
0
1
0
1
0
0
1
1
1
0
0
1
0
1
1
1
0
1
1
1
A smartphone ringtone is played only if:
The phone is receiving an incoming call. (input J = 1)
The phone sound is on. (input K = 1)
The phone is not on airplane mode. (input L = 0)
Create and test a logic gates circuit to control whether the ringtone of a smartphone is on (X=1) or not (X=0) based on the three inputs J, K, L.
Input J
Input K
Input L
Output X
0
0
0
0
0
1
0
1
0
0
1
1
1
0
0
1
0
1
1
1
0
1
1
1
Extension Task: The Mystery Gate!
Mystery Gate
The above logic gates circuit can be replaced by one single logic gate! Recreate this circuit on your logic board to test it and complete its truth table. Then find out what logic gate has the same truth table as this complex circuit.
A small town wants to improve the traffic within the town centre at peak time. They are considering using a synchronised traffic lights system to fluidify the traffic. But before replacing all existing traffic lights and installing new ones, they would like to use some performance modelling system to evaluate the impact the new traffic lights could have on the traffic.
A graphic designer has produced the following map of the town centre. This map will be used for the main screen of the performance modelling system.
Explain why the above map is an abstraction of the town centre.
Question 2[6 marks]
Describe how the new performance modelling system could use different data visualisation techniques to represent key information about the traffic in the town centre.
Question 3[6 marks]
Evaluate the benefits and limitations for the town to use a performance modelling system in this context?
For this question, we are looking at an algorithm used to implement the divisibility rule for 3 which states that:
A number is divisible by 3 if the sum of all its digits is divisible by 3.
Let’s look at the following example: is 378 divisible by 3?
Here is the Python code for our recursive algorithm:
def isDivisibleByThree(n):
sum = 0
for digit in str(n):
sum = sum + int(digit)
if sum>=10:
return isDivisibleByThree(sum)
else:
if sum==3 or sum==6 or sum==9:
return True
else:
return False
number = int(input("Type a number"))
if isDivisibleByThree(number)==True:
print("This number is divisible by 3.")
else:
print("This number is not divisible by 3.")
Explain why the above code can be described as being a recursive algorithm? State on which line of this code does the recursion occur?
Question 2[4 marks]
Trace this algorithm if the user enters the value 8479
Question 3[4 marks]
Rewrite the function isDivisibleByThree() using an iterative approach instead of a recursive approach.
Class File:
private filename
//Constructor for the File class
procedure new(strFilename):
filename = strFilename
public procedure rename(strFilename)
if strfilename!="":
filename = strFilename
Class MP3 inherits File:
private title
private artist
private duration
//Constructor for the MP3 class
procedure new(strFilename, strTitle, strArtist, intDuration):
super.new(strfilename)
title = strTitle
artist = strArtist
duration = strDuration
public function getDuration():
min = duration // 60
sec = duration % 60
return (str(min) + ":" + str(sec))
What code would you write to instantiate one new MP3 object called topTrack for the latest 3 minutes 12 seconds song “Shivers” from Ed Sheeran?
Question 2[4 marks]
What are all the methods and properties of the MP3 class?
Question 3[4 marks]
Explain, using an example from this code, what is meant by inheritance?
A burglar alarm has three inputs:
Here is the Python code for our recursive algorithm:
LMC Simulator
Logic Gates Circuits
Network Designer
Flowchart Studio
Online Python IDE