From 3ce4ed685413668d140118a5265f9cf733a93579 Mon Sep 17 00:00:00 2001 From: Jalaluddin Kasaat Date: Tue, 14 Aug 2018 20:03:54 -0400 Subject: [PATCH 1/3] Only one choice with one click --- main.js | 31 +++++++++++++++++++++++++------ 1 file changed, 25 insertions(+), 6 deletions(-) diff --git a/main.js b/main.js index 841782f..f1a7369 100644 --- a/main.js +++ b/main.js @@ -77,9 +77,12 @@ 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 ================ @@ -92,10 +95,20 @@ let responseCheck = function(){ 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); } 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 there are no more questions to be asked, do not display the "next" button @@ -105,20 +118,26 @@ let responseCheck = function(){ buttonHolder.appendChild(questionButton); questionButton.innerText = 'Next Question'; } + } + + + //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(); From 286cc63ecdf65a5aba9c532601f2f7bb04f3a4f8 Mon Sep 17 00:00:00 2001 From: Jalaluddin Kasaat Date: Wed, 15 Aug 2018 19:11:46 -0400 Subject: [PATCH 2/3] scores counting --- index.html | 7 ++++++- main.css | 8 ++++++++ main.js | 35 ++++++++++++++++++++++++++++++++--- 3 files changed, 46 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 18cb74a..7402f3a 100644 --- a/index.html +++ b/index.html @@ -20,10 +20,15 @@

Coding Quiz

+ +
+

Correct =

+

Incorrect =

+ +
- diff --git a/main.css b/main.css index 0ccc64d..92fa099 100644 --- a/main.css +++ b/main.css @@ -10,4 +10,12 @@ button { button:hover { background-color: #4CAF50; color: white; +} + +#correct-answers { + color: #4CAF50 +} + +#incorrect-answers { + color: red } \ No newline at end of file diff --git a/main.js b/main.js index f1a7369..9f4aa9b 100644 --- a/main.js +++ b/main.js @@ -17,11 +17,11 @@ let responseAppear = document.getElementById('response') 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============ @@ -89,6 +89,7 @@ answerChoices(); //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); @@ -100,6 +101,14 @@ let responseCheck = function(){ 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"; @@ -109,8 +118,16 @@ let responseCheck = function(){ 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'); @@ -122,7 +139,13 @@ let responseCheck = function(){ } +// 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(){ @@ -141,11 +164,17 @@ let responseCheck = function(){ 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); From ae28b7284fd76b05077431e5577eea0dcf635483 Mon Sep 17 00:00:00 2001 From: Jalaluddin Kasaat Date: Wed, 15 Aug 2018 20:22:34 -0400 Subject: [PATCH 3/3] new changes pushed to jalal2 branch --- index.html | 5 +++-- main.css | 10 ++++++++++ main.js | 3 ++- 3 files changed, 15 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 7402f3a..8189799 100644 --- a/index.html +++ b/index.html @@ -18,12 +18,13 @@

Coding Quiz

  • +

    -

    Correct =

    -

    Incorrect =

    +

    Correct Answers =

    +

    Incorrect Answers =

    diff --git a/main.css b/main.css index 92fa099..0e0089e 100644 --- a/main.css +++ b/main.css @@ -17,5 +17,15 @@ button:hover { } #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 9f4aa9b..0eb3f65 100644 --- a/main.js +++ b/main.js @@ -13,6 +13,7 @@ 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; @@ -107,9 +108,9 @@ let responseCheck = function(){ let score1 = document.getElementById('correct-answers') score1.innerText = correctAnswerChosen++ - } } + else { responseAppear.innerText = "Incorrect"; quizBank[index].result = false;