Brainstorming

  • trivia quiz with different types of elements: slider, checkbox, text input
  • buzzfeed quiz
  • get to know you quiz
  • IQ quiz

Plan Outline

I decided to do a Buzzfeed style quiz, I made a simple outline through Google Drawings. I also looked at how other companies do their personality quizzes so I could get inspired.

Purpose and Function

  • The purpose of my app is for quiz takers to take fun quiz and learn more about their personality. I love taking Buzzfeed quizzes, and sometimes, the quizzes can have ridiculous titles, I wanted to make my own super niche title. I love cats and Disney so I made a quiz where based on their Disney selections, I would tell them what cat breed they are.
  • the function is allowing users to click and change buttons and sliders that involve Disney and bringing the audience to a screen that explains what cat breed they are and what that says about their personality.

Data Abstraction and Managing Complexity

  • I didn't use any lists in my code but one way I could've incorporated a list into my app is by making a list with index that listed out the personality traits of the user instead of individually typing and reformatting all the traits.
  • the list would help the program code because it would require less lines of code, making it more efficient

Managing Complexity

  • parameters- allow a function to perform tasks without knowing the specific input values ahead of time
  • I incorporated this because even though I didn't know what the user was going to click beforehand, I could still give the user their cat breed.

Algorithm Implementation

  • I use sequencing and selection by placing screens and code in a specific order so that one button would lead to the next screen if clicked
  • I didn't use iterations but a good idea would be to use one to repeat the process so that I don't have to drag and drop every individual coding block. For example, one question requires the user to click on one of six pictures, instead of coding for 6 pictures, I could use a loop and only code for one. I could also use if functions, if the user clicks this, then it will perform a certain task.
  • I used if statements, so that if the user clicked an option, it would lead to their results, depending on what they clicked.

Testing

  • I added the variable: console.log(") and put the message inside for the action, this helped me stay organized and let me know my program was running smoothly, and if not, I could find what went wrong in the debug console.
  • I ran my app multiple times. Whenever I added new code, I would run it and click through to make sure everything was working correctly. With my quiz, I also ran it multiple times clicking different options so I could double check that every option worked.

What Went Well

  • I think my quiz looks aesthetically pleasing as I follow a theme
  • Planning and having drawings ready really helped me stay organized and made it easier to create
  • I like how I incorporated different elements in my quiz like a slier, radio buttons, and regular buttons
  • Adding in go back buttons helps make the UX better
  • I tried a lot of elements before I started making my project so that I could know what I wanted to use.

What Didn't Go Well/What I learned

Although it doesn't matter as much with images, when it came to buttons, it was very difficult to find what I needed

  • Initially, I didn't name my pictures or buttons clearly, so it was difficult to find what I needed when coding, changing the names helped me easily find what I need next
  • Adding in the console.log(message) variable also helped me make sure my code is running smoothly, I added this in later. This shows up in the debug console. The viewer cannot see this, which is helpful because you can know if your code is running, without the user getting the notification.
  • I also wonder how I could use a loop so that I don't have to add every UI control individually.
  • Something I could do for next time, is adding more questions so I can add a mathematical variable to every question so that it wouldn't only depend on the last question.

Click