Function for a quiz

@gebezisApr 17.2005

Hello,

It’s a bit difficult to explain what I need but I’ll try.

There is a quiz that I have to make. It’s of a map of an image, and the client must click on a number (19) of parts of the picture. On every clicking on the left must appear a note saying for example: “You have found 11 so far”.

When the client finishes he must click on the “next” button and on the other page a result has to be displayed – for example: “You have found 11 damages”.

The only thing that occured to my mind was a function that starts with the onClick function of every part of the mapped image (function quiz(x))but as far as the parts to click on are 19 the function “quiz(x)” happend to be so long because it has to check first if the person already clicked on this image, and second which image on count is it. So the function is about 1000 rows of script and I don’t think this is normal.

If you have any idea of another way to check the answers, please let me know.

P.S. The “You have found 11 so far” I’ve made as 19 .gif images, because I don’t know any other way to do it.
Also I must not use Java, just Java script.

to post a comment

JavaScript

10 Comments(s) _↴

@gebezisauthorApr 17.2005 — #I could try to explain more precise if it is not clear.

@phpnoviceApr 17.2005 — #Perhaps something like this?

<i>
 </i>&lt;script type="text/javascript"&gt;
 &lt;!--//
 var found = new Array();
 var count = 0;
 function checkFound(n) {
 if (found[n]) {
 alert("Already found.");
 } else {
 found[n] = true;
 count++;
 }
 var str = "Total found: " + count + "&lt;br&gt;nFound: ";
 var x, len = found.length;
 for (x=0; x&lt;len; x++) {
 if (found[x]) str += x + ", ";
 }
 str = str.substr(0,str.length-2);
 document.getElementById("msg").innerHTML = str;
 return true;
 }
 //--&gt;
 &lt;/script&gt;

...which I tested with the following HTML:

[code=html]
 <div id="msg">Total found: 0</div>
 
 <p>
 <a href="javascript:void(0);"
 onclick="return checkFound(1);">Test 1</a><br>
 <a href="javascript:void(0);"
 onclick="return checkFound(2);">Test 2</a><br>
 <a href="javascript:void(0);"
 onclick="return checkFound(3);">Test 3</a><br>
 <a href="javascript:void(0);"
 onclick="return checkFound(4);">Test 4</a><br>
 <a href="javascript:void(0);"
 onclick="return checkFound(5);">Test 5</a>
 </p>
 [/code]

@gebezisauthorApr 17.2005 — #Ok, It works perfectly!

Thanks very much!

If you know PHP, do you know how I could transfer the final result to the next page?

I mean - I guess I have to transfer var count, but how could I do it?

Thanks again!

@phpnoviceApr 17.2005 — #Show the HTML you have for getting to the next page.

@gebezisauthorApr 17.2005 — #it is a .php file, not a .html

and in the JavaScript.php file are the Javascript functions.

<html>

<head>

 <title>
 
   </title>

<?php

include("JavaScript.php");

include("background.html");

include("styles1.css");

?>

</head>
 
  <body>
 
 
 
   <div id="Layer4" style="position:absolute; top:17px; width:100%; height:100%; z-index:4;" align="center">
   <table width="800" height="65" border="0" cellpadding="1" cellspacing="1">
   <tr height="20">
   <td width="95"></td>
   <td align=center><span class="style2">Office Safety</td>
   <td align=center width="95"><span class="style2">Office19</span>
   </td>
   <tr></tr>
   </table>
   </div>
   <div id="Layer2" style="position:absolute; top:79px; width:100%; height:100%; z-index:2;" align="center">
   <table width="800" height="476" border="0" cellpadding="10" cellspacing="0" margin="0">
   <tr>
   <td width="600">
   <blockquote><span class=style18>Can you spot the faults ?</span></blockquote>
   <p>&nbsp;</p>
   <p>&nbsp;</p>
   <p>&nbsp;</p>
   <p>&nbsp;</p>
   <p>&nbsp;</p>
 
   </td>
   <td align=center >
   <span class=style15>Click your left mouse<br>button on any unsafe<br>item you see.<br><br>Click on the "Next" icon<br>when you have finished.
   <p>&nbsp;</p>
   <p>&nbsp;</p>
   <p>&nbsp;</p>
 
   </tr>
   <tr height="250">
   <td align=left>
   <div id="msg"><span class="style15">So far you<br>have<br>found: 0</span></div>
 
   <p>&nbsp;</p>
   <p>&nbsp;</p>
   <p>&nbsp;</p>
 
   </table>
   </div>
   <div id="Layer8" style="position:absolute; top:90px; width:100%; height:100%; z-index:8;" align="center">
   <table width="800" height="476" border="0" cellpadding="0" cellspacing="0" margin="0">
   <tr>
   <td align=center>
   <img src="media/quiz1.png" width="620" height="448" border="0" usemap="#quiz1">
   <map name="quiz1">
   <area shape="rect" coords="67,36,116,101" href="#" name="a1" onClick="return checkFound(1);">
   <area shape="rect" coords="299,4,359,89" href="#" name="a2" onClick="return checkFound(2);">
   <area shape="rect" coords="249,79,288,120" href="#" name="a3" onClick="return checkFound(3);">
   <area shape="rect" coords="78,144,139,186" href="#" name="a4" onClick="return checkFound(4);">
   <area shape="rect" coords="344,133,390,202" href="#" name="a5" onClick="return checkFound(5);">
   <area shape="rect" coords="490,140,538,188" href="#" name="a6" onClick="return checkFound(6);">
   <area shape="rect" coords="302,219,344,271" href="#" name="a7" onClick="return checkFound(7);">
   <area shape="rect" coords="30,232,109,425" href="#" name="a8" onClick="return checkFound(8);">
   <area shape="rect" coords="127,337,173,379" href="#" name="a9" onClick="return checkFound(9);">
   <area shape="rect" coords="193,368,238,393" href="#" name="a10" onClick="return checkFound(10);">
   <area shape="rect" coords="240,342,275,393" href="#" name="a11" onClick="return checkFound(11);">
   <area shape="rect" coords="272,289,344,336" href="#" name="a12" onClick="return checkFound(12);">
   <area shape="rect" coords="352,291,373,337" href="#" name="a13" onClick="return checkFound(13);">
   <area shape="rect" coords="413,231,477,265" href="#" name="a14" onClick="return checkFound(14);">
   <area shape="rect" coords="418,269,477,311" href="#" name="a15" onClick="return checkFound(15);">
   <area shape="rect" coords="466,314,532,366" href="#" name="a16" onClick="return checkFound(16);">
   <area shape="rect" coords="498,367,545,402" href="#" name="a17" onClick="return checkFound(17);">
   <area shape="rect" coords="346,336,460,401" href="#" name="a18" onClick="return checkFound(18);">
   <area shape="rect" coords="308,403,461,443" href="#" name="a19" onClick="return checkFound(19);">
   </map>
   </td></tr>
   </table>
   </div>
   <div id="Layer3" style="position:absolute; top:549px; width:100%; height:40px; z-index:3;" align="center">
   <table width="800" height="40" border="0" cellpadding="0" cellspacing="0">
   <tr>
   <td width="20"></td>
   <td width="80" align=center>
   <form method="post" action="7b0.php">
   <input name="Image11" type="image" onMouseOut="MM_swapImgRestore();text_disappear(1)" onMouseOver="MM_swapImage('Image11','','media/back_b.gif',1);text_appear(5)" src="media/back_a.gif">
   </form>
   </td>
   <td width="60" align=center>
   <input name="Image8" type="image" onMouseOut="MM_swapImgRestore();text_disappear(1)" onMouseOver="MM_swapImage('Image8','','media/exit_b.gif',1);text_appear(3)" src="media/exit_a.gif" onClick="window.close()">
   </td>
   <td width="60" align=center>
   <form method="post" action="slips1help.php">
   <input name="Image9" type="image" onMouseOut="MM_swapImgRestore();text_disappear(1)" onMouseOver="MM_swapImage('Image9','','media/help_b.gif',1);text_appear(4)" src="media/help_a.gif">
   </form>
   </td>
   <td width="210" align=center><img name=text1 src="media/blank.gif" width="210" height="35">
   </td>
   <td width="90" align=center><br>
   <input name="Image10" type="image" id='stop' onMouseOver='text_appear(0)' onMouseOut='text_disappear(1)' onClick="MM_swapImage('Image10','','media/ascript_a.gif',1);stopPlay();change_btn(14)" src="media/mute_a.gif"><br><br>
   </td>
   <td width="210"><form><img name=text2 src="media/blank.gif" width="210" height="35"></form>
   </td>
   <td width="90" align=left>
   <form method="post" action="quiz2.php">
   <input name="Image1" type="image" onMouseOut="MM_swapImgRestore();text_disappear(2)" onMouseOver="MM_swapImage('Image1','','media/next_b.gif',1);text_appear(2)" src="media/next_a.gif">
   </form>
 
 
   </td>
   <tr></tr>
   </table>
   </div>
 
 
 
 
  </body>

</html>

@phpnoviceApr 17.2005 — #I want to see just the HTML that the visitor would use to get from the quiz page to the next page. Is it in there somewhere?

http://www.webdeveloper.com/forum/showthread.php?t=62975

@gebezisauthorApr 17.2005 — #<form method="post" action="quiz2.php">

<input name="Image1" type="image" onMouseOut="MM_swapImgRestore();text_disappear(2)" onMouseOver="MM_swapImage('Image1','','media/next_b.gif',1);text_appear(2)" src="media/next_a.gif">

</form>

@phpnoviceApr 17.2005 — #OK, add a hidden field to that form -- e.g.:

<input type="hidden" name="found">

Then, you can modify your FORM tag by adding the following:

onsubmit="this.found.value=found; return true;"

@gebezisauthorApr 17.2005 — #Thanks, but on the next page if I write:

<?php

echo $HTTP_POST_VARS['found'];

?>

the result is :

[object]

and I want it to be a number....

So I changed "found" with "count" and it worked.

Thank you very, very much, without your help I couldn't go further with my work!

Best regards : Eva

@phpnoviceApr 17.2005 — #Oops, I mis-coded it. Glad you fixed it. ?

Also in #JavaScript _↴

Javascript Problem Currency Formatting Weird stuff with change font family in document.write Drag and drop in select list?

Success!

Help @gebezis spread the word by sharing this article on Twitter...

Tweet This

Function for a quiz

10 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Function for a quiz

10 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

Also in #JavaScript _↴