CMSC 122 Fall XXXXXXXXXXProject 5
B-I-N-G-O
Due Date
December 14 by 11�30 PM
Assigned Points: 100
Objective
This project is to practice:
Event-Driven Programming
Functions
A
ays
Forms
Dynamic updates to web page elements (modifying attributes and "innerHTML")
To review HTML, CSS, and JavaScript features
Overview
For this project you will write a B-I-N-G-O game. You will use various HTML form elements to control the display of the
Bingo board (e.g., font, font color, and so on), and will use functions (1) to highlight called numbers on the board, (2) to
determine if a bingo is found, also (3) to highlight cells when there is a Bingo. You will complete three files -- p5.html,
p5.css, and p5.js. The initial web page will look like as seen in the screenshot below. You will render form elements using
HTML, and will use JavaScript code to render the Bingo board (use a table) dynamically.
The project folder includes two demonstration videos. Use the video to understand how your program should appear and
function.
This project is a comprehensive edition of the topics we have discussed this semester. Start working on the project as early
as possible. Office hours get busy during the few days before the project is due, and you may not get the help you need if
you wait too long. As always, we will not grant project extensions due to technical problems on your end.
Do not attempt to copy code from any sources. You must complete this project by yourself. We check the code similarity.
Students who are found to have collaborated on the project will be reported to the Office of Student Conduct for the
violation of academic dishonesty.
Requirements
Difference to the typical B-I-N-G-O game
Link p5.js at the bottom of the body in p5.html.
This is 1-dimensional version.
No free entry on the board
A number can appear multiple times.
Numbers in the board is between 1 and the board size. For example, if the size is 5, your program will only generate
andom numbers between 1 and 5 and use for the blocks on the board.
Form
Your HTML should render a form as seen in the screenshot.
It is allowed to use different colors for the three buttons in the screenshot and the text "Calls" below the board.
It is allowed to apply some spacing (i.e., padding or margin) between form elements and the boards. The baseline --
loading your HTML file should render a page that looks very similar to the screenshot.
Bingo Board Initialization
The bingo board will be initialized with numbers between 1 and the board size. For example, if the board size is set to
10 (the default), the board will contain numbers between 1 and 10, both inclusive. A number can appear multiple times
-- e.g., 9 and 3 in the screenshot.
The numbers on the board should be randomly generated whenever p5.html is reloaded -- by refreshing the tab in
the Chrome
owser.
Calling a Numbe
When the user clicks the Call button, your program must:
Generate a new random number between 1 and the board size, both inclusive and append the number to the Call-List
(below the board) as seen in the demonstration video.
When the called number is appended to the Call-List, the color of the new number should also be determined
andomly. You will generate a value between 0 and 255 for each of the red, green, and blue color and use the
generated values for the color for the number -- i.e., use rgb function to set the color.
Note that the colors of the numbers previously appended to the Call-List do not change. Consider appending the new
number to the innerHTML value of the HTML element used to contain the Call-List.
The board cell (or cells) that contains the called number should be highlighted by setting the background color of the
cell(s) to blue. Note that four corners of each cell is rounded.
Got a Bingo!!
We say that a bingo is found, when 5 or more consecutive cells are highlighted. If a bingo is found, you must:
Change the background color of the first five highlighted cells to magenta. (See the demonstration video.)
The text "Calls" below the board should be modified to show how many numbers are called -- e.g., 7 Calls. (See the
demonstration video.)
The three buttons should be hidden immediately after a bingo is found. Then, after 1.5 seconds, a bingo image
(bingo.svg) should be displayed in the area where three buttons were displayed, as seen in the demonstration
video. Use a CSS rule to display the image in the right position and size as seen in the demonstration.
Resetting the Bingo Game
If the user clicks the Reset button, you will reset the game and display the default display. In specific,
Board size text box should have 10.
The Red radio button should be checked.
The "Arial" font should be selected.
"20px" is selected.
The board should be rendered using the default color and the font choice -- the game is reset, so cells must not be
highlighted.
Radio Buttons for Colors
Make the radio button next to the text Red selected by default. This means that all numbers on the board should be
endered in red color.
The color of the numbers in the cells should change immediately when the user selects the radio button for green o
lue.
The user should not be allowed to check two or more radio buttons at any time.
Selection Box for Fonts
The font selected in the dropdown select box applies only to the numbers on the bingo board (not to any of the
controls).
The font for the numbers should change immediately when the user selects a font or font size in the dropdown boxes,
even though the user does not click the Update Bingo Board button.
Add three fonts: Arial, Times New Roman, and Courier New.
The font sizes that you should use are 10px, 20px, and 30px.
Text Box for Receiving Board size and Updating Bingo board
To update the board size, the user will enter a number in the text box (top left corner in the fieldset) and then click the
Update Bingo Board button. The minimum and maximum size of the bingo board should be 4 and 21 respectively. When
the user clicks the button, your program should check if the value in the textbox is within the range. If it is outside the range,
do not make any changes to the board, but instead display an alert box with the message: Size must be greate
than or equal to 4 and smaller than or equal to 21. You can assume that the user will enter only an integer.
Suggested Coding Practices
You may start by writing the HTML document with form design.
If you need to implement a feature, check if there is a lecture example that implements similar features.
Test with a small example before updating your code.
Give the form first and then put JavaScript code below the form.
It is strongly recommended to use functions extensively.
Implement incrementally - (1) Split the functionality of the program into small chunks, (2) implement the chunks one
y one in functions, (3) test the co
ectness and (4) move to the next chunk.
Use debugging. Finding bugs would be really difficult and time-consuming without relying on the tool support.
Do not mix functions with statements that are outside all functions. For example, in the following code, two
functions hello and world are mixed with other statements.
var x = 3;
function hello(){
...
}
document.writeln(x);
this should be moved up before the function hello
function world(){
...
}
hello();
move this up before function definitions
world();
move this up before function definitions
Instead, give functions separated from other JavaScript statements. The example code above can be rewritten as follows:
var x = 3;
document.writeln(x);
hello();
world();
function hello(){
...
}
function world(){
...
}
Do not use nested functions if you do not understand the semantic of nested functions. For example, in the code
fragment below, the function world is defined inside the function hello.
var x = 3;
document.writeln(x);
hello();
function hello(){
alert("Hello");
function world(){
Don't do this
XXXXXXXXXXalert("World");
}
world();
}
Instead, you may write as follows:
var x = 3;
document.writeln(x);
hello();
function hello(){
alert("Hello");
world();
}
function world(){
alert("World");
}
General Requirements
Do NOT put style rules or JavaScript code in the HTML file. Submissions that gives CSS style rules or JavaScript code
in the HTML file will be penalized.
In-line CSS style rules are allowed if they are added by the JavaScript code.
You must create three files named: p5.html, p5.css and p5.js. The JavaScript code must be given in p5.js, and
e linked in the HTML document.
The title that appears in the
owser tab should say Bingo.
At the top of every file (HTML, JavaScript, and CSS file), put your name and directory ID as comments.
Put reasonable comments for every function in your implementation.
Never hard-code your program. We will assign 0 points for the hard-coded functionality in your submission.
Do not attempt to copy code from any sources. You must complete this project by yourself. We check the similarity.
Students who are found to have collaborated on the project will be reported to the Office of Student Conduct for the
violation of academic dishonesty.
Do not share your project. Especially, you must not post your work in any on-line sites publicly accessible.
You must NOT use any authoring tool (e.g., DreamWeaver, etc.) which generates the HTML code for you. Use a pure
text editor. Both your HTML and your CSS must be validated according to these validators:
HTML validator: http:
validator.w3.org/#validate-by-upload
CSS validator: http:
jigsaw.w3.org/css-validato
#validate_by_upload
If you are getting mysterious e
ors that you cannot diagnose, meet a TA or me during office hours.
You must use proper indentation in your code (HTML, CSS, and JavaScript). I strongly suggest you format your code
using an automatic formatting tool in VSC.