|
| 1 | + |
| 2 | +var beginButton = document.querySelector("#beginButton"); |
| 3 | +var startPage = document.querySelector("#startPage"); |
| 4 | + |
| 5 | +Quiz(); |
| 6 | + |
| 7 | +function Quiz() { |
| 8 | + beginButton.addEventListener("click", function(){ |
| 9 | + startPage.style.display = "none"; |
| 10 | + runQuiz(); |
| 11 | + |
| 12 | + }) |
| 13 | +} |
| 14 | + |
| 15 | + function runQuiz () { |
| 16 | + firstQuestion(); |
| 17 | + function firstQuestion () { |
| 18 | + var question1 = document.createElement("h2"); |
| 19 | + var answerList1 = document.createElement ("button") |
| 20 | + var answerList2 = document.createElement ("button") |
| 21 | + var answerList3 = document.createElement ("button") |
| 22 | + var answerList4 = document.createElement ("button") |
| 23 | + var body = document.body; |
| 24 | + |
| 25 | + question1.textContent = "JavaScript is a widely used scripting language that adds _______ to a webpage."; |
| 26 | + answerList1.textContent = "sugar and spice"; |
| 27 | + answerList2.textContent = "structure and style"; |
| 28 | + answerList3.textContent = "functionality and interactivity"; |
| 29 | + answerList4.textContent = "grit and intensity"; |
| 30 | + |
| 31 | + body.appendChild(question1); |
| 32 | + question1.appendChild(answerList1); |
| 33 | + question1.appendChild(answerList2); |
| 34 | + question1.appendChild(answerList3); |
| 35 | + question1.appendChild(answerList4); |
| 36 | + |
| 37 | + question1.setAttribute("style", "display:flex; justify-content:center; flex-direction:column"); |
| 38 | + answerList1.setAttribute("style", "disply:block"); |
| 39 | + } |
| 40 | + |
| 41 | + countdownTimer(); |
| 42 | + function countdownTimer () { |
| 43 | + var timeLeft = 76; |
| 44 | + var countdown = document.querySelector("#countdown"); |
| 45 | + |
| 46 | + var timeInterval = setInterval(function (){ |
| 47 | + timeLeft--; |
| 48 | + countdown.textContent = timeLeft; |
| 49 | + if (timeLeft === 0) { |
| 50 | + clearInterval(timeInterval); |
| 51 | + countdown.textContent = " "; |
| 52 | + countdown.setAttribute("style", "color:red"); |
| 53 | + } |
| 54 | + }, 1000); |
| 55 | + |
| 56 | +} |
| 57 | + |
| 58 | + |
| 59 | + |
| 60 | + // here we'll code what actually happens once the user clicks on the begin button |
| 61 | +} |
| 62 | + |
| 63 | + |
| 64 | +// start with a basic screen that asks if the user wants to take the coding quiz (5,6, and 7 talk about js coding over html) |
| 65 | +// timer starts, housed in the upper right-hand corner of the screen. (9 and 10 are about timers) The timer is tied to the answers- if you answer incorrectly, you are docked x seconds (i-x, most likely?) |
| 66 | +// add link to "view high scores" in the upper left-hand corner of the screen- this will need an event listener to know when it's clicked, two buttons once it shows up on the screen to allow you to go back. This has to hold the initials and the high scores until a user clears the high -(21 and 22 at least, we're looking to store those in localstorage in the browsercd ). maybe use the example from 11 to click to and from this screen? |
| 67 | +// the quiz itself is a series of questions, has to event listen to see if the correct question answer was selected. Can use keydown and keyup to listen for the correct answer number (16), or listen for a mouse click (12) and assign the changes to the element using dot notation... Using buttons of numbered lists? |
| 68 | +// when the timer reaches zero, it should show the score of the user and a chance for the user to enter their initials (see 13, 14 & 15 for the form entry) |
0 commit comments