Basic JavaScript

[Dwillich87]

Hey I'm Dean

I'm taking my BSc from distant learning so sometimes it takes forever to get the teachers or other students to help me on stuff I'm stuck on anyways. I'm given a task to show a quiz with a little clock running and to end the quiz and stop the time I think I have the functions right but nothing shows up when I push start quiz

Any help you can give will help a lot

Thanks

Dean

[Taywin]

1)Line 21, The clockid should be initial to 0, not a function.

var clockid = 0;

2)Line 23, This is an odd way of your implementation. You could simply use...

seconds += 1;

3)Line 24, The document.quiz does not exists. This is an incorrect reference to an element of HTML using JavaScript. A way to deal with this is to get the element using getElementById() to get what you want from the document.

var elem = document.getElementById("quizclock")
if (elem) {  // ensure the element exists
  elem.value = seconds;  // seconds is a global variable
}

4)Line 28, You are supposed to save the ID returned by setInterval() function if you want to use it in stopClock() function.

clockid = window.setInterval("runClock()",1000);

5)Line 31, clearInterval() is not a built-in function. You need clearTimeout(ID) to stop the clock. The ID is the value you saved from the setInterval() in line 28.

window.clearTimeout(clockid);

6)Line 34, You may use only "alert()" instead of window.alert(). Also you are displaying the whole content in string. You need to concatenate string & variables to correctly display what you want.

alert("You have "+correctAns+" correct of 5 in "+timer);

7)Line 61, Your button doesn't associate with any function of JavaScript. It is just a button. You need an "onclick" event to call your startClock() function.

<input type="button" value="Start Quiz" onclick="startClock()"/>

8)When you are doing show/hide certain HTML elements with JavaScript, do NOT try to modify element.style.visibility. The reason is that IE8 browser may throw an error and will not do it. A good way to work around it is to use CSS by assigning a class to it in order to show/hide. Also, if you use only "visibility" property, the location where the element is located becomes invisible and leave an empty space there. If you have text displayed below the element, you will see an empty space. If you do not want that, you need to also use "display" property.

<style type="text/css">
.hide {
  display: none;  /* if you want to hide the empty space as well */
  visibility: hidden;
}
</style>

<script type="text/javascript">
  ...
  function hide(element) {  // hide the element
    element.className = element.className==""? "hide" : (element.className+" hide")
  }

  function show(element) {  // remove the CSS which hides the element -> show
    element.className = element.className.replace(/\s*hide$/, "")
  }
  ...
</script>

[Dwillich87]

Thanks that really helped sort things out