QuestionAnswer
Learning Zone ✕
Theory Concepts
Cryptography Computer Hardware Computer Networks Algorithms OOP Programming Binary Data Boolean Logic Database ConceptsInteractive Quizzes
View All QuizzesGCSE Computer Science (UK)
1.1 System Architecture 1.2 Memory and Storage 1.3 Computer networks 1.4 Network security 1.5 – Systems software 1.6 – Impacts of digital technology2.1 – Algorithms 2.2 – Programming fundamentals 2.3 – Producing robust programs 2.4 – Boolean logic 2.5 – Programming languages and IDEs
A-Level Computer Science (UK)
1.1 Contemporary processors, input, output and storage devices 1.2 Software and software development 1.3 Exchanging data 1.4 Data types, data structures and algorithms 1.5 Legal, moral, cultural and ethical issues2.1 Elements of computational thinking 2.2 Problem solving and programming 2.3 Algorithms
Coding Challenges ✕
Python Challenges
Python Challenges - All Levels Python Challenges - Beginner Level Python Challenges - Intermediate Level Python Challenges - Advanced Level Python Turtle Challenges Solved ChallengesBlock Programming
BBC micro:bit Challenges Scratch ChallengesInteractive Coding Puzzles
Pirate Island Space Explorer Interactive Coding QuizzesOnline Interactive Tools ✕
More results...
Member's Area ✕
Scratch – Sprite Movement using a Touchscreen
Many tutorials on how to create a game in Scratch will be based on using the arrow keys to control the main sprite. This is a great approach indeed but is not suitable if you are designing the game toe be used on a tablet or smartphone. In this case, your input device to control the main sprite is not the keyboard but the touchscreen.
The following short tutorial will show you how you can control the movement of your sprite (in this case the cat) using a touchscreen. The idea will be to create two other sprites/buttons called Arrow_Left and Arrow_Right that, when clicked using a mouse or tapped using a touchscreen will tell the cat sprite to move in the relevant direction.
You can recreate this code online using the scratch website.
Step 1: Right ArrowStep 2: Left ArrowStep 3: Main SpriteStep 4: Up & Down
Step 1: Arrow_Right Sprite
You will need tot create a new sprite and use the arrow sprite from the scratch library.
You should rename this sprite “Arrow_Right”.
You will then need to add the following code to this sprite to detect when the user clicks or taps on this sprite:
Step 2: The Arrow Left
Repeat the instructions from Step 1 to create another arrow sprite and call it “Arrow_Left”. The code for this new sprite will be as follows:
You will also need to change the costume of this sprite to show an arrow pointing to the left:
The main sprite (in this case the cat, will need to move left or right when it receives the messages “left” and “right”. To do so we will use the following code (on the cat sprite):
You can repeat the above steps to create an Arrow_Up and a Arrow_Down sprite if it is relevant to your game.
Thank You Medical Staff and Key Workers!
During the coronavirus pandemic, the rainbow has become a symbol of gratitude for the medical staff working in hospitals as well as all the other key workers who carried on working to provide essential services to their community.
All over the UK, children have drawn or painted colourful rainbows and have displayed them on their windows or front doors.
In this challenge, we will use some python code to draw a rainbow and a “Thank You” message to all medical staff and key workers.
This is what the output of our code should look like:
Your Task
We have written the code using Python Turtle but it does not produce the expected outcome.
Could you:
- Change lines 20 to 28 to make sure the code displays the colours of the rainbow in the right order
- Change lines 30 to 35 to make sure the stars and text are of the right colours.
The output of your code should be the same as the above picture.
Extension Task
You can tweak this code further to change the message or improve the overall look and feel further for instance by adding more stars and playing with the colours used to display the text.
Solution...
The solution for this challenge is available to full members!Find out how to become a member:
➤ Members' Area
Colour Luminance and Contrast Ratio
The luminance of a colour is a measure used to describe the perceived brightness of a colour. It is possible to calculate the luminance of a colour based on its RGB colour code.
So let’s consider an algorithm that collects an RGB colour code as an input, using the (255,255,255) format. The algorithm will then convert these R, G, B values to a 0 to 1 scale as follows:
New R1,G1 B1 values are then calculated using the following rules:
Finally, the luminance value of the colour can be calculated using the following formula:
The reason such complex formulas are necessary to calculate the luminance (“perceived brightness”) of a colour is partly because our eyes’ perception of the brightness of a colour is not linear (it is not directly proportionate to the number of photons being emitted by a computer screen). Effectively our eyes perceive more levels of light in dim conditions, and less in brighter conditions.
Luminance Function
Your first task is to write a function called luminance() that takes 3 parameters r, g and b corresponding to the RGB values of a colour (integer values between 0 and 255). Your function will use the above algorithm to calculate and return the luminance of the given colour.
You can use the trinket at the bottom of this page to write the Python code for this fucntion.
Contrast Ratio
The contrast ratio defines how easy a human eye recognises text or images on a coloured background.
- The contrast ratio is a numerical ratio between 1:1 and 21:1.
- To be easily readable, the contrast ratio between the text colour and the background colour must be at least 7:1.
- A contrast ratio of at least 4.5 may suffice for larger text.
To calculate the contrast ratio between two colours (e.g. font/text colour and background colour) you must first calculate the luminance of both colours and identify which colour is the lightest colour and which colour is the darkest colour. You can then use these luminance values (labelled Llight and Ldark) to calculate the contrast ratio as follows:
Contrast Ratio Function
Your second task is to write a function called contrastRatio() that takes 6 parameters corresponding to the RGB values of two colours (integer values between 0 and 255). Your function will work out the luminance values of both colours, identify the lightest of the two colours and use the above formula to calculate and return the contrast ratio between these two colours.
Test Plan
Once your code is complete, check that it works as expected using the following four tests:
| Test # | Input Values | Expected Output | Pass/Fail? |
| #1 | (255,255,255) (0,0,0) |
Luminance: 100% Luminance: 0% Contrast Ratio: 21 |
|
| #2 | (148, 57, 173) (174, 84, 199) |
Luminance: 12.24% Luminance: 19.46% Contrast Ratio: 1.42 |
|
| #3 | (148, 57, 173) (209, 157, 223) |
Luminance: 12.24% Luminance: 43% Contrast Ratio: 2.78 |
|
| #4 | (148, 57, 173) (245, 232, 248) |
Luminance: 12.24% Luminance: 83.9% Contrast Ratio: 5.16 |
Magic Trick Algorithm
In this blog post we are investigating whether we can teach a computer how to perform a magic trick.
Algorithm
If you want a computer to perform a specific task you need to provide this computer with a clear set of instructions that the computer will repeat, one instruction at a time. We call such a set of specific instructions an algorithm.
One of the key characteristic of an algorithm is that the instructions are given in a specific order, forming a sequence of instructions. When the computer will complete your algorithm, it will complete each instructions one instruction at a time in the order they appear on the algorithm. We call this sequencing, a key concept of computer algorithms.
When designing an algorithm, we can either write our instructions as a list (Pseudocode) or we can use a more visual representation of our algorithm using a flowchart.
Magic Trick Algorithm
We have implemented a magic trick algorithm based on a small deck of cards. When you press the start button below, the computer will follow the sequence of instructions from this algorithm to perform the magic trick.
Let’s see if the computer can perform this magic trick successfully:
Click on the button below to start the magic trick!
Magic Trick Algorithm/Flowchart
The flowchart for this algorithm will help you work out how the actual card trick works!
Tagged with: Sequencing
Assembly Language
Assembly language is a low-level programming language. Each assembly language is specific to a particular computer architecture. Assembly language uses mnemonics to represent low-level machine instructions or opcodes. Many operations require one or more operands in order to form a complete instruction. Most assembly languages let you use different modes of addressing to specify the value (immediate addressing) or location/memory address of an operand. Assembly languages also let you use labels in the code to point to specific memory locations or registers.
LMC
LMC (Little Man Computer) is an example of basic assembly language used for educational purposes. It consists of only 11 mnemonics (e.g. INP, OUT, STA, BRP, etc.) and is based on one memory addressing mode: direct addressing.
Little Man ComputerOpen in new tab/window
Translation Process
Because assembly language use a relatively basic syntax and a limited number of mnemonics, the translation process to convert low level code into machine code (aka object code or binary code) is fairly straightforward. This process is called “assembling” and is preformed by an assembler: a piece of software utility used to translate/assemble low-level code into binary code.
Because assembly depends on the machine code instructions, every assembler has its own assembly language which is designed for exactly one specific computer architecture.
Assembly language usually has one statement per machine instruction so there is the 1:1 relationship between a low-level instruction and a machine instruction. Basic computer architectures will result in a reduced number of instructions. More complex architectures will result in a wider range of instructions making it easier to write assembly code. (Find our more about RISC – Reduced Instruction Set – and CISC – Complex instruction Set – processors)
Unlike assembly language, most high-level programming languages are generally portable across multiple architectures but require interpreting or compiling, a much more complicated task than assembling.
Assembler
We have created an online assembler for the LMC language to demonstrate the process of translating LMC code to machine/binary code. You can use it to load your own LMC programs and assemble them into binary.
In the early days of computer science (1950s, 1960s) computer programs could be “printed” using hole punched cards or tape. Our LMC assembler let you preview the resulting hole punched tape for your programs.
Tagged with: LMC
Radians to Degrees Conversions
The radian is a unit of measure for angles used mainly in trigonometry. It is used as an alternative to degrees.
Whereas, in degrees a full circle is 360 degrees, in radians a full circle is 2π radians:
It is easy to convert an angle from degrees to radians and vice-versa using the following formulas:
Python Challenge
In this challenge we will write a program to convert an angle from degrees to radians or from radians to degrees based on the user’s choice. Our program will:
- Display a menu of options to the end user.
- Ask the end-user to choose an option from the menu.
- Ask the end-user to input an angle in the required unit.
- Calculate and output the angle in the alternative angle unit.
To structure this program we will make use of 3 subroutines as follows:
- A menu() function that displays the available options, ask the user for an otpion and return the selected option.
- A procedure called convertRadiansToDegrees() that ask the user to input an angle in radians, convert this angle using the appropriate conversion formula and output the angle in degrees.
- A procedure called convertDegreesToRadians() that ask the user to input an angle in degrees, convert this angle using the appropriate conversion formula and output the angle in radians.
We will then write an algorithm to complete this challenge, making use of our three subroutines.
Flowcharts
We have designed the flowcharts for the three subroutines and for the main algorithm.
Flowchart #1Flowchart #2 and #3Flowchart #4
Python Code
Your task is to complete the Python code for this challenge, using the flowcharts provided above.
Solution...
The solution for this challenge is available to full members!Find out how to become a member:
➤ Members' Area
Pygame Framework
The pygame library contains several modules and classes that you will use when creating video retro arcade games.
You will need to familiarise yourself with the most useful modules and classes as listed below: (Click on a module/class to access a description of the module/class)
Zoom in / Open pygame framework in new window
You can access the Pygame online documentation to gain a better understanding of the main functions/methods and attributes from this framework and access relevant code examples.
| Modules/Classes | Description | Pygame Documentation |
|
pygame.init() Initialise all imported pygame modules. pygame.quit() |
Access online documentation |
 |
Sprite() The base class for all the sprites of your game. Group() spritecollide() groupcollide() collide_mask() |
Access online documentation |
 |
alive Does this sprite belong to any group? (Boolean value) groups update() add() remove() kill() |
Access online documentation |
 |
sprites A list of all the sprites contained by this group add() remove() has() update() draw() clear() empty() |
Access online documentation |
 |
init() Initialise the display module. quit() set_mode() get_surface() flip() update() set_icon() set_caption() get_caption() get_window_size() |
Access online documentation |
 |
line() Draw a line on the specified surface. rect() polygon() circle() ellipse() |
Access online documentation |
 |
flip() Flip the specified horizontally and/or vertically. scale() rotate() |
Access online documentation |
 |
blit() Draw a specified image/surface on this surface. convert() convert_alpha() fill() set_colorkey() set_alpha() get_width() get_height() get_rect() get_at() |
Access online documentation |
 |
x,y Used to set or retrieve the x and y coordinates of the rectangle object. Other properties can also be used such as top, left, bottom, right, topleft, bottomleft, topright, bottomright, midtop, midleft, midbottom, midright, center, centerx, centery. width height copy() move() inflate() collidepoint() colliderect() collidelist() |
Access online documentation |
 |
render() Add text on a new surface. set_underline() set_bold() set_italic() |
Access online documentation |
 |
wait() Pause the program for a specified amount of milliseconds. delay() get_ticks() set_timer() Clock() |
Access online documentation |
 |
tick() Update the clock. Should be used once per frame. get_time() get_fps() |
Access online documentation |
 |
Event() Instantiate a new event object. get() wait() clear() |
Access online documentation |
 |
type The type of event such as QUIT, KEYDOWN, KEYUP, MOUSEMOTION, MOUSEBUTTONDOWN, MOUSEBUTTONUP, etc. key pos |
Access online documentation |
 |
get_pressed() Returns a list of Boolean values representing the state of all the mouse buttons. get_pos() set_pos() set_visible() set_cursor() |
Access online documentation |
 |
get_pressed() Returns a list of Boolean values representing the state of all the keyboard keys. get_mods() name() |
Access online documentation |
 |
load() Load a music file for playback. unload() play() rewind() pause() unpause() fadeout() stop() get_volume() set_volume() queue() |
Access online documentation |
 |
pre_init() Preset the mixer init arguments init() pause() unpause() fadeout() stop() quit() Sound() |
Access online documentation |
 |
play() Begin sound playback. stop() fadeout() set_volume() get_volume() get_length() |
Access online documentation |
Tagged with: PyGame
Abstract Syntax Tree Generator
In computer science, an abstract syntax tree (AST), or just syntax tree, is a tree representation of the high level source code.
The compilation process consists of translating the high level source code (e.g. Java, Python, C++, FORTRAN, etc.) into machine code. This process consists of 4 steps:
- Lexical Analysis
- Syntax Analysis
- Code Generation
- Code Optimisation
A list of tokens is generated during the lexical analysis of the compilation process.
An Abstract Syntax Tree (AST) is generated during the syntax analysis of the compilation process.
The following tool enables you to type/import some high level code (Javascript) in the first tab below and generate the list of tokens and the Abstract Syntax Tree corresponding to your code. You can see what the tree looks like using the JSON format (third tab) or as a visual representation (fourth tab).
Source CodeTokens (JSON)TokensAST (JSON)AST Tree
Javascript Code:
Copy and paste your JavaScript code in the textarea below and press the “Generate Abstract Tree” button below to generate the list of tokens (lexical analysis) on tab 2 and the AST tree (syntax analysis) on tab 3 and tab 4.
Generate Abstract Syntax Tree
List of Tokens (JSON format)
The list of tokens is generated from the source code during the lexical analysis stage of the compilation. Notice how, during the lexical analysis, annotations and white spaces are discarded and are hence not included in the list of tokens.
List of Tokens
The list of tokens is generated from the source code during the lexical analysis stage of the compilation. Notice how, during the lexical analysis, annotations and white spaces are discarded and are hence not included in the list of tokens.
Abstract Syntax Tree (JSON format)
The Abstract Syntax Tree is generated using both the list of tokens (from the lexical analysis) and the source code. The AST is generated during the syntax analysis stage of the compilation. Any syntax error would be detected and a syntax error message would then be returned, stopping the compilation process.
Abstract Syntax Tree
Open AST in new windowDid you know?
Rear Admiral Grace Hopper, 1984
Grace Hopper had a key role in the development of computer science. She invented the concept of sub-routines to help programmers save time when writing code. Her work on developing high-level languages was also motivated by the need to be able to save time when writing programs, as writing low-level code can be extremely time consuming.
Women in STEM
Listen to what Megan Smith (U.S. Chief Technical Officer) said about Grace Hooper in 2014:
The first computer bug!
Nowadays, when we find an error in a computer program, we call this error a bug. While Grace Hopper was working on a Mark II Computer at Harvard University in 1947, her team discovered a moth stuck in a relay. The moth impeded the operation of the relay by creating a short-circuit. The problem was fixed by removing the moth (debugging the relay!). The following picture is a photo of the notes from Grace Hopper and her associates with a picture of the actual moth!
The first computer bug!
Arduino: RGB Gradient
In this challenge we will use the Arduino board to control a RGB LED to create a gradient light effect where the LED will fade from red to purple, to blue, to purple and back to red.
You do not need to have access to an Arduino board. Instead you can use the online Arduino simulator from Tinkercad to recreate the electronic circuit and add the code provided below.
Open Tinkercad in new windowRGB Colour Codes
Did you know that every colour on the screen can be represented using an RGB code (Red, Green, Blue) code. This code consists of three numbers between 0 and 255, indicating how much red, green and blue are used to recreate the colour.
For instance the RGB code for:
- Red is (255,0,0)
- Green is (0,255,0)
- Blue is (0,0,255)
- Yellow is (255,255,0)
- Orange is (255,165,0)
Check the following RGB Color picker to see how RGB codes work:
Electric Circuit
An RGB LED is a 3-in-1 LED. It consists of a RED LED, a Green LED and a Blue LED all within the same component. It has 3 cathodes (+ pins) that can take different amperages. It has 1 common anode (- pin).
This is how we will connect our RGB LED to our Arduino board.
The purpose of the resistors is to limit the amperage in the circuit and hence protect the LED from receiving a too strong current (which could damage the LED). The resistors we use here are 100 ohms (Brown Black Brown rings).
C/C++ Code
// Arduino - RGB Gradient - www.101computing.net/arduino-rgb-gradient
int redOut = 13;
int greenOut = 11;
int blueOut = 12;
void setup() {
pinMode(redOut, OUTPUT);
pinMode(greenOut, OUTPUT);
pinMode(blueOut, OUTPUT);
}
void setRGB(int red, int green, int blue)
{
analogWrite(redOut, red);
analogWrite(greenOut, green);
analogWrite(blueOut, blue);
}
void loop() {
int red = 255;
int green = 0;
int blue = 0;
for (int i = 0; i <= 255; i++) {
blue = i;
setRGB(red,green,blue);
delay(20);
}
for (int i = 0; i <= 255; i++) {
blue = 255 - i;
setRGB(red,green,blue);
delay(20);
}
}
Your Challenge
Tweak this code to create other gradient animations:
Gradient 1: Cyan, Magenta, Cyan
Gradient 2: Cyan, Yellow, Cyan
Gradient 3: Green, Yellow, Magenta, Cyan, Green
LMC Simulator
Logic Gates Circuits
Network Designer
Flowchart Studio
Online Python IDE