Python Turtle – My House - 101 Computing

Python Turtle – My House

Posted on November 28, 2016 by Administrator Posted in Computer Science, Python - Beginner, Python Challenges

Using Python Turtle we created a range of functions to draw a house.

We use these functions in our main program but can’t seem to get it to work. We believe the code has all the required instructions but these are being processed in the wrong order.

Did you know?

When running a program, the computer follows your instructions one line at a time, in the same order as these instructions appear in your program. This is called sequencing.

To fix this code you may have to reorder the lines of code in the correct order/sequence.

Also one of the windows seems to appear in the wrong position. It seems to be an issue with the parameters being used with the drawWindow() function.

Can you re-organise this code to recreate the picture of a house as above.

Extension Task #1

Add another cloud on the left hand side of the picture, partling covering up the sun.

Extension Task #2

Convert all the windows to round windows except the middle window to become square.

Extension Task #3

Color the front door in light blue instead of red.

Extension Task #4

Add a chimney on the roof of the house. To do so you will need to write a new function called drawChimney() in the shapes.py tab.

Tagged with: Python Turtle, Sequencing, subroutine

HTML – Website Add-Ons

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

You have now completed a fully working website. You have added a few webpages and created a fully working navigation system. All your pages have some meaningful and relevant content including pictures and text.

What’s Next?

This blog post will give you some ideas of add-ons you could add to your website to improve the look & feel of the site, add live content or add some interactivity to your webpages.

Using an online Text Editor

Using an online Text Editor can save you a lot of time to create HTML code for your main text.

Google Fonts

Bored with the usual Arial or Times New Roman fonts? Choose amongst a collection of hundreds of Google Fonts that can be used on any webpages.

Check the video tutorial on how to use Google Fonts on your website: https://youtu.be/peR9V-f9OkI

You will need to add the following code in the <HEAD> section of your code:

<link href="http://fonts.googleapis.com/css?family=YOUR_CHOSEN_FONT" rel="stylesheet" type="text/css">

And then in HTML your code either use the

<FONT face="YOUR_CHOSEN_FONT">...</FONT>

Or in CSS:

BODY, H1, P  {
   font-family: YOUR_CHOSEN_FONT;
}

Table of Data

Use this website to create a table of data such as a price list or a table showing opening times for the different days of the week.

Transition Effects

Use these examples to create a transition effects that will run when you page loads or is being refreshed.

Interactive Tabs

Check this page to create a fully interactive tabs.

Expand/Collapse Accordion

Check this page to create a fully interactive accordion..

Interactive Slide Show

Check this page to create a fully interactive slideshow showing images and slideshow navigation features.

Interactive image Gallery

Check this page to create a fully interactive image gallery showing image thumbnails and gallery navigation features.

Roll Over Buttons

Create some nice rollover buttons to add to your website or to create a navigation bar.

Responsive Navigation Bar

Create a fully responsive navigation bar which will adapt to the size of the screen and work great on smartphones.

Google Maps Widget

A google map widget could be a good add-on to your contact us page or your directions page. Find the map you want to focus on and embed it on your webpage.

Check the video tutorial on how to embed a Google map: https://youtu.be/BsvieSBad5Q

Live Weather Forecast Widget

Check this website that lets you add a live weather forecast widget to your webpage in just a few click. You can specify the format of your widget as well as the location for which you need the weather forecast.

Google Translate

Check this website that lets you add a Google translate widget to your website. However this will only works on live websites!

HTML / CSS – Transition Effects

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

In this blog post we will investigate how to create transition effects.

This effect will occur when you load or refresh a web page. It makes the navigation through a webpage more interactive and user friendly. Transition effects are drawing the attention of the user to let them know their page has been loaded.

Fading Transition Effect

See the Pen CSS Transition Effects by 101 Computing (@101Computing) on CodePen.

Press the rerun button in the bottom right corner to preview this animation

Sliding Transition Effect

See the Pen CSS Transition Effects – Sliding Effect by 101 Computing (@101Computing) on CodePen.

Press the rerun button in the bottom right corner to preview this animation

Rotate Transition Effect

See the Pen CSS Transition Effects – Rotate by 101 Computing (@101Computing) on CodePen.

Press the rerun button in the bottom right corner to preview this animation

Zoom-In Transition Effect

See the Pen CSS Transition Effects – Scale Effect by 101 Computing (@101Computing) on CodePen.

Press the rerun button in the bottom right corner to preview this animation

HTML – Adding Webpages & Hyperlinks

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

In this video tutorial we investigate how to add more webpages to our website and how to create the hyperlinks for the navigation bar using the anchor tag <A>

Video Tutorial

HTML – External CSS Stylesheet

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

Did you know?

You can use CSS code both within your HTML page or as a separate CSS file

Internal CSS Stylesheet

Internal CSS is saved wihtin the HTML page by adding a <STYLE> tag inside the <HEAD> section of the page.

The example below is an example of internal CSS stylesheet:

<HTML>
<HEAD>
    <STYLE>
         BODY { 
             background-color: #00FFFF;
         }
    </STYLE>
</HEAD>
<BODY>
   ....
</BODY>
</HTML>

The issue with internal CSS stylesheet is when a website consists of many HTNL pages. The CSS code needs to be added to every single page which can be really time consuming to maintain.

External CSS Style Sheet

To solve this issue, we can save the CSS code in a single file with the file extension .css (for instance: style.css)

We can then link all the pages of our website to this CSS stylesheet by adding the following code to our pages:

<HTML>
<HEAD>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</HEAD>
<BODY>
   ....
</BODY>
</HTML>

The main benefit of this approach is that we can now change the look & feel of all the webpages of our website by changing the content of just one single style.css file.

Video Tutorial

Tagged with: CSS, HTML

Hogwarts Sorting Hat Challenge

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

In the Harry Potter series of novels written by British author J. K. Rowling, The Sorting Hat is a magical hat at Hogwarts that determines which of the four school Houses each new student belongs most to. These four Houses are Gryffindor, Hufflepuff, Ravenclaw, and Slytherin.

In this challenge we are going to write Python program to control the sorting hat.

Your Task

Check the flowchart below and use Python to code your program.

Video Tutorial

Python Code

Solution...

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

Tagged with: Flowchart, Selection

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 />

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

Did you know?

Extension Task #1

Extension Task #2

Extension Task #3

Extension Task #4

What’s Next?

Fading Transition Effect

Sliding Transition Effect

Rotate Transition Effect

Zoom-In Transition Effect

Video Tutorial

Did you know?

Internal CSS Stylesheet

External CSS Style Sheet

Video Tutorial

Your Task

Video Tutorial

Python Code

Solution...

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

Our Latest Book

Recent Posts