Our scrum board consists of several columns in which the scrum master (Noah) records our overall team goals, as well as weekly assignments for the scrum team. The scrum master also tracks the progress made by the group as a whole, and logs whether something may still be in progress, or whether it has been completed.
CypherCrypto is a website where different ciphers such as Caesar Cipher and Binary can be used to encrypt and decrypt messages inputted by a user. Our website contains 5 different ciphers including Caesar Cipher, Binary, RSA, Morse Code and Pig Latin. There are information pages on all the ciphers which provide a history of the cipher and how it generally works. The user can then use the ciphers by inputting messages into textboxes and choosing to either encrypt or decrypt the message. There is also a multiple choice quiz game on the site, which tests the user on their knowledge of the ciphers based on the information pages of the ciphers. The stats of the quiz are then recorded on a table like database, so the user is able to see their scores, attempts an questions they got wrong. There is also a message encryptor section, which we used an API to get random quotes, then used all of our ciphers to encrypt the message to display the encrypted quote with the corresponding cipher.
Below is a list of the technicals and other things we incorporated into our website, including our ciphers, quiz, databse, api/quote encryptor and easter egg, along with the process and methods we used to code, and how it generally is intended to function.
The Caesar Cipher is a cipher that encrypts letters with a shift pattern. So "A" with a shift pattern of 1 would be "B" and so on. Same applies with negative numbers as well. There are separate parts for both capitol letters and lowercase letters in the ascii library and it's very important to make sure that it is separate. Same thing applies for decryption except decryption is much harder. This code does the decryption and encryption part of the project for Caesar Cipher only. This code contains functions, loops, input/output, print statements, variables, arrays, and lists. It also has a visual. The Caesar Cipher html files also contaion html tags(<>) which help build the website and structure the website. We were able to use flask and "POST" to run our previous python code, and we were able to add images and videos and change colors as well. Adding a background color was also a hassle as we had to find a good enough picture to fit well.
Link to py code | Runtime link to cipher
Link to html code | Runtime link to info
Binary is basically just a bunch of 1s and 0s combined. This code has functions, variables, input/output, loops, print statements,as well as a couple visuals. This code also holds several html tags(<>) such as p, h, b, etc. A bunch of tags to make up a website. It also contain several html files where we added a background picture, images, and the buttons for the game. This code does the decryption and encryption part of the project for Binary only. It however can't encrypt/decrypt spaces. It can't be fixed, so we recommend doing one word or if multiple words, don't space them. If you do space them, space=100000
Link to py code | Runtime link to cipher
Link to html code | Runtime link to info
RSA is one of the first public-key cryptology and is widely used for secure data transmission. The acronym RSA is the initial letters of the surnames of Ron Rivest, Adi Shamir, and Leonard Adleman, who publicly described the algorithm in 1977. A user of RSA creates and then publishes a public key based on two large prime numbers, along with an auxiliary value. The prime numbers must be kept secret. More often, RSA passes encrypted shared keys for symmetric key cryptography which in turn can perform bulk encryption-decryption operations at much higher speed. It's a little similar to the Ceaser Cipher as well. The code has a few similarities too. This code does the decryption and encryption part of the project for RSA only. This code contains functions, loops, input/output, print statements, variables, arrays, and lists. It has a visual too. The html files also contains background pictures, html tags(<>), textbox, buttons, and runs its code from the main.py.
Link to py code | Runtime link to cipher
Link to html code | Runtime link to info
Morse code is a method used in telecommunication to encode text characters as standardized sequences of two different signal durations, called dots and dashes or dits and dahs. Morse code is named after Samuel Morse, an inventor of the telegraph. We decided to do only do the symbols as we could not figure out how to incorporate audio into the website. We were able to make both an encryption and decryption option for the morse code cipher and had a textbox for the user to input either english words or phrases, or morse code symbols. We essentially made 2 lists, one with the english alphabet and one with the corresponding morse code symbols. Using different sections of code, we were able to iterate through each of the lists to determine whether the user's input was in morse code or english, and get the corresponding letters or symbols. Like all the other ciphers, we also provided an information page for the morse code cipher, with some background on how it came about, with some resources and an explanation of how the cipher generally works.
Link to py code | Runtime link to cipher
Link to html code | Runtime link to info
Pig Latin is a pretty basic language that involves a simple formula for translating words or phrases. To translate from English to Pig Latin, you are to remove everything before the first vowel of the word, moving it to the end, and adding an "ay" at the end of the word. An example of this would be "hello" turning into "ellohay". If the word begins with a vowel, then all you have to do is add "yay" to the end of the word. This means "apple" would turn into "appleyay". For the encryption of Pig Latin, it wasn't too hard. The way we approached it, was by first defining all the vowels. We then used for loops to loop through the word(s) listed by the user, to find the first vowel in each word. We used if and else statements to tell if the vowel was at the beginning, then "yay" would be added on to the end, otherwise everything before the first vowel, along with "ay" would go at the end. Decryption on the otherhand was found to be nearly impossible, as words could be the exactly the same in Pig Latin, but different in English. For example, the words smile and miles are the exact same in Pig Latin, being "ilesmay". The format of the Pig Latin cipher page and the info page are similar to the other ciphers, as it provides an encryption option on the cipher page, as well as some information about Pig Latin, some resources we used and how we coded it on the information page.
Link to py code | Runtime link to cipher
Link to html code | Runtime link to info
We decided to make the website more fun and interactive with the user, we were going to make a quiz game. This quiz game was planned to have some multiple choice questions which would be based on the information pages on the several different ciphers we had on our website. We ended up having 10 questions, with 4 options for each question. The user is able to take the quiz, and have their results displayed at the end, with the ability to see all the questions they got wrong and what the correct answer was by scrolling back through the quiz. We decided to connect the database with the cipher quiz by using javascript to have it so the user's attempts and results display in a table like format.
Link to py code | Runtime link to Cipher Quiz
Link to html code for Cipher Quiz | Runtime link to Database
Link to html/javascript code for Database
The quote encryptor is how we incorporated an API into our website. We decided to get random quotes from an API and have a button that displays a new random quote everytime it is clicked. We then had an idea to connect it to our project by using our ciphers to encrypt the message being displayed by the API. We used all 5 of our ciphers and had it so each encrypted message was hidden below the quote, with the user being able to click arrows to see each encrpyted message for each cipher. We ended up just copying each of the encrypting cipher code under the api app route and set what used to be the user input as the random quote being displayed by the API so that the message can be encrypted by each cipher.
Link to py code | Runtime link to Quote Encryptor
Our easter egg is located at the bottom of our binary information page. It includes an About Us page, our project plan, our pair share journals, our test corrections for TPT for Trimester 2, and an option to return to the original site.
Link to py code | Runtime link to Easter Egg
- Inputs: We are using user input, in which our website allows a user to input words or phrases into a textbox to then be encrypted by a cipher of their choosing
- Lists: We have lists for some cyphers such as morse code where it lists out the numbers and dots and dashes and runs through the list again and again until it fully encrypted or decrypted a message
- Procedures: We are using procedures within our ciphers, in which we used the procedures we made to encrypt or decrypt the inputted messages by the user to then display a decrypted or encrypted result.
- Algorithims: We are using algorithms within our ciphers, in which we used them to encrypt and decrypt the messages through code we coded ourselves.
- Outputs: We are using whatever message has been inputted into a cypher to output a encrypted or decrypted message
- Work on the styling of our navigation bar and make it more condensed and organized
- Change some of the pictures so that they are more visible with backgrounds
Noah: Link to Ticket
Nihar: Link to Ticket
Adam: Link to Ticket
Rivan: Link to Ticket
Noah's ticket for this week was to continue working on the API. Our plan for the API was to get quotes from a simple rapid api, then use our ciphers to encrypt the quotes and display the encrypted message below. Noah was able to successfully do this with both the Binary, Morse Code and Pig Latin ciphers, but is still working on getting the Caesar Ciphers to work (we are not going to be putting in RSA). Continuing to work on the API is going to be Noah's ticket for next week too.
Nihar's ticket was to finish up the user login system, in order to add more security to the database. Our database stores to scores for our Quiz Game, however it is viewable by everyone, so we want to make it more secure so only the user can see their own scores and results.
Adam's ticket was to work on the organization and neatness of our navigation bar. Because there is beginning to be too many things on our nav bar, we wanted to condense it so that there aren't as many things. Adam worked on this by putting all the ciphers into one dropdown nav option, as well as all the info pages.
Rivan's ticket for this week was to work on the recommendations given to us by our crossover group, which they said that we needed to work on the styling of our website, which they pointed out that some of the images we had were not very visible due to the background image. Rivan also worked on adding a background image to the quiz game to make it more appealing.
-
Get the API done, it's our first priority
-
Add a user login system to the database to make the site more secure
-
Make the Easter egg look good and add repsoitories, TPT corrections, and journals
-
Idea for API, get a simple rapid api (like quotes or jokes) and use the ciphers in our website to encrypt them
Noah: Link to Ticket
Nihar: Link to Ticket
Adam: Link to Ticket
Rivan: Link to Ticket
Noah's ticket is to work on the api work. Our plan for this ticket, as our previous strategies had failed, it to take a simple rapid api such as quotes or jokes, and display it on the page from that api. After doing so, we plan to encrypt the message displayed from the api using the ciphers on our website, and display the encrypted message below. This way we can have the api related to our website.
Nihar's ticket is to create a user login system, where the user can input their information and make the database more secure. Nihar will do this through the help of Mr M's example provided in class.
Adam's ticket is working on the Easter Egg. We want to add in several buttons into the Easter Egg, such as things like our journal, project plan and TPT corrections and reflections. We also plan to add an about us page, with information about each of us, regarding both our general lives, as well as our progress over the months of coding we have had in this class.
Rivan's ticket is to work on a change we want to make in our database. We had the idea to link each question the user got wrong, which is displayed in the database, to the questions on the quiz, as the user would have to go through the quiz again in order to see the correct answers.
Noah's ticket was to work on the api, as shown above with the explanation and links to tickets and proven in the code linked above. Noah used a rapid api for quotes and was able to diplay the quotes as well as encrypt the phrases in Pig Latin. This code includes both the python code and html code used to display the quotes and encrypt them. For now, we only have one cipher being used, however, we do plan to figure out a way to use more for future tickets.
Nihar's ticket is to create a user login system, where the user can input their information and make the database more secure. Nihar will do this through the help of Mr M's example provided in class.
Links to Journals / Project Plan
Adam's ticket had been to work on the easter egg as well as help with the API. Adam had put the links to the journals as well as the project plan for the Wildcats. One problem that Adam had faced was that he couldn't help much with developing the API of the website.
Rivan's ticket is to work on a change we want to make in our database. We had the idea to link each question the user got wrong, which is displayed in the database, to the questions on the quiz, as the user would have to go through the quiz again in order to see the correct answers.
-
Get the API done, it's our first priority
-
Add a user login system to the database to make the site more secure
-
Potentially add a new cipher and just make the website look better
-
Make the Easter egg look good and add repsoitories, corrections, and journals
Noah: Link to Ticket
Nihar: Link to Ticket
Rivan: Link to Ticket
Adam: Link to Ticket
Noah's ticket is mainly for finsihing the API. We are behind on the API and we are struggling on it and we need to get this API done or we'll keep loosing points.
Nihar's ticket is about adding extra security to the database and also making the database more user friendly. Also to make the database better. Nihar is also expected to make the Easter egg better.
Rivan's ticket is the same as Nihar's as both Nihar and Rivan need to work together and make the database better and more secure.
Adam's ticket is to work with Noah and finish the API. As told before we are behind on the API and we don't want to keep loosing points. Adam is also expected to make the site better.
- Added more buttons to navigation bar
- Completed the Pig Latin cipher and information page
- Completed the Morse code cipher and information page
- Completed quiz game, including 10 questions and multiple options for answers on each question based on the different ciphers and their information pages
- Added a databse (in progress)
- We were able to successfully deploy it
Noah: Link to Ticket
Nihar: Link to Ticket
Rivan: Link to Ticket
Adam: Link to Ticket
Runs Pig Latin Cipher encryption (main.py line 205 - 236)
With the code under this app route, located in the main.py file, I was able to run an encryption function on our website for Pig Latin, to translate a word or phrase from English to Pig Latin. I used python code I tested in REPL to implement it into the main.py file using POST in order to get it to work and running on the HTML page.
main.py lines (205-236), lines (248-301), the database.html file, the quizgame.html file, and the morsecode.html file. That was all the code I did.
I added a database like table in the navigation bar and that was the database file. I did the POST stuff for morse code and Pig Latin, I then made all the questions and answers in the quizgame file. I was able to make a dictionary in Javascript and make it into an online quiz. With a submit button and a next/previous button. I will work on connecting that to the database and making the database function as currently I just added it only. The morsecode file is where I added the encrypt/decrypt buttons and used POST to give them their functions and allow them to encrypt and decrypt. I used Python, HTML, Javascript, CSS, and tried using SQLAlchemy but I was having trouble importing the functions and packages. The database still has a lot of work needed.
main.py (Lines 248-301)
Adam coded the Python for Morse code for both the encryption and the decryption. Lines (248-301). His intellij wasn't working so he emailed his code and his work is commented "Adam's work for Morse code". Nihar did the POST work.
The quizgame file, the navigation bar
I worked with Nihar mainly and we both worked together on the quizgame file and made the questions and answers and were able to make a Javascript dictionary. I also added the buttons on the navigation bar and was able to aid Nihar with the database. We are currently figuring out how to make the database and the quizgame file work togther. We learned that we needed a lot of POST for this and that's our biggest challenge.
My WIFI turns off at 11:00 so try to grade before that time. Thank you!
Noah completed his assignment of implementing the Pig Latin cipher as well as the information pages. He also helped with other parts of the website including some of the styling and format. Being the scrum master, Noah also monitored the scrum board, assigning scrum members to do different tasks and setting goals for the team to complete before the deadline.
Nihar has done a lot for the team, as he is the most experienced coder out of us all. He has helped implement both ciphers into the project html pages using POST, while also creating the new quiz game, which included 10 questions and different options for the answers for each question. He also added the database which he is currently working on. He was also able to get the website deployed and running, and has proved very useful and helpful over the weeks, making several big and important commits to the project.
Adam was able to complete the code for the Morse code cipher in a REPL, however he could not get his Intellij to work, and as a result was unable to make any commits to the project. Because of this he was forced to email the code to others who did have Intellij up and running, and have them implement the code for him.
Rivan was able to add more buttons onto the navigation bar we currently had, in which a Pig Latin, Morse code, quiz game and database buttons were added. He also helped a little bit with the addition of the quiz game, however Nihar was the main contributor on that assignment.