Week 11 PBL Final Samaya and Alice - samayass/flask_portfolio GitHub Wiki

Deployed Website
Deployment Policies

• Wiki/Jekyll page with design ideas and usage
• Create Performance Task PBL feature
• Final committed program code showing algorithms written in JS/Python
• Written responses to all the prompts in the performance task
• 1 min video that meets CB create task requirements
  Alice's 1 min video
  Samaya's 1 min video

Requirements	Tangible	Explanation
PBL theme consistent through project and described in Github Pages	PBL Theme Wiki Jekyll Page	The theme of our PBL website, StudyOwl, is a study website that not only helps students concentrate while they’re studying but it helps them continue to stimulate their brains during breaks. There is a study room while soothing music and backgrounds as well as tools to aid students in their studies. Contrasting this there is a break room with games that help students with their logic and reasoning skills. This theme is consistent in all of our features and is described in the wiki page linked. The wiki page also includes wireframes that our features are based on.
Sassy / Bootstrap	sassy bootstrap	Sassy was used to style light mode and dark mode on multiple pages throughout our study owl website. It was more efficient because one scss file formatted the switch of colors on the homepage, and a few of the about us pages. While you could do individual css styling for each page, sassy made it easier to do them all at once in less lines of code. One place that bootstrap was used was in the notepad feature page. A predefined bootstrap button style was used instead of styling the button from scratch.
Blueprint illustration/demonstration	routing pages with blueprint tangible	Blueprints were used to organize the routing of all the files/pages of the website. Instead of routing all of the pages through main.py. the pages related to study tools were routed through a blueprint in a file called tools.py. The files related to the CRUD async database were routed through a blueprint inside a file called app_crud.py. The about us pages were routed through a blueprint in a file called homepages.py. The tangible is one example of a blueprint out of these three.
CRUD Async Operation - runtime and understanding of JavaScript and Fetch	CRUD table search	CRUD is an acronym that stands for create, read, update, and delete. These are the four most basic operations necessary to implement a database system. They are also necessary for interacting with databases. The search function searches through the database.
Individual PBL MVC feature/commits showing algorithms written in JS/Python	Notepad(Alice) Flashcards(Samaya)	Alice’s individual PBL MVC feature a notepad feature that displays different sticky notes from a notepad where the user can type customized messages. Samaya's individual PBL MVC feature is the flashcards page which allows the user to input their own information into the card so that can study from their own material.

Number	Question	Answer
3ai	Describes the overall purpose of the program	Our game, Word Guess, a 5 letter guessing game is played for entertainment and will help to stimulate the user's minds so that they can improve their logic and reasoning skills in a fun way. The purpose of the program is to have a single user guess the chosen word correctly in less than 6 guesses.
3aii	Describes what functionality of the program is demonstrated in the video	The video demonstrates a user interacting with the word game grid. In the video the program prompts the user to enter different 5 letter words into each row of the grid and re-prompt the user to enter additional 5 letter words until they guess the correct word. The program then displays the updated word grid with tiles whose colors change based on the previous word guesses. This process repeats until the user has reached 6 guesses or until the program has detected that the player had correctly guessed the 5 letter word, at which point the game ends. If the user does not guess the word correctly within 6 tries the program outputs the correct word. At this point the user has the option to replay the game (restart the program). The video demonstrates the ability of the program to detect different scenarios when the user inputs different words or invalid words.
3aiii	Describes the input and output of the program demonstrated in the video	In the video 5 letter word inputs are given by a single player into one of the six rows to see if it will match with the chosen word. The output depends on what letters the user inputs, if the word inputted is not valid the program will output the message saying "word is not in list". If the word is valid the program will output different colors for different tiles. If the player guesses the correct word in six tries all the tiles will turn green, and if the user does not guess the word in six tries the word will be displayed on the screen.
3bi	The first program code segment must show how data have been stored in the list.
3bii	The second program code segment must show the data in the same list being used, such as creating new data from the existing data or accessing multiple elements in the list, as part of fulfilling the program’s purpose.
3biii	Identifies the name of the list being used in this response	The list used in the code above is named wordList and in the second image wordList is accessed to assign a new random value to variable word.
3biv	Describes what the data contained in the list represent in your program	The data contained in the list represents all of the possible words the user might be able to guess.
3bv	Explains how the selected list manages complexity in your program code by explaining why your program code could not be written, or how it would be written differently, if you did not use the list	The list allows for the program to store all the possible words in one location. Without the list holding many diverse words the program can only be played a certain amount of times until it becomes redundant. One would have to resort to using different variables to hold many different words.
3ci	The first program code segment must be a student-developed procedure that:□ Defines the procedure’s name and return type (if necessary) □ Contains and uses one or more parameters that have an effect on the functionality of the procedure □ Implements an algorithm that includes sequencing, selection, and iteration
3cii	The second program code segment must show where your student-developed procedure is being called in your program.
3ciii	Describes in general what the identified procedure does and how it contributes to the overall functionality of the program	The procedure contributes to the overall functionality of the program as it is the majority of the code that checks the word inputted and compares it to the random word chosen from the list. The for loop is implemented to check whether the number of letters inputted is the correct amount according to the rules, and if so let the letter inputted into each specific tile be assigned to the variable "letter". The if statements are used to compare the inputted word with the randomly chosen word, so if one of the letters inputted is in the chosen word and in the correct spot the tile will turn green. If one of the letters is included in the chosen word the tile will turn yellow, and else the tile will turn gray.
3civ	Explains in detailed steps how the algorithm implemented in the identified procedure works. Your explanation must be detailed enough for someone else to recreate it.	First one should set the number of correctly identified letters to 0 so that it is able to be incremented for each correct letter. Next a for loop is needed to call each tile by its name. Inside each span id value is one letter which the user has inputted. One should assign the innerText of the span id to a variable so that all the letters can be checked. Next if statements are used so that each letter of the inputted word can be compared to that of the chosen word, so one should use each letter in the randomly chosen word and equate it to each letter in the inputted word. If the letter is present in the chosen word the correctly identified letters variable should be incremented by one and the color of the tile should be assigned to a data-variable id to change the color of it accordingly. Next else if is used to check whether or not the chosen word includes any of the letters in the inputted word with the .includes function. If so assign the current span id to the specific data-variable to change the color of the tile. Lastly if neither of those conditions are met assign the current span id tile to the data-variable which grays out all the absent letters.
3di	Describes two calls to the procedure identified in written response 3c. Each call must pass a different argument(s) that causes a different segment of code in the algorithm to execute.	First Call: The update function is called when the enter key is pressed and lifted upwards. Second Call:
3dii	Describes what condition(s) is being tested by each call to the procedure	Condition(s) tested by the first call: The program listens for the keyUp which means when the key is pressed and lifted upwards, so when the enter key is pressed the program has a condition that if the user inputted guess is included in the array of all available guess words then the function update will be called to compared the inputted value with the randomly chosen word. Condition(s) tested by the second call:
3diii	Identifies the result of each call	Result of the first call: The result of this called function is that the gameOver function will be equal to true meaning the user has won the game or the colors of tiles would change accordingly. Result of the second call:

• video