Click here to Skip to main content
15,884,388 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
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
JavaScript
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 {
          // show question
          var element = document.getElementById("question");
          element.innerHTML = quiz.getQuestionIndex().text;
      
          // show options
          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;
      };
      
      // create questions
      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;
      }
      
      // create quiz
      var quiz = new Quiz(questions);
      
      // display quiz
      populate();


What I have tried:

I haven't tried anything, since I literally don't know what to do. Thank you in advance
Posted
Updated 26-Feb-19 5:04am
Comments
W Balboos, GHB 26-Feb-19 9:34am    
1) Why didn't you ask the source on stack overflow?
2) At the least, come back AFTER you try something - this isn't a code-writing service. Try to figure out what to do.
3) If (1) and (2) don't work, then perhaps just find something else to keep you busy.

1 solution

 
Share this answer
 
Comments
Maciej Los 26-Feb-19 11:08am    
5ed!
Richard MacCutchan 26-Feb-19 11:16am    
Googled! :)
Maciej Los 26-Feb-19 11:28am    
Sounds like Google rocks!
:laugh:
Google is handy when you know how to use it. More and more often people are lazy. They dont' want to devote their time for quick Google research. They expect to get ready-to-use solution.
Richard MacCutchan 26-Feb-19 11:59am    
In almost every case I just use the keywords from the question. As you say, some people are lazy, they think they will get something extra by posting here.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900