473,703 Members | 2,907 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Using an onclick event on a hotspot image to store a value

1 New Member
I am changing an existing quiz found on "JavaScriptKit. com Multiple Choice Quiz"

I have an image. Instead of using the radio buttons with the normal true/false question, I want to place two hotspots on the image. One being correct(a) and the other incorrect(b). When the user clicks on the correct hotspot or place on the image, it should score and retain that value until the end of the quiz. At the end of the quiz, there is a submit button that passes the values from the selections made in the quiz to a results page.

Is it possible to use the onclick event on a hotspot to act like a radio button store and keep the values until the end so the quiz can be scored.

Is this possible?

Here is an extract from the existing quiz...
[HTML]<html>

<head>
<title>JavaScri ptKit.com Multiple Choice Quiz Script</title>

<style>
.qheader{
font:bold 14px Arial;
}

.qselections{
font:normal 13px Arial;
}
</style>

<script src="quizconfig .js">
</script>

<script>

/*************** *************** *************** **
* JavaScriptKit.c om Multiple Choice Quiz Script (http://www.javascriptk it.com)
* Copyright 2003 JavaScript Kit- http://www.javascriptk it.com
* This notice and footnote must stay intact for use
* Visit JavaScript Kit (http://www.javascriptk it.com/) for full source code
*************** *************** *************** **/

var actualchoices=n ew Array()
document.cookie ="ready=yes"
</script>

</head>

<body bgcolor="#FFFFF F">

<!--Comments on configuring quiz script-->
<!--Change the questions below any way you want, but make note of the following:-->
<!--1) Perserve the <FORM> tags -->
<!--2a) Inside each radio button, use the VALUE attribute to denote each question's choices: "a", "b", "c" etc.-->
<!--2b) Inside each radio button, use the NAME attribute to denote which question the button belongs to ("question1" , "question2" etc-->
<!--3) Script supports unlmited # of questions. Be sure to edit .js file to enter corresponding solutions-->

<p align="center">

<form method="POST" name="myquiz">

<font face="Arial"><b ig><big>General Knowledge Quiz</big></big></font></p>

<div class="qheader" >
1) What is the difference between a jungle and a rain forest?</div>
<div class="qselecti ons">
<input type="radio" value="a" name="question1 ">a) No difference. Simply two different ways in referring to the same thing.<br>
<input type="radio" value="b" name="question1 ">b) A jungle in general receives less rain than a rain forest.<br>
<input type="radio" value="c" name="question1 ">c) A jungle refers to the thickest area of a rain forest<br>
<input type="radio" value="d" name="question1 ">d) A jungle and a rain forest each contain their own group of distinct plants and animals.<br>
</div>

<br>

<div class="qheader" >
2) What is the world's most common religion?</div>
<div class="qselecti ons">
<input type="radio" value="a" name="question2 ">a) Christianity<br >
<input type="radio" value="b" name="question2 ">b) Buddhism<br>
<input type="radio" value="c" name="question2 ">c) Hinduism<br>
<input type="radio" value="d" name="question2 ">d) Muslim<br>
</div>

<br>

<div class="qheader" >
3) Which city ranks as the world's most populous city (2002)?</div>
<div class="qselecti ons">
<input type="radio" value="a" name="question3 ">a) New York (US)<br>
<input type="radio" value="b" name="question3 ">b) Mexico City (Mexico)<br>
<input type="radio" value="c" name="question3 ">c) Tokyo (Japan)<br>
<input type="radio" value="d" name="question3 ">d) Shanghai (China)<br>
</div>

<br>

<div class="qheader" >
4) What is the second largest country (in size) in the world?</div>
<div class="qselecti ons">
<input type="radio" value="a" name="question4 ">a) USA<br>
<input type="radio" value="b" name="question4 ">b) China<br>
<input type="radio" value="c" name="question4 ">c) Canada<br>
<input type="radio" value="d" name="question4 ">d) Russia<br>
</div>

<br>

<div class="qheader" >
5) As of January 2003, how much is Microsoft Chairman Bill Gates's net worth?</div>
<div class="qselecti ons">
<input type="radio" value="a" name="question5 ">a) 10 million US<br>
<input type="radio" value="b" name="question5 ">b) 10 billion US<br>
<input type="radio" value="c" name="question5 ">c) 35 billion US<br>
<input type="radio" value="d" name="question5 ">d) 50 billion US<br>
</div>

<br>

<div class="qheader" >
6) Which country below is not one of the members of the UN security council (Jan 2003)?</div>
<div class="qselecti ons">
<input type="radio" value="a" name="question6 ">a) USA<br>
<input type="radio" value="b" name="question6 ">b) China<br>
<input type="radio" value="c" name="question6 ">c) Germany<br>
<input type="radio" value="d" name="question6 ">d) France<br>
</div>

<br>

<div class="qheader" >
7) The longest river in the world is:</div>
<div class="qselecti ons">
<input type="radio" value="a" name="question7 ">a) Amazon (Brazil)<br>
<input type="radio" value="b" name="question7 ">b) Nile (Egypt)<br>
<input type="radio" value="c" name="question7 ">c) Yangtze (China)<br>
<input type="radio" value="d" name="question7 ">d) Congo (Zaire)<br>
</div>

<br>

<div class="qheader" >
8) Which software firm is the second largest in the world, after Microsoft?</div>
<div class="qselecti ons">
<input type="radio" value="a" name="question8 ">a) Netscape<br>

<input type="radio" value="b" name="question8 ">b) Oracle<br>
<input type="radio" value="c" name="question8 ">c) Lotus<br>
<input type="radio" value="d" name="question8 ">d) Norton<br>
</div>

<br>

<div class="qheader" >
9) What's the world's most widely spoken language?</div>
<div class="qselecti ons">
<input type="radio" value="a" name="question9 ">a) English<br>
<input type="radio" value="b" name="question9 ">b) Spanish<br>
<input type="radio" value="c" name="question9 ">c) Mandarin<br>
<input type="radio" value="d" name="question9 ">d) French<br>
</div>

<br>

<div class="qheader" >
10) Which continent is host to the most countries in the world?</div>
<div class="qselecti ons">
<input type="radio" value="a" name="question1 0">a) Asia<br>
<input type="radio" value="b" name="question1 0">b) Africa<br>
<input type="radio" value="c" name="question1 0">c) Europe<br>
</div>

</form>

<form>
<div align="center">
<input type="button" value="Grade Me!" name="B1" onClick="gradei t()"> <input type="button" value="Reset" name="B2" onClick="docume nt.myquiz.reset ()"></div>
</form>

<p id="footnote" align="center"> <font face="arial" size="-1">Quiz script provided by<br>
<a href="http://www.javascriptk it.com">JavaScr iptKit.com</a></font></p>
</body>
</html>
[/HTML]
Can someone help?

I got some advice from another Forum, but im still not being able to pass the values using this method to the results page.

Get rid of the radio buttons and create hidden form field elements like:

<input type="hidden" value="" id="question1_a nswer">

Then set their values based on the on click event. ie

onclick = "document.getEl ementById('ques tion1_answer'). value = ?????;"


Please help, I know I am missing something small here.

Regards

Sourcie
Feb 22 '08 #1
1 4080
acoder
16,027 Recognized Expert Moderator MVP
Then set their values based on the on click event. ie

onclick = "document.getEl ementById('ques tion1_answer'). value = ?????;"[/b]
Here, it should be onclick of the image. So, replace the radio buttons with hidden form elements and images. When you click the images, the hidden form field gets set. You can set it to 0 or 1, or true/false - whatever will allow to work out how many questions have been answered correctly.

Note that anyone viewing the source can work out the answers.
Feb 22 '08 #2

Sign in to post your reply or Sign up for a free account.

Similar topics

7
2996
by: johkar | last post by:
I am confused on childNodes or children. When you have nested lists, I would think it would all be one list in the Dom, this doesn't seem to be the case. So how do you traverse an unordered list? Any help appreciated. John In the below script, I can expand and contract the nodes when clicked on, but I want the menu to close all other siblings to the node clicked so that only one sub menu option is expanded at one time. If the node...
1
2171
by: Dark Magician | last post by:
Comrades: Am trying to build a UI widget. I'm sure part of the problem is proper variable scope or object reference, and part of the problem may be the way I'm calling the function, but, here goes. Part I. Consider: A B C D M E F G H N O
6
9938
by: Cockroach | last post by:
Hello, I have a problem where the onClick of a table row will activates a window.location event, and inside a cell in that row, an image onClick event shows/hides a div. The problem is that when you click on the image, it briefly shows the div, and then reloads the page to the window.location url. Is there a way of preventing the onClick of the row (<tr>) from doing
2
2865
by: Perspolis | last post by:
Hi all I want to have hotSpot on my image. I put some lables on it and when I click image I can know where I select. it works but if my image zoom in/out I lose positions of lables.. what's your opinion about that??is there a better way to have hotspot?? thanks in advance
5
2582
by: moondaddy | last post by:
I have a <a> element in a datagrid which wraps some asp.net labels. this element also has an onclick event which does not fire in netscape 6 (and perhaps other browsers for all I know...). Below is the code for this. the onclick event calls a javascript function which I put an alert in the firt line to tell me if its working. It does work in IE. Any ideas on how to get netcrap... oops, I'm sorry, netscape to fire the onclick event? ...
4
13558
by: sameergn | last post by:
Hi, I have an image in my HTML form which has onclick() handler. There is also a submit button and a text box. Whenever text box has focus and user presses enter, the onclick() event of image is fired with event.keyCode as undefined. I was expecting that the form would get submitted. I tried returning from onclick() handler if keyCode is null, but the
7
3644
by: petethebloke | last post by:
Can anyone help? I have a client who has made a "dynamic interactive map" of our city using Dreamweaver. Each map file has hotspots that pop-up a div with a little image when the mouse goes over them. They also link to another file. I've converting the application to a PHP-AJAX system at http://www.ilex-urc-maps.com/testing.html but I can't get the dynamically altered hotspots to work. Any ideas? Please don't tell me that the client...
5
2643
by: prathapavp | last post by:
hi all, We r working on ERP sys and am doing crossBrowser compatibility. The problem is am not able to load one function by onClicking the refrence text . could u please help me out.
1
3454
by: swethak | last post by:
hi, i have a code to disply the calendar and add events to that. It works fine.But my requirement is to i have to disply a weekly and daily calendar.Any body plz suggest that what modifications i have to made in my code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"...
0
8659
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9098
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
8993
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
8951
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
7843
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6585
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
4674
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3111
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
2054
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.