So I have a code which i found from one of the questions in stack overflow. The code is a quiz with questions appearing one after each other when the answer is selected. I was wondering wether it is possible to make questions change not when the answer is selected, but after a specific amount of time, lets say 30 seconds
var images = {
"CSS" : "https://via.placeholder.com/200x50?text=CSS",
"HTML" : "https://via.placeholder.com/200x50?text=HTML",
"Java" : "https://via.placeholder.com/200x50?text=JAVA",
"C#" : "https://via.placeholder.com/200x50?text=C"+encodeURIComponent("#"),
"C++" : "https://via.placeholder.com/200x50?text=C"+encodeURIComponent("++"),
"C" : "https://via.placeholder.com/200x50?text=C"
}
function populate() {
if (quiz.isEnded()) {
showScores();
} else {
var element = document.getElementById("question");
element.innerHTML = quiz.getQuestionIndex().text;
var choices = quiz.getQuestionIndex().choices;
for (var i = 0; i < choices.length; i++) {
var element = document.getElementById("choice" + i);
element.innerHTML = images[choices[i]]? '<img src="'+images[choices[i]]+'"/>':choices[i];
guess("btn" + i, choices[i]);
}
showProgress();
}
};
function guess(id, guess) {
var button = document.getElementById(id);
button.onclick = function() {
quiz.guess(guess);
populate();
}
};
function showProgress() {
var currentQuestionNumber = quiz.questionIndex + 1;
var element = document.getElementById("progress");
element.innerHTML = "Question " + currentQuestionNumber + " of " + quiz.questions.length;
};
function showScores() {
var gameOverHTML = "<h1>Result</h1>";
gameOverHTML += "<h2 id='score'> Your scores: " + quiz.score + "</h2>";
var element = document.getElementById("quiz");
element.innerHTML = gameOverHTML;
};
var questions = [
new Question("<img src='https://via.placeholder.com/200x50?text=OOP' /><br/>Which one is not an object oriented programming language?", ["Java", "C#", "C++", "C"], "C"),
new Question("<img src='https://via.placeholder.com/200x50?text=Web+development' /><br/>Which language is used for styling web pages?", ["HTML", "JQuery", "CSS", "XML"], "CSS"),
new Question("There are ____ main components of object oriented programming.", ["1", "6", "2", "4"], "4"),
new Question("Which language is used for web apps?", ["PHP", "Python", "Javascript", "All"], "All"),
new Question("MVC is a ____.", ["Language", "Library", "Framework", "All"], "Framework")
];
function Question(text, choices, answer) {
this.text = text;
this.choices = choices;
this.answer = answer;
}
Question.prototype.isCorrectAnswer = function(choice) {
return this.answer === choice;
}
function Quiz(questions) {
this.score = 0;
this.questions = questions;
this.questionIndex = 0;
}
Quiz.prototype.getQuestionIndex = function() {
return this.questions[this.questionIndex];
}
Quiz.prototype.guess = function(answer) {
if (this.getQuestionIndex().isCorrectAnswer(answer)) {
this.score++;
}
this.questionIndex++;
}
Quiz.prototype.isEnded = function() {
return this.questionIndex === this.questions.length;
}
var quiz = new Quiz(questions);
populate();
What I have tried:
I haven't tried anything, since I literally don't know what to do. Thank you in advance