Log in

View Full Version : Using textboxes...


musicgal3
11-24-2007, 10:38 AM
I am currently creating a quiz using radio boxes & textboxes. I have a score function, but I can only get it to work with the radio buttons - it doesn't seem to work on the textboxes. I was wondering if anyone can help? Here's my current code for the page:


<html>

<head>
<title>Terminology Test Quiz</title>

<script LANGUAGE="JavaScript">

<!--

var score = 0;

var string_1 = "con";

var string_2 = "1";

function ShowScore()
{
if (document.Quiz.Allegro[0].checked == true)
{
score = score + 1
}

if (document.Quiz.Pulses[2].checked == true)
{
score = score + 1
}

if (document.Quiz.With[string_1] == true)
{
score = score + 1
}

if (document.Quiz.Time_Terms[1].checked == true)
{
score = score + 1
}

if (document.Quiz.Minim[string_2] == true)
{
score = score + 1
}

alert("You got " + score + " out of 10 questions correct.");
forceReloadFromServer = true;
window.location.reload(forceReloadFromServer);
}

//-->

/this is for the quiz/

</script>

<style>
<!--
a:link {color: "#FFEDAF"}
a:visited {color: "#FFFFFF"}
a:active {text-decoration: none}
a:hover {color: "#EEEEEE"}
//-->
/this is to change to link colours/
</style>

<style>
<!--
BODY{
scrollbar-face-color:#000000;
scrollbar-arrow-color:#FFEDAF;
scrollbar-track-color:#FFEDAF;
scrollbar-shadow-color:'';
scrollbar-highlight-color:'';
scrollbar-3dlight-color:'';
scrollbar-darkshadow-Color:'';
}
-->
/this is to change the scrollbar colour/
</style>

</head>

<body bgcolor="#FFEDAF">

<center><table width="100%">
<tr>
<td colspan="2">
<table bgcolor="#000000" border="3" color="#000000">
<tr><td><a href="Index.html" alt="Home">Home</a>
<p><a href="Rhythms.html" alt="Rhythms">Basic Rhythms</a>
<p><a href="Signs & Terms.html" alt="Signs & Terms">Basic Signs & Terms</a>
<p><a href="Quiz.html" alt="Quiz">Test Quiz</a>
</td></tr></table>
</td>
<td><h1><font face="Elephant" color="#000000">Terminology <br>Test Quiz</font></h1></td>
</tr>
<center><table bgcolor="#000000" border="3" color="#000000">
<tr><td><h3><font face="Times New Roman" color="#FFEDAF">
<script LANGUAGE="JavaScript">
<!--
var YourName = prompt("What is your name?","");
document.write("Are you ready for the TEST QUIZ, " + YourName + "?")
//-->
</script>
</font></h3>
</td></tr>
<tr bgcolor="#FFEDAF"><td>
<form name="Quiz" action ="javascript:process()">
<h4>Question 1 - What is the meaning of the term <i>Allegro</i>?</h4>

<input type ="radio" name="Allegro" value = "Fast and Lively">Fast and Lively<br>
<input type ="radio" name="Allegro" value = "Extremely Fast">Extremely Fast<br>
<input type ="radio" name="Allegro" value = "Broadly">Broadly<br>
<input type ="radio" name="Allegro" value = "At an easy walking pace">At an easy walking pace<br><br>

<h4>Question 2 - How many pulses can be heard in 9/8 time?</h4>

<input type ="radio" name="Pulses" value = "1">1<br>
<input type ="radio" name="Pulses" value = "2">2<br>
<input type ="radio" name="Pulses" value = "3">3<br>
<input type ="radio" name="Pulses" value = "4">4<br><br>

<h4>Question 3 - What is the Italian for <i>'with'</i>?</h4>

<input type ="text" name="With"><br><br>

<h4>Question 4 - How many terms are used to describe Four-Four Time (apart from 'Four-Four')?</h4>

<input type ="radio" name="Time_Terms" value = "0">0<br>
<input type ="radio" name="Time_Terms" value = "2">2<br>
<input type ="radio" name="Time_Terms" value = "4">4<br>
<input type ="radio" name="Time_Terms" value = "5">5<br><br>

<h4>Question 5 - How many minim beats are there in a bar of Two-Four Time (in numerals)?</h4>

<input type ="text" name="Minim"><br><br>

<input type="button" name="score" value="Score" onclick="ShowScore()">
<input type="reset" value="Reset">
</form>
</td></tr>
</table></center>

<tr><td>

<form>
<!--
<select id="topics" onchange="top.location.href=this.options[this.selectedIndex].value;">
<option value ="Quiz.html" SELECTED>Please select a destination...</option>
<option value ="Index.html">Basic Music Terminology</option>
<option value ="Rhythms.html">Basic Rhythms</option>
<option value ="Signs & Terms.html">Basic Signs & Terms</option>
<option value ="Quiz.html">Test Yourself...</option>
</selected>
//-->
</form>

</td></tr>

</table></center>

</body>
</html>
jscheuer1
11-24-2007, 01:54 PM
I didn't fix all of the poor coding practices (particularly in the HTML portion), but I did get rid of many unnecessary comments, and turned things that weren't really comments, but meant to be, into valid comments. I used proper syntax for the style and script tags. And combined the two style sections.

Oh, and the score function now works:


<html>

<head>
<title>Terminology Test Quiz</title>
<script type="text/javascript">
function ShowScore(){
var string_1 = "con";
var string_2 = "1";
var score = 0, e=document.Quiz.elements;
if (e.Allegro[0].checked)
score++
if (e.Pulses[2].checked)
score++
if (e.With.value.toLowerCase()==string_1)
score++
if (e.Time_Terms[1].checked)
score++
if (e.Minim.value==string_2)
score++
alert("You got " + score + " out of 5 questions correct, " + YourName + ".");

window.location.reload(true);
}
</script>


<style type="text/css">

a:link {color: "#ffedaf"}
a:visited {color: "#ffffff"}
a:active {text-decoration: none}
a:hover {color: "#eeeeee"}

/*this is to change to link colours*/

body {
background-color:#ffedaf;
color:black;
scrollbar-face-color:#000000;
scrollbar-arrow-color:#ffedaf;
scrollbar-track-color:#ffedaf;
scrollbar-shadow-color:'';
scrollbar-highlight-color:'';
scrollbar-3dlight-color:'';
scrollbar-darkshadow-color:'';
}

/*this is to change the scrollbar colour*/

</style>

</head>

<body>

<center><table width="100%">
<tr>
<td colspan="2">
<table bgcolor="#000000" border="3" color="#000000">
<tr><td><a href="Index.html" alt="Home">Home</a>
<p><a href="Rhythms.html" alt="Rhythms">Basic Rhythms</a>
<p><a href="Signs & Terms.html" alt="Signs & Terms">Basic Signs & Terms</a>
<p><a href="Quiz.html" alt="Quiz">Test Quiz</a>
</td></tr></table>
</td>
<td><h1><font face="Elephant" color="#000000">Terminology <br>Test Quiz</font></h1></td>
</tr>
<center><table bgcolor="#000000" border="3" color="#000000">
<tr><td><h3><font face="Times New Roman" color="#FFEDAF">
<script type="text/javascript">

var YourName = prompt("What is your name?","");
document.write("Are you ready for the TEST QUIZ, " + YourName + "?")

</script>
</font></h3>
</td></tr>
<tr bgcolor="#FFEDAF"><td>
<form name="Quiz" action ="javascript:process()">
<h4>Question 1 - What is the meaning of the term <i>Allegro</i>?</h4>

<input type ="radio" name="Allegro" value = "Fast and Lively">Fast and Lively<br>
<input type ="radio" name="Allegro" value = "Extremely Fast">Extremely Fast<br>
<input type ="radio" name="Allegro" value = "Broadly">Broadly<br>
<input type ="radio" name="Allegro" value = "At an easy walking pace">At an easy walking pace<br><br>

<h4>Question 2 - How many pulses can be heard in 9/8 time?</h4>

<input type ="radio" name="Pulses" value = "1">1<br>
<input type ="radio" name="Pulses" value = "2">2<br>
<input type ="radio" name="Pulses" value = "3">3<br>
<input type ="radio" name="Pulses" value = "4">4<br><br>

<h4>Question 3 - What is the Italian for <i>'with'</i>?</h4>

<input type ="text" name="With"><br><br>

<h4>Question 4 - How many terms are used to describe Four-Four Time (apart from 'Four-Four')?</h4>

<input type ="radio" name="Time_Terms" value = "0">0<br>
<input type ="radio" name="Time_Terms" value = "2">2<br>
<input type ="radio" name="Time_Terms" value = "4">4<br>
<input type ="radio" name="Time_Terms" value = "5">5<br><br>

<h4>Question 5 - How many minim beats are there in a bar of Two-Four Time (in numerals)?</h4>

<input type ="text" name="Minim"><br><br>

<input type="button" name="score" value="Score" onclick="ShowScore()">
<input type="reset" value="Reset">
</form>
</td></tr>
</table></center>

<tr><td>

<form>

<select id="topics" onchange="top.location.href=this.options[this.selectedIndex].value;">
<option value ="Quiz.html" SELECTED>Please select a destination...</option>
<option value ="Index.html">Basic Music Terminology</option>
<option value ="Rhythms.html">Basic Rhythms</option>
<option value ="Signs & Terms.html">Basic Signs & Terms</option>
<option value ="Quiz.html">Test Yourself...</option>
</select>

</form>

</td></tr>

</table></center>

</body>
</html>
musicgal3
11-25-2007, 05:06 AM
This helps a lot. Thankyou x infinity! :)