Hello,
I am a new Computer Science student and I am having a hard time working on an at home practice exercise meant to help me better learn html coding. Most of it is set up and I am to practice writing the coding for 7 specifications and rules set for this game. I have little to none experience in html coding and I know what is supposed to be accomplished (it’s stated as notes in the middle of the code) but I honestly don’t even know how to start trying it. Here is the program code :
<HTML>
<HEAD><TITLE>GridSquares</TITLE></HEAD>
<SCRIPT>
function getBoardSquareColor(row, col)
{
grid = document.getElementById("gridTable");
cell = grid.rows[row].cells[col];
return cell.style.backgroundColor;
}
function passTestBoards()
{
generateBoard(["teal", "blue", "green", "orange", "gold", "yellow", "blue", "teal",
"gold", "gold","gold", "gold","gold", "gold","gold", "gold",
"red", "red", "red", "red", "black", "black", "black", "black",
"gold", "gold","gold", "gold","gold", "gold","gold", "gold",
"gold", "gold","gold", "gold","gold", "gold","gold", "gold",
"gold", "gold","gold", "gold","gold", "gold","gold", "gold",
"gold", "gold","gold", "gold","gold", "gold","gold", "gold",
"teal", "silver", "gold", "gold", "gold", "gold", "gold", "teal"]);
if(!isGoodBoard())
{
alert("Does not accept board that's okay.");
return false;
}
generateBoard(["teal", "blue", "green", "orange", "gold", "yellow", "blue", "teal",
"gold", "gold","gold", "gold","gold", "gold","gold", "gold",
"red", "red", "red", "red", "black", "black", "black", "black",
"gold", "gold","gold", "gold","gold", "gold","gold", "gold",
"gold", "gold","white", "gold","gold", "gold","gold", "gold",
"gold", "gold","gold", "gold","gold", "gold","gold", "gold",
"gold", "gold","gold", "gold","gold", "gold","gold", "gold",
"teal", "silver", "gold", "gold", "gold", "gold", "gold", "teal"]);
if(isGoodBoard())
{
alert("Does not check test 1 correctly.");
//return false;
}
generateBoard(["teal", "blue", "green", "orange", "gold", "yellow", "blue", "teal",
"gold", "gold","gold", "gold","gold", "gold","gold", "gold",
"red", "red", "red", "red", "black", "black", "black", "red",
"gold", "gold","gold", "gold","gold", "gold","gold", "gold",
"gold", "gold","red", "gold","gold", "gold","gold", "gold",
"gold", "gold","gold", "gold","gold", "gold","gold", "gold",
"gold", "gold","gold", "gold","gold", "gold","gold", "gold",
"teal", "silver", "gold", "gold", "gold", "gold", "gold", "teal"]);
if(isGoodBoard())
{
alert("Does not check test 2 correctly.");
//return false;
}
generateBoard(["teal", "blue", "green", "orange", "gold", "yellow", "blue", "orange",
"gold", "gold","gold", "gold","gold", "gold","gold", "gold",
"red", "red", "red", "red", "black", "black", "black", "black",
"gold", "gold","gold", "gold","gold", "gold","gold", "gold",
"gold", "gold","gold", "gold","gold", "gold","gold", "gold",
"gold", "gold","gold", "gold","gold", "gold","gold", "gold",
"gold", "gold","gold", "gold","gold", "gold","gold", "gold",
"teal", "silver", "gold", "gold", "gold", "gold", "gold", "teal"]);
if(isGoodBoard())
{
alert("Does not check test 3 correctly.");
//return false;
}
generateBoard(["teal", "blue", "green", "orange", "gold", "yellow", "blue", "teal",
"gold", "gold","gold", "gold","gold", "gold","gold", "gold",
"red", "red", "black", "red", "black", "black", "black", "black",
"gold", "gold","gold", "gold","gold", "gold","gold", "gold",
"gold", "gold","gold", "gold","gold", "gold","gold", "gold",
"gold", "gold","gold", "gold","gold", "gold","gold", "gold",
"gold", "gold","gold", "gold","gold", "gold","gold", "gold",
"teal", "silver", "gold", "gold", "gold", "gold", "gold", "teal"]);
if(isGoodBoard())
{
alert("Does not check test 4 correctly.");
//return false;
}
generateBoard(["teal", "blue", "blue", "blue", "blue", "blue", "blue", "teal",
"gold", "gold","gold", "gold","gold", "gold","gold", "gold",
"red", "red", "red", "red", "black", "black", "black", "black",
"gold", "gold","gold", "gold","gold", "gold","gold", "gold",
"gold", "gold","gold", "gold","gold", "gold","green", "green",
"gold", "gold","gold", "gold","gold", "gold","gold", "gold",
"gold", "gold","gold", "gold","gold", "gold","green", "green",
"teal", "silver", "gold", "gold", "gold", "gold", "gold", "teal"]);
if(!isGoodBoard())
{
alert("Does not accept board that's okay.");
//return false;
}
}
function isGold(rgbColor)
{
return rgbColor == "rgb(255, 215, 0)";
}
function isWhite(rgbColor)
{
return rgbColor == "rgb(255, 255, 255)" || rgbColor.search(/white/i) != -1;
}
function isBlack(rgbColor)
{
return rgbColor == "rgb(0, 0, 0)" || rgbColor.search(/black/i) != -1;
}
function isRed(rgbColor)
{
return rgbColor == "rgb(255, 0, 0)" || rgbColor.search(/red/i) != -1;
}
function isBlue(rgbColor)
{
return rgbColor == "rgb(0, 0, 255)" || rgbColor.search(/blue/i) != -1;
}
function isOrange(rgbColor)
{
return rgbColor == "rgb(255, 165, 0)" || rgbColor.search(/orange/i) != -1;
}
function isGoodBoard()
{
// CODE FOR TEST 1 BELOW: All grid squares should have a nonwhite color - return false if not before test 2
// CODE FOR TEST 2 BELOW: Some border square should be black. - return false otherwise before test 3
// CODE FOR TEST 3 BELOW: All corner grid squares should be the same color - return false otherwise before test 4
// CODE FOR TEST 4 BELOW: There should exist at least four grid squares that are red. - return false otherwise before test 5
// CODE FOR TEST 5 BELOW: No matter what grid square is chosen, there should be a neighboring one (horizontally, vertically, or diagonally) that's gold. - return false otherwise before test 6
// CODE FOR TEST 6 BELOW: If there's an orange square on the board, then there will need to be a blue square as well. (But the board can have a blue square without having an orange one.) - return false otherwise before test 7
// CODE FOR TEST 7 BELOW: There needs to exist a square whose color is different from every other square's color. - return false otherwise
return true;
}
function generateRandomColor()
{
return "#" + Math.floor(Math.random()*Math.pow(256,3)).toString(16);
}
function generateBoard(boardColors)
{
var grid = document.getElementById("gridTable");
var numOfRows = grid.rows.length;
var numOfCols = 8;
var numOfSpecifiedColors = boardColors.length;
var index = 0;
var r;
var c;
for(r = 0; r < numOfRows; r++)
{
for(c = 0; c < numOfCols; c++)
{
cell = grid.rows[r].cells[c];
if(index < numOfSpecifiedColors)
cell.style.backgroundColor = boardColors[index];
else
cell.style.backgroundColor = generateRandomColor();
index++;
//cell.style.backgroundColor = "gold";
}
}
//alert(isGold(getBoardSquareColor(0, 0)));
}
</SCRIPT>
<BODY BGCOLOR = "#FFFFFF">
<TABLE BORDER = "1">
<TR>
<TD>
<TABLE BORDER = "1" CELLPADDING = "1" id = "gridTable">
<TR>
<TD HEIGHT = "50" WIDTH = "50" onClick = "alert(this.cellIndex)"></TD>
<TD HEIGHT = "50" WIDTH = "50" onClick = "alert(this.cellIndex)"></TD>
<TD HEIGHT = "50" WIDTH = "50"></TD>
<TD HEIGHT = "50" WIDTH = "50"></TD>
<TD HEIGHT = "50" WIDTH = "50"></TD>
<TD HEIGHT = "50" WIDTH = "50"></TD>
<TD HEIGHT = "50" WIDTH = "50"></TD>
<TD HEIGHT = "50" WIDTH = "50"></TD>
</TR>
<OL>
<LI>All grid squares should have a nonwhite color.
<LI>Some border square should be black.
<LI>All corner grid squares should be the same color.
<LI>There should exist at least four grid squares that are red.
<LI>No matter what grid square is chosen, there should be a neighboring one (horizontally, vertically, or diagonally) that's gold.
<LI>If there's an orange square on the board, then there will need to be a blue square as well. (But the board can have a blue square without having an orange one.)
<LI>There needs to exist a square whose color is different from every other square's color.
As you can see towards the middle is the comments where the code for tests 1-7 are supposed to go. As I mentioned before, I am having a hard time even starting because I am not too familiar with the terms and functions needed to even start the process of testing them. Any help/guidance/tips on how to write a code like that would be very much appreciated. Thank you!