High School course

JavaScript 101

GRADES 7+
ADVANCED
WEB
13 LESSONS

Request Quote

Answer Key

Module 10: Quiz

1. What does the attribute “pageX” represent?

Distance from the top edge of the page
Distance from the bottom edge of the page
Distance from the left edge of the page
Distance from the right edge of the page

2. What does the attribute “pageY” represent?

Distance from the top edge of the page
Distance from the bottom edge of the page
Distance from the left edge of the page
Distance from the right edge of the page

3. When is the handler function called by the event listener?

Before the event occurs
After the event occurs
It is never called
None of the above

4. What does the handler function do?

Run code in response to a mouse event occurring
Run code in preparation for a mouse event about to occur
Run code in the background while mouse events occur
All of the above

5. The handler function is called by the event listener when the event occurs.

True
False

6. What is the purpose of an event listener?

To allow for inputs and outputs to control code
To listen for a specific event to occur
To call an event handler function when a specific event occurs
All of the above

7. What is the syntax for getting pageX of the mouse during a mouse event in the handler function?

mouse.pageX
mousePageX
event.pageX
eventPageX

8. When does the “click” event occur?

After the mouse is held down
After the mouse is moved
After the mouse is held down, then moved
After the mouse is held down, then released

9. The “click” event and the “mousedown” events refer to the same event.

True
False

10. The following code will print out the coordinates of the mouse when it moves.

    document.addEventListener(“mousemove”, mouseMoveHandler); 
    function mouseMoveHandler(event) {
        println(pageX + “ ,“ + pageY);
    }

True
False

11. What does the following code do?

    document.addEventListener(“mousedown”, mouseDownHandler);
    function mouseDownHandler(event) {
        println(“hello world”);
    }

Prints “hello world” when the mouse button is pressed
Prints “hello world” when the mouse is moved
Prints “hello world” at the location of the mouse
Prints “hello world” as soon as the program starts

12. What does the following code do?

document.addEventListener(“mouseup”, mouseUpHandler);

It creates a handler function called mouseUpHandler and passes in the string “mouseup”
It creates a function called “mouseup” which will handle mouse up events.
It adds an event listener for the “mouseup” event, which will eventually call a function called mouseUpHandler
It is not a valid command

13. The following code has no errors.

document.addEventListener(mouseDownHandler, “mousedown”);

True
False

14. To tell if your mouse has been clicked or not, you check the key code for the mouse button.

True
False

15. To add an event listener for the mouse up event, your code would look like this:

 
document.addEventListener(“mouseup”, mouseUpHandler);

True
False

8.2 Do It Yourself!

Sample answer:

document.addEventListener("keydown", keyDownHandler);
document.addEventListener("keyup", keyUpHandler);

function keyDownHandler(event) {
    console.log("down");
}

function keyUpHandler(event) {
    console.log("up");
}

8.3 Do It Yourself!
Sample answer:

document.addEventListener("keydown", keyDownHandler);

function keyDownHandler(event){
    if (event.keyCode == 37) {
        console.log("left");
    } else if (event.keyCode == 38) {
        console.log("up");
    } else if (event.keyCode == 39) {
        console.log("right");
    } else if (event.keyCode == 40) {
        console.log("down");
    }
}

8.6 Do It Yourself!
Sample answer:

document.addEventListener("mousedown", mouseDownHandler);

function mouseDownHandler(event){
    console.log("down");
}
document.addEventListener("mouseup", mouseUpHandler);

function mouseUpHandler(event){
    console.log("up");
}

8.7 Do It Yourself!
The code should be similar to the editor under "Page vs. Canvas Coordinates", but with the event listener set to check for the "mousedown" event instead. Sample answer:

<html>
    <head>
        <meta charset="utf-8">
        <title>event.pageX demo</title>
        <style>
            div {
                padding: 20px;
            }
        </style>
        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    </head>
    <body>
        <div id="log"> </div>
        <canvas style="background-color:pink;" width="640" height="380" id="myCanvas"></canvas>

        <script>
            // Get ahold of the canvas object
            canvas = document.getElementById("myCanvas");
            // Get ahold of the canvas context
            ctx = canvas.getContext("2d");

            // Make the font bigger
            ctx.font = "15px Helvetica";

            function pointAt(x,y){

                // Draw a point at the specified x,y location.
                ctx.beginPath();
                var radius = 2.5, startAngle = 0, endAngle = 2*Math.PI;
                ctx.arc(x,y,radius,startAngle,endAngle);
                ctx.fill();

                // Label the point by drawing text
                ctx.fillText( "  ("+Math.round(x)+","+Math.round(y)+")" , x , y);
            }

            function showPos(x,y){
                $("#log").text("("+ x + ", "+ y + ")");
            }

            document.addEventListener("mousedown", mouseDownHandler);

            function mouseDownHandler(event) {
                // Print the page coordinates
                showPos(event.pageX, event.pageY);
                // Clear the canvas
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                // Draw the canvas coordinates
                pointAt(event.pageX - canvas.offsetLeft, event.pageY - canvas.offsetTop);
            }
        </script>
    </body>
</html>

U.S. Standards

CCSS-ELA: SL.7.1, SL.8.1, RI.9-10.3, RI.9-10.6, L.9-10.3, L.9-10.6
CCSS-Math: HSN.Q.A.1, HSN.Q.A.2, HSN.Q.A.3, HSA.CED.A.1, HSA.CED.A.3, MP.1, MP.2, MP.3
CSTA: 2-AP-11, 2-AP-13, 2-AP-16, 2-AP-17, 3A-AP-17, 3B-AP-11, 3B-AP-12, 3B-AP-22
CS CA: 6-8.AP.11, 6-8.AP.12, 6-8.AP.13, 6-8.AP.16, 6-8.AP.17, 9-12.AP.12, 9-12.AP.14, 9-12.AP.16
ISTE: 1.c, 1.d, 4.d, 5.c, 5.d, 6.b

U.K. Standards

Key stage 3

Pupils should be taught to:

design, use and evaluate computational abstractions that model the state and behaviour of real-world problems and physical systems
understand several key algorithms that reflect computational thinking [for example, ones for sorting and searching]; use logical reasoning to compare the utility of alternative algorithms for the same problem
undertake creative projects that involve selecting, using, and combining multiple applications, preferably across a range of devices, to achieve challenging goals, including collecting and analysing data and meeting the needs of known users
create, reuse, revise and repurpose digital artefacts for a given audience, with attention to trustworthiness, design and usability
understand a range of ways to use technology safely, respectfully, responsibly and securely, including protecting their online identity and privacy; recognise inappropriate content, contact and conduct, and know how to report concerns

Key stage 4

Pupils should be taught to:

develop their capability, creativity and knowledge in computer science, digital media and information technology
develop and apply their analytic, problem-solving, design, and computational thinking skills
understand how changes in technology affect safety, including new ways to protect their online privacy and identity, and how to report a range of concerns

Lesson 8: User Interaction

Course: | Web

What is User Interaction?
What are Keyboard Events?
What are Key Codes?
Moving Ships
Line Art
What Are Mouse Events?
What Is the Mouse Location?
Follow the Mouse
Stamping Tool
Quiz

Description

An introduction to JavaScript for intermediate or advanced coders in upper middle or high school. In this advanced lesson plan, students will be introduced to JavaScript as they complete engaging lessons, solve challenging puzzles, and build their own games in JavaScript. This course is ideal for students who have already completed at least one Tynker course and are comfortable with the basics of programming logic and computational thinking. This course will help them transition to JavaScript and adapt to the additional challenges of text-based syntax.

Students who successfully complete this lesson plan will demonstrate a strong mastery of JavaScript syntax, as well as the ability to creatively program games and other projects and debug their own code. Students will also be able to come up with an idea for a game and take it through the entire design and implementation process, creating custom versions of many of their favorite games in JavaScript.

Topics

JavaScript syntax
Sequencing
Repetition
Conditional logic
Nested loops
Automation
Pattern recognition
Simple motion
Keyboard and mouse events
Creating and using an HTML canvas
Operators
Expressions
Variables
Collision detection
Using arrays and objects to store structured data

1/6

What Students Learn

Learn JavaScript syntax
Use conditional logic, loops, and conditional loops to solve problems
Create and use variables
Detect and handle keyboard and mouse events
Write and interpret JavaScript expressions
Use the HTML canvas for drawing and displaying images
Detect win/loss conditions in a game
Implement collision detection between images on the canvas
Use arrays and objects to store structured data

Technical Requirements

* Online courses require a modern desktop computer, laptop computer, Chromebook, or Netbook with Internet access and a Chrome (29+), Firefox (30+), Safari (7+), or Edge (20+) browser. No downloads required.