What is it?

It's a quiz. But what's the topic?

After some deliberation, I've decided on Pokémon.

Why Pokémon?

Well, at first I decided on SpongeBob, since I know a lot about that too. However, Pokémon is a gold mine of interesting trivia, whereas a SpongeBob quiz would mostly boil down to "Have you seen this episode?" or "Did you catch this tiny detail?" Where, at first, I would think "What is Mr. Krabs's middle initial?" for Spongebob (it's "H.", by the way), with Pokémon, I could ask "What did the MissingNo. glitch NOT do to your save file?" or "What was the first Pokémon ever designed?" or "What is the first Pokémon in the Generation 5 Pokédex?" So many interesting questions...

Brainstorming Questions

This is the non-code part, so I won't spend an hour explaining why I asked what I did. I will say, however, that no questions about the Pokémon anime series have been asked, and I have made sure to include some trivia about each of the eight Pokémon generations (currently). Here they are in the form of a list (no answers for you!):

  1. What was the first Pokémon design ever created? (Pikachu, Rhydon, Clefairy, or Bulbasaur?)
  2. What is the canonical name of the Pokémon Red and Blue protagonist? (Ash, Satoshi, Red, or Blue?)
  3. What are some properties of the famous Generation 1 glitch Pokémon "MissingNo."? (The number of items in the sixth bag slot increases by 128 after the encounter, your Hall of Fame data is corrupted after the encounter, it can be encountered indefinitely, or its appearance and forms can be altered based on your Trainer ID?)
  4. How many new Pokémon were added to Pokémon Gold, Silver and Crystal? (100, 151, 200, or 79?)
  5. How many Gym Leaders/Elite Four members (including Champion Lance) use at least one new Johto Pokémon in Pokémon Gold, Silver and Crystal? (5/13, 8/13, 10/13, or 12/13?)
  6. Which of these instruments is considered most prominent in the soundtrack of Pokémon Ruby, Sapphire and Emerald? (Trumpet, Saxophone, Violin, or Guitar?)
  7. In Pokémon Emerald, when Wallace replaced Steven Stone as the Champion of Hoenn, who took Wallace's place in the Sootopolis Gym? (Misty, Juan, Captain, or Mr. Briney?)
  8. In the Generation 3 Kanto remakes "Pokémon FireRed" and "Pokémon LeafGreen," which of these areas CANNOT be found on the Sevii Islands? (Navel Rock, Water Labyrinth, Dotted Hole, or Sword Coast?)
  9. Which of these aspects are the Generation 4 Pokémon games NOT known for? (Slow battle speed, new evolutions of old Pokémon, many Legendary and Mythical Pokémon, or Easy Difficulty?)
  10. The Pokéwalker (an accessory to the Johto remakes "Pokémon HeartGold" and "Pokémon SoulSilver") was notable for which of these aspects? (Being a particularly accurate pedometer, being difficult to obtain upon release, allowing players to capture exclusive Mythical Pokémon, or being incredibly resiliant/hard to break?)
  11. Pokémon Black and Pokémon White were NOT the first games in the series to do which of the following things? (Make a regional Pokédex of exclusively new Pokémon, divide physical and special moves based on context rather than type, animate 2D Pokémon sprites throughout battle, or use human vocals in the soundtrack?)
  12. Which of these features was first added in "Pokémon Black Version 2" and "Pokémon White Version 2" (the sequels to Pokémon Black and White)? (Triple Battles, Rotation Battles, the Pokémon World Tournament, or Hidden Abilities?)
  13. Which of these sets of legendaries have the same battle theme as each other? (Ho-oh and Lugia; Groudon, Kyogre, and Rayquaza; Dialga, Palkia, and Giratina; or Zekrom, Reshiram and Kyurem?)
  14. For the first time since Generation 2, a new type was added in Generation 6! What was it? ('Light', 'Sound', 'Fairy', or '???')
  15. Which of these factors did NOT contribute to "Pokémon X" and "Pokémon Y" being some of the easiest games in the series? (Gym Leaders' lack of full teams and movesets, the introduction of Mega Evolutions, heavily decreased item prices, or the EXP Share applying to the whole party?)
  16. Which feature from Pokémon Emerald was NOT carried over to the remakes "Pokémon Omega Ruby" and "Pokémon Alpha Sapphire"? (The Battle Frontier, the Battle Chateau, Pokémon Contests, or the Wynaut egg?)
  17. Which of these mechanics were introduced in "Pokémon Sun" and "Pokémon Moon"? (Z-Moves, Totem Pokémon, Regional Variants, or all of the above?)
  18. Which new shiny hunting technique was introduced in "Pokémon Ultra Sun" and "Pokémon Ultra Moon" (the sequels to Pokémon Sun and Moon)? (S.O.S. chaining, Island Scan hunting, Wormhole hunting, or horde hunting?)
  19. Before the Isle of Armor and Crown Tundra DLC, how many Pokémon of the 905 total that existed could be obtained in "Pokémon Sword" and "Pokémon Shield"? (251, 400, 551, or 630?)
  20. Which of these Generation 8 Legendary Pokémon went on to be banned to the "AG" tier, the highest possible tier in Pokémon? (Zacian, Zamazenta, Eternatus, or Calyrex?)

I ended up cutting it to 15 questions. Questions 8, 12, 16, 18, and 19 were cut. Certain questions have had their answers, syntax, or even entire prompt altered on the finished app.

Layout and Images

Designing the quiz took forever just simply because of the interface of Code.org mixed with lag issues that came up later in the process. After many hours of busy work copying over images and questions, I managed to get the framework all down. Despite how much of the process was just duplicating old screens and modifying them slightly, it took forever.

When giving objects IDs, I (usually) made sure they were distinct so that I could call upon them more easily when coding.

Code

As I would come to learn, the code portion of the process would be by far the shortest and easiest. Most of the process was copying over previous questions' data.

The way it works is, depending on whether or not your choice was correct, you will be sent to either a "That's right!" screen or a "Not quite!" screen. Both screens include the same images and information, but the text at the top has been altered. This was the result of tedium in the design process.

See the comments in the code below to understand what is happening.

onEvent("pikachuim", "click", function( ) {
    setScreen("question1wrong");
  });
// If the player clicks on the Pikachu image (ID: pikachuim), they will be sent to
// the "Not quite!" version of the results screen.
onEvent("rhydonim", "click", function( ) {
    setScreen("question1answer");
  });
// If the player clicks on the Rhydon image (ID: rhydonim), they will be sent to
// the "That's right!" version of the results screen.
onEvent("clefairyim", "click", function( ) {
    setScreen("question1wrong");
  });
onEvent("bulbasaurim", "click", function( ) {
    setScreen("question1wrong");
  });
onEvent("nextquestion1r", "click", function( ) {
    cor = cor + 1;
// Upon leaving the "That's right!" page, the score increases.
    setScreen("question2");
  });
onEvent("nextquestion1w", "click", function( ) {
    setScreen("question2");
// Your score does not change after the "Not quite!" page.
  });

After repeating this process until the end, the final destination is the "Results" screen. I have rigged this screen to display your score based on the cor variable's value after being added to with each correct answer. You will get different flavor text beneath your score depending on how well you do on the quiz.

function scorecheck() {
    if (cor == 0) {
    showElement("015");
    showElement("0to7");
  }
  if (cor == 1) {
    showElement("115");
    showElement("0to7");
  }
  if (cor == 2) {
    showElement("215");
    showElement("0to7");
  }
  if (cor == 3) {
    showElement("315");
    showElement("0to7");
  }
  if (cor == 4) {
    showElement("415");
    showElement("0to7");
  }
  if (cor == 5) {
    showElement("515");
    showElement("0to7");
  }
  if (cor == 6) {
    showElement("615");
    showElement("0to7");
  }
  if (cor == 7) {
    showElement("715");
    showElement("0to7");
  }
  if (cor == 8) {
    showElement("815");
    showElement("8to12");
  }
  if (cor == 9) {
    showElement("915");
    showElement("8to12");
  }
  if (cor == 10) {
    showElement("1015");
    showElement("8to12");
  }
  if (cor == 11) {
    showElement("1115");
    showElement("8to12");
  }
  if (cor == 12) {
    showElement("1215");
    showElement("8to12");
  }
  if (cor == 13) {
    showElement("1315");
    showElement("13to14");
  }
  if (cor == 14) {
    showElement("1415");
    showElement("13to14");
  }
  if (cor == 15) {
    showElement("1515");
    showElement("perfecttext");
  }
}
// The above function checks your score and un-hides the corresponding elements.
onEvent("seeresultsr", "click", function( ) {
    cor = cor + 1;
    scorecheck();
    setScreen("resultsscreen");
  });
// The function must be performed in the onEvent statement to read 'cor' correctly.
onEvent("seeresultsw", "click", function( ) {
    scorecheck();
    setScreen("resultsscreen");
  });

I discovered the necessity of making this change through some bug testing with the Debug Console (using it to check for cor's value within/outside of the onEvent statement). My understanding of local values in Javascript has been improved by this.

Create Performance Task

Below, I will review how this quiz meets the six rows of the Create Performance Task rubric.

"Program Purpose and Function"

The quiz-taker's input is simply clicking answers. For this quiz, there is no manually-typed text input, drag and drop, or the like. The visually clear output of these inputs is a screen change, where you are either sent to the next question from the results screen or vice-versa. If the correct answer is clicked, the screen you are sent to reflects your accuracy ("That's right!" or "Not quite!"). The final output at the end is the number of correct answers you have given, as well as a little box of flavor text corresponding to your score.

The function of the program is counting up your number of correct responses to given Pokémon trivia, then displaying it to you at the end. This is done by adding to a correct answer value by one every time the quiz taker leaves the "That's right!" screen. The purpose of this function is to determine the extent of your knowledge about Pokémon. The flavor text at the end implies a further purpose of encouraging the quiz-taker to keep learning more, just for the fun of it.

onEvent("nextquestion1r", "click", function( ) {
    cor = cor + 1;
// Upon leaving the "That's right!" page, the score increases.
    setScreen("question2");
  });
onEvent("nextquestion1w", "click", function( ) {
    setScreen("question2");
// Your score does not change after the "Not quite!" page.
  });

"Data Abstraction"

In this case, the variable that is incremented throughout the quiz-taking process is called cor. The cor data is increased by one after clicking off of the "That's right!" screen (see above), stored locally and called locally at the end of the quiz to display your score through the defined function scorecheck() (see below). The purpose of cor is detecting the number of correct answers you've given and, through scorecheck(), letting you know how well you know Pokémon.

function scorecheck() {
    if (cor == 0) {
    showElement("015");
    showElement("0to7");
  }
  if (cor == 1) {
    showElement("115");
    showElement("0to7");
  }
  if (cor == 2) {
    showElement("215");
    showElement("0to7");
  }
  if (cor == 3) {
    showElement("315");
    showElement("0to7");
  }
  if (cor == 4) {
    showElement("415");
    showElement("0to7");
  }
  if (cor == 5) {
    showElement("515");
    showElement("0to7");
  }
  if (cor == 6) {
    showElement("615");
    showElement("0to7");
  }
  if (cor == 7) {
    showElement("715");
    showElement("0to7");
  }
  if (cor == 8) {
    showElement("815");
    showElement("8to12");
  }
  if (cor == 9) {
    showElement("915");
    showElement("8to12");
  }
  if (cor == 10) {
    showElement("1015");
    showElement("8to12");
  }
  if (cor == 11) {
    showElement("1115");
    showElement("8to12");
  }
  if (cor == 12) {
    showElement("1215");
    showElement("8to12");
  }
  if (cor == 13) {
    showElement("1315");
    showElement("13to14");
  }
  if (cor == 14) {
    showElement("1415");
    showElement("13to14");
  }
  if (cor == 15) {
    showElement("1515");
    showElement("perfecttext");
  }
}
// This function is then called just before the results screen.
// Keep in mind that there are two different screens that send you to
// the results screen: question15answer and question15wrong.

"Managing Complexity"

As shown below, correct and incorrect responses send to question[#]answer and question[#]wrong respectively, upon which the player's score is increased by one or left alone. Images and labels to answers are given their own onEvent responses so that the correct question's results screen is shown.

"Procedural Abstraction"

The scorecheck() function (see above) shows management of complexity using abstraction within the program. If these if statements were crowded into the two places in which scorecheck() is used, it would cause the program to be needlessly bloated. On top of this, by naming the function scorecheck(), it is clear what the purpose of the function is: checking the score of the player, and then showing the player how well they did by revealing certain score-based elements on the next screen.

// Provided for "Managing Complexity"
onEvent("pikachuim", "click", function( ) {
    setScreen("question1wrong");
  });
// If the player clicks on the Pikachu image (ID: pikachuim), they will be sent to
// the "Not quite!" version of the results screen.
onEvent("rhydonim", "click", function( ) {
    setScreen("question1answer");
  });
// If the player clicks on the Rhydon image (ID: rhydonim), they will be sent to
// the "That's right!" version of the results screen.
onEvent("clefairyim", "click", function( ) {
    setScreen("question1wrong");
  });
onEvent("bulbasaurim", "click", function( ) {
    setScreen("question1wrong");
  });

"Algorithm Implementation"

An algorithm followed throughout the quiz is only incrementing the cor variable after correct answers. It is never subtracted from, as wrong answers are detected by finding the difference between cor and the number of questions by the end. This is easy for anyone else to put into play so long as his or her quiz recognizes correct and incorrect answers in some fashion.

"Testing"

The quiz has little to anticipate, as there are only so many possible inputs the user can make. Each is accounted for with an associated slide and, for some inputs, function or algorithm. This category can be satisfied by the above code, as it anticipates that the user will click one out of the four options, each of which sending to an associated results screen. The quiz anticipates that any one of these questions can be clicked at any time, so there must be a called-upon output for each.

Changes I Would Make in the Future

The only reason there are completely separate screens to differentiate between a correct response and an incorrect one (question[#]answer and question[#]wrong) is that I had planned on writing separate text for each of those slides. As is the case for multiple elements of this quiz (the 20 original questions, an ambitious planned free-response segment, etc.), what ultimately got in the way was tedium. It simply didn't feel like adding those things would really improve the purpose of the program.

The trivia was already mostly difficult. I know I could make an awesome, super complicated quiz if I wanted to, but it just didn't feel like there was much of a point to it. I could have created a bank of more questions to give the quiz some variance (like my survey from last week), created a function to generate a random number, checked prevoiusly generated numbers with a for loop, and then have 15-20 randomly-selected, non-repeating questions. But why? It serves its purpose.

That said, I'm a perfectionist. A very adamant one. If it would fix some sort of bug in the program, I definitely would go back and make your score imcrement upon clicking the correct answer, then consolidate the two screens into a single question[#]answer screen on which I used showElement to display "That's right!" or "Not quite!" depending on the previous response. I know that would be just slightly more efficient...but efficiency wasn't exactly a problem to begin with.

What Other Apps Could I Make?

The options really feel limitless. Being able to display visual elements that respond to being clicked or react to certain keyboard inputs is such a boon for an aspiring game-maker like myself. Considering the for-fun Python program I'm making right now, I'm already tempted to use it to make a little turn-based battle system, maybe even directly replicating the Pokémon battle formula, with a back sprite on your end and a front sprite on theirs. Maybe you're battling the Champion with his full team of six and you need to find a way to win with a not-so-good team of your own. Who knows? There's lots that can be done.

If I think of something more interesting than my own custom text-based RPG I'm making with Python, I'll look into it.