By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
446,265 Members | 1,731 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 446,265 IT Pros & Developers. It's quick & easy.

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

P: 1
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>JavaScriptKit.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.com Multiple Choice Quiz Script (http://www.javascriptkit.com)
* Copyright 2003 JavaScript Kit- http://www.javascriptkit.com
* This notice and footnote must stay intact for use
* Visit JavaScript Kit (http://www.javascriptkit.com/) for full source code
***********************************************/

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

</head>

<body bgcolor="#FFFFFF">

<!--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"><big><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="qselections">
<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="qselections">
<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="qselections">
<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="qselections">
<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="qselections">
<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="qselections">
<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="qselections">
<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="qselections">
<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="qselections">
<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="qselections">
<input type="radio" value="a" name="question10">a) Asia<br>
<input type="radio" value="b" name="question10">b) Africa<br>
<input type="radio" value="c" name="question10">c) Europe<br>
</div>

</form>

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

<p id="footnote" align="center"><font face="arial" size="-1">Quiz script provided by<br>
<a href="http://www.javascriptkit.com">JavaScriptKit.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_answer">

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

onclick = "document.getElementById('question1_answer').v alue = ?????;"


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

Regards

Sourcie
Feb 22 '08 #1
Share this Question
Share on Google+
1 Reply


acoder
Expert Mod 15k+
P: 16,027
Then set their values based on the on click event. ie

onclick = "document.getElementById('question1_answer').v alue = ?????;"[/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

Post your reply

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