Learning Zone ✕

Theory Concepts

Cryptography Computer Hardware Computer Networks Algorithms OOP Programming Binary Data Boolean Logic Database Concepts

Interactive Quizzes

View All Quizzes

GCSE 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 technology
2.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 issues
2.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 Challenges

HTML / CSS & JavaScript

HTML / CSS & JavaScript

LMC

LMC Challenges LMC Simulator

SQL

SQL Challenges

Block Programming

BBC micro:bit Challenges Scratch Challenges

Interactive Coding Puzzles

Pirate Island Space Explorer Interactive Coding Quizzes

Online Interactive Tools ✕

Coding Tools

Online Python IDE LMC Simulator Flowchart Sudio Trace Table 101 Dashboard Difference Engine Emulator Analytical Engine Emulator

Design Tools

Network Designer Database ERD Designer

Logic Gates Circuits

Logic Gates Circuits Simulator Logic Gates Diagrams Binary Activities Karnaugh Maps

Cryptography Corner

Enigma Simulator Enigma Mission X Turing-Welchman Bombe Simulator Frequency Analysis Cipher Wheel Visual Cryptography Pigpen Cipher Encoder MRX20 Mission to Mars Cryptography Challenges

More results...

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
post
page
◑ Python IDE Dashboard

Member's Area ✕

Register/Sign Up

Become a Member Login Your Account Solved Challenges Membership FAQ Logout

Get In Touch

About Us Contact Us Follow Us

Books Corner

101 Python Challenges 101 Extra Python Challenges

Wind Speed Conversions and the Beaufort Scale

Posted on by Administrator Posted in Computer Science, Python - Intermediate, Python Challenges, Solved Challenges

weather-vaneBefore going to sea, any sailor should check the marine weather forecast to check on different aspects of the weather including the direction and strength of the wind (wind speed).

The wind speed can be measured using different units such as mph (miles per hour), km/h (km per hour) but sailors tend to prefer to use knots. A knot represents a speed of 1 nautical mile per hour, and a nautical mile is exactly 1,852 meters!

The Beaufort wind force scale was introduced in 1805 by a Royal Navy officer, Francis Beaufort. It relates wind speeds to observed conditions at sea or on land. Nowadays, the scale contains thirteen values (from zero to twelve): A force 0 wind represents very calm wind conditions whereas a force 12 wind represents a Hurricane-force wind!

Here is the full Beaufort scale:

Beaufort Wind Force Scale
Force Description Wind speed Wave height Sea conditions Land conditions
0 Calm < 1 knot 0 ft (0 m) Sea like a mirror Smoke rises vertically.
1 Light air 1–3 knots 0–1 ft Ripples with appearance of scales are formed, without foam crests Direction shown by smoke drift but not by wind vanes.
2 Light breeze 4–6 knots 1–2 ft Small wavelets still short but more pronounced; crests have a glassy appearance but do not break Wind felt on face; leaves rustle; wind vane moved by wind.
3 Gentle breeze 7–10 knots 2–4 ft Large wavelets; crests begin to break; foam of glassy appearance; perhaps scattered white horses Leaves and small twigs in constant motion; light flags extended.
4 Moderate breeze 11–16 knots 3.5–6 ft Small waves becoming longer; fairly frequent white horses Raises dust and loose paper; small branches moved.
5 Fresh breeze 17–21 knots 6–10 ft Moderate waves taking a more pronounced long form; many white horses are formed; chance of some spray Small trees in leaf begin to sway; crested wavelets form on inland waters.
6 Strong breeze 22–27 knots 9–13 ft Large waves begin to form; the white foam crests are more extensive everywhere; probably some spray Large branches in motion; whistling heard in telegraph wires; umbrellas used with difficulty.
7 High wind,
moderate gale,
near gale		 28–33 knots 13–19 ft Sea heaps up and white foam from breaking waves begins to be blown in streaks along the direction of the wind; spindrift begins to be seen Whole trees in motion; inconvenience felt when walking against the wind.
8 Gale,
fresh gale		 34–40 knots 18–25 ft Moderately high waves of greater length; edges of crests break into spindrift; foam is blown in well-marked streaks along the direction of the wind Twigs break off trees; generally impedes progress.
9 Strong/severe gale 41–47 knots 23–32 ft High waves; dense streaks of foam along the direction of the wind; sea begins to roll; spray affects visibility Slight structural damage (chimney pots and slates removed).
10 Storm,
whole gale		 48–55 knots 29–41 ft Very high waves with long overhanging crests; resulting foam in great patches is blown in dense white streaks along the direction of the wind; on the whole the surface of the sea takes on a white appearance; rolling of the sea becomes heavy; visibility affected Seldom experienced inland; trees uprooted; considerable structural damage.
11 Violent storm 56–63 knots 37–52 ft Exceptionally high waves; small- and medium-sized ships might be for a long time lost to view behind the waves; sea is covered with long white patches of foam; everywhere the edges of the wave crests are blown into foam; visibility affected Very rarely experienced; accompanied by widespread damage.
12 Hurricane force ≥ 64 knots ≥ 46 ft The air is filled with foam and spray; sea is completely white with driving spray; visibility very seriously affected Devastation.

Python Challenge

In this challenge we will write a python script that:

  1. lets the user enter a wind speed in the unit of their choice (mph, km/h, knot)
  2. converts this wind speed in knots and lookup the matching find force,
  3. looks up for the matching wind force from the Beaufort scale,
  4. outputs the wind force and both the matching sea and land conditions

Python Code

You can complete the python code using the following trinket:

unlock-access

Solution...

The solution for this challenge is available to full members!
Find out how to become a member:
➤ Members' Area
Tagged with:

Circle Geometry Functions

Posted on by Administrator Posted in Computer Science, Python - Intermediate, Python Challenges

In this challenge we will create a library of functions to apply the different formulas based on the geometry of circles.

For each function, you will need to design the algorithm using either Pseudo-code or a flowchart, implement the function using the Python trinket provided below and use another algorithm to test your function.

CircumferenceAreaArcSector: PerimeterSector: AreaChordSegment: PerimeterSegment: Area
circle-circumference
Write a function called getCircumference() that takes one parameter/argument: the radius of a circle.

Your function should calculate and return the circumference (perimeter) of this circle..

Write an algorithm to test your function.
Your algorithm should:

  • Ask the user to enter the length of the radius of a circle,
  • Use the getCircumference() function to retrieve the circumference of the circle,
  • Display the circumference of the circle
circle-area
Write a function called getArea() that takes one parameter/argument: the radius of a circle.

Your function should calculate and return the area of this circle..

Write an algorithm to test your function.
Your algorithm should:

  • Ask the user to enter the length of the radius of a circle,
  • Use the getArea() function to retrieve the area of the circle,
  • Display the area of the circle
circle-arc
Write a function called getArcLength() that takes two parameters/arguments: the radius and angle of an arc.

Your function should calculate and return the length of this arc..

Write an algorithm to test your function.
Your algorithm should:

  • Ask the user to enter the length of the radius of a circle,
  • Ask the user to enter the angle of an arc,
  • Use the getArcLength() function to retrieve the length of this arc,
  • Display the length of the arc.
circle-sector-perimeter

Write a function called getSectorPerimeter() that takes two parameters/arguments: the radius and angle of a sector.

Your function should calculate and return the perimeter of this sector..

Write an algorithm to test your function.
Your algorithm should:

  • Ask the user to enter the length of the radius of a circle,
  • Ask the user to enter the angle of a sector,
  • Use the getSectorPerimeter() function to retrieve the perimeter of this sector,
  • Display the perimeter of this sector.
circle-sector-area

Write a function called getSectorArea() that takes two parameters/arguments: the radius and angle of a sector.

Your function should calculate and return the area of this sector..

Write an algorithm to test your function.
Your algorithm should:

  • Ask the user to enter the length of the radius of a circle,
  • Ask the user to enter the angle of a sector,
  • Use the getSectorArea() function to retrieve the area of this sector,
  • Display the area of this sector.
circle-chord
Write a function called getChordLength() that takes two parameters/arguments: the radius and angle of a chord.

Your function should calculate and return the length of this chord..

Write an algorithm to test your function.
Your algorithm should:

  • Ask the user to enter the length of the radius of a circle,
  • Ask the user to enter the angle of a chord,
  • Use the getChordLength() function to retrieve the lenght of the chord,
  • Display the length of the chord
circle-segment-perimeter

Write a function called getSegmentPerimeter() that takes two parameters/arguments: the radius and angle of a segment.

Your function should calculate and return the area of this segment..

Write an algorithm to test your function.
Your algorithm should:

  • Ask the user to enter the length of the radius of a circle,
  • Ask the user to enter the angle of a segment,
  • Use the getSegmentPerimeter() function to retrieve the perimeter of this segment,
  • Display the perimeter of the segment
circle-segment-area

Write a function called getSegmentArea() that takes two parameters/arguments: the radius and angle of a segment.

Your function should calculate and return the area of this segment..

Write an algorithm to test your function.
Your algorithm should:

  • Ask the user to enter the length of the radius of a circle,
  • Ask the user to enter the angle of a segment,
  • Use the getSegmentArea() function to retrieve the area of this segment,
  • Display the area of the segment

Python Code


We have already started the code for you and have completed the function getCircumference() followed by a short algorithm to test this function.

Your task is to complete this Python script to create and test all the functions mentioned above.

Tagged with: ,

Tutankhamun’s Papyrus

Posted on by Administrator Posted in A Level Quiz, Coding Quiz, Computer Science, Computing Concepts, GCSE Concepts, GCSE Quiz, Quizzes, Solved Challenges
The mask of Tutankhamun

The mask of Tutankhamun

The historical era of ancient Egypt spreads over more than 30 centuries during which different pharaoh’s ruled Egypt. One of the most famous pharaoh, Tutankhamun commonly referred to as King Tut ruled from 1334 to 1325 BC. He was the son of the pharaoh Akhenaten and took the throne at the age of eight or nine!

The discovery, in 1922, of Tutankhamun’s nearly intact tomb received worldwide press coverage and sparked a renewed public interest in Ancient Egypt. Within the tomb, more than 5,000 artefacts were discovered including Tutankhamun’s mask which is nowadays one of the most popular symbol of Ancient Egypt.

While conducting some research on the life of Tutankhamun, two eminent Egyptologists from Cambridge University, UK, decrypted some hieroglyphs which led them to believe that one artefact has yet to be found: A papyrus drawn by King Tut himself! They believed the papyrus has been torn apart into 12 pieces and have managed to identify the exact location of all 12 pieces of the ancient papyrus.
papyrus-pieces
The two Egyptologists contacted a team of archaeologists working on an excavation site near the great Pyramid of Giza and were meant fly to Egypt at the end of the month to join them and excavate the 12 parchments. However, they mysteriously disappeared and never reached Egypt. The police found at their home 12 small papyrus with some mysterious codes as well as a map of the archaeological excavation site. We believe these were written by the two archaeologists to encode the exact locations of all 12 pieces of King Tut’s parchment.

Your task is to use your coding skills to identify the exact location of all the 12 pieces of the ancient parchment.
pyramids-200

Tutankhamun’s papyrusOpen in New Window pyramids-200

unlock-access

Solution...

The solution for this challenge is available to full members!
Find out how to become a member:
➤ Members' Area

Egyptian Numerals Conversions

Posted on by Administrator Posted in Computer Science, Computing Concepts

In this blog post we will investigate how Egyptians used to write numbers (Ancient Egypt civilisation) and we will use an algorithm to convert decimal numbers into Egyptians numerals.

By completing this challenge, we will compare two different numerical notations:

  • Positional Notation (a.k.a Place Value Notation) as used by the decimal system (Hindu-Arabic numeral system)
  • Additive Notation as used by the Ancient Egypt numeral system as well as the Roman numeral system

Positional Notation (a.k.a Place Value Notation)

The notation we use nowadays when writing decimal numbers is based on the Hindu-Arabic numeral systems where each digit of a number has a value corresponding to the value of the digit multiplied by a factor (a power of 10) determined by the position of the digit in the number.

For instance:
place-value-notation

With this number, the least significant digit (on the right: 5) represents units, the next digit (2) represents tens, the next digit (4) represents hundreds and the most significant digit (on the left: 3) represents thousands.

This notation is called a Place Value notation because the value of a digit varies based on its position/place in the number. So, for instance the digit 3 in the above number (3,425) has a value of 3,000 but in the number 2,536 its value is now 30.

Additive Notation

Ancient civilisations such as the Ancient Egypt Civilisation used a different notation to represent numbers. In the additive notation each symbol has a unique value which does not change based on its position in the number. The value of a number if calculated by adding the value of each of the symbols used in this number.

So, let’s investigate the symbols (Hieroglyphs) used in Ancient Egypt to represent numbers:

Symbol/Hieroglyph 𓏺 𓎆 𓏲 𓆼 𓂭 𓆐 𓁨
Value 1 10 100 1,000 10,000 100,000 1,000,000

Using the above symbols we can easily calculate the value of a number as follows:
egyptian-numerals-additive-notation

Using this approach can you convert the following numbers in decimal?


egyptian-numerals-hieroglyphs-1

egyptian-numerals-hieroglyphs-2

egyptian-numerals-hieroglyphs-3

egyptian-numerals-hieroglyphs-4

Online conversions

Use our online convertor to check your answers…

Roman Numerals: Additive and Subtractive Notation

Roman Numerals use an additive notation combined with a subtractive notation.
The symbols used in Roman numerals are as follows:

Symbol M D C L X V I
Value 1,000 500 100 50 10 5 1

roman-numerals-additive-notation

roman-numerals-additive-subtractive-notation
Using this approach can you convert the following numbers in decimal?


roman-numerals-2
roman-numerals-1
roman-numerals-3
roman-numerals-4

Online conversions

Use our online convertor to check your answers…

UPC Barcodes

Posted on by Administrator Posted in Computer Science, Computing Concepts, Cryptography

barcode-640522710850A barcode is a visual representation of data that can easily be read by an optical barcode scanner/reader. Barcodes are used to facilitate and speed up the identification of different types of products. Using a barcode reader speed up the input/data entry process and and is a more reliable method generating less data entry errors than when a product code is entered manually.

There are different types/formats of barcodes such as ISBN barcodes used to identify books/publications or UPC (Universal Product Codes) or EAN (European Article Number) barcodes to uniquely identify products/trade items.

You can visit this wikipedia page to find out a about a range of linear barcodes (1D) and matrix barcodes (2D) such as QR codes.

UPC Encoding

Let’s focus on UPC barcodes. UPC barcodes are widely used in America, Europe, Australia, New Zealand, and other countries for tracking trade items in stores. A UPC barcode is a linear barcode consisting of a series of black and white stripes of different thickness. They are used to encode 12 numerical digits in two groups/segments of 6 digits: the left segment and the right segments.

A UPC barcode is delimited using guards: specific patterns that appear at the start, at the end and also in the middle of the barcode to separate the left and right segment:
upc-barcode-anatomy

With UPC barcodes, the first and last digits are often displayed before and after the left and right hand side guards of the barcode (even though the stripes representing these digits are still within the guards patterns):
UPC-barcode-digits-position

Each numerical digit is encoded using a specific pattern. However the patterns used are different on the left and right segments. This feature is necessary to ensure that barcode readers can read a barcode in both directions (in case a barcode is presented upside down). In fact the patterns used on the right segments for each digit are the exact opposite to the patterns used for the digits on the left segment. Each pattern is seven stripes wide:
upc-barcode-digits

Decoding a barcode

Use the information provided above to decode the following barcodes and check your UPC codes using barcodespider.com to identify the corresponding products.

# Barcode Product UPC?
#1 Raspberry Pi Model 3B
#2 32GB SD Card
#3 Optical Cordless Mouse

Barcode Generator

Check digits

The last digit of a UPC-A barcode is the check digit. A check digit is used to minimise the risk of errors when scanning a barcode. A check digit calculation is used to confirm that a barcode being scanned is valid or not. You can read more about check digit validation on this blog post.

Perseverance’s Parachute Secret Message Encoder

Posted on by Administrator Posted in Computer Science, Computing Concepts, Cryptography, Solved Challenges

On February 18, 2020, NASA successfully landed its rover “Perseverance” on planet Mars. To slow down its descent the rover deployed a parachute. The whole operation was filmed and relayed on the Internet. You can watch the official NASA video on youtube.

The internet community quickly noticed the unusual red and white pattern on the parachute resembling the pattern of a barcode:

NASA-perseverance-parachuteSource: NASA/JPL-Caltech

In just a few hours, internauts successfully decoded the “secret message” encoded on the parachute. The message read:

“Dare Mighty Things – 34° 11’58” N 118° 10’31 W”

The numbers in this message correspond to the GPS coordinates of the JPL centre (NASA’s Jet Propulsion Laboratory in located in California), whereas “Dare Mighty Things” is the moto used by JPL.

The encoding process is fairly basic:

  • The 3 concentric inner rings of the parachute represent one word per ring.
  • Each character of a given word is represented by a number between 1 and 26 corresponding to its position in the alphabet (A is 1, B is 2, up to Z is 26). These numbers are then converted in binary using 7 bits per character followed by “000” as a delimiter between each character.
  • E.g. The word DARE is encoded in the inner circle. D=4 A=1 R=18 E=5 becomes in binary:
    000-0000100-000-0000001-000-0010010-000-0000101-000
  • The pattern consists of red and white stripes. A white stripe represent a 0, a red stripe a 1. e.g.
    • Character Value 64 32 16 8 4 2 1
    D 4
    0
    0
    0
    0
    1
    0
    0
    A 1
    0
    0
    0
    0
    0
    0
    1
    R 18
    0
    0
    1
    0
    0
    1
    0
    E 5
    0
    0
    0
    0
    1
    0
    1
  • The message is encoded clockwise.
  • A ring consists of 80 stripes (to encode a word of a maximum of 8 characters. All unused stripes appear as a large red block.
  • Using a similar approach, the outer ring of the parachute is used to encore the GPS coordinates in DMS (Degrees, Minutes, Seconds) format. Each coordinate being encoded in binary using 7-bits.

Let’s apply this to decode NASA’s Perseverance Secret Message:

"Dare Mighty Things - 34° 11'58" N 118° 10'31"

“Dare Mighty Things – 34° 11’58” N 118° 10’31 W”

Online Encoder

You can use our online secret message encoder to design your own parachute. To do so you will need to:

  • Choose 3 words of maximum 8 letters each.
  • Identify the GPS coordinates (using the DMS format: Degrees, Minutes, Seconds) of a given location on planet earth. (You can use this website (www.gps-coordinates.net) to retrieve the required coordinates)
  • Input this information below to generate your parachute. You can then print or take a screenshot of your parachute.

Decoding Tasks

We have encoded a few messages using the same approach. Well you be able to decode these messages and identify the exact location using the following parachutes?

Somewhere in France...

Parachute #1: Somewhere in Europe…

Parachute #1: Somewhere in America!

Parachute #2: Somewhere in America…

Somewhere in Asia...

Parachute #3: Somewhere in Asia…

To complete this activity on paper, you can download and print the worksheet (PDF file).

unlock-access

Solution...

The solution for this challenge is available to full members!
Find out how to become a member:
➤ Members' Area
Tagged with: ,

Mars Perseverance Rover

Posted on by Administrator Posted in Computer Science, Python - Beginner, Python - Intermediate, Python Challenges, Solved Challenges

planet-marsOn February 18, 2020, NASA’s rover called “Perseverance” successfully landed on Mars. The mission of this high-tech 6-wheel rover is to explore the surrounding areas, analyse the Martian soil on different locations, take high definition pictures as well as audio recordings. The ultimate hope for NASA is that this rover may find evidence that there was once a form of life on planet Mars. You can read more about this rover on the official NASA website.

The rover and all its various sensors and electromechanical devices are controlled using a range of preloaded algorithms. New algorithms can also be transmitted to the rover via ultra high frequency (UHF) radio transmission.

mars-perseverance-rover

The NASA is asking you to write a few new algorithms that will be used to explore a new specific zone on planet Mars. You will have to design, implement and test 7 algorithms to compete the different missions set by NASA. You will be able to test your algorithms using our Mars Perseverance Simulator Environment (MPSE).

Mission 1Mission 2Mission 3Mission 4Mission 5Mission 6Mission 7

Mission 1: Delimiting the area

The area, the rover will cover is a square of 400m by 400m situated in the North-West area of the Jezero Crater. Your first mission is to implement an algorithm to direct the rover around the perimeter of this area: The path to follow has been traced in white on the Mars Perseverance Simulator Environment.

mars-path-1

The code used to initialise the rover for this mission has already been completed for you (line 1 to 20) and you will not need to update this code. However, you will need to complete this code from line 22.

Note that the rover can respond to the following instructions:

  • rover.forward(distance)
  • rover.left(angle)
  • rover.right(angle)

For instance, you can try the following code to get you started:

rover.forward(200)
rover.left(45)
rover.forward(100)

Mars Perseverance Simulator Environment (MPSE):

Mission 2: Code Optimisation

The rover being located more than 240 million km away from NASA’s Control Centre (on planet Earth!), the radio transmissions needs to be optimised by reducing the quantity of data that needs to be transmitted to the rover.

NASA would hence like you to review the code you produced to complete mission 1 to see if it would be possible to provide a shorter algorithm (in other words to reduce the number of lines in the code needed to direct the rover around the perimeter).

mars-path-1

To do so you will need to use a for loop which will enable you to reduce the number of repeating instructions in your code.

For instance, you can try the following code to get you started:

for i in range(3):
   rover.forward(200)
   rover.left(120)

You will need to adapt your code from mission to make effective use of a for loop, and hence reduce the amount of data to be transmitted from planet Earth to planet Mars.

Mars Perseverance Simulator Environment (MPSE):

Mission 3: Exploring the whole area

NASA would like to create a detailed surface map of the delimited area. To do so, it needs the rover to circulate through the whole area. The path to follow has been highlighted in white in the simulator environment. Write an algorithm to direct the rover alongside this path. Make sure your code is optimised to limit the amount of data to transfer across to the rover.

mars-path-2

Mars Perseverance Simulator Environment (MPSE):

Mission 4: Alternative Path

NASA would like to investigate an alternative path to cover the whole area. The path to follow has been highlighted in white in the simulator environment. Once again, your mission is to write an algorithm to direct the rover alongside this path. Make sure your code is optimised to limit the amount of data to transfer across to the rover.

mars-path-3

Mars Perseverance Simulator Environment (MPSE):

Mission 5: Finding Craters

While completing the full map of the area, the rover identified three small craters. NASA would like you to write an algorithm to visit these three craters one at a time using the information provided on the highlighted path.

mars-path-4

Mars Perseverance Simulator Environment (MPSE):

Mission 6: Finding Craters near a rift!

NASA would like the rover to explore three additional craters. However these are located next to a rift. NASA would like you to write an algorithm to visit these three craters one at a time. You will have to do so making sure the rover does not fall into the rift!

mars-path-6

Mars Perseverance Simulator Environment (MPSE):

Mission 6: Giant Crater Exploration

Finally, NASA would like to explore one giant crater by taking the rover all around the crater. You will need to write an optimised algorithm to go around the crater using the information provided on the highlighted path.

mars-path-5

Remember: To optimise your algorithm, you should make use of a for loop. e.g.

for i in range(3):
   rover.forward(200)
   rover.left(120)

Mars Perseverance Simulator Environment (MPSE):

unlock-access

Solution...

The solution for this challenge is available to full members!
Find out how to become a member:
➤ Members' Area
Tagged with:

Wanted Poster (CSS Task)

Posted on by Administrator Posted in Computer Science, HTML, CSS & JavaScript, Solved Challenges

wanted-poster-css-taskFor this challenge we will create a Wanted Poster using a range of HTML and CSS skills.

CSS Selectors & CSS Properties

In order to complete this challenge, you need a good understanding of how CSS selectors work. You can learn about CSS selectors on w3schools.com.

css-syntax

To customise the look & feel of your poster using CSS code, you will use different types of selectors such as:

  • TAG
  • .class
  • #id
  • element child-element
  • element child-element:first-child

In this challenge we will use various CSS properties such as:

  • font-family:
  • font-size:
  • color:
  • font-weight:
  • font-style:
  • text-align:
  • padding:
  • margin:
  • background-image:
  • etc.

You can learn more about all these CSS properties on w3schools.com.

CSS Box Model

To understand how margin, borders and padding works you need to understand the CSS Box Model. Click on this picture to find out more:CSS-Box-Model

HTML & CSS Code

To complete this challenge, you will need to edit the code below by clicking on the top-right button “Edit on Codepen”.

See the Pen
WANTED Poster by 101 Computing (@101Computing)
on CodePen.

Note that this script will use three pictures. In case these are not displaying properly, you may have to replace their URLs, using the following addresses:

Instructions

Wooden TexturePaper TextureMugshotWanted!TypographySepia Filter
Your first task is to apply a wooden texture to the whole page. To do so you will need to:

  1.  Apply a background picture to the BODY of the page. The URL for this picture is: https://i.imgur.com/K6g10BB.jpg
  2.  Apply a 20px padding to the whole page.
View Solution / CSS Code
To do so you will need to add the following code to CSS section of the Codepen:

BODY {
   background-image: url('https://i.imgur.com/K6g10BB.jpg');
   background-repeat: repeat;
   padding: 20px;
}
To create the poster:

  1.  Use CSS to resize the poster (<div class=”poster”>…</div>) by resizing this container to 488px wide by 640px high.
  2.  Apply the following background image to this container: https://i.imgur.com/Y9Tiq8a.jpg
  3.  Apply a padding of 20px to the poster.
  4.  All the content should be aligned to the centre.
  5.  Using an online CSS shadow generator, add a shadow effect to your poster
View Solution / CSS Code
To do so you will need to add the following code to the CSS section of the Codepen:

.poster {
   width: 480px;
   height: 620px;
   box-sizing: border-box;
   background-image: url('https://i.imgur.com/Y9Tiq8a.jpg');
   background-repeat: no-repeat;
   padding: 20px;
   text-align:center;
   box-shadow: 2px 4px 8px 3px #000000;
}
Then we will customise the mugshot picture of Billy the Kid.

  1.  Resize the picture to: 300px wide by 325px high.
  2.  Add a solid border of 2px and dark brown colour: #291200.
  3.  Add a 10px margin to the picture.
View Solution / CSS Code
To do so you will need to add the following code to the CSS section of the Codepen:

#mugshot {
  width: 300px;
  height: 325px;
  border: 2px solid #291200;
  padding: 10px;
}
Then we will customise the title of the Poster (H1 heading saying “WANTED”).

  1.  The font type should be Ewert (Google font).
  2.  The font colour should be dark brown: #291200.
  3.  The font size should be 44pt.
  4.  This heading should not appear in bold.
  5.  This heading should not have any margins.
View Solution / CSS Code
To do so you will need to add the following code to the CSS section of the Codepen:

h1 {
  font-family: ewert;
  color: #291200; 
  font-size: 44pt;
  font-weight: normal;
  margin: 0px;
}
To complete your poster change the typography of the different headings, subheadings of the poster.

  1.  You should use a combination of the following two google fonts:
    • Ewert
    • Ultra
  2.  All the text should appear in dark brown: #291200.
  3.  All the text should fit on the poster. To do so you will need to update margins and font sizes.
  4.  Different font sizes and weights should be used to make key information standout nicely.
  5.  The description: “Armed and very dangerous” should appear in italic.
  6.  The reward price should have a double underline!
 The final touch to complete this poster is to apply a sepia filter to the mugshot picture.

View Solution / CSS Code
To do so you will need to add the following code to the CSS section of the Codepen:

#mugshot {
   filter: sepia(60%);
}

Final Poster Preview

This is what your poster should look like at the end of this task:
wanted-poster-css

unlock-access

Solution...

The solution for this challenge is available to full members!
Find out how to become a member:
➤ Members' Area
Tagged with:

Binary Search Tree Implementation

Posted on by Administrator Posted in Algorithms, Computer Science, Computing Concepts, OOP Concepts, Python - Advanced, Python Challenges

binary-search-tree-python-implementationBinary Search Trees are an effective solution to store data in a computer program and perform a binary search.

The benefits of using a BST (Binary Search Tree) data structure is that data can be added to the tree as it is received and the BST structure will store it effectively so that:

  • A sorted list of the data can be generated using an in-order traversal of the tree.
  • A binary search can be easily implemented making this data structure very effective to access/search through. A binary search has an O(log(n)) notation for time complexity.
  • Data/Nodes can easily be added or removed from the tree without having to rearrange the whole data structure

Binary-Search-Tree
The characteristics of a Binary Search Tree are as follows:

  1. Being a type of tree data structure, it consists of nodes and branches with a parent/child relationship between nodes,
  2. Each node can have a maximum of two children node: The left child and the right child,
  3. The left subtree of a node contains only nodes with values lesser than the node’s value.
  4. The right subtree of a node contains only nodes with values greater than the node’s value.

When a new node is added to the tree, if added in a way that do not conflict with the 4 characteristics listed above.

Capital Cities BSTRandom Numbers BST
binary-search-tree-capital-cities
Can you add the following cities to this Binary Search Tree:

  • Cape Town
  • Seoul

    • How would you then remove New-York from this BST tree?

    binary-search-tree-random-numbers
    Can you add the following numbers to this Binary Search Tree:

  • 62
  • 59
  • 23

    • How would you then remove number 28 from this BST tree?

    Depth-first Traversal Of Binary Search Tree

    The three depth-first traversal methods to read through all the nodes of a BST are:

    1. Pre-order Traversal
    2. In-order Traversal
    3. Post-order Traversal

    The in-order traversal is frequently used as it retrieves the nodes in order: alphabetical order or numerical order depending on the data types of the nodes’ values. This remains the case even if the nodes were added to the tree in a completely different order.

    You can read more and practise your understanding of the different breadth-first and depth-first traversals of tree on this blog post as well as investigate their algorithms (in pseudocode).

    Python Implementation

    Different approaches can be used to implement a Binary Search Tree in Pythons. It can be achieved by combining different data structures (e.g. hash tables and lists). However in this blog post we will implement our BST data structure using Object Oriented concepts (OOP Programming).

    First we will create a Node class to store the following 3 values:

    • The value of the node,
    • A pointer to the left node,
    • A pointer to the right node.

    Here is the Python code for the Node class:

    class Node:
  def __init__(self, value, left=None, right=None):
    self.value = value
    self.left = left
    self.right = right

    We will then create a Tree class.
    The main property of our Tree class will be its root Node. We will then implement a range of methods as follows:

    • insert() – Insert a new value/node in the correct position within the BST,
    • delete() – Find a node based on its value and remove it from the tree,
    • find() – Perform a Binary Search on the tree to find a specific Node based on its value,
    • preorder_traversal() – Perform and output the result of a pre-order traversal of the tree,
    • inorder_traversal() – Perform and output the result of an in-order traversal of the tree,
    • postorder_traversal() – Perform and output the result of a post-order traversal of the tree,
    • draw() – Perform and output the result of a post-order traversal of the tree.

    You can investigate the Python code used to implement all of the above 7 methods in the trinket below.

    Python Code

    Use the following Python code to build your own BST, adding one value at a time. You will be able to visualise your tree on screen and view the outputs of the three depth-first traversal methods:

    Python Challenge

    Add two methods to the Tree class as follows:

  • saveToFile() – Save the whole content of the binary tree in a text file. You will have to investigate the best format to do so. For instance you could save the BST data structure as a JSON file or an XML file.
  • loadFromFile() – Load the whole content of the binary tree from a text file (using the JSON or XML formats).
    • Tagged with:

    Lossless Compression: Huffman Coding Algorithm

    Posted on by Administrator Posted in A Level Concepts, Algorithms, Computer Science, Computing Concepts, Python - Advanced, Python Challenges, Solved Challenges

    The Huffman Coding algorithm is used to implement lossless compression. For the purpose of this blog post, we will investigate how this algorithm can be implemented to encode/compress textual information.

    The principle of this algorithm is to replace each character (symbols) of a piece of text with a unique binary code. However the codes generated may have different lengths. In order to optimise the compression process, the idea behind the Huffman Coding approach is to associate shorter codes to the most frequently used symbols and longer codes to the less frequently used symbols.

    So let’s consider the following message which consists of 20 characters:
    huffman-coding-message

    Note that the Huffman coding algorithm is normally used to compress larger amount of data and would not really be used to compress such a small message!

    Step 1: Frequency Analysis

    The first step of the Huffman Coding algorithm is to complete a frequency analysis of this message by:

    • Identifying all the symbols used in the message,
    • Identifying their weights (or frequencies) by counting their occurrences (the number of times they appear) within the message,
    • Sorting this list of symbols in ascending order of their weights.

    huffman-coding-frequency-analysis

    Step 2: Organising Symbols as a Binary Tree

    To do so each symbol becomes a node storing the symbol itself and its weight.
    Then the tree is constructed through the following iterative process:
    huffman-coding-tree

    Step 3: Generating the Huffman Codes

    Using the above tree, we can now identify the Huffman code for each symbol (leaves of the tree. This is done by highlighting the path from the Root node of the tree to the required leave/symbol. The labels of each branch are concatenated to form the Huffman code for the symbol.
    huffman-coding-path

    As you can see, most frequent symbols are closer to the root node of the tree, resulting in shorter Huffman codes.

    The resulting Huffman Codes for our message are:
    huffman-coding-codes

    Encoding the message

    We can now encode the message by replacing each symbol with its matching Huffman code.
    huffman-coding-encoded-message-codes

    Encoded/compressed message:

    010100111101000011111011010111100001101111010000111100101000110

    Python Implementation

    Here is a Python implementation of the Huffman Coding algorithm:

    Python Task

    To complete the above code, we need an extra method to our HuffmanEncoder class called decode().

    This method should take two parameters:

    • An encoded message (Binary string)
    • the Huffman codes used to encode the message (Using a python dictionary)

    Using the above information, the decode() method would then decode the message one character at a time.

    unlock-access

    Solution...

    The solution for this challenge is available to full members!
    Find out how to become a member:
    ➤ Members' Area
    Tagged with: