The Design Process

Spiderman Quiz

  1. Picking a theme

    I first picked out a theme I was interested in to create my quiz. I chose Spiderman as my theme.

  2. Writing my Questions

    My three questions on my app will be: How many Spidermans are there in the cinematic universe?, Who is the best Spiderman?, and Which Spiderman said “I love you” to the other Spidermans in the Spiderman movie, No Way Home?

  3. Designing my Quiz.

    I decided that there will be a home page with an image of Tom Holland as spiderman. When you click a “start” button, the app will direct you to the first question and page. When you answer it will then direct you to the next question and so on. At the very end, the quiz will have four pages: a 100% success page, a 66% success page, a 33% success page, and a 0% success page. The user will be directed to whatever page they scored on the quiz.

  4. Executing my Quiz

    I first developed by quiz by making all the different screens I would need and naming them. I then started uploading images and adding text, buttons, and titles. After designing most of my screens, I started experimenting with the code. I added console logs to let the programer know what is happening during the quiz. After simply getting each question after another and using on events to get answers, I started getting fancier. I decided to use an if/else statement for my first question with an imput from the user. If the user gets the question right (checked with a variable), then the quiz will direct to the next quesiton. If they get it wrong, it goes to a screen saying they are incorrect. I also decided to keep track of the user’s score using another variable and adding one to the score everytime the user gets an answer correct. The score shows at the very end. My final addition was setting a timeout of two seconds after a user answers a question. The screen shows a message to the user for two seconds before moving on to the next page.

You Can View My Quiz Here!

Spiderman Quiz

Here’s What Worked

  • I learned a great deal about Javascript for the first time. I liked using the App Lab because I could see the code also in text form but was able to easily use the boxes.
  • I figured out how to use different features on the App Lab such as timeouts, on events, if/else functions, and defining variables in Javascript.
  • My quiz ended up working well and the score at the end is the correct ouput (I had to problem solve this).

Improvement for Next Time

  • My on events and code are a bit repetitive. I would try and figure out how to simplify my code maybe by defining functions to use less on events. If I use the same formatting on every screen, I may be able to simplify my code even further.
  • I would like to experiment with the other functions in App Lab. There are a lot of features I haven’t had the chance to explore yet.
  • I started off by using text input when adding my titles and questions. I then learned I should use text area instead. But once I was mostly done designing my quiz, I learned that I should be using text labels and not text areas so that the user is unable to edit the text.

Performance Task Skills

  1. Program Purpose and Function

    • The purpose of this program is to test and teach users about Spiderman and my opinions about Spiderman.
    • This program uses Javascript to walk a user through a quiz. The user answers various questions and is directed to different screens, receiving a score at the end.
    • In this quiz, the user provides both text input and mouse clicks. The output consists of questions that are displayed on different screens and a final score at the end.

  2. Data Abstraction

    • In this assignment, I used App Lab on code.org, which is programmed to be simple. The code generated through App Lab did not generate a list or other collection type. I did not see a need to code a list into my simple quiz.

  3. Managing Complexity

    • I did not make a list in my code for my simple quiz. Although, if I were to simplify my quiz, I would create a list of my questions and answers and figure out how to access that list to have less on events in my code.

  4. Procedural Abstraction

    • In my App Lab, I did not define any new functions that were not already in the code toolbox. During this project, I was learning how to use Javascript and the app toolbox to build a simple quiz. You can see an example of my student-devloped procedures in my python bread quiz linked in my home page.

  5. Algorithim Implementation

    In my quiz, I am using sequencing and selection.

    • sequencing: I use sequencing in my quiz when I list out all of my events in a specific order to occur. I do not have any lists in my code so I am not using iteration. For an example, my quiz starts with question one, then question two and so on.

    • selection: I use selection when I coded my if/else statement. If someone chose the correct answer, then they had a point added to their score and got to move to the next question. If they did not answer correctly, they were directed to in incorrect screen. This is selection because it is not a specific list of instructions in a specific order.

  6. Testing

    I tested out different variations of my quiz that users may experience. All variations direct to the correct pages and end with a correctly calculated score. Feel free to test out my quiz in the link above.