Hey guys, I am new to HTML coding and have been practicing making a dot race, like the ones you see on scoreboards and stuff. I am struggling with it and would really appreciate it if someone could help me with what I already have coded.
<html>
<!--Description: Implementation of the "Dot Races" popular at sporting events.
This implementation has two dots that race down a track that has a length defined by the user.
-->
<head>
<title>Online Dot Race</title>
<script type = "text/javascript" src="DotFunctions.js">
</script>
<script type="text/javascript">
// ---------------
function TakeStep(p_RaceLength, p_Location)
// ---------------
// This function is designed to calculate a new location for one "generic" dot.
// Assumptions: p_RaceLength and p_Location are numbers
// Results: returns a new location that is 1, 2, or 3 steps more
{
}
// ---------------
function DisplayTrackArea(p_RaceLength, p_Red, p_Blue)
// ---------------
// Assumptions: all parameters are valid numbers
// Results: all locations are displayed and the track is updated
{
document.getElementById("t_RedTrack").value = CreateTrack(p_RaceLength, p_Red);
document.getElementById("s_RedDot").innerHTML = p_Red;
document.getElementById("t_BlueTrack").value = CreateTrack(p_RaceLength, p_Blue);
document.getElementById("s_BlueDot").innerHTML = p_Blue;
if
// need code here...
}
// ---------------
function DisplayResults(p_RedWins, p_BlueWins, p_Ties, p_Races)
// ---------------
// Assumptions: all parameters are valid numbers
// Results: all statistics are displayed in their text boxes
{
document.getElementById("s_Races").innerHTML = p_Races;
// need code here...
}
</script>
</head>
<body style="text-align: center">
<!-- ******************** -->
<!--
Race start area
-->
<!-- ******************** -->
<h1>
Online Dot Race
</h1>
<hr size='10' noshade>
<p>
Race Length:
<input id="t_Length" type="text" size="2" value="20" />
</p>
<p>
<input id="b_StartRace" type="button" value="Start a New Race" onclick="
" />
</p>
<hr />
<!-- ******************** -->
<!--
Race track area
-->
<!-- ******************** -->
<p>
<input id="t_RedTrack" type="text" size="21" style="color: White; font-weight: bold;
font-family: Courier New; background-color: Red" />
<span id="s_RedDot">0</span>
</p>
<p>
<input id="t_BlueTrack" type="text" size="21" style="color: White; font-weight: bold;
font-family: Courier New; background-color: Blue" />
<span id="s_BlueDot">0</span>
</p>
<p>
<input id="b_TakeStep" type="button" value="Take a Step" onclick="
// Add code here...
" />
</p>
<hr />
<!-- ******************** -->
<!--
Results area
-->
<!-- ******************** -->
<h2>
Results
</h2>
<p>
Total Races: <span id="s_Races">0</span>
</p>
<p>
<input id="t_RedWins" type="text" size="5" style="color: White; font-weight: bold; background-color: Red; text-align:center" />
<input id="t_Ties" type="text" size="5" style="color: White; font-weight: bold; background-color: Purple; text-align:center" />
<input id="t_BlueWins" type="text" size="5" style="color: White; font-weight: bold; background-color: Blue; text-align:center" />
</p>
<!-- ******************** -->
<!--
Initialization (Placed here so the page has been rendered. This avoids a "null" error.
-->
<!-- ******************** -->
<script type="text/javascript">
// Initialization
function InitCounters()
{
t_Length = 20;
RaceLength = 20;
Red = 0;
Blue = 0;
}
// need code here...
DisplayResults(RedWins, BlueWins, Ties, Races);
</script>
</body>
</html>
