Maths Data Representation Activity

Students should work in groups of 2
Each group should be allocated a certain data or information that they should collect. For example,

The Month of each Students Birthday
Shoe size of each Student
Height of Each Student
Favourite Subject from Maths, English, Science
Favourite Colour of Each Student from Red, Yellow, Blue, Pink, Green and Orange
Roll a dice 30 times and record the value it shows
And many others

This Activity is around 2 lesson long
This Activity is for Students aged between 13 - 15

Activity

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.
Using the Data you have collected draw a bar graph on a graph paper.
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!

Challenge: Any additional features that would make it easier to create a HTML Table for the Data you collected. For example, if new data was to be added you would no longer need to write code for this, but values could be changed on the web page

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

Challenge: Take into consideration if data was to be changed in the future as if the data is changes the bar graph should also change. The data should be able to be updated on the HTML Page

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>

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

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

Maths Activity

Learning Objecives