CODEWITHSUNDEEP
javascripthtmltimer
Ph1shPhryd
Ph1shPhryd

Reputation: 109

Javascript Help - Timer (Not Counting Up) and Alert Box (Not Showing Up)

I am new to JavaScript and HTML but am slowly getting HTML but JavaScript I am struggling with. I am stuck on a problem that is having me have a counter start when I click the Start Quiz button. I am also having a problem with an Alert Box showing up when I click the Submit Answers button. I am not looking for someone to give me the answer but some guidance would be helpful. 

<head>
    <meta charset="UTF-8" />
    <title>Trivia Quiz: Movies</title>
    <script src="modernizr-1.5.js" type="text/javascript" ></script>
    <link href="quiz.css" rel="stylesheet" type="text/css" />
    <script src="functions.js" type="text/javascript" ></script>
    <script type="text/javascript">
        var seconds = "0";
        var clockID;
    </script>
    <script type="text/javascript">
        function runClock() {
            seconds++;
            document.getElementByID('quizclock')value=seconds;
        }
    </script>
    <script type="text/javascript">
        function startClock() {
            showQuiz();
            clockId=setInterval ("runClock()", 1000);
        }
    </script>
    <script type="text/javascript">
        function stopClock() {
            clearInterval (clockId);
            correctAns = gradeQuiz();
            window.alert("You have" + correctAns + "correct of 5 in" + timer + "seconds");
        }
    </script>
 </head>

<body onload="resetQuiz()">
    <form id="quiz" name="quiz" action="">
        <header>
            <img src="tlogo.png" alt="Online Trivia" />
            <nav class="horizontal">
                <ul>
                    <li><a href="#">Top Scores</a></li>
                    <li><a href="#">Submit a Quiz</a></li>
                    <li><a href="#">Quiz Bowl</a></li>
                    <li><a href="#">Your Account</a></li>
                </ul>
            </nav>
        </header>

        <nav class="vertical">
            <h1>Categories</h1>
            <ul>
                <li><a href="#">Arts</a></li>
                <li><a href="#">Books</a></li>
                <li><a href="#">Culture</a></li>
                <li><a href="#">Geography</a></li>
                <li><a href="#">History</a></li>
                <li><a href="#">Movies</a></li>
                <li><a href="#">Music</a></li>
                <li><a href="#">People</a></li>
                <li><a href="#">Random</a></li>
                <li><a href="#">Science</a></li>
                <li><a href="#">Sports</a></li>
                <li><a href="#">Television</a></li>
            </ul>
        </nav>

        <section id="main">
            <h1>Movie Trivia</h1>

            <p>
                All of our trivia quizzes are scored on the number of correct
                answers and the time required to submit those answers.
            </p>
            <p>
                To start the quiz, click the <b>Start Quiz</b> button below, 
                which will reveal the first page of quiz questions and start 
                the timer. When you have completed the questions, click 
                the <b>Submit Answers</b> button on the quiz form.
            </p>

            <aside>
                <input name="quizclock" id="quizclock" value="0" />
                <input id="start" type="button" value="Start Quiz" onclick="startClock()"  />
                <input  id="stop" type="button" value="Submit Answers" onclick="stopClock()"/>
            </aside>
        </section>
    </form>
</body>

The code that is provided is partial and I believe that is the only part of the code that is needed for the question. Thanks.

Reset Function as requested:

function resetQuiz() {
  document.quiz.quizclock.value = 0;
  for (i=0; i<document.quiz.elements.length; i++) document.quiz.elements[i].disabled=false;       
   document.quiz.stop.disabled = true;
}

Upvotes: 1

Views: 276

Answers (2)

Hitmands
Hitmands

Reputation: 14179

Hope Helps; Try to run the code snippet!

var Quiz = (function($) {
  var updateView = function(timeElapsed) {
    $('#result').html(timeElapsed);
  };
  function Quiz() {
    updateView(this.timing);
  }
  
  Quiz.prototype.timing = 0;
  
  Quiz.prototype.start = function() {
    var self = this;
    if(self._isCounting) {
      return;
    }
    return this._interval = (function() {
      self._isCounting = true;
      var interval = window.setInterval(function() {
        self.timing += 1;

        updateView(self.timing);
        
      }, 1000);
      
      return interval;
    })();
  };
  
  
  Quiz.prototype.stop = function() {
    window.clearInterval(this._interval);
    this._isCounting = false;
    return this;
  };
  
  Quiz.factory = function() {
    return new Quiz();
  };
  return Quiz;
})(window.jQuery);

window.jQuery(document).ready(function($) {
  var historyQuiz = Quiz.factory();
  
  historyQuiz.start();
  var modalIsOpen = false;
  
  $('#stop').click(historyQuiz.stop.bind(historyQuiz));
  $('#resume').click(historyQuiz.start.bind(historyQuiz));
  $('#submitQuizData').click(function(event) {

    historyQuiz.stop();
    
    return $.Deferred().resolve(historyQuiz.timing)
      .then(function(val) { 
        return $('#quizResult').html(val + 's') 
      })
      .then(function(element) { return element.fadeIn(); })
      .then(function(element) { modalIsOpen = true; })
  });

  $('#quizResult').click(function() {
    if(modalIsOpen) { modalIsOpen = false; return $('#quizResult').fadeOut(); }
  });
});
.quiz-result {
  display: none;
  text-align: center;
  width: 300px;
  height: 300px;
  background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="result"></div>

<button id="stop">STOP QUIZ</button>
<button id="resume">RESUME QUIZ</button>
<button id="submitQuizData">SUBMIT QUIZ DATA</button>

<div id="quizResult" class="quiz-result"></div>

Upvotes: 0

Itay Grudev
Itay Grudev

Reputation: 7434

You have two errors.

1. document.getElementByID('sth') should be document.getElementById('sth').
Notice the lowercase d at the end of Id.

2. You should put a . before value like this:

document.getElementById('quizclock').value = seconds;

This is all assuming that you have implemented startQuiz(), resetQuiz() and showQuiz() and they are working correctly.

Upvotes: 1

Related Questions