Javascript Help - Timer (Not Counting Up) and Alert Box (Not Showing Up)
Question
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;
}
2 answers
solution1
1 2015-10-30 18:11:04
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.
solution2
0 2015-10-30 19:49:37
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.