display and calculate score for javascript quiz

Question

i'm a teacher and have just started learning to code for making online quizzes for my students. I'm still very new to programming like JavaScript and php, and I've tried to looked for sources online to help create my quizzes. I have 2 questions: 1). I've set a timer for the quiz but everytime when the time is up, it just keeps counting, what should I put in the

                if (parseInt(min) == 0) {
                    clearTimeout(tim);
                    location.href = "";

section to redirect my student to the result page or other pages?

(2) My quizzes are mostly fill-in-the-blanks questions and I wonder how to store the point of each question and then show the total score to my students at the end of the quiz? Many thanks!. Here's my code:

<html>
<head>

<script language ="javascript" >
    var tim;

    var min = 0;
    var sec = 30;
    var f = new Date();
    function f1() {
        f2();
        document.getElementById("starttime").innerHTML = "Your started your quiz at " + f.getHours() + ":" + f.getMinutes();


    }
    function f2() {
        if (parseInt(sec) > 0) {
            sec = parseInt(sec) - 1;
            document.getElementById("showtime").innerHTML = "Your Left Time  is :"+min+" Minutes ," + sec+" Seconds";
            tim = setTimeout("f2()", 1000);
        }
        else {
            if (parseInt(sec) == 0) {
                min = parseInt(min) - 1;
                if (parseInt(min) == 0) {
                    clearTimeout(tim);
                    location.href = "www.rawlanguages.com";
                }
                else {
                    sec = 60;
                    document.getElementById("showtime").innerHTML = "Your Left Time  is :" + min + " Minutes ," + sec + " Seconds";
                    tim = setTimeout("f2()", 1000);
                }
            }

        }
    }

</script>

    <title>Quiz</title>
    <h1>P.1 Grammar Quiz</h1>
    <body>

    <div id="ques0" class="ques">
     <h2>Question</h2>
    <p>She
    <input type="text" name="answer0"/> a girl.</p>
    </div>

    <div id="ques1" class="ques">
    <h2>Question</h2>
    <p>"is", "am" and "are" are</p>
    <ul>
    <li>
      <input type="radio" name="answer1" value="Present tense" />
      <label>Present tense</label>
    </li>
    <li>
      <input type="radio" name="answer1" value="Past tense" />
      <label>Past tense</label>
    </li>
    <li>
      <input type="radio" name="answer1" value="Future tense" />
      <label>Future tense</label>
    </li>
  </ul>
</div>

<div id="ques2" class="ques">
<h2>Question</h2>
<p>He
<input type="text" name="answer2"/> a policeman.
</p>
</div>


<a href="javascript:checkAnswer()">Check answer!</a>

<script src="JQ.js"></script>
<script src="function.js"></script>

<body onload="f1()" >
<form id="form1" runat="server">
<div>
  <table width="100%" align="center">
    <tr>
      <td colspan="2">

      </td>
    </tr>
    <tr>
      <td>
        <div id="starttime"></div>

        <div id="endtime"></div>

        <div id="showtime"></div>
      </td>
    </tr>
    <tr>
      <td>





      </td>

    </tr>
  </table>




</div>
</form>

</body>
</head>
</html>

You don't need parseInt() unless you're parsing a string. You can remove it from everywhere you use it right now. if (parseInt(min) == 0) is never true because min starts as 0 and you decrement it by one on the previous line. — JJJ
– JJJ, Commented Jul 20, 2016 at 18:31
When you say "store the point" do you mean temporarily (long enough to show) or permanently (long enough to see at the end of the semester)? — Raydot
– Raydot, Commented Jul 20, 2016 at 19:12
Is this for the students to practice on? If you are using JS only, then the answers can be found in the source with a right click. Using server-side language like PHP you keep the answers inaccessible. JavaScript is client-side language, therefore the source can be read by the user (i.e. right click > inspect). — zer00ne
– zer00ne, Commented Jul 20, 2016 at 19:19
thank you for your suggestion. And yes I would like to permanently store the scores of my students so that I'll be able to send the results to their parents through email. Is there anyway to do that? thanks. — Shannon
– Shannon, Commented Jul 22, 2016 at 13:20

Alex Kudryashev · Accepted Answer · 2016-07-20 19:08:36Z

Your code is good enough for a beginner but it requires some improvements.

<script type="text/javascript" >//language ="javascript" is obsolete
    //var tim; //no need at all

    //var min = 0; //no need at all
    //var sec = 30; //there is better way
    //var f = new Date(); //no need to be global
    function f1(sec) {//define (declare) sec as parameter
        f2(); //call the function
        var f = new Date();
        document.getElementById("starttime").innerHTML = "Your started your quiz at " + f.getHours() + ":" + f.getMinutes();
        var showtime = document.getElementById("showtime"); //used many times
        //Here we put (closure) f2
        function f2() {
          //f2 knows sec from parent scope
          if (sec <= 0) {//parseInt(sec) no need. sec is int
            showtime.innerHTML = 'Time is over'; 
            //ShowAnswers(); //show on the same page or post to .php
            return;
          }
            sec--;// = parseInt(sec) - 1;
            showtime.innerHTML = "Your Left Time  is :" + Math.floor(sec / 60) +" Minutes ," + (sec % 60) +" Seconds";
            setTimeout(f2, 1000);//"f2()" is correct but this way is better
        /* no need in remaining code
        }
        else {
            if (parseInt(sec) == 0) {
                min = parseInt(min) - 1;
                if (parseInt(min) == 0) {
                    clearTimeout(tim);
                    location.href = "www.rawlanguages.com";
                }
                else {
                    sec = 60;
                    document.getElementById("showtime").innerHTML = "Your Left Time  is :" + min + " Minutes ," + sec + " Seconds";
                    tim = setTimeout("f2()", 1000);
                }
            }

        }
        */
    }//f2
}//f1
</script>

<body onload="f1(90)"><!--Here we send seconds to the function -->

Also note that all your quiz starting from <h1>P.1... must be inside body container.

Collectives™ on Stack Overflow

display and calculate score for javascript quiz

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related