Robotics: Self-Parking Challenge

Posted on May 27, 2014 by Administrator Posted in Block Programming, Computer Science, Computing Concepts

New cars are fully loaded with technology. Manufacturers are working on new systems to facilitate the driving experience. Self-parking systems will soon be available on most cars.

Let’s look at what the technology can do:

Your Challenge

Build and program a robot that can scan a parking bay to find an an empty space and park itself in this space.

Our recommendations:

To complete this robotics challenge we recommend the following technology:

Lego Mindstroms – NXT
Echanting Software

If you are familiar with the Scratch user interface, then you will love Enchanting as it provides a Scratch based user Interface for your Lego Mindstorms NXT robot.

Find out more about Enchanting on: http://enchanting.robotclub.ab.ca/

Find out more about self-driving cars on our STEM Lab.

Tagged with: Block Programming

Tic-Tac-Toe Challenge

Posted on May 23, 2014 by Administrator Posted in Computer Science, HTML, CSS & JavaScript, JavaScript

Ready for a real JavaScript challenge?

Look at the HTML, CSS and JavaScript code below. It creates the user interface and user interaction for a game of Tic-Tac-Toe. However the code is incomplete.

Your job is to complete this code by completing these two challenges:

Challenge 1:

Update this code to display a message when one of the players has won or when the game ends on a draw.

Challenge 2:

Update this code for player 1 to play against the computer! To do so you can either get the computer to place its token on the grid randomly, but you may also get the computer to make a decision by comparing different positions to place its token.

Learning Objectives

By completing this challenge you will further develop your HTML, CSS and JavaScript skills and learn how to manipulate two-dimensional arrays in JavaScript using for loops and if statements.

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

Click on the “Edit On CodePen” icon above to edit/complete this code. To be able to save your work on CodePen you will need to register first.

Creating tabs in HTML + CSS + JS

Posted on May 22, 2014 by Administrator Posted in Computer Science, HTML, CSS & JavaScript, JavaScript

In previous posts we looked at how JavaScript can interact with HTML using:

Event Handlers in HTML such as onClick, onFocus, onBlur…
the DOM (Document Object Model) to access HTML objects using: document.getElementById(“objectId”)

CSS is applied to HTML objects. Using JavaScript you can change the CSS attributes of all your HTML objects using:

document.getElementById(“objectID”).style

For instance:

document.getElementById(“myTextBox”).style.background=”#FF0000″;
document.getElementById(“myHeading”).style.padding=”25px”;
document.getElementById(“myDiv”).style.display=”none”; //This will make the DIV tag invisible
document.getElementById(“myDiv”).style.display=”block”; //This will make the DIV tag visible
…

Let’s combine all these techniques to create some tabs:

The HTML code is fairly straightforward: Each tab needs a DIV tag for the tab itself and a DIV tag for its content:

<div id="tab1" onClick="JavaScript:selectTab(1);">Tab 1</div>
<div id="tab2" onClick="JavaScript:selectTab(2);">Tab 2</div>
<div id="tab3" onClick="JavaScript:selectTab(3);">Tab 3</div>

<br/>

<div id="tab1Content">
  This is the content to display in the first tab.
</div>
<div id="tab2Content">
  Welcome to tab 2!
</div>
<div id="tab3Content">
  Tab 3 is probably the best of the three tabs.
</div>

Then CSS code can be used to customise the look and feel of the tabs (Background colours, borders, padding…)
But mainly CSS is used to only display the first tab’s content area and hide the other two. This is done using the display attribute in CSS:

#tab1Content {
 display: block; 
}

#tab2Content, #tab3Content {
 display: none; 
}

Finaly the JavaScript code is used to handle the onClick event triggered by the tabs.
It accesses the style attribute of each tab’s content area to eithe hide or display the content of the tab based on which tab has been clicked.

function selectTab(tabIndex) {
  //Hide All Tabs
  document.getElementById('tab1Content').style.display="none";
  document.getElementById('tab2Content').style.display="none";
  document.getElementById('tab3Content').style.display="none";
  
  //Show the Selected Tab
  document.getElementById('tab' + tabIndex + 'Content').style.display="block";  
}

Let’s see all this code in action:

See the Pen Tabs using HTML + CSS + JavaScript by 101 Computing (@101Computing) on CodePen.

Your Challenge

Tweak this code (click on the “edit on CodePen” logo) to add an extra tab (Tab 4) to this script.
You will need to tweak the HTML code first, then the CSS then the JavaScript.

Extension Task:

Change the background of your tabs using a gradient. To do so you can use this CSS gradient generator.

JavaScript: Click Me!

Posted on May 20, 2014 by Administrator Posted in Computer Science, HTML, CSS & JavaScript, JavaScript

When working on HTML and JavaScript projects it is very likely that you will want to respond to events. For instance you may want to run some JavaScript code when a button is clicked.

Examples of HTML events:

When a user clicks the mouse (onClick event)
When a web page has loaded (onLoad event)
When the mouse moves over an element (onMouseOver and onMouseOut events)
When an input field get the focus (onFocus event) or loses the focus (onBlur event)
When an input field is changed (onChange event)
When an HTML form is submitted (onSubmit event)
When a user strokes a key (onKeyPress event)

To assign events to HTML elements you can use event attributes within your HTML code. For instance:

<INPUT type="button" value="Click Me!" onClick="JavaScript: alert('Ouch!');">

Let’s look at a few examples:

onClick Event

See the Pen JS: onClick Event by 101 Computing (@101Computing) on CodePen.

onFocus and onBlur Events

See the Pen JS: onFocus Event by 101 Computing (@101Computing) on CodePen.

Did you notice? Using “this” as a parameter in the JavaScript function enables to access the form control that triggered the event. So the same function could be used for more than one form control.

onChange Event

See the Pen JS: onChange Event by 101 Computing (@101Computing) on CodePen.

onMouseOver and onMouseOut Events

See the Pen JS: onMouseOver onMouseOut Event by 101 Computing (@101Computing) on CodePen.

Form Validation using onSubmit Event

Look at how the onSubmit event can be used to perform some validation checks before sending the data/form accross.
This code shows that it is possible to confirm or cancel an event using the “return” keyword. (return true confirms the event whereas return false cancel the event)

See the Pen JS: Form Validation by 101 Computing (@101Computing) on CodePen.

Create Post-It Notes using CSS

Posted on May 19, 2014 by Administrator Posted in Computer Science, HTML, CSS & JavaScript

Familiarise yourself with CSS to see how CSS code can help you format and combine text and graphics effectively.

CSS Box Model

To understand how margin, borders and padding works you need to understand the CSS Box Model. Click on this picture to find out more:

Post-It Note

Look at this script to create a post-it note.

You could use this code for your own webpages.

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

Your Challenge

Use any of the pictures below to add the following text on the selected screen:

Call Us Now:
on
01234 567 890

	/wp/wp-content/uploads/mobile-phone.jpg – (157 x 294)
	/wp/wp-content/uploads/laptop.jpg – (424 x 221)
	/wp/wp-content/uploads/tablet.jpg – (299 – 220)

Extension Task:

Change the background of your screen using a gradient. To do so you can use this CSS gradient generator.

call-us-now-css

JavaScript: Working with Dates…

Posted on May 16, 2014 by Administrator Posted in Computer Science, HTML, CSS & JavaScript, JavaScript

Working with Dates in computing can be quite tricky especially as we don’t always use the same date format around the globe.
For instance in the UK dates are represented using the following format: dd/mm/yyyy.

Let’s see how we could create a script to find out the number of days that have passed since the beginning of the year.
To do so we will need to:

Find out what today’s date is.
Extract the current year (of today’s date)
Create a new Date based on 01/01/ of the current year
Calculate the number of days between this date and today’s date
Display this number to the end user.

First we are going to use the Date() object in Javascript.

var today=new Date();

This line creates a new Date object and as we did not enter any parameters, it will use today’s date per default.

From this date we can extract the current year using the getYear() function as follows:

var currentYear=today.getFullYear();

Another way to create a Date object is to use the following code:

var oneDayInHistory=new Date(1969 , 7 , 21) //Create a new date for 21st of July 1969

So in our case we want the first day of the current year so we would use:

var beginningOfTheYear = new Date(currentYear, 1, 1) // (1, 1 stands of 1st of January)

Then we can calculate the difference between these two dates:

var dateDifference = today - beginningOfTheYear;

This code would return the number of milliseonds between these two days.
To get it in days we need to dive it by (1000*60*60*24) because there are 1000 milliseconds in 1 second, 60 seconds in one minute, 60 minutes in 1 hour and 24 hours in one day.
So:

dateDifference=dateDifference / (1000 * 60 *60 *24);

To get a whole number with no decimal we need to round this number:

dateDifference=Math.round(dateDifference);

We can then display the result back to the end user. So the full code will be as follows:

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

Your challenge:

Change this code to prompt the user to enter their Date of Birth. Get the code to calculate the number of days left till their next birthday.

Tagged with: Date & Time

My First HTML page!

Posted on May 15, 2014 by Administrator Posted in Computer Science, HTML, CSS & JavaScript

Are you ready to set up your first webpage?
All you have to do is follow the following 5 easy steps…

Step 1: Getting Ready

Go to your files (e.g. “My Documents”) and create a new folder called “My Website”
Inside this folder create a subfolder called “Images”

Step 2: Let’s Get Started

Open your favourite HTML or text editor. Not sure which one? We recommend NotePad++.
Type the following code:

<!DOCTYPE html>
<html>
<head>
	<title>My First Web Page</title>
</head>
<body bgcolor="#BBCCFF">
<h1>Welcome to my first webpage</h1>
<p>I hope you will like this page.</p>

</body>
</html>

Step 3: Saving Your Work

Save this file as index.html in your website folder. (The folder you created in step 1).

Notice the file extension: .html Make sure you save your file with this extension, and not as a .txt file!

Step 4: Let’s See It

Go to your website folder and open (double click on) your file called “index.html”. It should now appear in your web browser.

Step 5: And Now?

Go back to your HTML code and change the text for your first paragraph.
Save your file.
Reopen it in your web browser, or if you still have it in your web browser, press the F5 key on your keyboard to refresh the page. Your new text should now appear. If not make sure you have saved your code (e.g. in Notepad++) and then in your web browser press the F5 key again.

My First Python Game – Guess the Number

Posted on May 15, 2014 by Administrator Posted in Computer Science, Python - Intermediate, Python Challenges, Solved Challenges

Sometimes the best way to get started with a new programming language is to do some reverse engineering. This consists of looking at an existing piece of code to find out how it works.

So let’s look at the piece of code for a fairly basic yet fully working Python game of “Guess the Number”. Look at the code. Look at the syntax. Try to understand what this code do, line by line. Tweak the code to see if you can adapt this game.

Here is the code.

import random

#Generate a Random Number between 0 and 100 and store it as 'numberToguess'
numberToGuess=random.randint(0,100)

userGuess=-1

while userGuess!=numberToGuess:
    #Get the user to enter a number using the 'input' function and convert in to an Integer suing the 'int' function
    userGuess=int(input("Guess the number (between 1 and 100)"))
    
    #Compare this number, userGuess, with the numberToGuess - Display the right message if the userGuess is greater than, lower than or equal to the numberToGuess
    if userGuess>numberToGuess:
        print("Too high!")
    elif userGuess<numberToGuess:
        print("Too low!")
    elif userGuess==numberToGuess:
        print("Good guess, the number to guess was " + str(numberToGuess) + " indeed.")
        #End of game - exit the while loop
        break

Python Code

Your Challenge:

Could you change this code to count how many attempts you had at guessing the right number. Once you guess the correct number, the program should tell you how many guesses you used.

Solution...

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

JavaScript: When 2+2 = 22!

Posted on May 15, 2014 by Administrator Posted in Computer Science, HTML, CSS & JavaScript, JavaScript

In our previous blog post we looked at how to retrieve values from various HTML form controls.

For instance the following JavaScript code shows you how to retrieve the value typed in a textbox.

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

So let’s apply this to a tiny “online calculator” project to perform a sum (+ operator) of two numbers. We would need:

two textboxes for the user to enter the two numbers to be added.
one textbox to display the result of adding the two numbers.

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

This JavaScript code retrieves the values from the textboxes and add them together… But when you try to add 2 and 2 together the outcome is not 4 but 22!!!

This is because textbox entries are providing values as text (String Data Type) and not number.

If we want to perform mathematical operations we need to convert this text into numbers.

There are two main types of numbers: Integer and Real.

Integers are whole numbers with no decimal points such as 3 or -7 or 101.
Reals (aka float) are numbers which can have decimals such as 3.1415 or -4.99.

To convert text into an integer we can use the parseInt() function as follows:

var st="2"
var myNumber=parseInt(st);

To convert text into a real/float we can use the parseFloat() function as follows:

var st="3.14"
var myNumber=parseFloat(st);

So the code for our basic online calculator should be as follows:

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

JavaScript: Accessing HTML Form Controls

Posted on May 11, 2014 by Administrator Posted in Computer Science, HTML, CSS & JavaScript, JavaScript

Retrieving value from a Textbox:

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

Retrieving value from a Textarea:

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

Retrieving value from Checkboxes:

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

Retrieving value from Radio Buttons:

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

Retrieving value from a Dropdown List:

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

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

Our recommendations:

Challenge 1:

Challenge 2:

Learning Objectives

Your Challenge

Extension Task:

onClick Event

onFocus and onBlur Events

onChange Event

onMouseOver and onMouseOut Events

Form Validation using onSubmit Event

CSS Box Model

Post-It Note

Your Challenge

Extension Task:

Your challenge:

Step 1: Getting Ready

Step 2: Let’s Get Started

Step 3: Saving Your Work

Step 4: Let’s See It

Step 5: And Now?

Python Code

Your Challenge:

Solution...

Retrieving value from a Textbox:

Retrieving value from a Textarea:

Retrieving value from Checkboxes:

Retrieving value from Radio Buttons:

Retrieving value from a Dropdown List:

Recent Posts

Our Latest Book