From f66cbf9a6977fe01e3e45fd8d2e47f16bd954025 Mon Sep 17 00:00:00 2001 From: Perry Fustero Date: Fri, 3 Nov 2017 17:03:08 -0400 Subject: [PATCH] Project 1 Feedback (DO NOT MERGE ME) --- README.md | 15 +++++++++------ feedback.md | 17 +++++++++++++++++ index.html | 12 +++++++++--- script.js | 20 ++++++++++++++++---- style.css | 17 +++++++++++++++-- 5 files changed, 66 insertions(+), 15 deletions(-) create mode 100644 feedback.md diff --git a/README.md b/README.md index 6e04f7e..c5271dc 100644 --- a/README.md +++ b/README.md @@ -1,18 +1,21 @@ # Trivia-Game -**Objective** - - + +## Objective + User attempts to answer questions correctly. If the user answers enough questions to drop the red bar to 0 then more questions will be added as they move on to the next stage. First stage consists of 6 questions requiring 4 correct answers to move on, the second stage consists of 7 questions requiring 5 correct to advance, and the last stage consists of an additional 7 questions and requires 6 correct to advance. If a user uses less questions than are in the stage to advance, then the left over questions will be added to the next stage. -**Technologies Used** - +## Technologies Used Used Javascript to store the questions, choices, and answers. Also created multiple functions to keep the code clean and readable. -Used JQuery to manipulate the DOM, HTML, and CSS to have classes appear and disappear and to add listeners for events. +Used jQuery to manipulate the DOM, HTML, and CSS to have classes appear and disappear and to add listeners for events. -**Approach** - +## Approach The first thing I did was to tackle the questions and how to store them such that I could call them easily, which I did by creating an array of objects with each of those objects being 1 question and its choices and answer. Next I worked on creating a function to iterate through the array of objects and grab each object and assign each of the objects values to its respective spot on screen. After that I created functions to check weather the answer was correct or incorrect, give a result dependent on that, and interact with the bar on the top of the screen if the answer was correct. After completing this, I worked on implementing the multi stage system that is in place currently where only once you complete the requirements for stage one are the questions for stage two added. -**Unsolved Problems** - +## Unsolved Problems There aren't really any unsolved problems, however there are some things that I would like to add to this game when I get the time. The first being the option to have multiple different sections of questions and allowing the user to pick which one they want to start at and then when they finish a section they can pick which of the other sections they want to go to. I would also like to implement a way of keeping track of the scores in each of those different sections. + + diff --git a/feedback.md b/feedback.md new file mode 100644 index 0000000..01c365b --- /dev/null +++ b/feedback.md @@ -0,0 +1,17 @@ +# Project 1 Evaluation +[inline code comments]() +## Planning / Process / Submission +**1: Progressing** +>App is submitted, with basic evidence of planning. Documentation exists, but lacks common areas such as setup instructions, description of application functionality and link to deployed application + +## Technical Requirements +**2: Performing** +>App functions with minimal or no errors and is deployed on github pages + +## Code Quality +**1.5: Progressing** +>Code lacks proper formatting, includes commented out, non-functional code, or otherwise contains major issues of quality (DRY, naming, etc) + +## Creativity and Interface +**1.5: Progressing** +>The app is styled and has an interface of value to the end user: it is not just a nav bar and an index page diff --git a/index.html b/index.html index 7c5d782..8260343 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ + Spaceballs Trivia @@ -13,8 +14,7 @@

Spaceballs The Trivia

-
-
+

Instructions

@@ -25,7 +25,7 @@

Instructions

- +
@@ -36,3 +36,9 @@

Instructions

+ + + + + + diff --git a/script.js b/script.js index 2dbf5b9..f81a95c 100644 --- a/script.js +++ b/script.js @@ -107,6 +107,7 @@ $(document).ready(function(){ } ] ] + // Questions are formatted well - consider moving these into a seperate JS file to make things more readable and more modular. var totalCorrect = 0 var totalWrong = 0 var allChoicesHtml = "" @@ -114,6 +115,7 @@ $(document).ready(function(){ var currentQuestion var healthBarCounter = 0 var h = 0 + // Good job declaring your global variables in one place above your functions function startGame () { $('.health-bar').width(600) $('.end').hide() @@ -125,13 +127,13 @@ $(document).ready(function(){ $('.start-menu').hide() selectQuestion() - } function selectQuestion () { $('.health-bar-box').show() allChoicesHtml = "" // currentCategory = "spaceballs" + // Make sure to ditch all commented out code in your master branch currentQuestion = trivia[currentIndex] currentIndex++ displayQuestion() @@ -143,7 +145,6 @@ $(document).ready(function(){ //$('.game').html(questionHtml) displayChoices() $('.game').show() - // take data from `currentQuestion` and display it in the // DOM using jQuery } @@ -169,6 +170,8 @@ $(document).ready(function(){ $('.gameBoard').remove() totalCorrect++ console.log(totalCorrect) + // These 3 lines above should be put in your correctAnswer function. + // Probably don't want console.logs in master branch assuming they are not part of the user experience } else { incorrectAnswer() @@ -207,6 +210,7 @@ $(document).ready(function(){ // $('.end').html(endScreenWin) // endGame() // } + // No commented out code in production branch! function incorrectAnswer() { $('.game').hide() incorrectImageHtml = "Incorrect" @@ -214,15 +218,16 @@ $(document).ready(function(){ $('.rightOrWrong').show() nextQuestion() } + // You could combine incorrectAnswer and correctAnswer into a new function like `selectAnswer` to abstract some of the code from userSelected/ incorrectAnswer/ correctAnswers function nextQuestion() { - setTimeout(checkQuestions, 2000) + setTimeout(checkQuestions, 2000) // This is maybe slightly long on the time. Consider resizing the images slightly as well } function checkQuestions() { $('.rightOrWrong').hide() if (currentIndex < trivia.length && newWidth > 0){ selectQuestion() } - else if (newWidth == 0 && currentIndex <= trivia.length && healthBarCounter < 2){ + else if (newWidth == 0 && currentIndex <= trivia.length && healthBarCounter < 2){ healthBarCounter ++ trivia.push(...bonusTrivia[h]) h++ @@ -252,4 +257,11 @@ $(document).ready(function(){ var choicesHtml $('#start-button').click(startGame) $('#reset-button').click(startGame) + // I would put these event listeners attached to the buttons at the top of the page with your global variables. }) + +// Great job with the JS overall. Code is semantically clear and functions well. +// There is a little bit of abstraction that could be done on some of the functions to make them smaller, more well defined, and specific. +// Beyond that, the biggest improvement in code quality would come from cleaning up and organizing. Get rid of commented out lines, make sure nothing is redundent, and organize best you can to make everything a bit more readable and intuitive. +// Lastly, it might be a good idea to add a little bit of humor to match the content of this app. Or a brief storyline to explain the health bar and engage the user even more. +// Overall great job! diff --git a/style.css b/style.css index da573d3..7a9a11c 100644 --- a/style.css +++ b/style.css @@ -2,6 +2,7 @@ body { color: blue; background-color: #3D9E84; font-family: Helvetica, sans-serif; + /*Consider experimenting with more fonts like these https://fonts.google.com/*/ } h1 { color: #07557f; @@ -20,7 +21,8 @@ button { display: inline-flex; } .startMenu { - margin: 0,auto; + /*margin: 0 auto;*/ + /*No commas in margin! This line of code was not running because of the comma*/ float: left; } .game { @@ -40,6 +42,7 @@ button { padding-right: 10px; padding-left: 10px; } +/*Nice use of hover here. Consider using the `cursor` declaration as well to make it more clear what can be clicked on*/ .rightOrWrong{ display: none; } @@ -57,7 +60,8 @@ button { height: 60px; border: 2px solid white; border-color: white; - padding: 20px,1000px; + /*padding: 20px 1000px;*/ + /*No commas in padding either!*/ } .health-bar { height: 60px; @@ -72,3 +76,12 @@ button { color: white; font-size: 40px; } + +/*Good job going from least specific at the top of your document to most specific at the the bottom (elements, then classes, then ids)*/ +/*Make sure you run your code through a CSS validator to check for syntac bugs*/ +/*Good job using semantic names for targetting elements to make your code readable*/ +/*Page scales pretty well - good job using flexbox to achieve this. I would adjust the margin slightly for the questions so that they don't go so far to the edge of the page*/ +/*I'd say the layout of the site is pretty good, however I'd like to see a little more attention paid to the styling. Here are some suggestions in that regard...*/ +/*- Play around with your color palatte and font options, a lighter background might feel more natural*/ +/*- The blue for the answer choices is a little harsh*/ +/*- Maybe an image or two? (make sure you cite them!)*/