Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
Password Reminder
Register
| FAQ | Members List | Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old January 15th, 2004, 09:29 PM
Registered User
 
Join Date: Jan 2004
Location: , , .
Posts: 8
Thanks: 0
Thanked 0 Times in 0 Posts
Default Quiz how to show button IF they get 70% or more?

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
Reply With Quote
  #2 (permalink)  
Old January 16th, 2004, 05:55 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

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
Reply With Quote
  #3 (permalink)  
Old January 16th, 2004, 07:52 AM
Registered User
 
Join Date: Jan 2004
Location: , , .
Posts: 8
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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.
Reply With Quote
  #4 (permalink)  
Old January 16th, 2004, 12:13 PM
Registered User
 
Join Date: Jan 2004
Location: , , .
Posts: 8
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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.
Reply With Quote
  #5 (permalink)  
Old January 22nd, 2004, 08:38 PM
Registered User
 
Join Date: Jan 2004
Location: , , .
Posts: 8
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to show a button have hidden property ??? nobitavn94 ASP.NET 1.0 and 1.1 Basics 2 November 19th, 2006 09:39 AM
How to show gif image on mouseover event of button arshad mahmood ASP.NET 1.0 and 1.1 Basics 2 September 14th, 2006 12:15 AM
show element button stekker XSLT 1 July 23rd, 2006 05:19 PM
how to show a button when save is done noor ASP.NET 1.0 and 1.1 Basics 4 May 9th, 2005 12:49 AM



All times are GMT -4. The time now is 04:59 AM.


Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.