Maths Activity

Learning Objecives

Activity Instructions and Information

Activity

All right! Let's start by declaring the variables we'll be using. We'll need:

  1. Collect data for you given Topic. Try to collect this data for around 20 - 30 Students. Think about what would be the best way to record and collect this Data.
  2. Using the Data you have collected draw a bar graph on a graph paper.
  3. When you have completed the above create a HTML Table containing the data you collected. Make Sure you use CSS to make your webpage look good!
  4. Create a Bar Graph using HTML, CSS and by using the sample code and tutorial provided below to find on how to draw an image

Guide to help you Create Drawings on a Website

To create drawings on a website, first you will have to create a canvas. A canvas can be created using the code below, but you can change the values for the attributes id, width, height and style depending on your preferences.

<canvas id="myCanvas" width="900" height="200" style="border:1px solid #000000;"></canvas>

Example of what this shows on a Webpage with extra Annotations


(0,0) (900,20)

The second 'if' statement

Before you start Drawing, treat the canvas as a graph with X and Y Axis. But, when using X and Y position parameters the Top corner of a canvas is coordinate (0,0) and the Bottom corner coordinate is your set width and height in the HTML canvas tag. For example, for the above example the bottom corner coordinate is (900,200).

Below is useful code that you may need and need to learn in order to create a simple bar graph.

Draw Rectangle Shape

<script>
var canvas = document.getElementById("myCanvas");
var drawing= canvas.getContext("2d");
drawing.fillStyle = "#FF0000";
//Fills the shape with the colour red, you can find different colour codes on the web or type in the actual colour name such as red instead. drawing.fillRect(0,0,150,75);
//(0,0,150,75) The First Parameter (number) in fillRect is the X position on the Canvas where shape should be drawn and the Second Parameter (number) is the Y position on the Canvas where shape should be drawn
//The Third Parameter which currently has a value 150 is the width of the Shape
//The Fourth Parameter which currentlu has a value 75 is the height of the Shape
</script>

Draw Line

<script>
<script>
var canvas = document.getElementById("myCanvas");
var drawing= canvas.getContext("2d");
drawing.moveTo(0,0);
//The First Parameter in moveTo() is the X position and the Second Parameter is Y position. moveTo() allows you to set the line's starting position
drawing.lineTo(200,100);
//The First Parameter in lineTo() is the X position and the Second Parameter is Y position. lineTo() allows you to set the line's end position
drawing.stroke();
//Stroke() draws the shape
</script>

Draw a Text

<script>
<script>
var canvas = document.getElementById("myCanvas");
var drawing= canvas.getContext("2d");
drawing.font = "30px Arial";
drawing.fillText("Hello World",10,50);
//The Second Parameter in fillText() is the X position and the Third Parameter is Y position of where you want the Text in the First Parameter to be placed in the Canvas.
</script>

If you require additional shapes or you're curious to find out more on what else you can draw, then why not visit the website http://www.w3schools.com/HTML/html5_canvas.asp

Example code Demo

Back to the work brief

Reference:

  1. W3schools.com,2014. HTML5 Tutorial [online] Available at: http://www.w3schools.com/js/default.asp [Accessed 18 March 2015].

(Bcakground picture Source from: http://wallpaperswide.com/big_hero_6_disney_baymax-wallpapers.html)