Merge branch 'frontend-dev' into 'master'

time based feature, 500 max scores and color shows right and wrong

See merge request !1

src/index.html

@@ -60,7 +60,7 @@
                 <div class="card-body">
                     
                     <!-- card title -->
-                    <h2 class="card-title mb-4 text-info text-center" id="title">Hornlogik Quiz Challenge</h2>
+                    <h2 class="card-title mb-4 text-info text-center" id="title">Logik Quiz Challenge</h2>
             
                     <hr class="line">
                     
@@ -74,7 +74,7 @@
                             <div id="mainContent">
                                 
                                 <h5 class="text-center">
-                                    Versuche die folgenden Fragen über Hornlogik im Zeitlimit richtig zu beantworten. Für jede falsche Antwort werden dir Zehn Sekunden abgezogen.  
+                                    Versuche die folgenden Fragen zur Logik im Zeitlimit richtig zu beantworten. Für jede Frage bleibt dir eine Minute Zeit.  
                                 </h5>
                                 
                                 <div class="text-center">

src/js/script.js

@@ -9,17 +9,22 @@ var highscoresDiv = document.querySelector("#highscores");  //Div for showing hi
 var navhighscorelink = document.querySelector("#navhighscorelink");     //highscore navigation link
 var navlink = document.getElementById("navhighscorelink");
 
-var secondsLeft = 180, questionIndex = 0,correct = 0 ;
+var secondsLeft = 60, questionIndex = 0,correct = 0 ;
 var totalQuestions = questions.length;
 var question , option1, option2, option3 ,option4 ,ans, previousScores;
+var scorelimit=500;
 var choiceArray = [], divArray = [];
 
+function resetTimelimit(){ //resets the Timelimit needed for each new question
+    secondsLeft=63;
+}
 //create buttons for choices
 for(var i = 0 ; i < 4 ; i++){
     var dv = document.createElement("div");
     var ch = document.createElement("button");
     ch.setAttribute("data-index",i);
     ch.setAttribute("class","btn btn-primary rounded-pill mb-2");
+    ch.setAttribute("id",i);
     choiceArray.push(ch);
     divArray.push(dv);
 }
@@ -32,12 +37,15 @@ resultDiv.appendChild(result);
 //Start Quiz function
 function startQuiz(){
     
-    startTimer();  
+    startTimer();
+    navhighscorelink.style.display= "none"
+    console.log(questions.length)
+    shuffleQuestions();
+    shufflePossibleAnswers();  
     buildQuestion();  
 
 }
 
-//function to start timer when quiz starts
 function startTimer(){
     
     var timeInterval = setInterval(function(){
@@ -46,11 +54,17 @@ function startTimer(){
 
         timer.textContent = "Time : "+secondsLeft+ " sec";
         
-        if(secondsLeft <= 0 || (questionIndex > totalQuestions-1)){
-            
-            resultDiv.style.display = "none";
+        if(secondsLeft <= 0 && !((questionIndex > totalQuestions-1)) ){
+
+            resetTimelimit(); 
+            questionResult();
+
+        }
+        if((questionIndex > totalQuestions-1)){
+
             quizContent.style.display = "none";
             viewResult();
+            secondsLeft=0;
             clearInterval(timeInterval);
             timer.textContent = "";
         }
@@ -59,9 +73,14 @@ function startTimer(){
 }
 
 
+
+
 function buildQuestion(){
    
     //hides start page content
+    if((questionIndex > totalQuestions-1)){
+        return;
+    }
     questionEl.style.display= "none";
     mainContent.style.display = "none";
     quizContent.style.display= "none";
@@ -86,41 +105,59 @@ function buildQuestion(){
          
     }
     quizContent.style.display= "block"; // Display options
+    
+}
+//display wrong and right answer
+function clearShowWrongAndRight(){
+    for(var i = 0 ; i < 4 ; i++){
+        var element = document.getElementById(i);
+        if(element.textContent.substring(3,element.textContent.length) === ans){
+            element.removeAttribute("style","background-color:green !important");
+        }
+        else{
+            element.removeAttribute("style","background-color:red !important");
+        }
+    }
+    questionIndex++;
 }
 
+function showWrongAndRight(){
+    for(var i = 0 ; i < 4 ; i++){
+        var element = document.getElementById(i);
+        if(element.textContent.substring(3,element.textContent.length) === ans){
+            element.setAttribute("style","background-color:green !important");
+        }
+        else{
+            element.setAttribute("style","background-color:red !important");
+        }
+    }
+}
 // Event Listener for options buttons
 quizContent.addEventListener("click",function(event){
     
     var element = event.target;
     var userAnswer = element.textContent;
     var userOption   = userAnswer.substring(3, userAnswer.length);
-      
+    resetTimelimit();
+    showWrongAndRight();
         if(userOption === ans){
             correct++; 
              
-            resultDiv.style.display = "block"; 
-            
-            result.textContent = "Correct!"
-            
-            setTimeout(function(){
-                result.textContent = "";
-            },500);
         }
         else {
-            secondsLeft -= 10;
-            
-            result.textContent = "Wrong!"
-            
-            setTimeout(function(){
-                result.textContent = "";
-            },500);       
+            //secondsLeft -= 10;
+     
         }
         
-        questionIndex++;
-        buildQuestion();       
+        setTimeout(clearShowWrongAndRight,3000);
+        setTimeout(buildQuestion,3000);       
 });
 
-
+function questionResult(){
+    showWrongAndRight()
+    setTimeout(clearShowWrongAndRight,3000);
+    setTimeout(buildQuestion,3000);
+}
 //Function to show score when quiz completes
 function viewResult(){  
 
@@ -173,7 +210,10 @@ function storeScores(event){
         console.log(user);
 
         previousScores = JSON.parse(localStorage.getItem("previousScores"));    //get User highscores array in localStorage if exists
-        
+        if(previousScores.length>=scorelimit){ //sets a limit on scores current limit is 500 scores
+            localStorage.clear();
+            previousScores = null;
+        }
         if(previousScores){
             previousScores.push(user); //Push new user scores in array in localStorage
         }
@@ -187,8 +227,33 @@ function storeScores(event){
         showHighScores(); // Called function to display highscores
 
 }
-
-
+//shuffle a array randomly
+function shuffleArray(array) {
+    let curId = array.length;
+    // There remain elements to shuffle
+    while (0 !== curId) {
+      // Pick a remaining element
+      let randId = Math.floor(Math.random() * curId);
+      curId -= 1;
+      // Swap it with the current element.
+      let tmp = array[curId];
+      array[curId] = array[randId];
+      array[randId] = tmp;
+    }
+    return array;
+  }
+// shuffle questions
+function shuffleQuestions(){
+    questions = shuffleArray(questions);
+}
+function shufflePossibleAnswers(){
+    let Id = questions.length;
+    while (0 !== Id) {
+        // Pick a remaining element       
+        Id -= 1;
+        questions[Id].choices = shuffleArray(questions[Id].choices);
+      }
+}
 //function to show highscores
 function showHighScores(){