Example Project ideas


1. Multiple Choice Quiz (note - you would need to create a folder to save all the logos)

<HTML><head><title>Aussie Logo Test</title>



<script LANGUAGE="JavaScript">

<!-- hide this script tag's contents from old browsers --->



function welcome()

{

var x;

var name=prompt("Please enter your name","Julia Gillard");

if (name!=null)

{

x="<p>Hello " + name + "! Welcome to the Aussie Logo test - 35 questions</p>";

document.getElementById("hellotxt").innerHTML=x;

}

}



function init()

{

welcome()

logo = new Array()

logo[1] = "./logos/woolworths.png"

logo[2] = "./logos/diva.png"

logo[3] = "./logos/abc.png"

logo[4] = "./logos/afledit.png"

logo[5] = "./logos/supreedit.png"

logo[6] = "./logos/bigwedit.png "

logo[7] = "./logos/cottononedit.jpg"

logo[8] = "./logos/billabong.jpeg"

logo[9] = "./logos/jayjaysedit.png"

logo[10] = "./logos/fosters.png"

logo[11] = "./logos/myeredit.jpg"

logo[12] = "./logos/anz.jpeg"

logo[13] = "./logos/donutkingedit.png"

logo[14] = "./logos/commonwealthbankedit.png"

logo[15] = "./logos/australianopenedit.png"

logo[16] = "./logos/jbhifiedit.jpg"

logo[17] = "./logos/brumbysedit.jpg"

logo[18] = "./logos/pumpkinpatchedit.jpg"

logo[19] = "./logos/quantas.png"

logo[20] = "./logos/roxy.jpeg"

logo[21] = "./logos/smiggleedit.jpg"

logo[22] = "./logos/sportsgirledit.png"

logo[23] = "./logos/targetedit.png"

logo[24] = "./logos/vegemiteedit.png"

logo[25] = "./logos/weetbixedit.png"

logo[26] = "./logos/westpackedit.png"

logo[27] = "./logos/telstraedit.jpg"

logo[28] = "./logos/swimmingaustraliaedit.png"

logo[29] = "./logos/slurpeeedit.png"

logo[30] = "./logos/sevenelevenedit.png"

logo[31] = "./logos/hungryjacksedit.png"

logo[32] = "./logos/harveynormanedit.jpg"

logo[33] = "./logos/davidjones.jpeg"

logo[34] = "./logos/australiapost.jpeg"

logo[35] = "./logos/cricket.png"



answerA = new Array()

answerA[1] = "Woolworths"

answerA[2] = "Pink love"

answerA[3] = "United Together"

answerA[4] = "NFL"

answerA[5] = "Grande"

answerA[6] = "Big W"

answerA[7] = "Party On"

answerA[8] = "Ripcurl"

answerA[9] = "Jettys"

answerA[10] = "Foresters"

answerA[11] = "Myer"

answerA[12] = "Child Care Services"

answerA[13] = "Donut King"

answerA[14] = "Honey Bread"

answerA[15] = "Tennis Play-offs"

answerA[16] = "Australian Paints"

answerA[17] = "Brumbys"

answerA[18] = "Halloween"

answerA[19] = "Kangaroooo"

answerA[20] = "Rusty"

answerA[21] = "Scribble"

answerA[22] = "Sports Girl"

answerA[23] = "Shooting Range"

answerA[24] = "Peanut Butter"

answerA[25] = "Next"

answerA[26] = "Wespac"

answerA[27] = "Telstra Dome"

answerA[28] = "Life Guards"

answerA[29] = "Slurpee"

answerA[30] = "7 Days of the Week"

answerA[31] = "Hungry Horse"

answerA[32] = "Harry Notter"

answerA[33] = "Check Mate"

answerA[34] = "Australia Post"

answerA[35] = "Melbourne Cup"



answerB = new Array()

answerB[1] = "Safeway"

answerB[2] = "Heart Foundation"

answerB[3] = "ABC"

answerB[4] = "AFL"

answerB[5] = "Plate"

answerB[6] = "WOW"

answerB[7] = "Cotton On"

answerB[8] = "Rusty"

answerB[9] = "JayJays"

answerB[10] = "Flings"

answerB[11] = "My Store"

answerB[12] = "ANZ"

answerB[13] = "Family."

answerB[14] = "Job"

answerB[15] = "Summer Camp"

answerB[16] = "JB Hi-Fi"

answerB[17] = "Annies"

answerB[18] = "Food Market"

answerB[19] = "Made In Australia"

answerB[20] = "Roxy"

answerB[21] = "Crayola"

answerB[22] = "Sports Man"

answerB[23] = "Bullet"

answerB[24] = "Vegemite"

answerB[25] = "Weet-a-Bix"

answerB[26] = "Westpac"

answerB[27] = "Trapeziod"

answerB[28] = "Swimming Australia"

answerB[29] = "Slushy"

answerB[30] = "7 is the Magic Number"

answerB[31] = "Hungry Jacks"

answerB[32] = "Harvey Norman"

answerB[33] = "Zebra Collection"

answerB[34] = "Shipping Down Under"

answerB[35] = "Cricket"



answerC = new Array()

answerC[1] = "Smart Drycleaners"

answerC[2] = "Diva"

answerC[3] = "Linked In"

answerC[4] = "Football"

answerC[5] = "Ikea"

answerC[6] = "Kapow"

answerC[7] = "What's On"

answerC[8] = "Billabong"

answerC[9] = "Jenny Jungs"

answerC[10] = "Feefee"

answerC[11] = "My Car"

answerC[12] = "Playtime"

answerC[13] = "Kingdom of Flowers"

answerC[14] = "Commonwealth Bank"

answerC[15] = "Ball and Bat"

answerC[16] = "Nikelodean"

answerC[17] = "Tip Top Bakery"

answerC[18] = "Pumkin Pie"

answerC[19] = "Qantas"

answerC[20] = "Billabong"

answerC[21] = "Stamp"

answerC[22] = "Nail Polish co."

answerC[23] = "Melbourne Darts"

answerC[24] = "Marmalade"

answerC[25] = "Weet-Bix"

answerC[26] = "Westpack United"

answerC[27] = "Telstra"

answerC[28] = "Dont Harm Sea Creatures"

answerC[29] = "Ice Pee"

answerC[30] = "7/11"

answerC[31] = "Burger King"

answerC[32] = "HYN"

answerC[33] = "David Jones"

answerC[34] = "Fly Bys"

answerC[35] = "National Bowling"



answerD = new Array()

answerD[1] = "Keep it Green"

answerD[2] = "Paul's Icecream"

answerD[3] = "Mr Wong's Noodles"

answerD[4] = "Yanki Doodle"

answerD[5] = "Supre"

answerD[6] = "World Wide Web"

answerD[7] = "Off On"

answerD[8] = "Beach Republic"

answerD[9] = "Jeremy Jones"

answerD[10] = "Fosters"

answerD[11] = "My Jeans"

answerD[12] = "Welcome Services"

answerD[13] = "Pink Love"

answerD[14] = "Black and Yellow"

answerD[15] = "Australian Open"

answerD[16] = "Crayons for Kids"

answerD[17] = "Carnivore"

answerD[18] = "Pumkin Patch"

answerD[19] = "Todlers Play Time"

answerD[20] = "Jumper"

answerD[21] = "Smiggle"

answerD[22] = "Officeworks"

answerD[23] = "Target"

answerD[24] = "Jam"

answerD[25] = "Shredded Weaticles"

answerD[26] = "Wave Central"

answerD[27] = "Text Telicom"

answerD[28] = "Melbourne Aquarium"

answerD[29] = "Coldee"

answerD[30] = "Seventeen Again"

answerD[31] = "Chips Chips Chips"

answerD[32] = "Harvey Davidson"

answerD[33] = "Banks and Money"

answerD[34] = "Catch That Kid"

answerD[35] = "Country Cotton"



rightAnswer = new Array

rightAnswer[1] = "a"

rightAnswer[2] = "c"

rightAnswer[3] = "b"

rightAnswer[4] = "b"

rightAnswer[5] = "d"

rightAnswer[6] = "a"

rightAnswer[7] = "b"

rightAnswer[8] = "c"

rightAnswer[9] = "b"

rightAnswer[10] = "d"

rightAnswer[11] = "a"

rightAnswer[12] = "b"

rightAnswer[13] = "a"

rightAnswer[14] = "c"

rightAnswer[15] = "d"

rightAnswer[16] = "b"

rightAnswer[17] = "a"

rightAnswer[18] = "d"

rightAnswer[19] = "c"

rightAnswer[20] = "b"

rightAnswer[21] = "d"

rightAnswer[22] = "a"

rightAnswer[23] = "d"

rightAnswer[24] = "b"

rightAnswer[25] = "c"

rightAnswer[26] = "b"

rightAnswer[27] = "c"

rightAnswer[28] = "b"

rightAnswer[29] = "a"

rightAnswer[30] = "c"

rightAnswer[31] = "b"

rightAnswer[32] = "b"

rightAnswer[33] = "c"

rightAnswer[34] = "a"

rightAnswer[35] = "b"



hint = new Array()

hint[1] = "famous department store"

hint[2] = "famous trinket store"

hint[3] = "famous television..."

hint[4] = "famous footy game"

hint[5] = "famous stationary store"

hint[6] = "famous department store"

hint[7] = "famous womens clothing store"

hint[8] = "famous outdoor/surf clothing store"

hint[9] = "famous jean and casual clothing store"

hint[10] = "famous beer brand"

hint[11] = "famous department store"

hint[12] = "famous bank"

hint[13] = "famous donut shop"

hint[14] = "famous bank"

hint[15] = "famous tennis event"

hint[16] = "famous electronic store"

hint[17] = "famous bakery"

hint[18] = "famous kids clothing store"

hint[19] = "famous airline"

hint[20] = "famous brand"

hint[21] = "famous stationary brand"

hint[22] = "famous clothing brand for girls"

hint[23] = "famous department store"

hint[24] = "famous thing to spread on toast"

hint[25] = "famous cereal"

hint[26] = "famous bank"

hint[27] = "famous phone company"

hint[28] = "famous sport in australia"

hint[29] = "famous drink sold at 7/11"

hint[30] = "famous convenient store"

hint[31] = "famous burger shop"

hint[32] = "famous electronic store"

hint[33] = "famous department store"

hint[34] = "famous place to send mail"

hint[35] = "famous australian sport"



}



function nextQuestion(form)

{

//set the total number of logos equal to endtest

var endtest = eval(35 * 1);

checkAnswer(form);



if(form.questNo.value == endtest) {

form.question.value = "";

form.choiceA.value = "";

form.choiceB.value = "";

form.choiceC.value = "";

form.choiceD.value = "";

form.yourChoice.value = "";

form.total.value="0";

form.results.value = "End of test. Your results are listed below.";

} else {

if(form.questNo.value == "")

{

form.questNo.value = 1;

form.total.value="0";

}

else {

form.questNo.value = eval(form.questNo.value) + 1;

form.total.value=form.questNo.value;

}

form.logo.src = logo[form.questNo.value];

form.choiceA.value = answerA[form.questNo.value];

form.choiceA.disabled=true;

form.choiceB.value = answerB[form.questNo.value];

form.choiceB.disabled=true;

form.choiceC.value = answerC[form.questNo.value];

form.choiceC.disabled=true;

form.choiceD.value = answerD[form.questNo.value];

form.choiceD.disabled=true;

form.yourChoice.value = "";

form.yourChoice.focus();

form.results.value = "";

form.results.disabled=true;

if(form.myScore.value == "") {form.myScore.value = 0; } else {

form.myScore.value = form.myScore.value; }

}

}



function checkAnswer(form)

{

var myScore = 0;

var avgscore = 0;

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."; }

else if(form.yourChoice.value.toLowerCase() == rightAnswer[form.questNo.value]) {

form.myScore.value = eval(form.myScore.value) + eval(1);



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." }



if (form.myScore.value==0)

{form.percent.value=0}

else{

avgscore = form.myScore.value / form.questNo.value;

form.percent.value = parseInt(avgscore * 100,10);

if(avgscore > .90) {form.grade.value = "A"; } else if(avgscore > .75) {form.grade.value = "B"; } else if(avgscore > .60) {form.grade.value = "C"; } else if(avgscore > .40) {form.grade.value = "D"; } else {form.grade.value = "F"; }

form.total.value=form.questNo.value;

}}



function clearForm(form)

{

form.questNo.value = "";

form.question.value = "";

form.choiceA.value = "";

form.choiceB.value = "";

form.choiceC.value = "";

form.choiceD.value = "";

form.yourChoice.value = "";

form.results.value = "";

form.myScore.value = "";

form.percent.value = "";

form.grade.value = "";

}

<!-- done hiding from old browsers -->

</script>



</head>

<body bgcolor="#A0522D" onLoad="init()">

<form method="POST">

<div align="center"><center><table BORDER="1" width="700px">

<tr>

<td COLSPAN="2" BGCOLOR="#339933">

<div align="center"><center><p>

<font SIZE="+10" COLOR="#FFCC00">Aussie logo test</font></td>

</tr>

<tr>

<td COLSPAN="2" BGCOLOR="#FFCC00"><div align="center"><center><marquee><p>

<font SIZE="-1" COLOR="#339933">2012

<a HREF="http://www.facebook.com/mingbourne">Ming Bourne Development Services</a> All Rights Reserved.</font></p></marquee>

</center></div><div align="center"><center><p><font COLOR="#339933"><p id="hellotxt"></p>

Click the &quot;<b>Next Question</b>&quot; button to start test.

</br>In order to get credit for each right answer, be sure to click on the

&quot;<b>Check your answer</b>&quot; button </br>before going on to the next question.</font> </td>

</tr>

<tr bgcolor="white">

<td ALIGN="RIGHT"><b>Logo&nbsp;#:</b></td>

<td ALIGN="LEFT"><input TYPE="TEXT" NAME="questNo" SIZE="4"></td>

</tr>

<tr bgcolor="white">

<td ALIGN="RIGHT"><b>Logo:</b></td>

<td height=305px><div align="center"><center><p>

<img src="[[@./logos/australia.jpg]]" width="300px" height="300px" TYPE="IMAGE" NAME="logo">

</td>

</tr>

<tr bgcolor="white">

<td ALIGN="RIGHT"><b>a)</b></td>

<td><div align="center"><center><p><input TYPE="TEXT" NAME="choiceA" SIZE="75"></td>

</tr>

<tr bgcolor="white">

<td ALIGN="RIGHT"><b>b)</b></td>

<td><div align="center"><center><p><input TYPE="TEXT" NAME="choiceB" SIZE="75"></td>

</tr>

<tr bgcolor="white">

<td ALIGN="RIGHT"><b>c)</b></td>

<td><div align="center"><center><p><input TYPE="TEXT" NAME="choiceC" SIZE="75"></td>

</tr>

<tr bgcolor="white">

<td ALIGN="RIGHT"><b>d)</b></td>

<td><div align="center"><center><p><input TYPE="TEXT" NAME="choiceD" SIZE="75"></td>

</tr>

<tr bgcolor="white">

<td ALIGN="RIGHT"><b>Your choice:</b></td>

<td><input TYPE="TEXT" NAME="yourChoice" SIZE="4"></td>

</tr>

<tr bgcolor="white">

<td COLSPAN="2"><div align="center"><center><p>

<input TYPE="button" VALUE="Check your answer" onClick="checkAnswer(this.form)">

<input TYPE="button" VALUE="Next Question" onClick="nextQuestion(this.form)">

<input TYPE="reset" VALUE="Restart test" onClick="clearForm(this.form)"></td>

</tr>

<tr bgcolor="white">

<td ALIGN="RIGHT"><b>Results:</b></td>

<td><div align="center"><center><p><textarea COLS="70" ROWS="3" name="results"

wrap="virtual"></textarea></td>

</tr>

<tr bgcolor="white">

<td ALIGN="RIGHT"><b>Current Score:</b></td>

<td align="center"><b></b><input TYPE="TEXT" NAME="myScore" SIZE="4">&nbsp;<b>Points&nbsp;out&nbsp;of&nbsp;</B><input TYPE="TEXT" NAME="total" SIZE="4">&nbsp;<b>Percentage:</b><input

TYPE="TEXT" NAME="percent" SIZE="6">&nbsp;&nbsp;<b>Your Grade:</b><input TYPE="TEXT"

NAME="grade" SIZE="6"></td>

</tr>

</table>

</center></div>

</form>

</body>

</HTML>

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.
Screen Shot 2557-02-07 at 2.37.00 PM.png

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