#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    3
    Rep Power
    0

    Quiz with Timer (Multiple Time Triggers)


    Hi there,

    I am about to start development on a web-based quiz and wanted to clarify some stuff to make sure it is possible.

    I am hoping to have a quiz where the questions are broken up into 4 categories, and you get a score for each one. Should be straight forward enough.

    The question I have is this:

    I know you can use timers to limit allowed response time for the questions. I was hoping to use a timer to change the score of the questions based on how long it took to answer.

    Ie:
    If answered in 4 seconds (add 3 points)
    If answered in 8 seconds (add 2 points)
    If answered in 12 seconds (add 1 point)
    If answered in 16+ seconds (add 0 points)

    I am wondering if this is feasible in Javascript, can you create a timer with multiple trigger times, with different effects?

    Thanks in advance,
    David
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,165
    Rep Power
    184
    Maybe something like this...

    Code:
    <!-- CSS -->
    
    <style>
    #scoreMSG {
    display:none;
    /* extra styling not needed; style as you desire */
    border:double 3px black;
    padding:10px;
    margin-bottom:25px;
    font-weight:bold;
    font-family:arial;
    }
    </style>
    
    <!-- JavaScript -->
    
    <script>
    
    var score;
    var scoreCount;
    var alreadyAnswer;
    var timer = 0;
    
    function keepScore(answer)
    {
    timer++;
    document.getElementById("scoreMSG").style.display="block";
    if (timer <= 4) {
    score="3";
    }
    else if (timer >= 5 && timer <= 8) {
    score="2";
    }
    else if (timer >= 9 && timer <= 15) {
    score="1";
    }
    else {
    clearTimeout(scoreCount);
    score="0";
    }
    document.getElementById("scoreboard").innerHTML = score;
    
    if (timer >= 16) {
    clearTimeout(scoreCount);
    alreadyAnswer="yes";
    }
    else if (answer == "correct") {
    // question answered correctly
    clearTimeout(scoreCount);
    alreadyAnswer="yes";
    }
    else if (timer < 16 && alreadyAnswer != "yes") {
    scoreCount = setTimeout("keepScore()", 1000);
    }
    
    }
    
    </script>
    
    <!-- HTML -->
    
    <div id="scoreMSG">
    You Have <span id="scoreboard"></span> Point(s).
    </div>
    
    <input type="button" value="Start Game!" onclick="javascript:keepScore('notYet')"/>
    
    <!-- "End Game" button for demo purposed -->
    
    <input type="button" value="End Game" onclick="javascript:keepScore('correct')"/>

IMN logo majestic logo threadwatch logo seochat tools logo