1. Javascript Game Assessment
Marking criteria
Basic form design
Title, input boxes, button
Button does something
Alert() / prompt()
Random number generator
Change something on the form
Style the page
Add ad least 1 image
Use css to make your page look appealing to the target user
Save your final jsbin link in your Javascript Game diary
Add a screenshot with a description of what it does
Add an evaluation slide with WWW and EBI

2. http://jsbin.com/qotiva/edit?html,js,output JavaScript Questions
Look at the web page with the Rock Paper Scissors game below and answer the questions following it
A link has been provided so you can test the game yourself 1 2 3 4 5 6 7 8 9 10 11 12 13
1415 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

3. Homework questions Questions:
What does the keyword var mean on line 3?
What does Math.random() do?
What does Math.floor(rand) do?
What does line 10 mean:
var userchoice = document.getElementById("choice").value;
What does line 15 mean?
if(userchoice==rock){
What happens if a user types nothing in the box and presses the button? How can this be fixed?
Harder Questions – have a go (next year’s GCSE Computer Science students especially)
What do you think line 6 does ? What is choices?
What does line 7 do?
document.getElementById("msg").innerHTML=choices[compchoice];
What do you think the symbol && means?
What do you think the symbol || means?

4. Two new HTML tags
At the moment the button doesn't do anything

5. Using the alert()function
This will create a pop up
Change
<button>Click Me!</button> to
<button onclick="alert('hello')">Click Me!</button>
screenshot your work!
Now click the button and a pop up appears
Change the message to something else

6. Using the prompt()function
This will create a pop up which asks the user a question
Change the button to
<button onclick="prompt('What is your name?')">Click Me!</button>
Now click the button and a prompt box appears
Change the message to something else

7. Creating a Javascript function
At the moment the Javascript is being written inline with the HTML
This will get confusing when we start to write longer programs
Creating a block of code called a function allows us to separate the Javascript out to make it easier to manage
In JSBin we need to show the Javascript tab:

8. Creating and running a function
STEP 1: Define the function
Love Tester Demo:
STEP 2: Run the function

9. Using variables in JavaScript
Use the var keyword when you first set up a variable
You can stick variables and text together (concatenate) using a + sign
Variable names…
-Must be one word
-Can't start with a number
-no punctuation

10. Task: Practice creating and running a function
Add a function with a couple of alerts and a prompt to ask the user a question
(This is practice – and doesn't have to be part of your final game)
STEP 1: Define the function
screenshot your work!
STEP 2: Run the function

11. Changing the document with Javascript
document.bgColor="red"
What do you think this line will do?
You can also use color hex codes such as
#ff6600
#00ff00
You can change lots of things on a web page – images, text, divs – more later…
amount of Red
amount of Green
amount of Blue

12. Task: Change the background colour
Add a line to change the background colour to your button.
Extension:
Research "hex color codes" to find other colours you could use
Add the line to change the colours at several points in your script and see what happens
screenshot your work!
or use "#ff6600"

13. Getting data out of fields that the user has typed in
document.getElementById("name1").value
"name1" is the id of the input tag
Be careful of the spelling of getElementById
store it in a variable and use it in your program
screenshot your work!
Love tester :

14. Random Numbers in Javascript
var rand = Math.random() will return a random number between 0 and 1 Multiply it by the number you want var rand = Math.random() * 3 then remove decimal rand = Math.floor(rand) will randomly return 0, 1, or 2
Could use this in Rock Paper Scissors?

15. If this is TRUE then the code inside these curly brackets will run
If statements
Use an if statement if you want to test a value
if (age < 17){
alert("You can't drive");
alert("Unlucky!"); }
If this is TRUE then the code inside these curly brackets will run
Note:
Little "i" on "if"
Round brackets around test
Curly brackets around the block of code to run if test is true
This is the test
It returns True or false
If it's true the block of code runs.
If false it moves onto the next part of the code
Love Tester:

16. Using an if with a random number
If statement to display different messages depending on rand
Generate random number between 0 and 100

17. Magic 8 Ball Example http://jsbin.com/nodociy/3/edit?html,js,output
With delay

18. Rock Paper Scissors

19. Love Tester Game

20. Recap: Using CSS to style your pages
Which line makes the background colour pink?
Which line changes the font to cursive?
Which line centres everything?
Which line adds a white shadow t the heading?
How do you get rounded edges on the inputs & the button?