Skip to content

Project 1 Feedback (DO NOT MERGE ME) #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
perryf wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Project 1 Feedback (DO NOT MERGE ME) #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 9 additions & 6 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,21 @@
# Trivia-Game
**Objective** -

<!-- Change the title to something more descriptive like "Space Balls Trivia" -->
## Objective
<!-- Rename this section User Stories or Features and add more to describe the visual functionality as well -->
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.

<!-- README is pretty solid. I'd also include a Setup Instructions section to let people know how to get the project on their computer and how to run it. I would also make your sections a little more concise-->
17 changes: 17 additions & 0 deletions feedback.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
12 changes: 9 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
<link rel = 'stylesheet' href = 'style.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js' defer></script>
<script src='script.js' defer></script>
<!-- Since you have document.ready you don't really need defer here -->
<title>Spaceballs Trivia</title>
</head>
<body>
Expand All @@ -13,8 +14,7 @@ <h1>Spaceballs The Trivia</h1>
</header>
<main>
<div class='health-bar-box'>
<div class='health-bar'>
</div>
<div class='health-bar'></div>
</div>
<div class='start-menu'>
<h2>Instructions</h2>
Expand All @@ -25,7 +25,7 @@ <h2>Instructions</h2>

</div>
<div class='rightOrWrong'>

<!-- Change this to `right-or-wrong` -->
</div>
<div class='end'>

Expand All @@ -36,3 +36,9 @@ <h2>Instructions</h2>
</footer>
</body>
</html>

<!-- Good job using semantic elements (header, main, footer) -->
<!-- Good job using `kabob-case` for all class and id names! -->
<!-- Make sure you change your single quotes to "double quotes!" -->
<!-- HTML / CSS by convention use "double quotes" -->
<!-- Elements are Nested/Formated properly -->
20 changes: 16 additions & 4 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,13 +107,15 @@ $(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 = ""
var currentIndex = 0
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()
Expand All @@ -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()
Expand All @@ -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
}
Expand All @@ -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()
Expand Down Expand Up @@ -207,22 +210,24 @@ $(document).ready(function(){
// $('.end').html(endScreenWin)
// endGame()
// }
// No commented out code in production branch!
function incorrectAnswer() {
$('.game').hide()
incorrectImageHtml = "<img src='wrong.png' alt = 'Incorrect'>"
$('.rightOrWrong').html(incorrectImageHtml)
$('.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++
Expand Down Expand Up @@ -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!
17 changes: 15 additions & 2 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 {
Expand All @@ -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;
}
Expand All @@ -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;
Expand All @@ -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!)*/