Voting Age Checker – Flowchart - 101 Computing

Voting Age Checker – Flowchart

Posted on November 18, 2016 by Administrator Posted in Computer Science, Computing Concepts, Python - Beginner, Python Challenges, Solved Challenges

For this challenge you are going to code a script to ask a user how old they are and inform them as to whether they are old enough to vote or not. If they are not old enough to vote, the script will calculate how many years the user will have to wait before being allowed to vote.

Flowchart

Task #1

Recreate this flowchart by writing the pseudo-code of this algorithm using code2flow.com.

Task #2

Implement this code using our online Python IDE:

Task #3

Test your code. Is it behaving the way you would expect? What input data could you use to test your code?

Test #	Input Values	Expected Output	Actual Output
#1	Age: 21	You can vote
#2	Age: 16	You will be able to vote in 2 years.
#3	Age: 100	You can vote.
#4	Age: 0	You will be able to vote in 18 years.
#5	Age: 18	You can vote
#6	Age: (leave blank)	Error Message
#7	Age: “I am fifteen years old”	Error Message

Task #4: Improve your code

How could you improve your code to fix some of the errors you have spotted by completing your test plan? What validation routines could you add to this code to make it more robust?

Solution...

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

Tagged with: Flowchart, Selection

Pizza Robot – Flowchart

Posted on November 18, 2016 by Administrator Posted in Computer Science, Computing Concepts

In this blog post we will design our own algorithms using both pseudo-code and flowcharts.

When given a problem to solve using a computer program you need to think about?

What are the main steps required to solve this program? (decomposition)
In which order will these steps be processed? (sequencing)
What information do I need to retrieve from the end user? (inputs)
What information do I need to display to the end user? (outputs)
What decisions will the computer need to make? (selection / if statements)
Is there any part of the process that can be repeated several times? (iteration / loops)

Then you can design your algorithm either in “plain English” (e.g. using pseudo-code) or using a visual representation (flowchart).

Scenario: Coffee Machine

Let’s look at the algorithm used in a tea/coffee machine.
The machine should:

Ask the user whether they want tea or coffee,
Add the tea or the coffee to the cup,
Ask the user whether they want milk,
If so, add milk to the cup,
Ask the user whether they want sugar,
If so, add sugar to the cup,
Pour the hot water into the cup.

Now let’s look at this algorithm using pseudo-code and using a flowchart:

Pseudo-codeFlowchart

START;

/Would you like Tea or Coffee?/;

if tea {
  Add Tea in cup;
} else {
  Add Coffee in cup;
}

/Would you like Milk?/;

if Milk {
  Add Milk in cup;
}

/Would you like Sugar?/;

if Sugar {
  Add Sugar in cup;
}

Pour hot water in cup;

END;

Your Task: Pizza Robot

Adapt the above algorithm to use it in a pizza robot. Here is what the robot should do:

Welcome the user,
Ask what pizza base they need? (Thin, Thick)
Ask if they want tomato sauce or BBQ sauce?
Ask if they want cheese or not?
Cook the pizza for 20 minutes,
Serve the pizza

Extension:

Ask if the user is vegetarian. If they are not, then ask if they want chicken on their pizza.
The cooking time of the pizza varies: It should be 15 minutes for a thin base and 20 minutes for a thick base. Adapt your flowchart accordingly.

Create your pseudo-code and your flowchart using code2flow.com. Note you can reuse the code form the coffee machine to help you get started!

Tagged with: Flowchart

Digital Data – Terminology

Posted on November 15, 2016 by Administrator Posted in A Level Concepts, A Level Quiz, Computer Science, Computing Concepts, Computing Terminology Quiz, GCSE Concepts, GCSE Quiz, Quizzes

Complete this domino activity to revise key definitions on how text files, pictures and sound files are stored on a computer using binary code.

Digital Data TerminologyOpen Domino Activity

Tagged with: Binary

HTML – Styling Text using CSS

Posted on November 10, 2016 by Administrator Posted in Computer Science, HTML, CSS & JavaScript

Learning Objectives

In this challenge we are learning how to format text on a web page using a range of CSS properties.

Remember the key syntax for CSS is as follows:
css-syntax

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

font-family:
font-size:
color:
font-weight:
font-style:
text-decoration:
text-shadow:

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

Video Tutorial

Customising Page Headings

Check the code below to see how we created the following 5 headings. Tweak the code to change the style of your headings and reuse it in your own webpages or CSS stylesheets.

See the Pen <a href='http://codepen.io/101Computing/pen/oYbwLo/'>Custom CSS Headings</a> by 101 Computing (<a href='http://codepen.io/101Computing'>@101Computing</a>) on <a href='http://codepen.io'>CodePen</a>.<br />

Styling Paragraphs

Check the code below to see how we applied CSS to the <P> tag. Tweak the code to change the style of your paragraphs and reuse it in your own webpages or CSS stylesheets.

See the Pen <a href='http://codepen.io/101Computing/pen/WorOGV/'>Custom CSS Paragraphs</a> by 101 Computing (<a href='http://codepen.io/101Computing'>@101Computing</a>) on <a href='http://codepen.io'>CodePen</a>.<br />

HTML – How to add a Favicon?

Posted on November 6, 2016 by Administrator Posted in Computer Science, HTML, CSS & JavaScript

Once your website is ready, you will want to design and add a favicon.

This graphic will appear in your web-browser in the tab section as well as in the favourite toolbar.

The favicon is also used by smartphone and tablets as an “App” icon when the user decides to pin your webpage on their home screen.

There are different approaches to create your favicon. One easy approach is to use a website such as favicon.cc

Create your own favicon using favicon.cc

Once your icon is ready save it as favicon.cc in the root folder of your website:

HTML code to add your favicon to your webpage

Access the code of your webpage and in the <HEAD> section add the following code:

<link rel='icon' href='favicon.ico' type='image/x-icon'/ >

So your code should now look like this:

That’s it, save your page and access it in a web-browser. The favicon should now appear in the tab, next to the page title.

HTML – Using CSS with Pictures

Posted on November 1, 2016 by Administrator Posted in Computer Science, HTML, CSS & JavaScript

There are many CSS properties that can be used to change the look and feel of your web graphics. You can use CSS to:

Position a picture (e.g. center a picture or add a margin around your picture)
Resize your picture (width, height) or make your picture responsive (width/height adapt to the size of the screen)
Add border to a picture
Add a border-radius to create rounded corner to a picture
Add a shadow effect to a picture
Rotate a picture
Change the opacity of a picture

Investigate the use of CSS in the examples provided below. Then reuse some of these skills to update your pictures on your own webpages.

See the Pen Using CSS with Pictures by 101 Computing (@101Computing) on CodePen.

Roll over effects and animation effects

To draw the attention to your web graphics you may want to add animated rollover effects. This is a great approach to let the web user know when a graphic such as a web button can be clicked on (e.g. hyperlink).

See the Pen Rollover animation effects on pictures by 101 Computing (@101Computing) on CodePen.

HTML – Adding Pictures

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

html-picture-file In this video tutorial you will learn:

How to organise your picture files in your website folder
The main three types of picture files: .png, .jpg and .gif
How to use the <IMG> tag to add pictures to your webpage.

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

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

Flowchart

Task #1

Task #2

Task #3

Task #4: Improve your code

Solution...

Scenario: Coffee Machine

Your Task: Pizza Robot

Learning Objectives

Video Tutorial

Customising Page Headings

Styling Paragraphs

HTML code to add your favicon to your webpage

Roll over effects and animation effects

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

Recent Posts

Our Latest Book