Commit 35420893 authored by Matthias Merz's avatar Matthias Merz
Browse files

Merge branch 'frontend-dev' into 'master'

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

See merge request !1
parents 9189d00e 97d8f739
......@@ -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">
......
......@@ -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);
}
......@@ -33,11 +38,14 @@ resultDiv.appendChild(result);
function startQuiz(){
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)){
if(secondsLeft <= 0 && !((questionIndex > totalQuestions-1)) ){
resetTimelimit();
questionResult();
}
if((questionIndex > totalQuestions-1)){
resultDiv.style.display = "none";
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!"
//secondsLeft -= 10;
setTimeout(function(){
result.textContent = "";
},500);
}
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(){
......
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