My App

Plan

I plan to create two things on my App. I want to make a quiz about animals and a luck based game that uses tiles.

Animal Quiz

I want this to be a 10 question quiz that requires the user to type in their answer. I will do this with the onEvent function and use an image and text input.

Luck Based Game

I want this game to have 16 tiles and the user and a friend can take turns choosing tiles. I will do this will boxes and images that appear by using the onEvent click function. I will also use variable to control whose turn it is.

Extra Features

Animal Quiz

  • The user can click a back button that allows them to go back to the homepage or restart the game
onEvent("home", "click", function( ) {
  setScreen("homepage");
});
onEvent("animalstart", "click", function( ) {
  setScreen("start");
});
  • The question the user is on before they click the back button is recorded so they can return if they decide to cancel
onEvent("cancel", "click", function( ) {
    setScreen(Arrq[animalq]);
});

animalq = 0;
  • I used arrays to minimize the repeating, the arrays were used to move through questions
var Arrq = ["q1", "q2", "q3", "q4", "q5", "q6", "q7", "q8", "q9", "q10", "end"];
setScreen(Arrq[animalq]);
animalq = 0;
  • I made a function that would see if the answer was correct or incorrect, so it could display and check or x
function grade(input, animal, animal2, check, x, q){
  if (getText(input).toLowerCase() == animal) {
    correct++;
    showElement(check);
  } else if (getText(input).toLowerCase() == animal2) {
    correct++;
    showElement(check);
  }  else {
    showElement(x);
  }
  hideElement(input);
  setTimeout(function() {
    hideElement(check);
    hideElement(x);
    showElement(input);
    setText(input, "");
    setScreen(q);
  }, 1000);
}

grade("panda-input", "panda", "", "check1", "x1", "q2");
  • The user's score is posted at the end of the game (out of 10)
setText("score", "Your score is " + correct + "/10!!!");
  • The user's answer can be in any case, because I converted their answer to lowercase to compare it to the lowercase answer key
if (getText(input).toLowerCase() == animal) {
    correct++;
    showElement(check);
}

Luck Based Game (Logo Game)

  • The user can also click a back button that lets them restart or go to the homepage
onEvent("back", "click", function( ) {
  setScreen("choiceslogo");
});
onEvent("homepagelogo", "click", function( ) {
  setScreen("homepage");
  codeorg = 0;
});
onEvent("reset", "click", function( ) {
  setScreen("logostart");
  codeorg = 0;
});
onEvent("cancellogo", "click", function( ) {
  setScreen("gamescreen");
});
  • The tiles are shuffled each game to make each experience unique
var Arrsquare = ["a1", "a2", "b1", "b2", "c1", "c2", "d1", "d2", "e1", "e2", "f1", "f2", "g1", "g2", "h1", "h2"];

function shuffle(array) {
  var Arrbefore = array.length,  Arrshuffle;
  while (Arrbefore != 0) {
    Arrshuffle = Math.floor(Math.random() * Arrbefore);
    Arrbefore--;
    var swap = array[Arrbefore];
    array[Arrbefore] = array[Arrshuffle];
    array[Arrshuffle] = swap;
  }
  return array;
}

Arrnewsquare = shuffle(Arrsquare);
  • They are shuffled into an array, then the tiles are moved to the correct position using a for loop and an array
var Arrxcoord = ["13", "89", "165", "241", "13", "89", "165", "241", "13", "89", "165", "241", "13", "89", "165", "241"];
var Arrycoord = ["78", "78", "78", "78", "154", "154", "154", "154", "230", "230", "230", "230", "306", "306", "306", "306"];
var Arrbox = ["box1", "box2", "box3", "box4", "box5", "box6", "box7", "box8", "box9", "box10", "box11", "box12", "box13", "box14", "box15", "box16"];

onEvent("logostartbutton", "click", function( ) {
  setScreen("gamescreen");
  Arrnewsquare = shuffle(Arrsquare);
  for (var i = 0; i < 16; i++) {
    hideElement(Arrnewsquare[i]);
    hideElement("win");
    setPosition(Arrnewsquare[i], Arrxcoord[i], Arrycoord[i], 60, 60);
    setProperty(Arrbox[i], "background-color", "#D7DADA");
  }
});
  • Each time the tile is clicked, it is tested to be the winner and then it changes the tile color to minimize confusion while playing
function redundant(box){
  showElement(Arrnewsquare[clicked]);
  numclick++;
  if(Arrnewsquare[clicked]=="h1"){
    wintime();
  }
  evenorodd = numclick%2;
  if (evenorodd == 0){
    setProperty(box, "background-color", "#6BC9FF");
  }
  else if (evenorodd == 1){
    setProperty(box, "background-color", "#F27A72");
  } 
}
  • When there is a winner, the program sees if the amount of clicks is even or odd to decide if player 1 or 2 wins 
function wintime(){
  showElement("win");
  evenorodd = numclick%2;
  if (evenorodd == 0){
    setProperty("win", "text-color", "#6BC9FF");
    setText("win", "Player 2 Wins!!!");
  }
  else if (evenorodd == 1){
    setProperty("win", "text-color", "#F27A72");
    setText("win", "Player 1 Wins!!!");
  }
}

Problems and Solutions

  • On the animal quiz, I couldn't type in rhinoceros or hippopotamus, so I added that the quiz would test both for hippo or hippopotamus and rhino or rhinoceros.
if (getText(input).toLowerCase() == animal) {
    correct++;
    showElement(check);
} else if (getText(input).toLowerCase() == animal2) {
    correct++;
    showElement(check);
}
  • On both games, when I restarted the game, the previous results were still there, so I reset the game every time the screen was switched to the game screen.
onEvent("start-button", "click", function( ) {
    setScreen("q1");
    correct = 0;
});

onEvent("logostartbutton", "click", function( ) {
    setScreen("gamescreen");
    Arrnewsquare = shuffle(Arrsquare);
    for (var i = 0; i < 16; i++) {
      hideElement(Arrnewsquare[i]);
      hideElement("win");
      setPosition(Arrnewsquare[i], Arrxcoord[i], Arrycoord[i], 60, 60);
      setProperty(Arrbox[i], "background-color", "#D7DADA");
    }
});
  • On the luck game, I couldn't figure out how to shuffle the position of the tiles, so I researched online on ways to shuffle an array and used this in my code.
function shuffle(array) {
    var Arrbefore = array.length,  Arrshuffle;
    while (Arrbefore != 0) {
      Arrshuffle = Math.floor(Math.random() * Arrbefore);
      Arrbefore--;
      var swap = array[Arrbefore];
      array[Arrbefore] = array[Arrshuffle];
      array[Arrshuffle] = swap;
    }
    return array;
}
  • On the logo game, I couldn't make it announce the winner, so I debugged my code and realized that I needed to test after each click if the logo had been found.
function wintime(){
    showElement("win");
    evenorodd = numclick%2;
    if (evenorodd == 0){
      setProperty("win", "text-color", "#6BC9FF");
      setText("win", "Player 2 Wins!!!");
    }
    else if (evenorodd == 1){
      setProperty("win", "text-color", "#F27A72");
      setText("win", "Player 1 Wins!!!");
    }
}

function redundant(box){
  showElement(Arrnewsquare[clicked]);
  numclick++;
  if(Arrnewsquare[clicked]=="h1"){
    wintime();
  }
  evenorodd = numclick%2;
  if (evenorodd == 0){
    setProperty(box, "background-color", "#6BC9FF");
  }
  else if (evenorodd == 1){
    setProperty(box, "background-color", "#F27A72");
  } 
}

onEvent("box1", "click", function( ) {
    clicked = 0;
    redundant("box1");
});
  • On the luck game, the user could press in a small portion of the tile and cause the tile to change color, so I edited the sizing and position of the tiles to eliminate the error.
setPosition(Arrnewsquare[i], Arrxcoord[i], Arrycoord[i], 60, 60);

Create Performance Task skills and rubric

Program Purpose and Function

The Animal Quiz's purpose is to quiz the user on their knowledge of animals from photos. The function of the quiz is they press the animal button in the homepage, then press another button to start the quiz. They are then prompted to type in the name of the animal in a text input for 10 animals. For each correct answer a check is displayed and an x for every incorrect. At the end the user can view their score. At any point in the quiz, the user can click the back arrow and they can either return to the homepage, restart the quiz, or cancel the back arrow.

The Logo Game's purpose is to let the 2 users have a friendly contest. The function of the game is that they press the game in the homepage, then press start to begin the game. The users take turns picking tiles, each turning a different color for each player. Once a logo is found, the player who clicked it is announced as the winner and the users are given a chance to play again. At any point in the quiz, the user can hit a back arrow to return to the homepage, restart the game, or cancel.

Data Abstraction

I used a list for the x and y coordinates of the tiles. These tiles were then used to reposition the positions of the tiles in a randomized order to create a new game each time. The name of the variable in the code are Arrxcoord and Arrycoord. The data in these lists are the x and y coordinates of the tiles and where they should be placed.

Managing Complexity

I created a function called grade that would check if the answer given by the the user was correct in the Animal Quiz. It would take in a parameter of the text inputted, the correct answer, an alternate spelling, the screen's checkmark, the screen's x and the next question screen. With these, the function would compare the inputted text with the correct answer or alternate spelling. If it is correct, the function would display the screen's checkmark. If not, the function displays the screen's x. After a second passes, the function would switch to the next question. This minimizes the complexity of the program by condensing the multiple tests into one singular function.

Procedural Abstraction

Like how I managed complexity I made a function to grade the Animal Quiz responses. It would take in a parameter of the text inputted, the correct answer, an alternate spelling, the screen's checkmark, the screen's x and the next question screen. With these, the function would compare the inputted text with the correct answer or alternate spelling. If it is correct, the function would display the screen's checkmark. If not, the function displays the screen's x. After a second passes, the function would switch to the next question.

Algorithm Implementation

I used iteration in the for loop when shuffling the position of the tiles in the Logo Game The loop would run through an array and use the data of each element to position the tiles on the x and y coordinate plane. I had selection through my if and else statements. These would only run the code if the if and else statements' requirements were met. I had sequencing in my AppLab by running code consecutively. When resetting the game screens and questions, the answers were erased and the colors were wiped and correct amount of answers were ran in a sequence.

Testing

I tested my quiz and game multiple times to make it as efficient and make it avoid as many errors as I could think of. I would let it so the variable that regarded score would always be reset so the score would not superscore. Also I would reshuffle the tiles in the Logo Game so the position of the winning tile would be different every time.