App Lab

We will be using App Lab on Code.org to develop a simple quiz. The lab allows us to easily use Javascript without typing, but in terms of blocks.

Outline

We will create an introduction page, and have a 3 quesiton quiz. The intro page will have a button which allows the user to go to the next question, as well as an image related to the quiz.

We plan to have our quiz be about Del Norte High School, so it could provide some uses to Del Norte students. Potential topics for quiz questions could be:

  • What is our mascot?
  • What classes are offered at DNHS?
  • Who is our principal?
  • What time does school start?
  • What time does school end?
  • When are late start days?

Each question will have 4 answer choices, with an image or button corresponding to answer choices. If the user clicks on the button corresponding to the right answer, they will be taken to a “correct screen.” If the user gets the question wrong(clicks on an incorrect answer choice), they will be taken to an “incorrect page.”

On each “correct screen”, we plan to have an image which showcases an image of validation, and a button for the next question. On each “incorrect page”, we would have the opposite of the “correct screen”, but still a button for the next question.

After the user answers all the questions, we will take them to a final screen, which could show their score or take them to the beginning of the quiz if they want to retake it.

Plan of Screens: Home Screen -> Question 1 Screen -> Correct/Wrong Screen -> Question 2 Screen -> Correct/Wrong Screen -> Question 3 Screen -> Correct/Wrong Screen -> Final Screen

Our Code

We utilized a lot of onEvent statements in our code, as they would let us know if a specific button has been clicked.

Additionally, to get a score, we defined a variable and added to it every time the user selected a correct answer.

We created a variable results box, which is varied due to the display of the score. We did this since each user would have a different score.

The playSound button adds a fun little twist, as it plays custom audio to the user after completion of the quiz.

We often looked at the code in the text form to help us build familiarity with Javascript. The debug console also helped us a lot in figuring out our mistakes, and we will use it a lot in future projects. We wonder if the debug console can be used in other languages, like Python.

The Quiz.

Here is the link to our quiz.

Our Experience

Successes, Discoveries, and Challenges

We created a quiz which was able to track the score of the user. We had some challenges defining a variable to store the score, since the syntax is different from python. We realized that we had to define the variable, and then add to it using different syntax. This is different from python because python allows the coder to keep on redefining a variable.

We also had some trouble with formatting, and centering the images and items on the screen. We learned about the pixel dimensions of the screen(it is 320 x 450 px!) We then had to use dimensions of other items on the screen to help us center the images. It was also interesting to see how the positioning system works.

What We Learned

Using AppLab was a very cool experience. It really helped us learn more about Javascript, with an easy to use interface. We liked using the blocks, but the ability to check out the code in true Javascript helped us see basic Javascript programming. This project helped us learn about user interaction and how Javascript is a powerful language for that.

We also got a preview of how to use images in Javascript. We saw the positioning system, but there still a lot to learn about how to call the shapes in real code.

Extra Project

We decided to test out other features in App Lab. We did this by creating a simple game of tic tac toe. We learned about defining variables, altering images, and even adding sound! The program allows two users to play a game of tic tac toe, and allows the user the option to reset the scoreboard without restarting the app. We also continued practicing Javascript, and using the debug console as a way to help us see where our code was going wrong. Link -> Tic Tac Toe