diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..e59a2326 Binary files /dev/null and b/.DS_Store differ diff --git a/Images/Donald Duck.jpg b/Images/Donald Duck.jpg new file mode 100644 index 00000000..05a7021f Binary files /dev/null and b/Images/Donald Duck.jpg differ diff --git a/Images/background.jpeg b/Images/background.jpeg new file mode 100644 index 00000000..1c7dddac Binary files /dev/null and b/Images/background.jpeg differ diff --git a/Images/backstage.png b/Images/backstage.png new file mode 100644 index 00000000..ed874a65 Binary files /dev/null and b/Images/backstage.png differ diff --git a/Images/d&D.jpg b/Images/d&D.jpg new file mode 100644 index 00000000..d9573444 Binary files /dev/null and b/Images/d&D.jpg differ diff --git a/Images/daffy.png b/Images/daffy.png new file mode 100644 index 00000000..50e68c06 Binary files /dev/null and b/Images/daffy.png differ diff --git a/Images/daffy2.png b/Images/daffy2.png new file mode 100644 index 00000000..53dd6c98 Binary files /dev/null and b/Images/daffy2.png differ diff --git a/Images/daffy3.png b/Images/daffy3.png new file mode 100644 index 00000000..a4781c7a Binary files /dev/null and b/Images/daffy3.png differ diff --git a/Images/donald2.png b/Images/donald2.png new file mode 100644 index 00000000..b5de28c9 Binary files /dev/null and b/Images/donald2.png differ diff --git a/Images/donald3.gif b/Images/donald3.gif new file mode 100644 index 00000000..b1325d2e Binary files /dev/null and b/Images/donald3.gif differ diff --git a/Images/flowchart.jpg b/Images/flowchart.jpg new file mode 100644 index 00000000..79b2cb67 Binary files /dev/null and b/Images/flowchart.jpg differ diff --git a/Images/quiz_night_trivia_party_poster-r182574beb9904e30a127337323366b47_wvc_8byvr_324.jpg b/Images/quiz_night_trivia_party_poster-r182574beb9904e30a127337323366b47_wvc_8byvr_324.jpg new file mode 100644 index 00000000..13fe0591 Binary files /dev/null and b/Images/quiz_night_trivia_party_poster-r182574beb9904e30a127337323366b47_wvc_8byvr_324.jpg differ diff --git a/Images/readmeP1.pdf b/Images/readmeP1.pdf new file mode 100644 index 00000000..5a1cce5e Binary files /dev/null and b/Images/readmeP1.pdf differ diff --git a/Images/readmeP1.png b/Images/readmeP1.png new file mode 100644 index 00000000..6e4ac299 Binary files /dev/null and b/Images/readmeP1.png differ diff --git a/README.md b/README.md index 317a3e58..ecdd27b8 100644 --- a/README.md +++ b/README.md @@ -1,96 +1,25 @@ -# Project Name (Start editing here) - -#  Project #1: The Game -### Overview - -Let's start out with something fun - **a game!** - -Everyone will get a chance to **be creative**, and work through some really **tough programming challenges** – since you've already gotten your feet wet with Tic Tac Toe, it's up to you to come up with a fun and interesting game to build. - -**You will be working individually for this project**, but we'll be guiding you along the process and helping as you go. Show us what you've got! - - ---- +#  Project #1: Ducky Trivia War -### Technical Requirements -Your app must: +![alt text][ducky banner] -* **Render a game in the browser** -* **Any number of players** will be okay, switch turns will be great -* **Design logic for winning** & **visually display which player won** -* **Include separate HTML / CSS / JavaScript files** -* Stick with **KISS (Keep It Simple Stupid)** and **DRY (Don't Repeat Yourself)** principles -* Use **Javascript** for **DOM manipulation**, jQuery is not compulsory -* **Deploy your game online**, where the rest of the world can access it -* Use **semantic markup** for HTML and CSS (adhere to best practices) -* **No canvas** project will be accepted, only HTML5 + CSS3 + JS please - ---- - -### Necessary Deliverables - -* A **working game, built by you**, hosted somewhere on the internet -* A **link to your hosted working game** in the URL section of your GitHub repo -* A **git repository hosted on GitHub**, with a link to your hosted game, and frequent commits dating back to the very beginning of the project -* **A ``readme.md`` file** with explanations of the technologies used, the approach taken, installation instructions, unsolved problems, etc. - ---- +[ducky banner]: ./Images/d&D.jpg "The Ducky Trivia Challenge" -### Suggested Ways to Get Started -* **Break the project down into different components** (data, presentation, views, style, DOM manipulation) and brainstorm each component individually. Use whiteboards! -* **Use your Development Tools** (console.log, inspector, alert statements, etc) to debug and solve problems -* Work through the lessons in class & ask questions when you need to! Think about adding relevant code to your game each night, instead of, you know... _procrastinating_. -* **Commit early, commit often.** Don’t be afraid to break something because you can always go back in time to a previous version. -* **Consult documentation resources** (MDN, jQuery, etc.) at home to better understand what you’ll be getting into. -* **Don’t be afraid to write code that you know you will have to remove later.** Create temporary elements (buttons, links, etc) that trigger events if real data is not available. For example, if you’re trying to figure out how to change some text when the game is over but you haven’t solved the win/lose game logic, you can create a button to simulate that until then. ---- - -### Potential Project Ideas - -##### Blackjack -Make a one player game where people down on their luck can lose all their money by guessing which card the computer will deal next! - -##### Self-scoring Trivia -Test your wits & knowledge with whatever-the-heck you know about (so you can actually win). Guess answers, have the computer tell you how right you are! +### Overview ---- +Play with a friend! Answer 3 true or false trivia questions correctly first to **WIN** the ducky challenge! -### Useful Resources +Click on the link to play: https://persisn.github.io/project-1/ -* **[MDN Javascript Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript)** _(a great reference for all things Vanilla Javascript)_ -* **[jQuery Docs](http://api.jquery.com)** _(if you're using jQuery)_ -* **[GitHub Pages](https://pages.github.com)** _(for hosting your game)_ -* **[How to write readme - Markdown CheatSheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)** _(for editing this readme)_ -* **[How to write a good readme for github repo!](https://gist.github.com/PurpleBooth/109311bb0361f32d87a2)** _(to make it better)_ --- +#### Flowchart -### Project Feedback + Evaluation - -* __Project Workflow__: Did you complete the user stories, wireframes, task tracking, and/or ERDs, as specified above? Did you use source control as expected for the phase of the program you’re in (detailed above)? - -* __Technical Requirements__: Did you deliver a project that met all the technical requirements? Given what the class has covered so far, did you build something that was reasonably complex? - -* __Creativity__: Did you add a personal spin or creative element into your project submission? Did you deliver something of value to the end user (not just a login button and an index page)? - -* __Code Quality__: Did you follow code style guidance and best practices covered in class, such as spacing, modularity, and semantic naming? Did you comment your code as your instructors have in class? - -* __Deployment__: Did you deploy your application to a public url using GitHub Pages? - -* __Total__: Your instructors will give you a total score on your project between: + - Score | Expectations - ----- | ------------ - **0** | _Incomplete._ - **1** | _Does not meet expectations._ - **2** | _Meets expectations, good job!_ - **3** | _Exceeds expectations, you wonderful creature, you!_ - This will serve as a helpful overall gauge of whether you met the project goals, but __the more important scores are the individual ones__ above, which can help you identify where to focus your efforts for the next project! +##### References diff --git a/README0.md b/README0.md new file mode 100644 index 00000000..ecdd27b8 --- /dev/null +++ b/README0.md @@ -0,0 +1,25 @@ + + +#  Project #1: Ducky Trivia War + + +![alt text][ducky banner] + +[ducky banner]: ./Images/d&D.jpg "The Ducky Trivia Challenge" + + + +### Overview + +Play with a friend! Answer 3 true or false trivia questions correctly first to **WIN** the ducky challenge! + +Click on the link to play: https://persisn.github.io/project-1/ + + +--- +#### Flowchart + + + + +##### References diff --git a/README_ref.md b/README_ref.md new file mode 100644 index 00000000..b7ee6c42 --- /dev/null +++ b/README_ref.md @@ -0,0 +1,99 @@ +# Trivia War + + + +#  Project #1: The Game + +### Overview + +Let's start out with something fun - **a game!** + +Everyone will get a chance to **be creative**, and work through some really **tough programming challenges** – since you've already gotten your feet wet with Tic Tac Toe, it's up to you to come up with a fun and interesting game to build. + +**You will be working individually for this project**, but we'll be guiding you along the process and helping as you go. Show us what you've got! + + +--- + +### Technical Requirements + +Your app must: + +* **Render a game in the browser** +* **Any number of players** will be okay, switch turns will be great +* **Design logic for winning** & **visually display which player won** +* **Include separate HTML / CSS / JavaScript files** +* Stick with **KISS (Keep It Simple Stupid)** and **DRY (Don't Repeat Yourself)** principles +* Use **Javascript** for **DOM manipulation**, jQuery is not compulsory +* **Deploy your game online**, where the rest of the world can access it +* Use **semantic markup** for HTML and CSS (adhere to best practices) +* **No canvas** project will be accepted, only HTML5 + CSS3 + JS please + +--- + +### Necessary Deliverables + +* A **working game, built by you**, hosted somewhere on the internet +* A **link to your hosted working game** in the URL section of your GitHub repo +* A **git repository hosted on GitHub**, with a link to your hosted game, and frequent commits dating back to the very beginning of the project +* **A ``readme.md`` file** with explanations of the technologies used, the approach taken, installation instructions, unsolved problems, etc. + +--- + +### Suggested Ways to Get Started + +* **Break the project down into different components** (data, presentation, views, style, DOM manipulation) and brainstorm each component individually. Use whiteboards! +* **Use your Development Tools** (console.log, inspector, alert statements, etc) to debug and solve problems +* Work through the lessons in class & ask questions when you need to! Think about adding relevant code to your game each night, instead of, you know... _procrastinating_. +* **Commit early, commit often.** Don’t be afraid to break something because you can always go back in time to a previous version. +* **Consult documentation resources** (MDN, jQuery, etc.) at home to better understand what you’ll be getting into. +* **Don’t be afraid to write code that you know you will have to remove later.** Create temporary elements (buttons, links, etc) that trigger events if real data is not available. For example, if you’re trying to figure out how to change some text when the game is over but you haven’t solved the win/lose game logic, you can create a button to simulate that until then. + +--- + +### Potential Project Ideas + +##### Blackjack +Make a one player game where people down on their luck can lose all their money by guessing which card the computer will deal next! + +##### Self-scoring Trivia +Test your wits & knowledge with whatever-the-heck you know about (so you can actually win). Guess answers, have the computer tell you how right you are! + +--- + +### Useful Resources + +* **[MDN Javascript Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript)** _(a great reference for all things Vanilla Javascript)_ +* **[jQuery Docs](http://api.jquery.com)** _(if you're using jQuery)_ +* **[GitHub Pages](https://pages.github.com)** _(for hosting your game)_ +* **[How to write readme - Markdown CheatSheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)** _(for editing this readme)_ +* **[How to write a good readme for github repo!](https://gist.github.com/PurpleBooth/109311bb0361f32d87a2)** _(to make it better)_ + +--- + +### Project Feedback + Evaluation + +* __Project Workflow__: Did you complete the user stories, wireframes, task tracking, and/or ERDs, as specified above? Did you use source control as expected for the phase of the program you’re in (detailed above)? + +* __Technical Requirements__: Did you deliver a project that met all the technical requirements? Given what the class has covered so far, did you build something that was reasonably complex? + +* __Creativity__: Did you add a personal spin or creative element into your project submission? Did you deliver something of value to the end user (not just a login button and an index page)? + +* __Code Quality__: Did you follow code style guidance and best practices covered in class, such as spacing, modularity, and semantic naming? Did you comment your code as your instructors have in class? + +* __Deployment__: Did you deploy your application to a public url using GitHub Pages? + +* __Total__: Your instructors will give you a total score on your project between: + + Score | Expectations + ----- | ------------ + **0** | _Incomplete._ + **1** | _Does not meet expectations._ + **2** | _Meets expectations, good job!_ + **3** | _Exceeds expectations, you wonderful creature, you!_ + + This will serve as a helpful overall gauge of whether you met the project goals, but __the more important scores are the individual ones__ above, which can help you identify where to focus your efforts for the next project! diff --git a/assets/css/stylesheet.css b/assets/css/stylesheet.css index e69de29b..e1968c4f 100644 --- a/assets/css/stylesheet.css +++ b/assets/css/stylesheet.css @@ -0,0 +1,138 @@ +body { + top: 50px; + left: 150px; + width: 800px; + height: 600px; + + position: absolute; + text-align: center; + + /*background-position: center;*/ + + background-color: black; + +} + +h1 { + font-family: 'Gentium Basic', serif; + text-align: center; + color: black; + /*text-transform: uppercase;*/ + background-color: rgba(255,255,255,0.6); + width: 450px; + font-size: 30px; + position: relative; + left: 110px; + top: 0px; +} + +h2 { + font-family: 'Quicksand', sans-serif; + text-align: center; + + background-color: rgba(255,255,255,0.6); + color: black; + width: 400px; + position: relative; + left: 140px; + font-size: 20px; + top: 0px; +} + +h3 { + font-family: 'Monoton', cursive; + text-align: center; + color: white; + /*text-transform: uppercase;*/ + /*background-color: rgba(255,255,255,0.4);*/ + width: 450px; + font-size: 30px; + position: relative; + left: 110px; + + +} +div { + /*border: 1px solid black;*/ + +} + +.ansBtn { + /*top: 50px; + border: 1px solid purple; + font-size: 30px; + font:*/ + font-family: 'Gentium Basic', serif; + background:#47AAEB; + width:100px; + height:40px; + border:0px; + color:white; + border-bottom:4px solid #3C97D4; + border-radius:10px; + font-size:20px; + text-shadow:1px #3C97D4; + text-transform:uppercase; + position: relative; + top: 50px; + right: 20px;` ` + +} + +.container { +width: 700px; +height: 500px; +background-image: url("../../Images/background.jpeg"); +background-repeat: no-repeat; +background-position: center; +position: relative; +top: 10px; +} + +.scoreBoard { + font-family: 'Acme', sans-serif; + position: relative; + + top:200px; +} + +#scoreBoard1 { + background-color: rgba(0, 0, 0, 0.5); + color: white; + + float: left; + font-size: 20px; + position: relative; + left: 100px; + text-transform: uppercase; + + +} + +#scoreBoard2{ + text-transform: uppercase; + background-color: rgba(0, 0, 0, 0.5); + color: white; + float: right; + position: relative; + font-size: 20px; + right: 130px + +} + +.images { + position: relative; + top: 10px; +} + +#daffy { + position: absolute; + float: right; + right: 130px; +} + +#donald { + position: absolute; + float: left; + left: 100px; +} diff --git a/assets/js/script.js b/assets/js/script.js index e69de29b..985f57b4 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -0,0 +1,279 @@ +$(function () { + var allQuestions = [ + { + qn: 'Lightning never strikes in the same place twice.', + ans: false, + exp: 'The Empire State Building gets struck over 100 times a year.' + }, + { + qn: 'If you cry in space the tears just stick to your face.', + ans: true, + exp: 'You can watch a video of Chris Hadfield demonstrating it on board the International Space Station if you want.' + }, + { + qn: 'Russia has a larger surface area than Pluto', + ans: true, + exp: 'Yeap, Russia has a large surface area' + }, + { + qn: 'Kim Jong Un is the son of Kim II-Sung', + ans: false, + exp: 'He is the son of Kim Jong-il' + }, + + { + qn: 'Penicillin is used to fight viral infections', + ans: false, + exp: 'They fight bacterial infections' + }, + + { + qn: 'If you cut an earthworm in half, both halves can regrow their body', + ans: false, + exp: 'Only one half of an earthworm can regenerate when it is cut in half, not both halves.' + }, + + { + qn: 'Humans can distinguish between over a trillion different smells', + ans: true, + exp: 'It is not as good as a dog, but the human nose is still pretty incredible.' + }, + + { + qn: 'Adults have fewer bones than babies do', + ans: true, + exp: 'Lots of bones (like the cranium) start out as several fragments at birth, then fuse together into a single bone later in life.' + }, + + { + qn: 'Napoleon Bonaparte was extremely short', + ans: false, + exp: 'Even though he was widely believed to have been short, he was actually above average height for his time.' + }, + + { + qn: 'Goldfish only have a memory of three seconds', + ans: false, + exp: 'This common belief has been debunked repeatedly. They can actually remember things for quite a long time.' + }, + + { + qn: 'There are more cells of bacteria in your body than there are human cells', + ans: true, + exp: 'Your body has around ten times as many bacterial cells in it than your own cells.' + }, + + { + qn: 'Your fingernails and hair keep growing after you die', + ans: false, + exp: 'They do not!' + }, + + { + qn: 'Pirates wore eye patches so they could see better in the dark', + ans: true, + exp: 'Pirates didn’t wear patches to cover a missing eye; they actually wore one to keep one eye adjusted to darkness when going below deck' + }, + + { + qn: 'Buzz Aldrin was the first man to urinate on the moon.', + ans: true, + exp: 'The second man to stand on fthe moon was the first to pee there (into a special bag in his spacesuit)' + }, + + { + qn: 'Twinkies have an infinite shelf life.', + ans: false, + exp: 'The official shelf life of a Twinkie is 45 days. People have kept them around for longer, but they become inedible.' + }, + + { + qn: 'Humans can’t breathe and swallow at the same time.', + ans: true, + exp: 'It is because our voice box is lower in the throat than other primates (who can do both at once.)' + }, + + { + qn: 'Drinking alcohol kills brain cells.', + ans: false, + exp: 'Drinking pretty much any non-fatal amount of alcohol would not add enough alcohol to your blood stream to destroy your neurons.' + }, + + { + qn: 'An octopus has three hearts', + ans: true, + exp: 'Yeap, three' + }, + + { + qn: 'Cracking your knuckles too much will give you arthritis', + ans: false, + exp: 'Go ahead and crack away' + }, + + { + qn: 'Lighters were invented before matches', + ans:true, + exp: 'German chemist Johann Wolfgang Dobereiner created the first lighter in 1823. The match was invented in 1826.' + }, + + { + qn: 'The Spanish national anthem has no words', + ans:true, + exp: 'Spain is one of four countries that have no lyrics' + }, + + { + qn: 'Orangutans sleep standing up', + ans:false, + exp: 'They usually sleep in nests they build in trees' + }, + + { + qn: 'In 1966 NASA sent a McDonalds hamburger to space', + ans:false, + exp: 'If NASA did, it would probably come back looking exactly the same.' + }, + + { + qn: 'A traffic jam in China lasted more than 10 days', + ans:true, + exp: 'The China National Highway 110 Traffic Jam began on August 14, 2010 and lasted more than 10 whole days' + }, + + { + qn: 'The human body has 163 bones', + ans:false, + exp: 'The human body has 206 bones by adulthood' + }, + + { + qn: 'We eat an average of 4 house flies (not spiders) in our sleep every year', + ans:false, + exp: 'It is a myth!' + }, + + { + qn: 'There are more moves in chess than there are atoms in the universe', + ans:true, + exp: 'Shannon Number measured the combinatorial game complexity of chess and found there are, in fact, more legal moves than there are atoms in the universe as we know it.' + }, + + { + qn: 'It takes 242 trees to make a 200-page book', + ans:false, + exp: 'There is no way it would even take one full tree to make a book' + }, + + { + qn: 'Bananas grow on trees', + ans:false, + exp: 'They grow from a root structure that produces an above ground stem' + }, + + { + qn: 'Shaving makes hair grow back faster', + ans:false, + exp: 'This is a myth' + }, + + { + qn: 'Mammoths still walked the Earth when the Great Pyramid was being built', + ans:true, + exp: 'A tiny population survived on the isolated Wrangel Island until 1650 BCE.' + }, + { + qn:'Black holes are not black', + ans:true, + exp:'They are dark but not black' + }, + + { + qn:'There are more fake flamingos in the world than real ones', + ans:true, + exp: 'There are an estimated 950,000 flamingos in existence compared to millions of plastic ones' + }, + + { + qn: 'The top of the Eiffel Tower leans away from the sun', + ans:true, + exp: 'The metal of the tower expands in the heat of the sun, so the sun-facing side is always slightly bigger than the one facing away – making it lean as much as seven inches away from the sun' + } + + ] + + // targeting elements + var $h1 = $('h1') + var $ansBtn = $('.ansBtn') + var currentPlayer = 1 + var scoreCounter1 = 0 + var scoreCounter2 = 0 + var $instructions = $('#instructions') + var $scoreBoard1 = $('#scoreBoard1') + var $scoreBoard2 = $('#scoreBoard2') + var randomQnIndex = Math.floor(Math.random() * allQuestions.length) + var currentAns = allQuestions[randomQnIndex].ans + var currentExp = allQuestions[randomQnIndex].exp + var correctSound = new Audio("./sounds/correct.wav"); + var incorrectSound = new Audio("./sounds/wrong.wav") + var winSound = new Audio("./sounds/win.wav") + + $h1.text(`${allQuestions[randomQnIndex].qn}`) + + $ansBtn.on('click', clickAns) + // event on button click + + function clickAns () { + if ($(this).data('choice') === currentAns) { + correctSound.play() + + setTimeout(function() { + alert('Correct!') + }, 300) + + console.log(currentPlayer) + if (currentPlayer === 1) { + scoreCounter1++ + $scoreBoard1.text(`Player 1 : ${scoreCounter1}`) + } else { + scoreCounter2++ + $scoreBoard2.text(`Player 2 : ${scoreCounter2}`) + } + + } else { + incorrectSound.play() + alert(`Incorrect! ${currentExp}`) + } + + topScore() + + allQuestions.splice(randomQnIndex,1) + // to remove index of questions shown previously + setTimeout(switchPlayers, 1000) + } + + function switchPlayers () { + + randomQnIndex = Math.floor(Math.random() * allQuestions.length) + $h1.text(`${allQuestions[randomQnIndex].qn}`) + currentAns = allQuestions[randomQnIndex].ans + currentExp = allQuestions[randomQnIndex].exp + + if (currentPlayer === 1) currentPlayer = 2 + else currentPlayer = 1 + $instructions.text(`Your turn: Player ${currentPlayer}`) + } + + function topScore () { + if (scoreCounter1 === 3 || scoreCounter2 === 3) { + setTimeout(function() { + winSound.play()}, 800) + + setTimeout(function() { + alert(`Player ${currentPlayer} wins!`)}, 1000) + + setTimeout(function() {window.location.reload(true)}, 1000) + + } + } +}) diff --git a/index.html b/index.html index 5b002212..dce6a3d8 100644 --- a/index.html +++ b/index.html @@ -2,10 +2,40 @@
-
+
+