more updates to readme, clean up js code after solving 'question popu…

…lating' issue

README.md

@@ -6,12 +6,14 @@
 What kind of footprint do you leave on the world? What impact do you have on the people around you? Being a good person doesn't have to be a pretentious sweater you show off - all it takes is paying attention to the little details of life.
 The goal is simple - choose a category and answer questions. Each question will have multiple choice answers, and after selecting your answer you will receive points - or not! At the end of a category you will see your total score and see how close you are to being a "perfect person". (FYI - no such thing.)
 
-#[screenshot here eventually](https://dietmartemps.com/media_library/image/28928_1374416277166.jpg)
+#[PLAY GAME!](https://rbozek.github.io/Quiz-BeAGreatHuman/)
 
 
 Technologies used 
 
-list here
+HTML
+CSS
+Javascript
 
 Credits
 
@@ -23,12 +25,15 @@ https://wallpapers.com/background/abstract-and-artistic-tile-background-idgwxxk9
 https://www.etsy.com/listing/1191383415/chakra-balance-meditation-jar
 https://github.com/jmca
 
-Minecat uses JoyPixels 6.0 Cat With Wry Smile as favicon. Found at: Joypixels.
+Minecat uses JoyPixels 6.0 Cat With Wry Smile as favicon. Found at: Joypixels. (link)
+
 
-Minecat uses confetti-js by Gabriel Age to generate celebratory confetti. Found at: GitHub.
+Basic Improvements (not quite Ice Box)
 
-Minecat uses a heavily modified version of Animate.css created by Daniel Eden, Elton Mesquita, and Waren Gonzaga. The package is licensed under the MIT License found here. Animate.css can be found here.
+list here
 
 Ice Box 
 
-list here
+Categories -> after finishing 1st category & seeing score, user can proceed to the other categories & keep updating their total score, rather than only re-starting
+Score handling complexity -> instead of only correct/incorrect, have a "maximum amount of points" for guessing correctly the first time, and subtract points for each incorrect guess
+Secret page - if user achieves perfect score, show a unique "super winner" page

js/app.js

@@ -20,12 +20,10 @@ let timerSeconds, timerInterval
 const btnCategory1 = document.getElementById("btn-category-1")
 const btnCategory2 = document.getElementById("btn-category-2")
 const btnCategory3 = document.getElementById("btn-category-3")
-// const buttonsContainer = document.getElementById("buttons-container") // might have to go remove butons-container div
 const question = document.getElementById("question-p")
 const answers = document.getElementById("answers-ul")
 const btnReset = document.getElementById("btn-reset")
 const rulesBtnDiv = document.getElementById("rules-btn-container")
-// let initialState = rulesBtnDiv.innerHTML;  //  for eventual game reset
 const playerScoreContainer = document.getElementById("player-score")
 let initialScoreState = playerScoreContainer.innerHTML = `score`
 const countdown = document.getElementById("countdown")  // TIMER
@@ -37,23 +35,6 @@ btnCategory2.addEventListener('click', renderQuestionCat2)
 btnCategory2.addEventListener('click', startTimer)  // TIMER
 btnCategory3.addEventListener('click', renderQuestionCat3)
 btnCategory3.addEventListener('click', startTimer)  // TIMER
-
-
-  // TRYING IDEA, DIDNT WORK
-// buttonsContainer.addEventListener('click', handleCategoryClick);
-// function handleCategoryClick(evt) {
-//   if (evt.target.id === 'btn-category-1') {
-//       renderQuestionCat1();
-//       startTimer();
-//   } else if (evt.target.id === 'btn-category-2') {
-//       renderQuestionCat2();
-//       startTimer();
-//   } else if (evt.target.id === 'btn-category-3') {
-//       renderQuestionCat3();
-//       startTimer();
-//   }
-// }
-
 btnReset.addEventListener('click', resetGame)
 
 
@@ -87,7 +68,6 @@ function stopTimer() {
 function renderQuestionCat1() {
   rulesBtnDiv.style.display = 'none'
   currentCategory = 1 // to fix problem at end of playerChooseAnswer
-  console.log('renderQuestionCat1 works');
   let singleQuestion = questionsCat1[currentQuesIdx]    //HOLDS ONE SPECIFIC QUESTION:
   question.textContent = `${singleQuestion.quesQ}`
   let answersToSingleQuestion = singleQuestion.quesAs  //HOLDS ARRAY OF ANSWERS:
@@ -105,7 +85,7 @@ function renderQuestionCat1() {
 
 function renderQuestionCat2() {
   rulesBtnDiv.style.display = 'none'
-  currentCategory = 2 // to fix problem at end of playerChooseAnswer
+  currentCategory = 2
   let singleQuestion = questionsCat2[currentQuesIdx] 
   question.textContent = `${singleQuestion.quesQ}`
   let answersToSingleQuestion = singleQuestion.quesAs 
@@ -121,7 +101,7 @@ function renderQuestionCat2() {
 }
 function renderQuestionCat3() {
   rulesBtnDiv.style.display = 'none'
-  currentCategory = 3 // to fix problem at end of playerChooseAnswer
+  currentCategory = 3
   let singleQuestion = questionsCat3[currentQuesIdx]
   question.textContent = `${singleQuestion.quesQ}`
   let answersToSingleQuestion = singleQuestion.quesAs  
@@ -138,13 +118,15 @@ function renderQuestionCat3() {
 
 function playerChooseAnswer(evt){
   let selectedAnsIdx = Array.from(answers.children).indexOf(evt.target); // this line answers.children from ChatGPT!
-  playerScoreContainer.innerHTML = `Your score:<br>${ playerScore }`
   if (selectedAnsIdx == currQuesCorrAnsIdx){
     // console.log('correct answer selected');
     playerScore += 1
   } else  {
+    playerScore += 0
     // console.log('incorrect answer selected');
-  }  
+  }
+
+  playerScoreContainer.innerHTML = `Your score:<br>${ playerScore }`
 
   if (
     (currentCategory === 1 && currentQuesIdx < questionsCat1.length) ||
@@ -197,7 +179,5 @@ function resetGame(){
   playerScore = 0
   console.log(playerScore, currentQuesIdx);
   console.log('resetting game');
-
 }
 
-

js/pseudocode.js

@@ -32,27 +32,19 @@
 // PROBLEM - 'reset game' resets board, but then cant populate any new questions - probably has to do with TypeError that appears after I finish a category
 //   -line 99! I think ChatGPT came up with a gurd idear! (saved bookmark)
 // PROBLEM - FIXED!--I have "rulesBtnDiv.innerHTML" inside function ONLY FOR CATEGORY 1 - but for some reason it activates even if i'm using category 2 - im calling cat1() inside playerAnswer too! DAMMIT! how can i get that global? - FIXED!!! conditional 
--Fix playerScore!! close but a little wonky
 
-  // timer for entire category, not each question
+-Check playerScore!! might be a little wonky
+
+// timer for entire category, not each question
 // ** sounds: sound for button clicks, add sound for playerScore, and diff sound for perfect score  ->  button to turn off sounds??
-// ** images: favicon to page, monk image for top of page before game starts / (icebox, below - images replace radio buttons?)
+// ** images: favicon to page DONE, monk image for top of page before game starts
 // color scheme: warm colors
 
-
-// ATTEMPTS
+// IF I HAVE TIME
+// seaprate "rules" & "buttons" - when user starts, everything disappears, but after a reset, only buttons re-appear
 // add conditional - if player got a perfect score, play hidden sound (or display hidden image)
 
 
-// ICEBOX OR ATTEMPT?
-// re-structure data OR functions to minimize repeated code 
-// CATEGORIES -> after finishing 1st category & seeing score, user can proceed to the other categories & keep updating their total score
-// SCORE - each question responds immediately to user choice - max points for correct 1st guess, subtract points for each incorrect guess
-// perfect score shows a secret page!
-
-
-
-
 
 // BELOW IS ORIGINAL PSEUDOCODE - the order i wrote things in ended up confusing me - i should have written in order of steps. making some big pivots in code so some are irrelevant - after i get basic functionality better, will come back & try to utilize some of these.