Commit 97d8f739 authored by Matthias Merz's avatar Matthias Merz
Browse files

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

parent 9189d00e
...@@ -60,7 +60,7 @@ ...@@ -60,7 +60,7 @@
<div class="card-body"> <div class="card-body">
<!-- card title --> <!-- 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"> <hr class="line">
...@@ -74,7 +74,7 @@ ...@@ -74,7 +74,7 @@
<div id="mainContent"> <div id="mainContent">
<h5 class="text-center"> <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> </h5>
<div class="text-center"> <div class="text-center">
......
...@@ -9,17 +9,22 @@ var highscoresDiv = document.querySelector("#highscores"); //Div for showing hi ...@@ -9,17 +9,22 @@ var highscoresDiv = document.querySelector("#highscores"); //Div for showing hi
var navhighscorelink = document.querySelector("#navhighscorelink"); //highscore navigation link var navhighscorelink = document.querySelector("#navhighscorelink"); //highscore navigation link
var navlink = document.getElementById("navhighscorelink"); var navlink = document.getElementById("navhighscorelink");
var secondsLeft = 180, questionIndex = 0,correct = 0 ; var secondsLeft = 60, questionIndex = 0,correct = 0 ;
var totalQuestions = questions.length; var totalQuestions = questions.length;
var question , option1, option2, option3 ,option4 ,ans, previousScores; var question , option1, option2, option3 ,option4 ,ans, previousScores;
var scorelimit=500;
var choiceArray = [], divArray = []; var choiceArray = [], divArray = [];
function resetTimelimit(){ //resets the Timelimit needed for each new question
secondsLeft=63;
}
//create buttons for choices //create buttons for choices
for(var i = 0 ; i < 4 ; i++){ for(var i = 0 ; i < 4 ; i++){
var dv = document.createElement("div"); var dv = document.createElement("div");
var ch = document.createElement("button"); var ch = document.createElement("button");
ch.setAttribute("data-index",i); ch.setAttribute("data-index",i);
ch.setAttribute("class","btn btn-primary rounded-pill mb-2"); ch.setAttribute("class","btn btn-primary rounded-pill mb-2");
ch.setAttribute("id",i);
choiceArray.push(ch); choiceArray.push(ch);
divArray.push(dv); divArray.push(dv);
} }
...@@ -32,12 +37,15 @@ resultDiv.appendChild(result); ...@@ -32,12 +37,15 @@ resultDiv.appendChild(result);
//Start Quiz function //Start Quiz function
function startQuiz(){ function startQuiz(){
startTimer(); startTimer();
navhighscorelink.style.display= "none"
console.log(questions.length)
shuffleQuestions();
shufflePossibleAnswers();
buildQuestion(); buildQuestion();
} }
//function to start timer when quiz starts
function startTimer(){ function startTimer(){
var timeInterval = setInterval(function(){ var timeInterval = setInterval(function(){
...@@ -46,11 +54,17 @@ function startTimer(){ ...@@ -46,11 +54,17 @@ function startTimer(){
timer.textContent = "Time : "+secondsLeft+ " sec"; timer.textContent = "Time : "+secondsLeft+ " sec";
if(secondsLeft <= 0 || (questionIndex > totalQuestions-1)){ if(secondsLeft <= 0 && !((questionIndex > totalQuestions-1)) ){
resultDiv.style.display = "none"; resetTimelimit();
questionResult();
}
if((questionIndex > totalQuestions-1)){
quizContent.style.display = "none"; quizContent.style.display = "none";
viewResult(); viewResult();
secondsLeft=0;
clearInterval(timeInterval); clearInterval(timeInterval);
timer.textContent = ""; timer.textContent = "";
} }
...@@ -59,9 +73,14 @@ function startTimer(){ ...@@ -59,9 +73,14 @@ function startTimer(){
} }
function buildQuestion(){ function buildQuestion(){
//hides start page content //hides start page content
if((questionIndex > totalQuestions-1)){
return;
}
questionEl.style.display= "none"; questionEl.style.display= "none";
mainContent.style.display = "none"; mainContent.style.display = "none";
quizContent.style.display= "none"; quizContent.style.display= "none";
...@@ -86,41 +105,59 @@ function buildQuestion(){ ...@@ -86,41 +105,59 @@ function buildQuestion(){
} }
quizContent.style.display= "block"; // Display options 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 // Event Listener for options buttons
quizContent.addEventListener("click",function(event){ quizContent.addEventListener("click",function(event){
var element = event.target; var element = event.target;
var userAnswer = element.textContent; var userAnswer = element.textContent;
var userOption = userAnswer.substring(3, userAnswer.length); var userOption = userAnswer.substring(3, userAnswer.length);
resetTimelimit();
showWrongAndRight();
if(userOption === ans){ if(userOption === ans){
correct++; correct++;
resultDiv.style.display = "block";
result.textContent = "Correct!"
setTimeout(function(){
result.textContent = "";
},500);
} }
else { else {
secondsLeft -= 10; //secondsLeft -= 10;
result.textContent = "Wrong!"
setTimeout(function(){
result.textContent = "";
},500);
} }
questionIndex++; setTimeout(clearShowWrongAndRight,3000);
buildQuestion(); setTimeout(buildQuestion,3000);
}); });
function questionResult(){
showWrongAndRight()
setTimeout(clearShowWrongAndRight,3000);
setTimeout(buildQuestion,3000);
}
//Function to show score when quiz completes //Function to show score when quiz completes
function viewResult(){ function viewResult(){
...@@ -173,7 +210,10 @@ function storeScores(event){ ...@@ -173,7 +210,10 @@ function storeScores(event){
console.log(user); console.log(user);
previousScores = JSON.parse(localStorage.getItem("previousScores")); //get User highscores array in localStorage if exists 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){ if(previousScores){
previousScores.push(user); //Push new user scores in array in localStorage previousScores.push(user); //Push new user scores in array in localStorage
} }
...@@ -187,8 +227,33 @@ function storeScores(event){ ...@@ -187,8 +227,33 @@ function storeScores(event){
showHighScores(); // Called function to display highscores 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 to show highscores
function showHighScores(){ function showHighScores(){
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment