Quiz how to show button IF they get 70% or more?

edkeyte · January 15th, 2004, 09:29 PM

I use Hotpotatoes quizzes from this site: http://web.uvic.ca/hrd/hotpot/index.htm

I send the results by CGI to a flatfile text database and then show the results (% of Scores etc)
But I would like to have diffrent levels of comments depending on the percentage the student got in the test, for example:

If they get 10% or below the automatic comment would be E.G.:
You need to learn some more!
10% to 20%: You could do better!
20% to 30%: Not bat
etc etc....
70% to 80%: well done you passed
90% to 100% Fantastc! ....

I also would like to have a pass mark of 70% or over, so IF the student that takes the test gets 70% of more THEN I can show a button for the student to press and it would link to a certificate to print out. But if the students test results are 70% or below then the Button would not show.

It would also be nice if the script could show a "tick" image if any of the tests are over 70% or a red cross image if any of the scores are under 70%

Here is an image of a screen shot of something similar to what I mean:

http://www.planet-cyber.org/javascript_001.jpg

As you can see from the image I got an overall score of 80% for that course so the certificate button at the bottome will show I can thus print out my certificate but If I got under 70% it would not show.

Also you could see the tick images next to all the tests that I got right.

I seen things like this all over the net but I know nothing about Javascript to try it myself.

I very much look forward to a reply.
Best regards,
Edward

joefawcett · January 16th, 2004, 05:55 AM

As I understand it the student fills in the answers and the the form is submittted with the results posted back? If this is correct what control do you have over the results page? If total then it might be easier to do suff server-side. If you want to do it clien-side then you need to use style object to hide and show the button and some more dhtml to alter the image source. Here is a small example, unless you show some of the source code it's a bit of a guess but it might start you off.

Code:

<html><head><title>Test Results</title>
<script>
function init()
{
  showCertificateAndTicks();  
}
function showCertificateAndTicks()
{
  var oScore = document.getElementById("score1");
  var iScore = parseInt(oScore.innerText, 10);
  var sComment = "You need to learn some more!"
  if(iScore > 9 && iScore < 20)
  {
    sComment = "You could do better!";
  }
  else if(iScore > 19 && iScore < 30)
       {
         sComment = "Not bad!"; 
       } 
  //more entries
  var oComment = document.getElementById("comment1");
  oComment.innerHTML = sComment;

  if (iScore > 69)
  {
    document.images[0].src = "tick.gif";
    var oButton = document.getElementById("cmdCert");
    oButton.style.visibility = "visible";
  }  
}
</script>
<body onload="init();">
<div>Your score for hacking was <span id="score1">73</span><span id="comment1"></span><img src="cross.gif"></div>
<input id="cmdCert" type="button" value="Print Certificate" style="visibility:hidden">

In a full page the results would be in a table and you loop through the rows to retrieve the figures much easier.

--

Joe

edkeyte · January 16th, 2004, 07:52 AM

Thanks so much for the reply. I'm now at my computer in my office so I can't try out your kind reply. As soon as I get home I will Post some code of the Javascript quiz for you to have alook.
Yes the form is posted 3 ways 1: posted back to the web page and saved on my server in a database for each student to privately view from within their members area. I have total control of this page it is an Html template that points to the CGI script it self or I can embed the results in side an HTML page using virtual includes.
The 2nd and 3rd way the form is posted is by email to both student and teacher.
For the CGI scripts that I use are all from this page: http://www.ezscripting.co.uk/
I use the CSVwrite.pl for posting the results by email and back to a web page, I use the CSVSearch script to search the database and display the results in an html template based page and the CSVread.pl to link the student directly to each results.
Here is a demo and simple page for you to see: You need to login as ID: demo and Password: demo
http://www.plcyber.com/members/demo/

From there you can see a very simple view of the tests that you can take and look at the code etc and see the output results.
I is a very long way from finished.

edkeyte · January 16th, 2004, 12:13 PM

Thanks so much for the code! I put it on my site fantastic but it only displays the first results on the page my template reproduces ever bit of HTML within the template tag: <template> </template>
over and over again and I have set each page to display a max of 5 results per page.
Anyway the code that you posted above displays the comment and correct image depending on the percent and if over 70% then will show button which is perfect and I love it thanks. But the second result on the page shows no comment or button no matter what percentage but it only shows the cross image even if I get 100%
Also if I have another image on the page that has nothing to do with this script it is replaced with the tick image.
Here is the code in side my Template file:

Code:

<html>

<head>
<title>b</title>


<SCRIPT LANGUAGE="JavaScript">






<!-- Begin
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=1,width=600,height=600,left = 340,top = 84');");
}
// End -->
</script>



<script>
function init()
{
  showCertificateAndTicks();  
}
function showCertificateAndTicks()
{
  var oScore = document.getElementById("score1");
  var iScore = parseInt(oScore.innerText, 10);
  var sComment = "You need to learn some more <<Score>>% is not very good <<name_from>>!"
  if(iScore > 9 && iScore < 20)
  {
    sComment = "You could do better than <<Score>>% <<name_from>>!";
  }
  else if(iScore > 19 && iScore < 30)
       {
         sComment = "<<Score>>% is Not bad <<name_from>>!"; 
       }
if(iScore > 29 && iScore < 40)
  {
    sComment = "You did ok <<name_from>> but try better!";
  }
else if(iScore > 39 && iScore < 50)
       {
         sComment = "half marks <<name_from>> good! but still no pass sorry you must get 70% or over next time"; 
       }
if(iScore > 49 && iScore < 60)
  {
    sComment = "You did good <<name_from>>!";
  }
else if(iScore > 59 && iScore < 70)
       {
         sComment = "Good <<name_from>>!"; 
       }
if(iScore > 69 && iScore < 80)
  {
    sComment = "you're good this time <<name_from>>!";
  }
else if(iScore > 79 && iScore < 90)
       {
         sComment = "very good <<name_from>> well done!"; 
       }
 if(iScore > 89 && iScore < 100)
  {
    sComment = "best Score <<name_from>> very very good!!!";
  }
else if(iScore > 99 && iScore < 109)
       {
         sComment = "top man <<name_from>> fantastic!!!"; 
       }
  //more entries
  var oComment = document.getElementById("comment1");
  oComment.innerHTML = sComment;
  
  if (iScore > 69)
  {
    document.images[0].src = "http://www.planet-cyber.org/tick.gif";
    var oButton = document.getElementById("cmdCert");
    oButton.style.visibility = "visible";
  }  
}
</script>
<body onload="init();">

<BODY bgColor=#93c9ff>

Pass mark is set at 70% or over.<P>
<template>
<div>Your score for <<subject>> was <span id="score1"> <<Score>>% </span><span id="comment1"></span> <img src="http://www.planet-cyber.org/cross.gif"></div>
<BR>

<IMG height=10 alt="" hspace=0 
src="http://www.planet-cyber.org/br/bar.php?width=100&amp;height=10&amp;max=4&amp;value=<<Score>>&amp;fontsize=4&amp;showpercent=1"
width=137 border=0>



<form>
<input id="cmdCert" type="button" value="Print Certificate" style="visibility:hidden" onClick="javascript:popUp('cert.html')">
</form>
</template><p>




you took <<#_matches>> subjects
 
</BODY></html>
</html>

Key:
<<Score>> = is the tag that will be replaced by the Score.

edkeyte · January 22nd, 2004, 08:38 PM

Hi me again, how're you? Thank you so much for this script it's very nice.
Do you think it would be possible to recycle this above script and use it with this timer script that I have below?

Code:

<!-- TWO STEPS TO INSTALL TIME ON PAGE (UNLOAD):

   1.  Put the two codes into the HEAD of your HTML document
   2.  Add the OnLoad event handler to the BODY tag  -->



<HEAD>

<SCRIPT LANGUAGE="Javascript">







<!-- Begin
pageOpen = new Date();
function bye() {
pageClose = new Date();
minutes = (pageClose.getMinutes() - pageOpen.getMinutes());
seconds = (pageClose.getSeconds() - pageOpen.getSeconds());
time = (seconds + (minutes * 60));
if (time == 1) {
time = (time + " second");
}
else {
time = (time + " seconds");
   }
alert('Well done you took ' + time + ' to do the test!');
} 
// End -->
</SCRIPT>
</HEAD>



<BODY OnUnload="bye()">

<p><center>
Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a>
</center><p>

Demo of this script here: http://www.planet-cyber.org/timer.html

If the student takes between 10 seconds and 20 seconds to do the test then the message would show the comment: well done so fast!

30 to 40 seconds: a fast try well done....
or if, 300-400 seconds: you were very slow you need to speed up faster.

How could I take out the javascript prompt pop-up, out of the above Java timer script?

I need to embed this timer script inside the student test-html page and then get their second of how long they took and send it together with the form to the next result page but that's difficult.

Here is a demo of the code of the quiz-test script that I use.
How and were do I put the timer code in this file so the result of the time will be sent with the form to the next page?

http://www.planet-cyber.org/demotest.htm

For this demo the result page can't seem to show the results.

Best regards Edward