if(form.results.value != "") {form.results.value = "Sorry, you cannot GUESS in this test. In order to ''retry this question'' you will have to restart the test again. Click on ''Next Question'' to continue."; }
form.results.value = "Congratulations! You are correct. That brings your cumulative score to " + form.myScore.value + " out of a possible " + form.questNo.value + ". Click on ''Next Question'' to continue."; } else {
form.results.value = "Sorry, you are incorrect. Hint: " + hint[form.questNo.value] + ". This brings your cumulative score to " + form.myScore.value + " out of a possible " + form.questNo.value + ". Click on ''Next Question'' to continue." }
http://www.khanacademy.org
Sign up using your school email address and to to Learn - Computer Programming
Watch the tutorial for Intro to Drawing and work your way through until the challenge:Crazy face
Finished?
Now use the example code below, to recreate the H you drew in one of the exercises above.
HTML 5 Canvas
The <canvas> element is used to draw graphics, via scripting (usually JavaScript)
The <canvas> element is only a container for graphics and you need to use a script to draw the graphics.
Creating a canvas
Note: you can have multiple <canvas> elements on 1 page. Always specify an id attribute - see example below <canvas id="myCanvas" width="400" height="400" style="border:1px solid #000000;"> </canvas><html
Step 2 - drawing onto the canvas using JavaScript
<html> <head> <canvas id="myCanvas" width="300" height="300" style="border:1px solid #000000;"> </canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(75,75,50,0,Math.PI*2,true); Outer circle ctx.moveTo(110,75); ctx.arc(75,75,35,0,Math.PI,false); Mouth (clockwise) ctx.moveTo(65,65); ctx.arc(60,65,5,0,Math.PI*2,true); Left eye ctx.moveTo(95,65); ctx.arc(90,65,5,0,Math.PI*2,true); Right eye ctx.stroke(); </script>
Example Project ideas
1. Multiple Choice Quiz (note - you would need to create a folder to save all the logos)
Introduction to drawing
http://www.khanacademy.org
Sign up using your school email address and to to Learn - Computer Programming
Watch the tutorial for Intro to Drawing and work your way through until the challenge:Crazy face
Finished?
Now use the example code below, to recreate the H you drew in one of the exercises above.HTML 5 Canvas
The <canvas> element is used to draw graphics, via scripting (usually JavaScript)
The <canvas> element is only a container for graphics and you need to use a script to draw the graphics.
Creating a canvas
Note: you can have multiple <canvas> elements on 1 page. Always specify an id attribute - see example below
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #000000;">
</canvas><html
Step 2 - drawing onto the canvas using JavaScript
<html>
<head>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #000000;">
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); Outer circle
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false); Mouth (clockwise)
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); Left eye
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); Right eye
ctx.stroke();
</script>
Animation in Javascript
Useful site