Keep Calm and Carry On Coding

Posted on March 9, 2017 by Administrator Posted in Computer Science, HTML, CSS & JavaScript, JavaScript

When your browser displays a webpage on screen it uses 3 different programming languages called HTML, CSS and JavaScript. We call the combination of these three languages “client-side web technologies”.

Each of the three language has its own syntax and purpose:

HTML uses <tags> and its purpose is to add content on the page such as text, pictures, and video clips.
CSS is used to customise the look and feel of the page by defining the position of each element on the page, defining the layout of the page as well as formatting text, pictures and other components on the page.
JavaScript is used to add user interaction to the page. JavaScript can be linked to HTML tags through various events such as the onClick event of a button.

Each of these languages are based on web standards defined by the World Wide Web Consortium W3C. As a consequence these languages are recognised by all the main web-browsers including Google Chrome, Microsoft Edge, Modzilla Firefox, Safari, etc. on various platforms (Windows, MacOs, Linux, Android etc.)

The Following codepen provides a clear demonstration of the syntax and purpose of HTML, CSS and JavaScript and shows how JavaScript can interact with various HTML tags.

On this codepen you can click the button located below the poster in order to change the text of the poster.

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

Your Challenge #1:

Add four more buttons to allow the user to change the background colour of the poster:

Blue Button: Change colour to: #3050D0
Yellow Button: Change colour to: #CEC110
Orange Button: Change colour to: #ED3300
Red Button: Change colour to: #DB0000

To do so you will need to:

Add some buttons below the poster
Ensure the <DIV> tag has an id attribute. e.g. id=”poster”
Create a new Javascript function called changeColour() and use the follwoing code
```
document.getElementById("poster").style.backgroundColor = "#3050D0";
```

Your Challenge #2:

Add four more buttons to allow the icon used in the poster:

Crown Button: Change the picture to the crown:
https://www.101computing.net/wp/wp-content/uploads/Keep-calm-and-carry-on-crown.png
HTML Button: Change the picture to:
https://www.101computing.net/wp/wp-content/uploads/html-icon.png
CSS Button: Change the picture to:
https://www.101computing.net/wp/wp-content/uploads/css-icon.png
JavaScript Button: Change the picture to:
https://www.101computing.net/wp/wp-content/uploads/javascript-icon.png

To do so you will need to:

Add some buttons below the poster
Ensure the <IMG> tag has an id attribute. e.g. id=”icon”

Create a new Javascript function called changeIcon() and use the follwoing code

document.getElementById("icon").src = "https://www.101computing.net/wp/wp-content/uploads/html-icon.png";

Use your application to recreate the following three posters:

Tagged with: CSS, HTML, JavaScript

Time Guessing Game

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

Reaction Time Tester

Look at the code provided below. It uses the time library to store the current time (as a number of seconds) at different lines of the code.

The code is executed very quickly, normally in just a few milliseconds, one line at a time. This is called sequencing. However from time to time your code is paused, waiting for the user to input a value. This is the case in Python every time you use the input instruction.

By recording the current time before and after an input instruction, we can then calculate how long it took for the user to type an answer. This is the approach used by the following Python program used to calculate your reaction time (how quickly will you press the return key).

Time Guessing Game

Adapt this script to:

Generate a random number between 1 and 10,
Display the number on screen and ask the user to wait for this number of seconds before pressing the return key,
Calculate how long they waited for and give the user a score as follows:

If the user waited for more than the given time, they went bust: 0 points,
If the user press the return key at the right time or up to 1/2 second earlier: 50pts,
If the user press the return key between 1 second to 1/2 second earlier: 25pts,
If the user press the return key between 2 seconds to 1 second earlier: 10pts,
If the user press the return key more than 2 seconds earlier: 0pts.

Solution...

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

Tagged with: Date & Time

Fast Typing Test

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

Reaction Time Tester

Look at the code provided below. It uses the time library to store the current time (as a number of seconds) at different lines of the code.

Fast Typing Challenge

Adapt this script to measure how long it will take the end-user to type the entire alphabet (“abcdefghijklmnopqrstuvwxyz”).

Once the user has typed the alphabet, check that they typed it correctly. If not the user should try again until they type it right.

The program should then output:

How many attempts they had,
How long it took them in total,
How long it took them on average per attempt,
How long it took them on their last attempt (which is when they got it correct).

Extension Task

Add a menu system to offer three levels.

Level 1: The user has to type the alphabet,
Level 2: The user has to type the following quote: “The quick brown fox jumps over the lazy dog”.
Level 3: A random quote is picked alongside a list of the following three pangrams^(*):

“The quick brown fox jumps over the lazy dog”
“The five boxing wizards jump quickly”
“Pack my box with five dozen liquor jugs”

^(*)A pangram, or holoalphabetic sentence, includes every letter of the alphabet at least once. The most challenging pangrams are the ones with the fewest letters.

Solution...

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

Tagged with: Date & Time

Hardware Quiz

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

Computers hardware consists of all the components that you will find inside the computer (Motherboard, CPU, RAM, graphic card, sound card, network card, etc.) as well as all the peripherals/devices than you can plug to a computer.

Peripherals are often categorised into three types:

Input Devices,
Output Devices,
Storage Devices.

Input Devices	Output Devices	Storage Devices
Mouse Keyboard Microphone Webcam Scanner Barcode Reader Sensors Chip & Pin Card Reader Magnetic Stripe Card Reader Touchpad Game Controller Joystick	Screen Projector Speakers Headphones Printer Actuators LED	Magnetic Hard drive SSD Hard drive USB Key CD Drive DVD Drive SD Card Reader

Coding Challenge #1

The user should score 10 points per correct answer. The game should carry on as long as the user is giving a correct answer.

Video Tutorial

Coding Challenge #2: The odd one out

The user is then asked to identify the “odd one out”. The user should score 10 points per correct answer. The game should carry on as long as the user is giving a correct answer.

e.g. Which device is the odd one out?

mouse, webcam, printer, keyboard

Solution...

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

Tagged with: Selection

Sorting Algorithms

Posted on March 3, 2017 by Administrator Posted in A Level Concepts, Algorithms, Algorithms (GCSE), Computer Science, Computing Concepts, GCSE Concepts

Computers are often used to process large amounts of data. Some of the tasks they can be used for is to sort data sets in order, e.g. numerical order or alphabetical order.

Though this may seem like a simple task to complete, a lot of research has focused on finding the most effective approach to sort a list very effectively.

Different solutions have been developed resulting on a range of sorting algorithms, the most popular once being:

Bubble Sort Algorithm,
Insertion Sort Algorithm,
Selection Sort Algorithm,
Merge Sort Algorithm,
Quick Sort Algorithm.

The effectiveness of an algorithm results in the number of steps it takes to complete a task.

For sorting algorithms, the effectiveness of an algorithm is not just based on the algorithm itself but also on the list of data to be sorted. Some algorithms for instance will be more effective than other on small lists but not on large lists. Some algorithms will be more effective than others if the data is already nearly sorted. Some algorithms such as the merge sort algorithm will be more effective in a concurrent-processing environment as they use a divide and conquer approach.

The following animations are a visual representation of six of the key sorting algorithms:

Tagged with: Sorting Algorithms

Tally Marks Counter

Posted on March 1, 2017 by Administrator Posted in Computer Science, Python - Beginner, Python Challenges, Solved Challenges

Tally marks are a form of numeral system used for counting. They are most useful in counting or tallying ongoing results, such as the score in a game or sport, as no intermediate results need to be erased or discarded.

For this challenge you will write a Python script that:

Asks the user to enter a number,
Converts the user input to an integer,
Translates this number into tally marks,
Displays the tally marks on screen.

Note that, as we will be using a text-based output, we will use the following text to represent the tally marks:

1	2	3	4	5	6	7	…
\|	\|\|	\|\|\|	\|\|\|\|	\|\|\|\|-	\|\|\|\|- \|	\|\|\|\|- \|\|	…

DIV & MOD

In Python, the // operator and the % operator can be used to calculate the quotient (a.k.a. DIV) and the remainder (a.k.a. MOD) of a division. For instance:

Quotient: 14 DIV 5 = 14 // 5 = 2
Remainder: 14 MOD 5 = 14 % 5 = 4

In other words: 14 = 5 * 2 + 4

We will use these operators to find out how many blocks of 5 tallies we need to print and how many tallies are remaining.

Tally Marks Counter – Solved

Your Task

Use a similar approach to:

Ask the user to type a number of hours and convert this into days and hours knowing that there are 24 hours in a day. So for instance: 54 hours should be displayed as 2 days and 6 hours.

Ask the user to type a number of days and convert this into years and days assuming that there are 365 days in a year. So for instance: 892 days should be displayed as 2 years and 162 days.

Ask the user to type a number of seconds and convert this into hours, minutes and seconds knowing that there are 60 minutes in an hour and 60 seconds in a minute. So for instance: 8500 seconds should be displayed as 2 hours and 21 minutes and 40 seconds.

Solution...

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

Hangman Game

Posted on February 27, 2017 by Administrator Posted in Computer Science, Python - Advanced, Python Challenges, Solved Challenges

For this challenge, you are going to create a game of hangman. The computer will pick a word randomly within a given list of words. The player will have to guess the word by suggesting one letter at a time and the computer will automatically check if the letter given is included in the word to guess. If not it will add one element to the hanged stick man drawing.

Complete the Code

We have started the code for you, but you will need to complete this code:

Step 1: Display the word replacing “_” with letters that have been guessed correctly. You can use the following flowchart to help you with this step:

Step 2: Display the hangman based on the number of lives remaining.
Step 3: Use a loop to repeat the above steps. The game should stop when the user guessed the words or when they have lost all their lives.

Solution...

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

Tagged with: String Manipulation

Bowling Scoreboard

Posted on February 27, 2017 by Administrator Posted in Computer Science, Python - Advanced, Python Challenges, Solved Challenges

The aim of this challenge is to create a scoreboard for a game of ten-pin bowling. It will be used to automatically calculate the total score of a player as they progress through the ten rounds of the game.

The scoring system in a game of ten-pin bowling is fairly complex to understand. Check the link provided below to fully understand the scoring system before attempting to complete this challenge:

Ten-pin Bowling – Scoring System:
https://en.wikipedia.org/wiki/Ten-pin_bowling#Scoring

World Bowling Scoring

The World Bowling scoring system—described as “current frame scoring”—awards points as follows:

strike: 30 (regardless of ensuing rolls’ results)
spare: 10 plus pinfall on first roll of the current frame
open: total pinfall for current frame

The maximum score is 300.

World Bowling scoring is an easier scoring system as the traditional scoring system described below. It is thought to make bowling easier to follow than with traditional scoring, increase television viewership, and help bowling to become an Olympic sport.

Traditional Scoring

In general, one point is scored for each pin that is knocked over. So if a player bowls over three pins with the first shot, then six with the second, the player would receive a total of nine points for that frame. If a player knocks down nine pins with the first shot, but misses with the second, the player would also score nine. When a player fails to knock down all ten pins after their second ball it is known as an open frame.

In the event that all ten pins are knocked over by a player in a single frame, bonuses are awarded.

A ten-pin bowling scoresheet showing how a strike is scored

Strike: When all ten pins are knocked down with the first ball (called a strike and typically rendered as an “X” on a scoresheet), a player is award ten points, plus a bonus of whatever is scored with the next two balls. In this way, the points scored for the two balls after the strike are counted twice.

Frame 1, ball 1: 10 pins (strike)

Frame 2, ball 1: 3 pins

Frame 2, ball 2: 6 pins

The total score from these throws is:

Frame one: 10 + (3 + 6) = 19
Frame two: 3 + 6 = 9

TOTAL = 28

Two consecutive strikes are referred to as a “bakfast”. Some locations still call it a “Hambone” even though that term has been changed to mean 4 strikes in a row by announcers on television. (Four strikes in a row is also referred to as a “Llama.”)

A double’s pinfall is:

Frame 1, ball 1: 10 pins (Strike)

Frame 2, ball 1: 10 pins (Strike)

Frame 3, ball 1: 9 pins

Frame 3, ball 2: 0 pins (recorded as a dash ‘-‘ or ‘0’ on the scoresheet)

The total score from these throws is:

Frame one: 10 + (10 + 9) = 29

Frame two: 10 + (9 + 0) = 19

Frame three: 9 + 0 = 9

TOTAL = 57

Three strikes bowled consecutively are known as a “turkey” or “triple”.

A turkey’s pinfall is:

Frame 1, ball 1: 10 pins (Strike)

Frame 2, ball 1: 10 pins (Strike)

Frame 3, ball 1: 10 pins (Strike)

Frame 4, ball 1: 0 pins (Gutterball)

Frame 4, ball 2: 9 pins

The total score from these throws is:

Frame one: 10 + (10 + 10) = 30

Frame two: 10 + (10 + 0) = 20

Frame three: 10 + (0 + 9) = 19

Frame four: 0 + 9 = 9

TOTAL = 78

Longer strings of strikes are called by various names, including “-Bagger” (Four Bagger), “Llama” (Four consecutive), and “-Pack” (Six Pack) depending on local use, equipment, and exposure to the sport. Recently, the event of bowling four consecutive strikes has also been called a “hambone”.Six strikes and nine strikes in a row can also be referred to “Wild Turkeys” and “Golden Turkeys” respectively. Any string of strikes starting in the first frame or ending “off the sheet” (where all of a bowler’s shots from a certain frame to the end of the game strike) are often referred to as the “front” or “back” strikes, respectively (e.g., the “front nine” for strikes in frames 1–9, or the “back six” for strikes in frames 7, 8, and 9 with a turkey in the tenth). A “perfect game” or 12 strikes in a row is also rarely referred to as the “Thanksgiving Turkey”. A “Clean Game” is a game with strikes or spares in every frame (not counting bonus balls).

A small number of bowling fans have recognized that naming each strike in a consistent manner adds to the enjoyment and excitement of the game. Based on this, a growing number of bowlers subscribe to the “Duck, Duck, Turkey” method of titling consecutive strikes. In keeping with the tradition that the third consecutive strike is called a “Turkey,” every third strike references turkeys and all strikes under this method have been named after birds as follows: Strike 1 – Duck; Strike 2 – Duck; Strike 3 – Turkey; Strike 4 – Goose; Strike 5 – Chicken; Strike 6 – Turducken; Strike 7 – Penguin; Strike 8 – Flamingo; Strike 9 – Turkey Vulture; Strike 10 – Woodpecker; Strike 11 – Eagle; Strike 12 – Turkey Hawk.

A player who scores multiple strikes in succession would score like so:

Frame 1, ball 1: 10 pins (strike)

Frame 2, ball 1: 10 pins (strike)

Frame 3, ball 1: 4 pins

Frame 3, ball 2: 2 pins

The score from these throws are:

Frame one: 10 + (10 + 4) = 24
Frame two: 10 + (4 + 2) = 16
Frame three: 4 + 2 = 6

TOTAL = 46

The most points that can be scored in a single frame is 30 points (10 for the original strike, plus strikes in the two subsequent frames).

A player who bowls a strike in the tenth (final) frame is awarded two extra balls so as to allow the awarding of bonus points. If both these balls also result in strikes, a total of 30 points (10 + 10 + 10) is awarded for the frame. Some people call it “striking out”, since three strikes in baseball equals an out.

A ten-pin bowling scoresheet showing how a spare is scored

Spare: A “spare” is awarded when no pins are left standing after the second ball of a frame; i.e., a player uses both balls of a frame to clear all ten pins. A player achieving a spare is awarded ten points, plus a bonus of whatever is scored with the next ball (only the first ball is counted). It is typically rendered as a slash on scoresheets in place of the second pin count for a frame.

Example:

Frame 1, ball 1: 7 pins

Frame 1, ball 2: 3 pins (spare)

Frame 2, ball 1: 4 pins

Frame 2, ball 2: 2 pins

The total score from these throws is:

Frame one: 7 + 3 + 4 (bonus) = 14
Frame two: 4 + 2 = 6

TOTAL = 20

A player who bowls a spare in the tenth (final) frame is awarded one extra ball to allow for the bonus points.

Solution...

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

Tagged with: Scoring System

Guess the Number: Binary Search

Posted on February 27, 2017 by Administrator Posted in Algorithms, Algorithms (GCSE), Computer Science, Python - Intermediate, Python Challenges, Solved Challenges

Before attempting this challenge, make sure you have completed our previous Guess the Number challenge first where the player plays against the computer.

In this version, the player will be asked to enter a number between 1 and 100. The computer will then use a binary search algorithm to try to guess the correct number keeping the number of guesses to a minimum.

The binary search is a very effective algorithm to search through a large list that is already sorted, in our case the list of numbers from 1 to 100. It is based on the following flowchart:

Complete the Code

Solution...

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

Tagged with: Binary Search

Roman Numerals Conversion

Posted on February 27, 2017 by Administrator Posted in Computer Science, Python - Advanced, Python Challenges, Solved Challenges

For this challenge, your aim is to write a program used to convert whole numbers (integer) into roman numerals and vice versa.

Roman Numerals are based on seven symbols:

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

Complete the code

Test Plan

Test #	Input Values	Expected Output	Actual Output
#1	8	VIII
#2	75	LXXV
#3	2017	MMXVII
#4	CI	101
#5	MMXVII	2017
#6	MCMXLV	1945

Solution...

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

Tagged with: String Manipulation

1	2	3	4	5	6	7	…
\|	\|\|	\|\|\|	\|\|\|\|	\|\|\|\|-	\|\|\|\|- \|	\|\|\|\|- \|\|	…

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

Your Challenge #1:

Your Challenge #2:

Reaction Time Tester

Time Guessing Game

Solution...

Reaction Time Tester

Fast Typing Challenge

Extension Task

Solution...

Coding Challenge #1

Video Tutorial

Coding Challenge #2: The odd one out

Solution...

DIV & MOD

Tally Marks Counter – Solved

Your Task

Solution...

Complete the Code

Solution...

World Bowling Scoring

Traditional Scoring

Solution...

Complete the Code

Solution...

Complete the code

Test Plan

Solution...

Recent Posts

Our Latest Book