HTML – Website Layout - 101 Computing

HTML – Website Layout

Posted on October 4, 2016 by Administrator Posted in Computer Science, HTML, CSS & JavaScript

Are you ready to build up your first website? Before using this blog post let’s go through this checklist:

Do you know your HTML tags?
Do you understand how CSS works?
Have you created a design for your website?
Have you created the folder structure for your website?
Have you gathered the assets / graphics for your website?

If the answer to all questions above is “yes!” then you are ready to implement your website using HTML and CSS.

The first task is to create the overall layout of your webpage.

Compare your design with the following layouts. Would one of these be suitable to implement your first webpage? If so you can check how it’s made by clicking on the pictures below to display the page in full view and check its source code.

Customising the Layout

Now that you have a layout you will need to customise the CSS to:

Resize the width and height of the different sections to match your design, (See video tutorial below)
Change the background colors or add gradients for each section, (See video tutorial below)
Customise other CSS attributes to add shadows, borders, margin and padding for each section, (See video tutorial below)

Video Tutorial

Creating a standalone CSS file to reuse across multiple web pages

Check this blog post on how to use a cascading stylesheet across multiple web pages.

Adding Content

Once your layout/template is ready, you can start adding content to the different sections.
Check the following blog posts to help you do so:

Adding Pictures

Using CSS with Pictures

Using CSS with Text

Using Hyperlinks

Adding a FavIcon

Adding page transition effects

Interactive Add-ons to use on your website

Using Google Fonts

Responsive Website Layout

Check this block post to make your layout responsive.

BBC micro:bit – Whack-a-Mole

Posted on July 18, 2016 by Administrator Posted in BBC micro:bit, Block Programming, Computer Science, Physical Computing, Solved Challenges

Whack-a-mole is a popular arcade game invented in 1976 by Aaron Fechter of Creative Engineering, Inc.. The adaptation of this game to the mirco:bit has been fully designed and implemented by one of our students during a computer science lesson!

The aim of the game is to use a mallet to strike a mole within a certain time. Moles randomly appear for a short time above a hole.

As we will be using the micro:bit, our game will consists of two holes and two moles. The player will strike a mole by pressing the A or the B button on the micro:bit depending on whether the mole appears on the left or the right hand side of the LED screen.

Look at the picture below. The ! represents a mole on the left hand side, The player has less than 1 second to whack this mole by pressing the A button.

The code

You will need to use the micro:bit website to create the code using the JavaScript Block Editor.

Code Review

Can you identify which section of code is used to:

Randomly display a mole to either the left or the right of the screen?
Check, if the left mole is displayed, that the user has pressed button A and if not ends the game?
Check, if the right mole is displayed, that the user has pressed button B and if not ends the game?
Allow a maximum of 1 second for the user to whack a mole? If the use exceeds this delay, the game should end.

Extension Task #1:

Tweak this code so that both moles can appear at the same time. In this case the player needs to press both buttons A and B simultaneously to strike both moles otherwise they lose.

When the user strike both moles simultaneously they should get a 5-point bonus added to their score.

Extension Task #2:

Tweak your code so that the time given to the user to “whack a mole” decreases when the score reaches 10 points, 20 points, 30 points etc.

To start with the delay should be set to 1000ms, it should then decrease to 900ms, then 800ms, 700ms, etc…

Tip: Use a variable to store the value of the delay. Initialise this variable to 1000ms.

Solution...

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

Tagged with: BBC micro:bit

String Manipulation

Posted on July 14, 2016 by Administrator Posted in Computer Science, Computing Concepts

String?

In computer science, a string is a piece of text or a collection of characters.

A string can be stored in a variable, can be typed in by the end-user (input) or can be displayed on the screen (output).

print("Hello World")

In the above Python instruction: “Hello World” is a string. Notice the use of speech marks when using a string in code.

A string can be stored in a variable for instance.

greeting = "Hello"
print(greeting)

String Concatenation

The act of joining two strings together is called string concatenation.

In Python string concatenation is done using the + sign:

firstname = "James"
print("Hello " + firstname)

String Manipulation Techniques

In computer programs it is often necessary to manipulate strings to:

Extract or truncate the first few characters of a string,
Extract or truncate some characters at the end of the string,
Find out the length (number of characters) of a string,
Convert a string from lowercase to UPPERCASE or vice-versa,
Check if a character has been used in a string,
Find out if a string contains a specific substring or word,
etc.

String Manipulation Challenges

Use our Block Programming tool to complete and test some String Manipulation challenges online.

Tagged with: String Manipulation

BBC micro:bit – Car Lighting System

Posted on July 7, 2016 by Administrator Posted in BBC micro:bit, Block Programming, Computer Science, Physical Computing

For this challenge we will use the microbit and a couple of LEDs to act as the indicators lights of a car. Our aim is to use the built-in accelerometer sensor of the mincro:bit to detect if it is being tilted to the left or to the right. If so, the micro:bit will “turn the indicator” on by making one of the two yellow LEDs blink to indicate the player is turning to the left or to the right.

Electronic Circuit

First we need to build the electronic circuit using a micro:bit, two LEDs, a few wires and crocodile clips and a bread board.

BBC micro:bit Code

Then we need to code the micro-bit to take control of the LEDs. You will need to use the micro:bit website to create the code using the JavaScript Block Editor.

Extension Task

Add an extra red LED to act as the break light. Buttons A and B of the micro:bit will act as the accelerator pedal (Button A) and the break pedal (Button B). When button B is pressed the break light (red LED) should turn on.

Extra Challenge

Using a red and a blue LED create an electronic circuit for the siren of a police car or a fire truck. Code your micro:bit to create the lighting sequence/pattern of your choice for your siren. You could also add a buzzer/speaker to create the sound of the siren. Use buttons A and B of the micro:bit to turn the siren on or off.

Tagged with: BBC micro:bit

BBC micro:bit – Lightning Distance Calculator

Posted on June 21, 2016 by Administrator Posted in BBC micro:bit, Block Programming, Computer Science, Physical Computing, Solved Challenges

Have you ever seen a lightning flash or heard the thunder of lightning and wondered how close you were from the lightning strike? Have you noticed that there often was a delay between the flash of light and the clap of thunder when a lightning occurs?

It is possible to calculate the distance to a lightning strike by counting the seconds between the lightning flash and the sound of thunder.

When lightning strikes, the first thing you see is the flash of light which you can see instantly. This is because light travels at a very high speed (Speed of light = 300,000 km/s). At the same time a clap of thunder is created. However, in the air a sound wave does not travel as fast as light, so it may take a few seconds for this clap of thunder to reach you. This depends on how far you are from the lightning.

Look at the following diagram and check the formula of speed. Bear in mind that the speed of a sound wave in the air is 340 m/s.

Your Challenge

Write a program for the BBC micro:bit that will allow the user to:

Press the A button of the micro:bit when they spot a lightning flash.
Press the B button of the micro:bit when they hear the thunderstorm.
Display the distance (in meters) from the lightning strike using the LED screen.

Solution

We will complete this project in three main coding blocks.

First, let’s display an arrow pointing left to invite the user to press button A when they see a lightning strike.

Then we will record the exact time (in milliseconds) as to when button A was pressed and store this number in a variable called lightning. We will also display an arrow pointing towards button B.

Let’s now record the time (in milliseconds) when button B is pressed using a variable called thunder. We can then use these two timestamps to work out the time delay between the lightning strike and when the thunder was heard. Using the distance = speed x time formula, we can then workout and output the distance in meters from the lightning strike:

Solution...

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

Tagged with: BBC micro:bit

BBC micro:bit – Gold Rush!

Posted on June 21, 2016 by Administrator Posted in BBC micro:bit, Block Programming, Computer Science, Physical Computing, Solved Challenges

During a gold rush, gold miners use different techniques to find traces of gold hidden in the ground. One technique that miners use is gold panning. It consists of scooping some gravels and clear water in a pan which is gently agitated until small gold nuggets sinks to the bottom of the pan and can be handpicked.

For this challenge the pan will be the micro:bit. A LED light will represent a gold nugget. The aim is to tilt the micro:bit slightly to detect and pick up the gold nugget.

We will be using the built-in accelerometer sensor to detect in which direction the microbit is being tilted.
Every time the player (miner) will pick a gold nugget a new one will randomly appear on the 5 x 5 LED screen.

Complete Code

Use the BBC microbit website to complete the code:

Code Review

Checking the code above answer the following questions:

Can you identify the block of code used for the micro:bit to detect if it has been tilted to the left?
Can you identify the block of code used for the micro:bit to know when the miner has picked up a gold nugget?
Can you explain how does the micro:bit decide to stop the game by running the last block to display the Game Over message?

Extension Task

Change this game to use a timer. The game should last exactly 1 minute. Everytime the player picks up a gold nugget their score should increment by 1. After 1 minute, the game should stop and display the total score.

Ideas to get started

You could use a variable called “timer” and set it to 60000ms.
You could decrement your timer variable when the game is paused.
You will have to change the condition of your while loop: Instead of while score<10, use while timer>0.
Make sure that you display the final score at the end of the game.

Solution...

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

Tagged with: BBC micro:bit

BBC micro:bit – RGB Gradient

Posted on June 20, 2016 by Administrator Posted in BBC micro:bit, Block Programming, Computer Science, Physical Computing

In this challenge we will use the BBC micro:bit 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.

To do so we will need:

A BBC micro:bit
A RGB LED
3 resistors (100 Ohms)
A breadboard
4 wires

RGB 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 micro:bit.

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).

micro:bit Code

Here is the code needed in the micro:bit to implement the gradient fading effect. Note that you will need to use the micro:bit website to create the code using the JavaScript Block Editor.

Step 1: Initial RGB values

rgb-gradient-step-1-bbc-microbit-javascript-code

Step 2: Red to Blue Gradient

rgb-gradient-step-2-bbc-microbit-javascript-code

Step 3: Blue to Red Gradient

rgb-gradient-step-3-bbc-microbit-javascript-code

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

gradient-green-yellow-magenta-cyan-green

Tagged with: BBC micro:bit

BBC micro:bit – The Queen’s Cupcake

Posted on June 14, 2016 by Administrator Posted in BBC micro:bit, Block Programming, Computer Science, Physical Computing, Solved Challenges

In this challenge we will create a game for the BBC micro:bit.

Imagine you have been asked to bring a cupcake to Her Majesty the Queen Elizabeth II. You have picked the best cupcake from the kitchen and placed it at the centre of a silver tray.

You will have to carry the cupcake on its tray to the Queen, walking through the many rooms and corridors of Buckingham Palace.

Watch out, if you tilt the tray, you may end up dropping the Queen’s cupcake!

For this challenge we will replace the silver tray with a BBC micro:bit. The cupcake will be a sprite positioned in the centre of the LED screen, the tray will be the grid of 5×5 LEDs on the micro:bit.

The player will have to carry the micro:bit flat on the back of their hand, and carry it around the room, making sure they keep it as flat as possible.

Our program will use the built-in accelerometer input sensor of the micro:bit to find out if the micro:bit is leaning (forward, backward, to the left or to the right).

If so the sprite (cupcake) will slide in the right direction (The LED light will move on the 5×5 grid).

The game will end when/if the cupcake is at the edge of the 5X5 LED grid and the micro:bit is still tilted: the cupcake is falling off the grid/tray.

Video Demo

The Code

You will need to use the micro:bit website to create the code using the JavaScript Block Editor.

Code Review

Checking the code above answer the following questions:

Can you identify the block of code used for the micro:bit to detect if it has been tilted to the left?
Can you identify the block of code used for the micro:bit to know when the cupcake is falling off the tray?
Can you explain how does the microbit decide to stop the game by running the last block to display the Game Over message?
Can you explain the purpose of the variable called tolerance?
- Why do we need a tolerance?
- What would be the impact on the game if the tolerance with 500 instead of 200? (Would it be easier to play or harder? Why?)
- What would be the impact on the game if the tolerance with 50 instead of 200? (Would it be easier to play or harder? Why?)

Extension Task 1

Add some more code to this game to record how long the player/waiter took to deliver the cupcake.

The micro:bit should record the running time from the start (just after the “3-2-1-Go” message) and allow the user to stop the game when they press button A.

The player will have to follow a set route (e.g. around the classroom) and if they manage to complete the route without dropping the cupcake, they should press button A to stop the counter, and the micro:bit should display their time.

Extension Task 2

Tweak the code so that if a player has been playing for 10 seconds without dropping the cupcake, the tolerance then changes to make the game harder to play (e.g. tolerance change from 200 to 100)

Solution...

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

Tagged with: BBC micro:bit

BBC micro:bit – Tetris Game

Posted on June 13, 2016 by Administrator Posted in BBC micro:bit, Computer Science, Physical Computing, Python - Advanced, Python Challenges

For this challenge we are creating a game of Tetris to play on the BBC micro:bit.

The game will be based on the following four shapes:

The game will use the following inputs:

Button A: Move current brick to the left
Button B: Move current brick to the right
Button A and B simultaneously: Rotate current brick clockwise

Video Demo

The game will use the LED screen which consists of a 5×5 grid of 25 LEDs.
Each LED can be on (value: 9 for maximum brightness) or Off (value: 0)
The side/borders of the grid will note be displayed.

The Python code will use 2-dimension arrays (list of lists in Python) to store the main grid (7×5) and the current brick (2×2)

To test this code you will need to use the Python Editor from the micro:bit website.

Python Code

from microbit import *
from random import choice

#Set up the tetris grid
grid=[[1,0,0,0,0,0,1],[1,0,0,0,0,0,1],[1,0,0,0,0,0,1],[1,0,0,0,0,0,1],[1,0,0,0,0,0,1],[1,1,1,1,1,1,1]]
#Store a list of 4 bricks, each brick is a 2x2 grid
bricks = [[9,9],[9,0]],[[9,9],[0,9]],[[9,9],[9,9]],[[9,9],[0,0]]
#select a brick randomly and position it at the center/top of the grid (y=0,x=3)
brick = choice(bricks)
x=3
y=0
frameCount=0

#A function to return the maximum of two values
def max(a,b):
    if a>=b:
        return a
    else:
        return b
        
#A function to hide the 2x2 brick on the LED screen
def hideBrick():
    if x>0:
        display.set_pixel(x-1,y,grid[y][x])
    if x<5:
        display.set_pixel(x+1-1,y,grid[y][x+1])
    if x>0 and y<4:
        display.set_pixel(x-1,y+1,grid[y+1][x])
    if x<5 and y<4:
        display.set_pixel(x+1-1,y+1,grid[y+1][x+1])
        
#A function to show the 2x2 brick on the LED screen
def showBrick():
    if x>0:
        display.set_pixel(x-1,y,max(brick[0][0],grid[y][x]))
    if x<5:
        display.set_pixel(x+1-1,y,max(brick[0][1],grid[y][x+1]))
    if x>0 and y<4:
        display.set_pixel(x-1,y+1,max(brick[1][0],grid[y+1][x]))
    if x<5 and y<4:   
        display.set_pixel(x+1-1,y+1,max(brick[1][1],grid[y+1][x+1]))

#A function to rotate the 2x2 brick
def rotateBrick():
    pixel00 = brick[0][0]
    pixel01 = brick[0][1]
    pixel10 = brick[1][0]
    pixel11 = brick[1][1]
    #Check if the rotation is possible
    if not ((grid[y][x]>0 and pixel00>0) or (grid[y+1][x]>0 and pixel10>0) or (grid[y][x+1]>0 and pixel01>0) or (grid[y+1][x+1]>0 and pixel11>0)):
        hideBrick()        
        brick[0][0] = pixel10
        brick[1][0] = pixel11
        brick[1][1] = pixel01
        brick[0][1] = pixel00
        showBrick()     

#A function to move/translate the brick
def moveBrick(delta_x,delta_y):
    global x,y
    move=False
    #Check if the move if possible: no collision with other blocks or borders of the grid
    if delta_x==-1 and x>0:
        if not ((grid[y][x-1]>0 and brick[0][0]>0) or (grid[y][x+1-1]>0 and brick[0][1]>0) or (grid[y+1][x-1]>0 and brick[1][0]>0) or (grid[y+1][x+1-1]>0 and brick[1][1]>0)):
            move=True
    elif delta_x==1 and x<5:
        if not ((grid[y][x+1]>0 and brick[0][0]>0) or (grid[y][x+1+1]>0 and brick[0][1]>0) or (grid[y+1][x+1]>0 and brick[1][0]>0) or (grid[y+1][x+1+1]>0 and brick[1][1]>0)):
            move=True
    elif delta_y==1 and y<4:   
        if not ((grid[y+1][x]>0 and brick[0][0]>0) or (grid[y+1][x+1]>0 and brick[0][1]>0) or (grid[y+1+1][x]>0 and brick[1][0]>0) or (grid[y+1+1][x+1]>0 and brick[1][1]>0)):
            move=True
    #If the move is possible, update x,y coordinates of the brick
    if move:      
        hideBrick()
        x+=delta_x
        y+=delta_y
        showBrick()
        
    #Return True or False to confirm if the move took place
    return move    

#A function to check for and remove completed lines
def checkLines():
    global score
    removeLine=False
    #check each line one at a time
    for i in range(0, 5):
        #If 5 blocks are filled in (9) then a line is complete (9*5=45)
        if (grid[i][1]+grid[i][2]+grid[i][3]+grid[i][4]+grid[i][5])==45:
            removeLine = True
            #Increment the score (10 pts per line)
            score+=10
            #Remove the line and make all lines above fall by 1:
            for j in range(i,0,-1):
                grid[j] = grid[j-1]
            grid[0]=[1,0,0,0,0,0,1]    
    if removeLine:
        #Refresh the LED screen
        for i in range(0, 5):
            for j in range(0, 5):
                display.set_pixel(i,j,grid[j][i+1])
    return removeLine
    
gameOn=True
score=0
showBrick()
#Main Program Loop - iterates every 50ms
while gameOn:
    sleep(50)
    frameCount+=1
    #Capture user inputs
    if button_a.is_pressed() and button_b.is_pressed():
        rotateBrick() 
    elif button_a.is_pressed():
        moveBrick(-1,0)
    elif button_b.is_pressed():
        moveBrick(1,0)
    
    #Every 15 frames try to move the brick down
    if frameCount==15 and moveBrick(0,1) == False:
        frameCount=0
        #The move was not possible, the brick stays in position
        grid[y][x]=max(brick[0][0],grid[y][x])
        grid[y][x+1]=max(brick[0][1],grid[y][x+1])
        grid[y+1][x]=max(brick[1][0],grid[y+1][x])
        grid[y+1][x+1]=max(brick[1][1],grid[y+1][x+1])
        
        if checkLines()==False and y==0:
            #The brick has reached the top of the grid - Game Over
            gameOn=False   
        else:
            #select a new brick randomly
            x=3
            y=0
            brick = choice(bricks)
            showBrick()
    
    if frameCount==15:
       frameCount=0

#End of Game
sleep(2000)
display.scroll("Game Over: Score: " + str(score))

Note: When testing this code, you may want to remove some of the #annotations especially if your micro:bit returns a “memory full” error.

Tagged with: BBC micro:bit

BBC micro:bit – Rock Paper Scissors Game

Posted on June 8, 2016 by Administrator Posted in BBC micro:bit, Block Programming, Computer Science, Physical Computing

For this challenge you need to code your micro:bit so that when you shake the micro:bit a picture appears randomly.

There should be three possible pictures:

A picture of a rock,
A picture of a pair of scissors,
A picture of a paper sheet.

Download your code to your micro:bit and play the game with your friends, using one micro:bit per player.

Use will need to use the BBC micro:bit website to code this game.

Solution

Extension Task

Reuse and adapt your code to transform your BBC micro:bit into a dice. Your code will need to generate a random number (between 1 and 6) and based on the value of this number display (using the LEDs) the corresponding face of the dice:

Tagged with: BBC micro:bit

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

Customising the Layout

Video Tutorial

Creating a standalone CSS file to reuse across multiple web pages

Adding Content

Responsive Website Layout

The code

Code Review

Extension Task #1:

Extension Task #2:

Solution...

String?

String Concatenation

String Manipulation Techniques

String Manipulation Challenges

Electronic Circuit

BBC micro:bit Code

Extension Task

Extra Challenge

Your Challenge

Solution

Solution...

Complete Code

Code Review

Extension Task

Solution...

RGB Colour Codes

Electric Circuit

micro:bit Code

Your Challenge

Video Demo

The Code

Code Review

Extension Task 1

Extension Task 2

Solution...

Video Demo

Python Code

Solution

Extension Task

Recent Posts

Our Latest Book