diff --git a/README.md b/README.md index 59cf035..1de5128 100644 --- a/README.md +++ b/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 \ No newline at end of file +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 \ No newline at end of file diff --git a/js/app.js b/js/app.js index 1745af0..84e888e 100644 --- a/js/app.js +++ b/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:
${ playerScore }` if (selectedAnsIdx == currQuesCorrAnsIdx){ // console.log('correct answer selected'); playerScore += 1 } else { + playerScore += 0 // console.log('incorrect answer selected'); - } + } + + playerScoreContainer.innerHTML = `Your score:
${ playerScore }` if ( (currentCategory === 1 && currentQuesIdx < questionsCat1.length) || @@ -197,7 +179,5 @@ function resetGame(){ playerScore = 0 console.log(playerScore, currentQuesIdx); console.log('resetting game'); - } - diff --git a/js/pseudocode.js b/js/pseudocode.js index 992bfb4..9892297 100644 --- a/js/pseudocode.js +++ b/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.