Road Signs in HTML / CSS

Posted on October 24, 2014 by Administrator Posted in Computer Science, HTML, CSS & JavaScript

In this set of challenges we are going to use CSS to recreate various road signs.

Learning Objectives

By completing these challenges you will learn more about how CSS can be used to format information on the page.
We will be looking at:

How to add borders, and border radius to create a rounded corner text frame.
How to add a shadow to the text frame.
How to add a gradient effect to our text frame

Challenge #1

The first challenge consists of recreating this number plate using CSS:

Check the following code to see how the border was created using both the border and the border-radius CSS definitions. You can also investigate how the shadow was created using the box-shadow CSS definition.

See the Pen Post-it notes by 101 Computing (@101Computing) on CodePen.

Challenge #2

For this challenge we are using exactly the same CSS definitions. By increasing the border-radius we are creating the round shape.

See the Pen Number Plate by 101 Computing (@101Computing) on CodePen.

Challenge #3

Try to recreate these road signs using CSS:

Extension Task: Using Gradients

To create the gradient we recommend using an online CSS gradient generator which will create the CSS code for you: e.g. http://www.colorzilla.com/gradient-editor/

See the Pen Number Plate by 101 Computing (@101Computing) on CodePen.

Pixel Art Gallery

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

Check our Pixel Art Challenge – Art work from our students:

Scroll down to see the gallery…
arrow_down_pixel


View Python Code	View Python Code	View Python Code

View Python Code	View Python Code	View Python Code

View Python Code	View Python Code	View Python Code

View Python Code	View Python Code	View Python Code

View Python Code	View Python Code

Number Plate Generator

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

For this Python challenge we need to investigate how UK number plates work. Check this page from aa.com to learn more about the current format of number plates in the UK.

Learning Objectives:

By completing this challenge using Python we are going to learn how to use ASCII code when manipulating strings.

You will use the chr() and ord() python instructions to convert characters into ASCII code and vice versa.
For instance:

print(chr(65)) would display the letter “A” on screen as 65 is the ASCII code for character “A”.
print(ord(“A”)) would display the 65 on screen as 65 is the ASCII code for character “A”.

To complete this challenge you may want to use our ASCII code helpsheet

Challenge #1: Random Number Plate Generator

Your first challenge consists of creating a program that generate a random plate number each time it is run.

The plate number will have to adhere to this format:
2 UPPER CASE LETTERS followed by 2 digits (0 to 9) followed by a space followed by 3 UPPER CASE LETTERS

To help you we have started the code to generate a random uppercase letter. You can now complete this code to generate the full plate number.

Challenge #2: Number Plate Validator

Your second challenge consists of writing a program that will ask the user to enter a number plate. The program will then confirm whether the number plate is valid or not.

Remember, a valid number plate has to follow this format:
2 UPPER CASE LETTERS followed by 2 digits (0 to 9) followed by a space followed by 3 UPPER CASE LETTERS

Solution...

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

Drawing Flowcharts…

Posted on October 21, 2014 by Administrator Posted in Computer Science, Computing Concepts

Recommended Online Software: draw.io

What do you think the following flowchart would be used for?
Password Validation

Magic 8 Ball – Using Python Blocks!

Posted on October 21, 2014 by Administrator Posted in Block Programming, Computer Science, Python - Beginner, Python Challenges

The purpose of this post is to demonstrate how Python trinkets can be used to code with blocks.

Trinket blocks use the same approach as Scratch: A collection of blocks that the programmer can select to build their code in a more visual way.

The benefit of Trinket Blocks is that you can then view the Python code that it has generated.

A fantastic resource for those who are struggling with the syntax.

Also a great transition for those who have learned to program using Scratch and want to switch to text based programming e.g. using Python.

Look at this example that recreate the Magic 8 Ball program. Click on view code “>_” button to switch between the “Blocks code” and the Python code.

Tagged with: Block Programming, Selection

Remove The Blocks – Robotics Challenge

Posted on October 16, 2014 by Administrator Posted in Block Programming, Computer Science, Computing Concepts, Scratch

This is a classic robotics challenge where students have to build their own robot that will be used to tidy up a 2m by 1m mat full of lego bricks by either collecting or pushing these bricks outside the mat.

To complete this challenge we used the NXT Lego Mindstorm robot, alongside the Enchanting software to create the computer algorithm.

Here is our algorithm:

You can find out more about the Enchanting software on: http://enchanting.robotclub.ab.ca/.

Tagged with: Block Programming, Lego Mindstorm, Robotics

What’s my grade?

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

AGrade

Learning Objectives:

By completing this challenge you are going to further improve your skills at using:

Selection structures (using If statements),
Comparison operators (<, <=, >, >=, !=, ==)
Boolean logic (AND, OR) when using comparative operators

You may want to use our Python Cheat Sheet to complete this challenge looking especially at the section called “If Statements” and the section called “Comparison Operators”.

Your Challenge

Create a user friendly program that asks a user to input their exam score out of 60 marks. The program should output the grade that they have received using the grade boundaries listed in the table below.

Mark	Grade
54+	A*
48 – 53	A
42 – 47	B
36 – 41	C
30 – 35	D
24 – 29	E
0 – 23	U

The program should also tell the user how many marks they are away from the next grade up.

Your Python code…

Solution...

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

Victor Vasarely’s Artwork revisited using Python

Posted on October 9, 2014 by Administrator Posted in Computer Science, Python - Advanced, Python Challenges

In this blog post we are looking at a specific painting from Victor Vasarely. The painting is from a serie of paintings called “Alphabet Plastique” and was painted in the 70’s.

We are going to try to recreate this painting using the turtle library in Python.

Did you know?

Victor Vasarely is a unique artist in the history of twentieth century art. Famous during his lifetime, he distinguished himself from contemporary art with the creation of a new movement: optical art. The evolution of his life of work is inherently coherent, progressing from graphic art to the artist’s determination to promote a social art that is accessible to all.
Source:www.fondationvasarely.fr

First attempt

Your Challenge

Search the internet for some artwork from Vasarely’s “Alphabet Plastique” collection and use this as a source of inspiration. Using the turtle library in Python (See script above), create your own piece of artwork inspired from your research.

Tagged with: Computer Art, Coordinates, iteration, Python Turtle

Pixel Art in Python

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

Learning Objectives

In this blog post we are going to investigate how to use lists and list of lists with Python to create some 2D pixel art graphics.

List?

In Python, a list is used to save collection of values. For instance, to save all the different days of the week we could declare a variable called “daysOfTheWeek” and assign a list as follows:

daysOfTheWeek = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]

Based on this what do you think len(daysOfTheWeek) would return?
What’s about daysOfTheWeek[0]?
Or daysOfTheWeek[3] ?

Now look at this program used to display all the days of the week:

When using lists you can use a range of methods to add or remove values in the list. For instance:

Multi-dimensional Lists?

Sometimes you need more than on dimension to a list. In Python you can achieve this by creating a list of lists!

For instance for our pixel art project we want to store each pixel on a line within a list:
e.g.:

line1=[1,0,1,0,1,0]
line2=[0,1,0,1,0,1]
line3=[1,0,1,0,1,0]

We can then store all these lines into a list. Let’s call this list “grid”

grid=[line1, line2, line3]

A quicker way to do this is to do it all in one line as follows:

grid = [[1,0,1,0,1,0],[0,1,0,1,0,1],[1,0,1,0,1,0]]

We can then access any cell within this grid using the following command:

print grid[2][4] #This would return the value of the 5th of the 3rd line!

Let’s apply this to our pixel art project

Challenge #1:

Change this code to create the pixel art of a space invader:
spaceInvader

Challenge #2:

Tweak this code to allow colours to be used in your pixel art.
To do so you will first create a new list called colourPalette to store a collection of colours of your choice: e.g.

colourPalette = ["#FF0000#", "#00FF00", "#0000FF", "#000000", "#FFFFFF"]

More changes will be required for you to be able to recreate this pixel art:
Applepix

Traffic Lights Challenge

Posted on October 5, 2014 by Administrator Posted in Computer Science, Python - Advanced, Python Challenges

Did you know?

An embedded system is a computer system with a dedicated function within a larger mechanical or electrical system, often with real-time computing constraints.

A burglar alarm, an in-car cruise control system, a speedometer on a bike, a traffic lights control system are all examples of embedded system.

One application of computing is to create the algorithms used by these control systems. For this challenge we will focus on a traffic lights system.

Our Traffic Lights

Our system consists of two traffic lights used at a crossing.

The diagram below describes the sequence that these traffic lights have to follow:

We have started the code to control the first traffic light.

Your Challenge

Tweak this code to control the second traffic light. The second traffic light sequence should match the one described in the diagram above. However both traffic lights cannot be green at the same time!

Extension

Check this article to see how “smart” traffic lights help control the flow of traffic more effectively.

Tagged with: iteration, Python, Selection

Learning Zone ✕

Theory Concepts

Interactive Quizzes

GCSE Computer Science (UK)

A-Level Computer Science (UK)

Coding Challenges ✕

Python Challenges

HTML / CSS & JavaScript

LMC

SQL

Block Programming

Interactive Coding Puzzles

Online Interactive Tools ✕

Coding Tools

Design Tools

Logic Gates Circuits

Cryptography Corner

Member's Area ✕

Register/Sign Up

Get In Touch

Books Corner

Learning Objectives

Challenge #1

Challenge #2

Challenge #3

Extension Task: Using Gradients

Further Reading…

Learning Objectives:

Challenge #1: Random Number Plate Generator

Challenge #2: Number Plate Validator

Solution...

Learning Objectives:

Your Challenge

Your Python code…

Solution...

Did you know?

First attempt

Your Challenge

Learning Objectives

List?

Multi-dimensional Lists?

Let’s apply this to our pixel art project

Challenge #1:

Challenge #2:

Did you know?

Our Traffic Lights

Your Challenge

Extension

Recent Posts

Our Latest Book