diff --git a/index.html b/index.html index 18cb74a..8189799 100644 --- a/index.html +++ b/index.html @@ -18,12 +18,18 @@

Coding Quiz

  • +

    + +
    +

    Correct Answers =

    +

    Incorrect Answers =

    + +
    - diff --git a/main.css b/main.css index 0ccc64d..0e0089e 100644 --- a/main.css +++ b/main.css @@ -10,4 +10,22 @@ button { button:hover { background-color: #4CAF50; color: white; +} + +#correct-answers { + color: #4CAF50 +} + +#incorrect-answers { + color: red +} + +#correct { + + color: #4CAF50 +} + +#incorrect { + + color: red } \ No newline at end of file diff --git a/main.js b/main.js index 841782f..0eb3f65 100644 --- a/main.js +++ b/main.js @@ -13,15 +13,16 @@ console.log(answersAppear) //creating a variable that will hold the HTML element which displays response to user after they click let responseAppear = document.getElementById('response') + //creating a variable that will hold the index that will track which questions we ar on let index=0; // creating a varibale that stores an array boolean values (true) when user clicks on correct choice -let correctAnswerChosen = []; +let correctAnswerChosen = 0; console.log(correctAnswerChosen); // creating a varibale that stores an array boolean values (false) when user clicks on incorrect choice -let incorrectAnswerChosen = []; +let incorrectAnswerChosen = 0; console.log(incorrectAnswerChosen); //===========OBJECT CONSTRUCTOR & INSTANCES============ @@ -77,27 +78,57 @@ questionPopulate(); let answerChoices = function(){ //since "answerAppear" was assigned a class name, then we can use it as an array. class attribute acts an array. for (let i=0; i < answersAppear.length; i++){ + answersAppear[i].innerText= quizBank[index].answerOptions[i]; + } } + answerChoices(); //==========FUNCTIONS FOR EVENT HANDLERS ================ //Function that will give the response "correct" when the correct choice is clicked + score property (boolean) let responseCheck = function(){ + console.log("user response = " + quizBank[index].userResponse); console.log("correct answer = " + quizBank[index].correctAnswer); if (quizBank[index].userResponse === quizBank[index].correctAnswer){ responseAppear.innerText = "Correct"; quizBank[index].result = true; + + answersAppear[0].removeEventListener('click',clicked); + answersAppear[1].removeEventListener('click',clicked); + answersAppear[2].removeEventListener('click',clicked); + answersAppear[3].removeEventListener('click',clicked); + + if (responseAppear.innerText = "Correct"){ + correctAnswerChosen++ + let score1 = document.getElementById('correct-answers') + score1.innerText = correctAnswerChosen++ + + } } + else { responseAppear.innerText = "Incorrect"; quizBank[index].result = false; + + answersAppear[0].removeEventListener('click',clicked); + answersAppear[1].removeEventListener('click',clicked); + answersAppear[2].removeEventListener('click',clicked); + answersAppear[3].removeEventListener('click',clicked); + + if (responseAppear.innerText = "Incorrect"){ + incorrectAnswerChosen++ + let score2 = document.getElementById('incorrect-answers') + score2.innerText = incorrectAnswerChosen++ + + } } + counter = 0 //if there are no more questions to be asked, do not display the "next" button if (counter < quizBank.length){ let buttonHolder = document.getElementById('buttonHolder'); @@ -105,28 +136,46 @@ let responseCheck = function(){ buttonHolder.appendChild(questionButton); questionButton.innerText = 'Next Question'; } + } + +// correctAnswerChosen = function(){ + +// } + + + +// console.log(correctAnswerChosen) + //function for not allowing the user to choose an answer more than once. The placement of this may be off, just because at this point of reading the script, you have not gotten to the event yet. -let oneChoice =function(){ - answersAppear[0].removeEventListener('click',clicked) - answersAppear[1].removeEventListener('click',clicked) - answersAppear[2].removeEventListener('click',clicked) - answersAppear[3].removeEventListener('click',clicked) -} +// let oneChoice =function(){ + // answersAppear[0].removeEventListener('click',clicked) + // answersAppear[1].removeEventListener('click',clicked) + // answersAppear[2].removeEventListener('click',clicked) + // answersAppear[3].removeEventListener('click',clicked) +// } //========EVENT HANDLERS======= //Event handler for correct response + + let clicked = function(e) { quizBank[index].userResponse = e.target.innerHTML; responseCheck(); - oneChoice(); + // oneChoice(); } + + + + + //==============FIRING EVENTS + EXECUTION=============== // creating an code to run when the event click is fired in my HTML + answersAppear[0].addEventListener('click',clicked); answersAppear[1].addEventListener('click',clicked); answersAppear[2].addEventListener('click',clicked);