In this assignment, you will explore debugging, simple algorithms, triggers, and tracing programs in JavaScript and Python, following best practices for writing in each language. The purpose of this assignment is to reinforce your prior programming knowledge and apply that knowledge in trying to fix broken code. Furthermore, you should feel comfortable using resources to lookup any functionality or methods that you do not understand.
PART A - JavaScript
Using a text editor (VS Code or Notepad) and a web browser, you will demonstrate how to create an HTML file, externally link a JavaScript file, and write some source code in the JavaScript file. Furthermore, you will demonstrate your ability to comment your source code while exploring variables, operators, input and output in JavaScript.
- Create two blank files to be an HTML file and a JavaScript file. The file names should be partA_<student number>.html and partA_<student number>.js. Note the instructions to prepare your submission when you are ready to submit your assignment.
- Follow the programming style guide best practices for JavaScript.
- Create a basic HTML webpage structure.
- Add comments and provide your name, student number, assignment title, date created, and program description at the beginning of the JavaScript file using multiline comments or single-line comments.
- HELP ME! I can’t figure out what is wrong with my program! I think I have errors that are causing my script to crash. I need you to help me fix them! Trace the program and HTML to fix the program so that it runs properly. When the button is pushed the 5 dice should generate values from 1 to 6 and the total should be calculated in the designated location.
- Once you get the script running, enhance its functionality. Complete the HTML and JavaScript files to accomplish the following:
- Modify the existing total input box or add an additional input box below the total to display the sum of the top 3 dice from each roll.
- ***BONUS CHALLENGE*** If the user clicks on an individual dice, have that dice be re-rolled only. The total should be properly recalculated and any change to the top 3 dice from the roll should be recalculated.
- Submit your completed files using the instructions above.
HINTS: You will need to link the JavaScript file. You will need to add an event handler to the button. You will probably need to use an array and the sort method to help identify the top 3 values. Lookup up any functions you do not understand.
PART B - Python
Using a text editor (VS Code or Jupyter Lab), you will demonstrate how to write some source code in Python. Translating your work from Part A, you will demonstrate your ability to comment your source code while translating the functionality in Python.
- Create a blank Python file. The file name should be partB_<student number>.py or partB_<student number>.ipynb. Note the instructions to prepare your submission when you are ready to submit your assignment.
- Follow the programming style guide best practices for Python.
- Add comments and provide your name, student number, assignment title, date created, and program description at the beginning of the Python file using single-line comments.
- Randomly generate 5 numbers ranging in value from 1 to 6 like a six-sided dice.
- Calculate the sum of the highest three dice.
- Submit your completed files in MyCanvas.
Submission Instructions
MyCanvas may not permit the uploading of .html, .js, or .ipynb files. To overcome this, add a .txt to the end of EACH file to be submitted. For example:
filename.html.txt
filename.js.txt
filename.ipynb.txt or filename.py.txt
I will remove the extension prior to marking.
Assignment Data
Dice Images for Download (ZIP FILE - Extract to the same folder as your HTML and JavaScript files.)
HTML File
<html>
<head>
<title>Dice Game</title>
</head>
<body>
<div>
<button style="margin: 13px;" id="dice1">1</button>
<button style="margin: 13px;" id="dice2">1</button>
<button style="margin: 13px;" id="dice3">1</button>
<button style="margin: 13px;" id="dice4">1</button>
<button style="margin: 13px;" id="dice5">1</button>
</div>
<div>
<img width="50" id="diceImg1" src="side1.png">
<img width="50" id="diceImg2" src="side1.png">
<img width="50" id="diceImg3" src="side1.png">
<img width="50" id="diceImg4" src="side1.png">
<img width="50" id="diceImg5" src="side1.png">
</div>
<div>
<button style="margin: 10px 90px 20px 90px;" id="rollDice" onclick="">Click to Roll</button>
</div>
<div>Total of All Dice: <input id="total" type="text" size="3" readonly></div>
</body>
</html>
JavaScript File
// THIS FUNCTION WORKS -- DO NOT CHANGE ANYTHINGPython File - Use the following example to generate random numbers. Note the first line is necessary to link the random module in Python.
function getRandomNumber(min, max) {
return Math.floor(((Math.random() * (max - min)) + min));
}
/* All of my errors occur from this point or below.
Check the JavaScript and HTML from here onward. /
function rollDice() {
sum = 0;
for (x=1; x < 5; x++) {
newValue = getRandomNumber(1,6);
document.getElementById("dice"+x).innerHTML = newValue;
sum += newValue;
switch(newValue) {
case 1 : diceImage = "side1.png"; break;
case 2 : diceImage = "side2.png"; break;
case 3 : diceImage = "side3.png"; break;
case 4 : diceImage = "side4.png"; break;
case 5 : diceImage = "side5.png"; break;
case 6 : diceImage = "side6.png"; break;
default : break;
}
document.getElementById("diceImage"+x).src = diceImage;
}
document.getElementById("Total").value = sum;
from random import *
someVar = randint(1,6) # Generates a random integer value from 1 and 6
Learning Outcomes
This assignment supports the following learning outcomes: CLO1
Technical
Need technical help? Visit the Mohawk College Library technical support page for a variety of support options.
| Criteria | Ratings | Pts | ||||
|---|---|---|---|---|---|---|
Follow Instructions | ||||||
Comments | ||||||
Syntax and Best Practices | ||||||
Program Logic | ||||||
Total Points: 10.0 | ||||||
