This message was edited by xingzai at 2006-4-19 3:31:50
We're supposed to do a Typing game on how to learn to speed type using Javascript.
The colour of the keyboard will blink when typed.When the user types wrongly,it will blink another colour with a *beep sound.and the wrong character will not appear.
** this is the code that we found and edited but it can only show the blinking of the key whenever we type but it can't detect whether its wrong or not**
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Test</title>
<script language="javascript1.1">
promptClear = ""
// Clears the prompt line
</script>
<SCRIPT language=JavaScript>
// Creates 30 "new" arrays.
// Each array is one prompt line.
//
dataSet1 = new Array()
dataSet2 = new Array()
dataSet3 = new Array()
dataSet4 = new Array()
dataSet5 = new Array()
dataSet6 = new Array()
dataSet7 = new Array()
dataSet8 = new Array()
dataSet9 = new Array()
dataSet10 = new Array()
</SCRIPT>
<script language="javascript1.1">
function evaluatePrompt(){
if (promptNumber < 1 ) {
promptNumber = 1;
}
if (promptNumber > 10 ) {
promptNumber = 10;
}
if (promptNumber == 1) {
promptForm.promptName.value = myLine1;
}
if (promptNumber == 2) {
promptForm.promptName.value = myLine2;
}
if (promptNumber == 3) {
promptForm.promptName.value = myLine3;
}
if (promptNumber == 4) {
promptForm.promptName.value = myLine4;
}
if (promptNumber == 5) {
promptForm.promptName.value = myLine5;
}
if (promptNumber == 6) {
promptForm.promptName.value = myLine6;
}
if (promptNumber == 7) {
promptForm.promptName.value = myLine7;
}
if (promptNumber == 8) {
promptForm.promptName.value = myLine8;
}
if (promptNumber == 9) {
promptForm.promptName.value = myLine9;
}
if (promptNumber == 10) {
promptForm.promptName.value = myLine10;
}
promptForm.promptNumberForm.value = promptNumber;
promptForm.Sample.value = promptClear;
}
Qup = new Image();
Qup.src = "qup.gif";
Qdown = new Image();
Qdown.src = "qdown.gif";
Wup = new Image();
Wup.src = "wup.gif";
Wdown = new Image();
Wdown.src = "wdown.gif";
Eup = new Image();
Eup.src = "eup.gif";
Edown = new Image();
Edown.src = "edown.gif";
Rup = new Image();
Rup.src = "rup.gif";
Rdown = new Image();
Rdown.src = "rdown.gif";
Tup = new Image();
Tup.src = "tup.gif";
Tdown = new Image();
Tdown.src = "tdown.gif";
Yup = new Image();
Yup.src = "yup.gif";
Ydown = new Image();
Ydown.src = "ydown.gif";
Uup = new Image();
Uup.src = "uup.gif";
Udown = new Image();
Udown.src = "udown.gif";
Iup = new Image();
Iup.src = "iup.gif";
Idown = new Image();
Idown.src = "idown.gif";
Oup = new Image();
Oup.src = "oup.gif";
Odown = new Image();
Odown.src = "odown.gif";
Pup = new Image();
Pup.src = "pup.gif";
Pdown = new Image();
Pdown.src = "pdown.gif";
Aup = new Image();
Aup.src = "aup.gif";
Adown = new Image();
Adown.src = "adown.gif";
Sup = new Image();
Sup.src = "sup.gif";
Sdown = new Image();
Sdown.src = "sdown.gif";
Dup = new Image();
Dup.src = "dup.gif";
Ddown = new Image();
Ddown.src = "ddown.gif";
Fup = new Image();
Fup.src = "fup.gif";
Fdown = new Image();
Fdown.src = "fdown.gif";
Gup = new Image();
Gup.src = "gup.gif";
Gdown = new Image();
Gdown.src = "gdown.gif";
Hup = new Image();
Hup.src = "hup.gif";
Hdown = new Image();
Hdown.src = "hdown.gif";
Jup = new Image();
Jup.src = "jup.gif";
Jdown = new Image();
Jdown.src = "jdown.gif";
Kup = new Image();
Kup.src = "kup.gif";
Kdown = new Image();
Kdown.src = "kdown.gif";
Lup = new Image();
Lup.src = "lup.gif";
Ldown = new Image();
Ldown.src = "ldown.gif";
Colonup = new Image();
Colonup.src = "colonup.gif";
Colondown = new Image();
Colondown.src = "colondown.gif";
Zup = new Image();
Zup.src = "zup.gif";
Zdown = new Image();
Zdown.src = "zdown.gif";
Xup = new Image();
Xup.src = "xup.gif";
Xdown = new Image();
Xdown.src = "xdown.gif";
Cup = new Image();
Cup.src = "cup.gif";
Cdown = new Image();
Cdown.src = "cdown.gif";
Vup = new Image();
Vup.src = "vup.gif";
Vdown = new Image();
Vdown.src = "vdown.gif";
Bup = new Image();
Bup.src = "bup.gif";
Bdown = new Image();
Bdown.src = "bdown.gif";
Nup = new Image();
Nup.src = "nup.gif";
Ndown = new Image();
Ndown.src = "ndown.gif";
Mup = new Image();
Mup.src = "mup.gif";
Mdown = new Image();
Mdown.src = "mdown.gif";
Commaup = new Image();
Commaup.src = "commaup.gif";
Commadown = new Image();
Commadown.src = "commadown.gif";
Stopup = new Image();
Stopup.src = "stopup.gif";
Stopdown = new Image();
Stopdown.src = "stopdown.gif";
Spaceup = new Image();
Spaceup.src = "spaceup.gif";
Spacedown = new Image();
Spacedown.src = "spacedown.gif";
function press_Key(){
document.promptForm.Sample.focus();
// Displays the typed text in Text Box below the Prompt line.
//
// Flashes the pressed key on the keyboard graphic when
// the corresponding key is pressed.
//
if (event.keyCode == 81)
document.Qup.src = Qdown.src
if (event.keyCode == 87)
document.Wup.src = Wdown.src
if (event.keyCode == 69)
document.Eup.src = Edown.src
if (event.keyCode == 82)
document.Rup.src = Rdown.src
if (event.keyCode == 84)
document.Tup.src = Tdown.src
if (event.keyCode == 89)
document.Yup.src = Ydown.src
if (event.keyCode == 85)
document.Uup.src = Udown.src
if (event.keyCode == 73)
document.Iup.src = Idown.src
if (event.keyCode == 79)
document.Oup.src = Odown.src
if (event.keyCode == 80)
document.Pup.src = Pdown.src
if (event.keyCode == 65)
document.Aup.src = Adown.src
if (event.keyCode == 83)
document.Sup.src = Sdown.src
if (event.keyCode == 68)
document.Dup.src = Ddown.src
if (event.keyCode == 70)
document.Fup.src = Fdown.src
if (event.keyCode == 71)
document.Gup.src = Gdown.src
if (event.keyCode == 72)
document.Hup.src = Hdown.src
if (event.keyCode == 74)
document.Jup.src = Jdown.src
if (event.keyCode == 75)
document.Kup.src = Kdown.src
if (event.keyCode == 76)
document.Lup.src = Ldown.src
if (event.keyCode == 186)
document.Colonup.src = Colondown.src
if (event.keyCode == 90)
document.Zup.src = Zdown.src
if (event.keyCode == 88)
document.Xup.src = Xdown.src
if (event.keyCode == 67)
document.Cup.src = Cdown.src
if (event.keyCode == 86)
document.Vup.src = Vdown.src
if (event.keyCode == 66)
document.Bup.src = Bdown.src
if (event.keyCode == 78)
document.Nup.src = Ndown.src
if (event.keyCode == 77)
document.Mup.src = Mdown.src
if (event.keyCode == 188)
document.Commaup.src = Commadown.src
if (event.keyCode == 190)
document.Stopup.src = Stopdown.src
if (event.keyCode == 32)
document.Spaceup.src = Spacedown.src
}
document.onkeydown= press_Key
function release_Key(){
if (event.keyCode == 81)
document.Qup.src = Qup.src
if (event.keyCode == 87)
document.Wup.src = Wup.src
if (event.keyCode == 69)
document.Eup.src = Eup.src
if (event.keyCode == 82)
document.Rup.src = Rup.src
if (event.keyCode == 84)
document.Tup.src = Tup.src
if (event.keyCode == 89)
document.Yup.src = Yup.src
if (event.keyCode == 85)
document.Uup.src = Uup.src
if (event.keyCode == 73)
document.Iup.src = Iup.src
if (event.keyCode == 79)
document.Oup.src = Oup.src
if (event.keyCode == 80)
document.Pup.src = Pup.src
if (event.keyCode == 65)
document.Aup.src = Aup.src
if (event.keyCode == 83)
document.Sup.src = Sup.src
if (event.keyCode == 68)
document.Dup.src = Dup.src
if (event.keyCode == 70)
document.Fup.src = Fup.src
if (event.keyCode == 71)
document.Gup.src = Gup.src
if (event.keyCode == 72)
document.Hup.src = Hup.src
if (event.keyCode == 74)
document.Jup.src = Jup.src
if (event.keyCode == 75)
document.Kup.src = Kup.src
if (event.keyCode == 76)
document.Lup.src = Lup.src
if (event.keyCode == 186)
document.Colonup.src = Colonup.src
if (event.keyCode == 90)
document.Zup.src = Zup.src
if (event.keyCode == 88)
document.Xup.src = Xup.src
if (event.keyCode == 67)
document.Cup.src = Cup.src
if (event.keyCode == 86)
document.Vup.src = Vup.src
if (event.keyCode == 66)
document.Bup.src = Bup.src
if (event.keyCode == 78)
document.Nup.src = Nup.src
if (event.keyCode == 77)
document.Mup.src = Mup.src
if (event.keyCode == 188)
document.Commaup.src = Commaup.src
if (event.keyCode ==190)
document.Stopup.src = Stopup.src
if (event.keyCode == 32)
document.Spaceup.src = Spaceup.src
}
document.onkeyup= release_Key
</script>
<style fprolloverstyle>
A:hover {color: #FF0000}
body {
background-color: #000000;
}
.style1 {color: #FFFFFF}
</style>
<script LANGUAGE="JavaScript">
// This script allows the user to select the URL from a 'drop down' list.
function dropdownmenu(item)
{
window.location=item.options[item.selectedIndex].value;
// Make sure you type a capital "I" in selectIndex.
}
</script>
</head>
<SCRIPT language=JavaScript type=text/javascript>
// Loads the datSetX arrays into the myLine vaiables used as the prompts.
myLine1 = "aaaa ssss dddd ffff";
myLine2 = "jjjj kkkk llll ;;;;";
myLine3 = "ffff dddd ssss aaaa";
myLine4 = ";;;; llll kkkk jjjj";
myLine5 = "aass ddff jjkk ll;;";
myLine6 = "asas fdfd jkjk lklk";
myLine7 = "a;sl dkfj jfkd ls;a";
myLine8 = "qpwo eiru urie owpq";
myLine9 = "z.x, cmvn nvmc ,x.z";
myLine10 = "zznn xxmm cc,, vv..";
</SCRIPT>
<! The display and input line. >
<FORM name=promptForm>
<div align="left">
<INPUT size=75 name=promptName TEXT="InText">
<INPUT onclick="promptNumber--; evaluatePrompt();" type=button value=" < ">
<INPUT size=2 name=promptNumberForm TEXT="InText">
<INPUT onclick="promptNumber++; evaluatePrompt();" type=button value=" > ">
<INPUT size=75
name=Sample TEXT="InText">
<FONT face=Arial color=#008000 size=2>
<! Main table containing Keyboard. >
<table border="0" width="757" cellspacing="0" cellpadding="0" height="283">
</div>
<tr>
<td width="485" bordercolor="#000080" background="keyboard.gif" height="283">
<div align="left" class="style1">
<p> </p>
<p> </p>
</div>
<p align="center"> <img border="0" src="qup.gif" name = "Qup" width="38" height="37">
<img border="0" src="wup.gif" name = "Wup" width="38" height="37">
<img border="0" src="eup.gif" name = "Eup" width="38" height="37">
<img border="0" src="rup.gif" name = "Rup" width="38" height="37">
<img border="0" src="tup.gif" name = "Tup" width="38" height="37">
<img border="0" src="yup.gif" name = "Yup" width="38" height="37">
<img border="0" src="uup.gif" name = "Uup" width="38" height="37">
<img border="0" src="iup.gif" name = "Iup" width="38" height="37">
<img border="0" src="oup.gif" name = "Oup" width="38" height="37">
<img border="0" src="pup.gif" name = "Pup" width="38" height="37">
</p>
<p align="center">
<img border="0" src="aup.gif" name = "Aup" width="38" height="37">
<img border="0" src="sup.gif" name = "Sup" width="38" height="37">
<img border="0" src="dup.gif" name = "Dup" width="38" height="37">
<img border="0" src="fup.gif" name = "Fup" width="38" height="37">
<img border="0" src="gup.gif" name = "Gup" width="38" height="37">
<img border="0" src="hup.gif" name = "Hup" width="38" height="37">
<img border="0" src="jup.gif" name = "Jup" width="38" height="37">
<img border="0" src="kup.gif" name = "Kup" width="38" height="37">
<img border="0" src="lup.gif" name = "Lup" width="38" height="37">
<img border="0" src="colonup.gif" name = "Colonup" width="38" height="37"></p>
<p align="center">
<img border="0" src="zup.gif" name = "Zup" width="38" height="37">
<img border="0" src="xup.gif" name = "Xup" width="38" height="37">
<img border="0" src="cup.gif" name = "Cup" width="38" height="37">
<img border="0" src="vup.gif" name = "Vup"width="38" height="37">
<img border="0" src="bup.gif" name = "Bup" width="38" height="37">
<img border="0" src="nup.gif" name = "Nup" width="38" height="37">
<img border="0" src="mup.gif" name = "Mup" width="38" height="37">
<img border="0" src="commaup.gif" name = "Commaup" width="38" height="37">
<img border="0" src="stopup.gif" name = "Stopup" width="38" height="37">
</p>
<p align="center">
<img border="0" src="spaceup.gif" name ="Spaceup" width="352" height="31">
</p></td>
<script>
promptNumber = 1;
evaluatePrompt();
</script>
<FORM NAME = "2">
</FORM>
<p>
<script>
window.focus()
</script>
</html>
<html>
<head>
</p>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<p> </p>
</body>
</body>
</html>
**this is the editted code when we're putting the wrong picture for it to blink and using a while to check on the character whether it's wrong or not till the end of the sentence but whenever we put inside it can't work**
Stopup = new Image();
Stopup.src = "stopup.gif";
Stopdown = new Image();
Stopdown.src = "stopdown.gif";
Stopwrong = new Image();
Stopwrong.src = "stopwrong.gif";
Spaceup = new Image();
Spaceup.src = "spaceup.gif";
Spacedown = new Image();
Spacedown.src = "spacedown.gif";
Spacewrong = new Image();
Spacewrong.src = "spacebarwrong.gif";
myKeycode1[] = new array("65","65","65","65","32","83","83","83","83","32","68","68","68","68","32","70","70","70","70");
function evaluatePrompt(){
if (promptNumber == 1)
\\document.promptForm.promptNumber
{
int i=0;
while(i<20)
{
if(event.keyCode==mykeycode1[i])
{
}
else
{
function press_Key(){
if (event.keyCode == 81)
document.Qup.src = Qwrong.src
if (event.keyCode == 87)
document.Wup.src = Wwrong.src
if (event.keyCode == 69)
document.Eup.src = Ewrong.src
if (event.keyCode == 82)
document.Rup.src = Rwrong.src
if (event.keyCode == 84)
document.Tup.src = Twrong.src
if (event.keyCode == 89)
document.Yup.src = Ywrong.src
if (event.keyCode == 85)
document.Uup.src = Uwrong.src
if (event.keyCode == 73)
document.Iup.src = Iwrong.src
if (event.keyCode == 79)
document.Oup.src = Owrong.src
if (event.keyCode == 80)
document.Pup.src = Pwrong.src
document.onkeyup= release_Key
}
i=i+1;
}
}
}|
