• Home
• Current Project
  • Team Project
  • Collegeboard
  • Replit
  • Create Task
  • Time Box
  • Code
  • Study Plan
  • PBL Final

---

Create Task Ideas

We have two unique and exciting personality quizzes that you can take to learn more about yourself! These interactive quiz games are called: “Which Blackpink Member Are You?” and “Which Greek Goddess Are You?” and they contain multiple features such as a card hover interaction in the homepage, pause and play music buttons, animated navigation buttons, header image changing buttons, a random Blackpink fact generator API, and finally the actual quizzes themselves which include unique questions and images to help you figure out who your personality is the most similar to. Our project expresses creativity and explores our personal interests through the topics of the quizzes, the formatting and CSS, and our own original quiz questions. In each quiz, there are a total of 4 questions that contain 4 different options. A numerical value (1, 2, 3 or 4) will be assigned to each of the options, and different ranges of ending point values will correspond to different Blackpink members or Greek Goddesses.

Link to Runtime

Create Task Video

Requirements

• Requirements

  Implementation

• Program Purpose and Function -

  Input will come from user clicking his/her choice under the questions. Program output will return based on which member’s number range did the total score of user fells within.

• Data Abstraction -

  A list of facts in random BLACKPINK fact generator. A random math function will generate an index for this list to select a random fact and display it on the page.

• Managing Complexity -

  The code will be strictly organized. Instead of the facts being stored in individual variables, they are stored in a single list. Without this list the code will be unorganized and the list allows the fact to be called easier. The list containing the word that the user guessed will be called in multiple places to see if any of the letters match any of the corresponding letters in the real word list.

• Procedural Abstraction -

  Functions in js file will be called multiple times in different places. For example, a function to display facts and change background will be in a seperate js file and be called in the html file using functionName().

• Algorithm Implementation -

  There will be an algorithm that tallies up the users’ answers to the quiz and determines which member their personality is the most like. A numerical value will be assigned to each of the options, and different ranges of ending point values will correspond to different BLACKPINK members.

Written Response Questions

• Questions

  Answers

• 3ai - Describes the overall purpose of the program

  Our program contains two interactive personality quizzes that express our creativity and explore our personal interests in Kpop groups and Greek goddesses. It also helps users explore more about their personalities and which Blackpink member or Greek Goddess their personality best matches.

• 3aii - Describes what functionality of the program is demonstrated in the video

  The video demonstrates a user interacting with the two quizzes by clicking on buttons to change the title image, pausing and playing background music. The user inputs/enters their preferred options and clicks the submit button, prompting the program to output/display a picture of that member or goddess, allowing the user to see which one best matches their personality. Users can also interact with the Blackpink Random Fact Generator if they are interested in knowing more about Blackpink. The user can only select one option per question, and if the user refreshes the page, all selections are cleared. the features we have such as the card hover interaction in homepage, pause and play music buttons, “return to main” animated buttons,

• 3aiii - Describes the input and output of the program demonstrated in the video

  The user inputs/enters their preferred options and clicks the submit button, prompting the program to output/display a picture of that member or goddess, allowing the user to see which one best matches their personality. (Input - user’s choices; output - displayed picture)

• 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 “facts”.

• 3biv - Describes what the data contained in the list represent in your program

  The data contained in the list represents 17 facts about Blackpink. The list is called in the function newFact(), and newFact() is called whenever the user clicks on the button of the random fact generator, which can be seen in its html page. Each time the user clicks the Generate button, a random fact about Blackpink will be displayed. Using the newFact function, a random decimal number between 0 and 1 (including 0 but not 1) will be generated, which will be multiplied by the length of the list and rounded down to an integer, and then the program will display the fact with the corresponding index.

• 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 the program to store all the facts in one location. Without a list for storing facts, one would have to use different variables to store many different facts, and since the facts are all fairly long, the code would become more complex and unorganized.

• 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

  In the program, each option is assigned a numeric value (1, 2, 3 or 4), and different ranges of end point values will correspond to different members/goddesses. The procedure adds up the total score of all the choices and if the user gets a score in a range that corresponds to a person, the user will see the picture of that person displayed on the screen. The algorithm includes sequencing, which is implemented with if statements that are used to check with the order from the least score range to the most score range and to see which person’s score range the user’s score falls in.

• 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.

  The result (total score) is calculated as the total of the four points(style + food + member + activity), and then that amount is passed through getElementById into the id “grade” in the html. However, we don’t actually want to display the score, so we will change style of “grade” to display none in the html. The picture of member that’s displayed will change based on the total score. There are four if statements. Each if statement check if result equals to numbers in the range of which member. Depending on the result, the name and picture of the corresponding member will be passed into the element in the html with the “result2” id. Because we want to display “result2” (name&picture of the member), we will add a line that display “result2” to the html, then the user and see the name and picture of member displayed on the screen.

• 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 - total score is passed through getElementById into the id “grade” in the html. Second call - the name and picture of the corresponding member will be passed into the element in the html with the “result2” id.

• 3dii - Describes what condition(s) is being tested by each call to the procedure

  Condition tested by first call - does the user completed all the questions or not. Condition tested by second call - which member does the user’s score correspond to

• 3diii - Identifies the result of each call

  The first call should result in showing the user’s total score, but we don’t want to show the score, so we change the style to show none. The second call results in the display of the name and picture of the member corresponding to the user’s total score. This member is the person who best matches the user’s personality.