Project

You need to create an interactive website application that makes use of some, several of the techniques covered over the last few weeks. You may choose to extend your knowledge, as well as, make use of any available tutorials / resources at your disposal (reference appropriately).
Step 1 is to create a new post on your blog "Interactive application" and post your project ideas. Then you may start working on your project.

Assessment



Some possible ideas

Fortune telling, multiple choice quizzes, story telling, intelligence tests, maths quizzes, weather predictions etc.
Below are a couple of examples.

Intelligence Quiz



<!DOCTYPE html>

<script>

function testIQ(){
var testIQ
var ritAns
var userAns
var score = 0

var start = new Date().getTime();

userAns = prompt("TRUE OR FALSE? the word 'slice' can be spelt out completely using the letters found in the word 'silence'");

ritAns = "true"

if (userAns == ritAns) {

score = score + 1

}

end question 1
userAns = prompt("TRUE OR FALSE? If Johnny has 16 apples and 2 thirds of an apple, it is the same as him having 48/3 apples");

ritAns = "false"

if (userAns == ritAns){

score = score + 1

}

end question 2
userAns = prompt("TRUE OR FALSE? If I write 'WETYKN' with tooth picks, I will need 19 toothpicks")

ritAns = "true"

if (userAns == ritAns) {

score = score + 1

}

end question 3
userAns = prompt("TRUE OR FALSE? It will take John 38 minutes to to get to school if his school is 534 metres away and he goes at a speed of 14 metres per minute")

ritAns = "false"

if (userAns == ritAns) {

score = score + 1

}

end question 4
userAns = prompt("TRUE OR FALSE? Two ducks and 2 dogs have a total of fourteen legs")

ritAns = "false"

if (userAns == ritAns) {

score = score + 1

}

end question 5


switch(score)

{

case 0:

alert("Your score is: " + score + ". No comment.");

break;

case 1:

alert("Your score is: " + score + ". Consider professional help.");

break;

case 2:

alert("Your score is: " + score + ". Alright...");

break;

case 3:

alert("Your score is: " + score + ". Not Bad");

break;

case 4:

alert("Your score is: " + score + ". Good!");

break;

case 5:

alert("Your score is: " + score + ". Great!");

break;

default:

alert("Error")

}
var end = new Date().getTime();

var time = end - start;

alert('And you took: ' + time + ' miliseconds to complete the task!');
var ovrAll

ovrAll = time / 2 + score

alert("Overall, your score intelligence level is: " + ovrAll + "! Remember, the higher this score, the smarter you are.")

}
</script>

</head>

<head
<body>

<div id="container" style="width:100%">
<div id="header" style="background-color:Deepskyblue;height10:px;width:1500px;float:top;">

<h1 style="margin-bottom:30;"><center>MY IQ!</center></h1></div>
<div id="menu" style="background-color:Lightcyan;height:1000px;width:200px;float:left;"><br />

<br />

<br />



</script>

</head>
<body>

<center>

</center>

<hr>
</div>
<div id="content" style=background-color:"White";height:1000px;width:1500px;float:left;">

<center>

</div>

<center><title>Want to know more about your mind?</title></center>

<header><center><font size=6 face="arial" color="Darkblue">Want to know more about your mind?</font></center></header>
<br />

<marquee></marquee>


<center><input type = button

value = "click to begin the test! :)"

onClick = testIQ()></center>


<br />

<br />

<br />

<center><text><font size=4 color="Darkgreen"><b> What is My IQ? </b></font></text></center>

<br />

<br />

<center><text>My IQ is a place where you can test yourself, have fun with your friends</text></center>
<center><text>and learn! you will be tested on a series of intelligence types: mathematical, verbal,</text></center>
<center><text>spacial awareness. You will answer a set of 20 questions regarding these topics. </text></center>
<center><text>Following this, you will receive a score based purely on how well you did on our test! </text></center>
<center><text>Have fun and enjoy learning here at MyIQ! :)</text></center>
<br />

</body>

</html>




Multiple Choice Quizz

Note: You would need to create a separate folder which includes all of the logos referred to in the code

<HTML><head><title>Quiz</title>

<script LANGUAGE="JavaScript">
<!-- hide this script tag's contents from old browsers --->

function welcome()
{
var x;
var name=prompt("Please enter your name"," ");
if (name!=null)
{
x="<p>Hello " + name + "! Welcome to my Quiz - 5 questions</p>";
document.getElementById("hellotxt").innerHTML=x;
}
}

function init()
{
welcome()
logo = new Array()
logo[1] = "./images/keyboard.jpg"
logo[2] = "./logos/diva.png"
logo[3] = "./logos/abc.png"
logo[4] = "./logos/afledit.png"
logo[5] = "./logos/supreedit.png"


answerA = new Array()
answerA[1] = "Keyboard"
answerA[2] = "Pink love"
answerA[3] = "United Together"
answerA[4] = "NFL"
answerA[5] = "Grande"


answerB = new Array()
answerB[1] = "Mouse"
answerB[2] = "Heart Foundation"
answerB[3] = "ABC"
answerB[4] = "AFL"
answerB[5] = "Plate"

answerC = new Array()
answerC[1] = "Webcam"
answerC[2] = "Diva"
answerC[3] = "Linked In"
answerC[4] = "Football"
answerC[5] = "Ikea"

answerD = new Array()
answerD[1] = "Printer"
answerD[2] = "Paul's Icecream"
answerD[3] = "Mr Wong's Noodles"
answerD[4] = "Yanki Doodle"
answerD[5] = "Supre"

rightAnswer = new Array
rightAnswer[1] = "a"
rightAnswer[2] = "c"
rightAnswer[3] = "b"
rightAnswer[4] = "b"
rightAnswer[5] = "d"


hint = new Array()
hint[1] = "fit's something you use to type"
hint[2] = "famous trinket store"
hint[3] = "famous television..."
hint[4] = "famous footy game"
hint[5] = "famous stationary store"

}

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="#009999">
<div align="center"><center>

<p><font color="#FFCC00" size="+10">Quiz</font></td>
</tr>
<tr>
<td COLSPAN="2" BGCOLOR="#CC9999"><div align="center"><center><marquee>

<p><font color="#339933" size="-1">Some text here</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 the 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>