Web Programming Basics | CompSci Blogs

[utterances-bot]

Web Programming Basics | CompSci Blogs

An introduction to key topics in Web Programming

http://0.0.0.0:4100/student/basics/home

[will-w-cheng]

Andrew: 3+4+4+4+4 He was able, to do his work effectively made his html project on time, and finished all his hacks. And related it to Js project effectively. Saaras: 4+4+3+4+4 He was able to finish, his work and help debug others work. And, finished all his hacks made a object that entailed all countries and there values for our projects later William Cheng: 4+4+4+4+4 Finished DOM, made the button interactive and linked it to our project, also made it geoguessr themed with it alternating between link’s of different countries Ryan: 4+4+4+4+3 Made two conditional statements and was able to effectively ask for help as well, as finish his project on time and contribute to the group effectively helping to contribute to Andrew, while asking for help from Saaras. Daniel: 3+4+4+4+4 Was able to effectively debug code, finished his end of the project, and was able to help Saaras debug his code effectively, when he found an issue with it not displaying on his javascript console when he ran his object.

[JasonGao76]

HTML, 4/4 Nice job completing the hacks, I like how you added something you enjoyed (Geoguesser) to the links. Maybe you could add an image as well to make it more visually appealing.

Data Types, 4/4 Clever use of age and other body values (weight, height) Not sure what the list of countries are for though.

DOM, not sure if it works because I don't have your VSCode, so not sure if I can grade this. Interesting use of .style.display and I assume it should work. You can only really test this in your VSCode so I can't see it here, but it should be fine

JS, 3/4 Code looks good, I like the personalized text output. The only suggestion I can make is to customize it more, maybe use variables that aren't just a and b and have it mean something.

Debugging, 4/4 Segment 1 is good, clear edit and explanations Segment 2 looks fine, you did fix the error and get the output. I would suggest finding a way to make it so it can accept any number for letterNumber and still give a correct statement (so not only for "e"). Segment 3 looks good, clear explanation and simple edits. The factor of 2 and 5 looks like it should work too, nice edits and I like the unique fix of adding another array. Challenge shows some edits with changing of the text from food to countries, which is interesting. Maybe you can work on this more if you have time, but not required.

[Saaras859]

For a team rating: We give ourselves a 3.85, because we worked together effectively, communicated well but we procrastinated slightly and our website's could look more aesthetically pleasing. Next time we should plan ahead over the weekend.

[will-w-cheng]

I think I got a 3.9 on my test because I did all the required hacks and I helped out andrew. I also took it upon myself to create an interactive button which we can directly use to train for our game and use for future projects. This required using DOM in order to have an interactive element and including javascript to alternate betweent eh links. I also helped Andrew Kim to explain part of the hack and other members.

[Saaras859]

Daniel:I think that I got a 3.8 on my test because I did all of the required hacks. For example, in the JS debugging page I did all of the required edits and fixes to the given code and did the challenge code. However, I also think that I got more than a 0.9 because our team changed the code so that it would relate to our passion project. Our passion project will be similar to a popular game called geoguesser so we made our code relate to that by adding code relating to different countries. For example, in the JS debugging challenge hack, instead of calculating the total cost of food, it would calculate the total population of three different countries.

Saaras: I think that I got a 3.85 on my test, because I did all of the required hacks I was assigned to do, I also took it upon myself to make a new JavaScript object with all the countries, for our future project geogussr. By assigning values to each so that eventually we can make it a functual game using potentially pygame.

Will: I think I got a 3.9 on my test because I did all the required hacks and I helped out andrew. I also took it upon myself to create an interactive button which we can directly use to train for our game and use for future projects. This required using DOM in order to have an interactive element and including javascript to alternate betweent eh links. I also helped Andrew Kim to explain part of the hack and other members.

Andrew: I think I got a 3’8. I completed all the required hacks and learned how to create an html with links. I also learned how to change the style of fonts into italics and bold. I added links related to our GitHub and added sources for our geoguesser passion project

Ryan: I think I got a 3.8, since I got all the required hacks done, and helped daniel set up utterances. I further customized the javascript portion of the web programming, and made a optimized version of the code specialized for the specific population for each country.

[iKAN2025]

self grade (Isabel) .5 point: Have a working HTML code cell in a notebook based on the wireframe representation provided under HTML hacks (HTML Hack) Also included passion project page

.5 point: Have a working javascript code cell in a notebook based on the instructions provided under data types hacks (Data Types Hack)

.5 point: Have a working javascript code cell in a notebook which modifies elements in the first HTML code cell hack or another HTML code cell based on the same wireframe representation (DOM Hack)

.25 point: Have a working javascript code cell in a notebook based on the instructions provided in the javascript hack (Javascript Hack). Works in Jupyter Notebook but not on the actual site

.5 point: Have code cells in a notebook which shows the corrections made to the first three code cells in the 1.4 correcting errors page (Correcting Errors Hack)

score = 2.5/2.5

peer grade .5 point: Have a working HTML code cell in a notebook based on the wireframe representation provided under HTML hacks (HTML Hack) Also included passion project page

.5 point: Have a working javascript code cell in a notebook based on the instructions provided under data types hacks (Data Types Hack)

.5 point: Have a working javascript code cell in a notebook which modifies elements in the first HTML code cell hack or another HTML code cell based on the same wireframe representation (DOM Hack)

.5 point: Have a working javascript code cell in a notebook based on the instructions provided in the javascript hack (Javascript Hack). Works in Jupyter Notebook but not on the actual site

.5 point: Have code cells in a notebook which shows the corrections made to the first three code cells in the 1.4 correcting errors page (Correcting Errors Hack)

score = 2.5/2.5

Lakshanya’s Grade .5 point: Have a working HTML code cell in a notebook based on the wireframe representation provided under HTML hacks (HTML Hack) Also included passion project page

.5 point: Have a working javascript code cell in a notebook based on the instructions provided under data types hacks (Data Types Hack)

.5 point: Have a working javascript code cell in a notebook which modifies elements in the first HTML code cell hack or another HTML code cell based on the same wireframe representation (DOM Hack) One of the hacks doesn’t work.

.5 point: Have a working javascript code cell in a notebook based on the instructions provided in the javascript hack (Javascript Hack) Works in Jupyter Notebook but not on the actual site. Fixed all errors in console.

.5 point: Have code cells in a notebook which shows the corrections made to the first three code cells in the 1.4 correcting errors page (Correcting Errors Hack) Works in site but not in jupyter notebook…..?

2.5/2.5

Eun’s Grade .5 point: Have a working HTML code cell in a notebook based on the wireframe representation provided under HTML hacks (HTML Hack). Added a Daily STudy Tracker

.5 point: Have a working javascript code cell in a notebook based on the instructions provided under data types hacks (Data Types Hack). Created an object based on user/instrument(for instrument tracker)

.5 point: Have a working javascript code cell in a notebook which modifies elements in the first HTML code cell hack or another HTML code cell based on the same wireframe representation (DOM Hack)

.5 point: Have a working javascript code cell in a notebook based on the instructions provided in the javascript hack (Javascript Hack)

.5 point: Have code cells in a notebook which shows the corrections made to the first three code cells in the 1.4 correcting errors page (Correcting Errors Hack) Added a form for challenge (menu)

2.5/2.5. Good job on going above and beyond.

[pranavivak]

Peer review (Ankit):

0.5 point: Have a working HTML code cell in a notebook based on the wireframe representation provided under HTML hacks (HTML Hack).

• +0.45 point: Correct formatting with functioning links. Make sure to fix button functionality. Additionally, there was an art theme, which was good.

0.5 point: Have a working javascript code cell in a notebook based on the instructions provided under data types hacks (Data Types Hack).

• +0.48 point: An object variable was defined with keys for each array. There were mutations and mathematical calculations to some of the arrays, along with code that determines the type of each array.

0.5 point: Have a working javascript code cell in a notebook which modifies elements in the first HTML code cell hack or another HTML code cell based on the same wireframe representation (DOM Hack)

• +0.48 point: The links were switched upon clicking the button. There was also an art theme, which was nice to see.

0.5 point: a working javascript code cell in a notebook based on the instructions provided in the javascript hack (JavaScript hack)

• +0.45 point: There is a simple comparison of two variables with numerical values.

0.5 point: Have code cells in a notebook which shows the corrections made to the first three code cells in the 1.4 correcting errors page (Correcting errors hack)

• +0.5 point: All segments had corrections. The challenge segment was completed as well!

Total: 2.36/2.5 Great job!

[GavinCopley]

HTML 0/4

Not showing

Data types 3/4

You did some nice simple java script data.

DOM 3/4

Needs to be accurate to the wire frame, but it works

JavaScript 2/4

Good code, but no output

JS Debugging 2/4

Gives an output in the console but didn't write what you changed.

[Trystan-Schmits]

Looking good to me, everything is outputted correctly, just 1 things to note. The comments in the JavaScript don't match the code. The comments say that the code creates an object representing Trystan, but the code creates an object representing Spencer. Comments won't affect the code, but it helps when trying to understand the code, so it's best when it matches.

[alishahussain]

I think Alisha deserves a 3.8/4 on the project. She explained all of her code properly, and even styled different things on it. She leanred different HTML styles in order to go above and beyond on her hacks.

[MatthewBorabo]

HTML: 3.5 / 4

You were able to format the code and have all of the required elements. However, it doesn’t quite match the wireframe. Also, the codespace is empty.

Data Types: 3 / 4

Nice! You were able to successfully make your object using name, age, and gender! However, it is part of the requirements to include mathematical operations.

DOM: 3.75 / 4

It is not exactly following the instructions. However, you were able to make a button that has a successful output!

JavaScript: 4 / 4

You followed the instructions and successfully compared the two variables! Nice job!

JS Debugging: 0 / 4

Unfortunately, I do not see any changes with JS Debugging at the moment.

Total score: 14.25 / 20 (14.25 / 16 w/o the JS Debugging).