Preview

02 - Variables and building blocks

 1. Go through the following video presentation, if possible, and select 'True' when done.

  True

  False

 2. In the following image, we have set up a basic HTML template and external JavaScript file. On which line is the JavaScript file being called?
html_js_setup1.png

  Line 14

  The JavaScript file is not being called and would therefore not be recognised

  Line 12

  Line 7

 3. In this line of code, I declared a _________ called myText and gave it a value of 'hello, testandtrack!'. 
var myText = "hello, testandtrack!";

  constant

  object

  function

  variable

 4. In this example, what is the variable?
boxes_variables_arrow.png

  The arrow is the variable, as a variable is the process of storing a value

  'Name' is the variable (represented by the box) and 'Samia' is the value stored in the variable

  'Samia' is the variable (string data)

  'Name'+'Samia' make up the variable when combined together

 5. Which statement best describes what is happening in the following code? 
<script>
var myText = "hello, world!";
alert(myText);
</script>

  The variable's name is 'hello,world!' and it has been stored in the value 'myText'

  The variable 'myText' is being passed to the alert function, which pops up with an alert that says 'hello, world!'

  An error message comes up on the screen as a variable cannot be passed on in this way

  The 'hello, world!' text is being passed to the alert function directly

 6. Which of the following statements are true and rules regarding the naming of variables in JavaScript? 
1 - Your variables can be as short one character, or they can be as 
	long as you want.

2 - Your variables can start with a letter, underscore, or the $ 
	character.

3 - They can't start with a number.

4 - Outside of the first character, your variables can be made up of 
	any combination of letters, underscores, numbers and $ characters. 
	You can also mix and match lowercase and uppercase to your heart's 
	content.

5 - Spaces are allowed, for example: first name = " Joe" would be 
	acceptable.

  Only 5 is true

  1, 2 and 5 are true

  1, 2, 3, 4 are all true but 5 is not true

  1 and 5 are true

 7. In the following example we have a JavaScript script inside an HTML page. The JavaScript code has declared two variables ____ and ____ . 
Note: To create a variable in JavaScript, we can also use the let keyword.
e.g. let message; (this creates a variable called 'message')
canvassetup_describe_the_setup1.png

  myCanvas / 2d

  Actually, there are three variables: moveTo, lineTo and stroke

  c / ctx

  document / getContext

 8. The following code does NOT produce the two red rectangles as shown in the canvas below. Why? 
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="600" height="400" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
ctx.fillRect(10,10,150,80);
</script>

</body>
</html>
tworedrectangles.png

  Because the second ctx.fillRect(10,10,150,80); should be ctx.fillRect(40,120,150,80);

  All of these answers are correctly answering the question as to why the code will not work as expected

  Because the second ctx.fillRect(10,10,150,80); is exactly the same as the first. One shape is hidden 'under' the other

  There are two lines of code with ctx.fillRect(10,10,150,80); but they produce the shape in the same location

 9. Can you fill in the blank number to accurately produce the third square below (i.e. bottom left)? 
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="600" height="400" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,80,80); //this produces the first (top left) square
ctx.fillRect(110,10,80,80); //this produces the second (top right) square
ctx.fillRect(___,110,80,80); //this should produce the third square (bottom left)
ctx.fillRect(110,110,80,80); //this produces the fourth square (bottom right)

</script>

</body>
</html>
foursquares_javascript_canvas.png

  10

  110

  100

  80

 10. In the following code, where is the JavaScript inserted and how many variables can you count? 
<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      window.requestAnimFrame = (function(callback) {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
        function(callback) {
          window.setTimeout(callback, 1000 / 60);
        };
      })();

      function drawRectangle(myRectangle, context) {
        context.beginPath();
        context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
        context.fillStyle = '#8ED6FF';
        context.fill();
        context.lineWidth = myRectangle.borderWidth;
        context.strokeStyle = 'black';
        context.stroke();
      }
      function animate(myRectangle, canvas, context, startTime) {
        // update
        var time = (new Date()).getTime() - startTime;

        var linearSpeed = 40;
        // pixels / second
        var newX = linearSpeed * time / 1000;

        if(newX < canvas.width - myRectangle.width - myRectangle.borderWidth / 2) {
          myRectangle.x = newX;
        }

        // clear
        context.clearRect(0, 0, canvas.width, canvas.height);

        drawRectangle(myRectangle, context);

        // request new frame
        requestAnimFrame(function() {
          animate(myRectangle, canvas, context, startTime);
        });
      }
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      var myRectangle = {
        x: 0,
        y: 75,
        width: 100,
        height: 50,
        borderWidth: 5
      };

      drawRectangle(myRectangle, context);

      // wait one second before starting animation
      setTimeout(function() {
        var startTime = (new Date()).getTime();
        animate(myRectangle, canvas, context, startTime);
      }, 1000);
    </script>
  </body>
</html>

  The JavaScript is between the html tags at the start and the end. There are just four main variables declared

  There is no JavaScript in this code. There are five HTML canvas variables

  The JavaScript is between the script tags on lines 13 and 70. There are seven variables

  The JavaScript is between the script tags on lines 13 and 70. There are four variables

 11. What would you have to change in order to make the rectangle move more quickly across the screen? Try it out for yourself if necessary.

  var startTime = (new Date()).getTime(); this line could be set to 100 or 1000

  The canvas width and height could be increased, which would in turn increase speed

  var linearSpeed = 40; could be increased to 100 or a greater number

  var time = (new Date()).getTime() - startTime; the getTime() could be deleted

 12. In the line of code: ctx.fillRect(0,10,20,30);, the 0 refers to:

  the height

  the x axis coordinate

  the y axis coordinate

  the width

 13. In the line of code: ctx.fillRect(0,10,20,30);, the 30 refers to:

  the height

  the x axis coordinate

  the width

  the y axis coordinate

 14. In the line of code: ctx.fillRect(0,10,20,30);, the 20 refers to:

  the height

  the y axis coordinate

  the width

  the x axis coordinate

 15. In JavaScript, the 'prompt' command_________________________ .

  creates a pop up box into which the user can enter their input

  prompts the user to change their output

  allows the user to create a variable

  creates a variable called 'prompt'


Report an error