Team review

[DanteA-tech]

Lincoln- Binary to Decimal Converter Game What Lincoln did: After we met for our live review, I realized that I had a good idea going and it was fully functional vut I needed some sort of way for the audience to learn what a binary numbereven is so I added a hint button which would also qualify as my key commit.

Interactive Binary Game: Purpose: Engaging users in guessing decimal equivalents of binary numbers showcases the practical application of binary logic in a playful and interactive manner. Value: Offers users a hands-on experience to reinforce their understanding of binary-to-decimal conversion, a fundamental concept in computer science. Visual and Explanatory Hint Button: Purpose: The “Hint” button provides visual aids and explanatory text, aiding users in comprehending the conversion process, thereby emphasizing the educational value of the project. Value: Illustrates binary logic by providing additional educational support, aligning with the project’s intent to assist users in grasping the underlying concepts. Meeting CPT Requirements: User Engagement: The interactive game engages users in actively participating, contributing to the user-centered design aspect. Educational Support: The provision of hints aligns with the educational component outlined in CPT requirements, ensuring users receive guidance for understanding binary logic. Functional Demonstration: The code functions as intended, demonstrating the conversion process, meeting the requirement for demonstrating functionality related to binary-to-decimal conversion. HTML Structure: The HTML file sets up the structure of the game, providing elements for displaying the binary number, input field for guesses, buttons, and containers for visual elements.

JavaScript Logic: Random Binary Generation: The generateRandomBinary() function generates a random 8-bit binary number. Display Binary: It displays the generated binary number as both text and visually in the form of binary digits. Starting the Game: When the user clicks on the “Check Guess” button or the game area, it initiates the startRide() function. Game Logic: If the game hasn’t started (rideStarted = false) Once the animation completes or if the game has started, it checks the user’s guess using the checkGuess() function. It validates the user input and compares it against the decimal equivalent of the randomly generated binary. If the guess is correct, it triggers a success message, updates the score (if implemented), animates the carnival cart, generates a new binary number, and resets the game for the next round. If the guess is incorrect, it provides the correct answer and prompts the user to try again. Hint Functionality: The “Hint” button, when clicked, reveals an explanatory hint regarding binary-to-decimal conversion, utilizing both textual and visual aids to assist users in understanding the conversion process. User Interaction: Users engage by inputting decimal guesses, receiving immediate feedback on correctness, and having access to educational hints to aid in comprehension. Lincoln’s Video

Lincoln Tangibles

Ashwin - ASCII image generator What I did: After the week two review, the feedback I got from Mr. Mort and Sergi was to add some info about ascii and to explain to the user what exactly my feature is. I added a description about ascii at the top, and I also implemented a feature which allows you to add color to the image. This is controled by a toggle switch so the user can decide what they want. My feature is educational as it lets a user change any image they want into ascii characters, and do some modifications to them.

Color to Ascii image I added a feature that would allow you to click a button that will change the font colors of the ascii characters in to the colors of the original image. This was does by calculating the rgb values of each pixel, along with the brightness. I used Html canvas, which lets me paint out the picture using JS, and anylize the pixels, to do the calculations for rgb and brightness.

What I could have done if I had more time If I had more time I could have been able to perfect the image hight and width sliders, because right now, they are a bit buggy if not used correctly. Other than that I acomplished much more that what was in my plans. The initial idea was to just have a ascii image generate from a user imputed image, but I went above that and added features like the dimention sliders, and adding color to the image.

Key Commits Adding Color Initial Ascii Links Ashwins Video

Ashwins Tangibles

Dante A - RGB adjuster What I added Revert to original After our group met with Mr Mort he discussed with me that the ability to change the RGB of the photo is cool, but there should be a way to reset teh image back to normal. I originally thought of maybe adding a marker on where the image’s values started but ultimately decided on adding a simple button titled reset image colors. When the user first enters in the image the initial values are stored the button simply calls for those original values and implements them onto the photo. Scaling of photo After Sergi graded our group’s work, one of his suggestions was that the image should be scaled to fix the window since it is annoying to have to move up and down. To my best ability,attempted to scale the image down so that it only takes up 80 percent of the length and width. Looking back I probably couldve made it smaller since teh image is still pretty big. Adding the binary and hex values to color wheel One of Mr morts main points was that the code has to be able to teach teh reader something about binary. I think my code helps the learner see how binary is used in colors which could be seen by the sliders. However, the color wheels I had were the most visual, but they had no information attached to them. I initially tried to make it so the user’s click appears on the color wheel, but I was unable to do it. So I finished by just displaying the binary and hex values of where the user last clicked alongside the wheel. Key commits I had two main key commits, the commit for the scaling of teh image and the commit for the binary and hex. Scaling and revert

Binary and hex values

Dante’s Video

Dante’s tangibles

Gurshawn - Text to Color Functions added since last review:

Decrypt: After our review with Mr. M, one of the features he recommended to add was a way to convert the image back to text. Show correlation with binary: When the image is uploaded a binary representation is outputed to help the user understand the different ways binary can be used by a computer. textToBinary(text): This function takes a string input (text), converts each character to its Unicode code point, and then converts those code points to an 8-bit binary representation. It returns the concatenated binary string. binaryToRGB(binary): Given a binary string (binary), this function parses it into sets of three 8-bit segments, which represent the red, green, and blue color values. It returns an array of RGB values excluding the color black. displayColor(rgbValues): This function takes an array of RGB values (rgbValues) and displays them as a series of colored blocks in a canvas element. convertText(): This function is triggered by the “Convert Text” button. It reads the text input, converts it to binary using textToBinary(), then converts that binary string to RGB values using binaryToRGB(), and finally displays the colors using displayColor(). downloadImage(): This function is triggered by the “Download Image” button. It creates a data URL from the canvas containing the colored blocks and allows the user to download the canvas as an image. convert ImageToBinary(event): When an image is uploaded using the “Upload Image” button, this function converts the image to binary data. It reads the image file using FileReader, extracts the pixel data, converts each non-black pixel’s RGB values to binary, and displays the resulting binary in the text input field. convertImageToText(): When the “Convert Image to Text” button is pressed, this function takes the binary data from the text input field, converts it back to RGB values, and reconstructs the text from the RGB values. It removes duplicate color occurrences and displays the resulting text in the textOutput field. Retropcetive If I had more time I would add more SASS to the page and show more of the steps between each coversion the code runs while converting.

Gurshawn’s Video Gurshawn’s Key Commit Gurshawn’s Tangibles

[Tanuj253]

Team Review Tanujsai N grading Dante A

• [x] (.9/.9) The team should have a Web Pages that teach: Binary, Data, Data Structures, Data Abstraction.

Team Review ticket containing key Team and individual contributions

• [x] (.85/.9) Growth/Accomplishments in work is according to historical Team Plan, or they show revisions to plan according to work Team plan was issued and seen. this could have been issued earlier and had some comments on that to improve themselves.
• [x] (.85/.9) Short falls/Improvement that could be made in Work or Team Plan, team highlights next steps or improvements that could be made There wasn't really anything highlighted that could be improved. more time for quality of UI was mentioned. There could have been more comments to turn this above and beyond.
• [x] (.9/.9) Showing key accomplishments according to requirement in Frontend such as Binary Math, ASCII, Unicode, Color Codes, Logic Gates, etc. All key commits are evident and mentioned for each person. There were no specific issues with this and the group went above and beyond the instructions.
• [x] (.8/.9)Showing key user interaction and learning(s). For instance how you visualized Algorithms, Data, Data Structures. Or, how you provided response and Feedback to user on their success in learning. The team used all elements mentioned but could use some response to the users to help them improve in what they learn from the project.

Score: (.8+.9+.85+.9)/4=.86/.9

Pros: Structures were accomplished within all four games. Binary and data within RGB picture function. Lincoln added in hints and ways to see the colors. Dante added in Hex and binary within the pictures as well as revert to original buttons. Gurshawn added in decrypting and learned through that. Gurshawn and Ashwin worked on fixing scaling problems. Gurshawn's feature worked on stenography while Ashwin's feature worked on Ascii. Lincoln worked on Binary guessing and Dante worked on color codes and binary values within images. Dante's game worked on storing RGB values. The team worked through how Hex and Binary affected an image.

Grows: They could have more utterances within the project to keep track of progress. The team could have used more issues to keep track of progress. Keeping some notes on progress and other things would really show proficiency in the teams work. The team was above satisfactory and was nearly above and beyond.