Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations bkrike on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to link a answer to a image using a arrow?

Status
Not open for further replies.
longmatch

longmatch

Programmer
Nov 1, 2001
406
Dear All:
I am designing a online test program. Some questions allow users to select answer, which is connected to the corresponding image using a arrowed line. For example, there are 5 choices and 5 images. When a user chooses answer A, the answer should be connected to the picture A with a colored arrow line. Then there will be 25 different combinations. I have no idea how to tackle this problem. I think layer may be a choice. Any good suggestions?

thanks

Longmatch
 
Sort by date Sort by votes
If you want to use that only from IE not shure if others knws it. Draw a line in Word save it to web and check there how it's done.
I think it's uses some XML + VML tags to do that.
It worth take a look.

Here it's an example
Code: 
<html xmlns:v=&quot;urn:schemas-microsoft-com:vml&quot;
xmlns:o=&quot;urn:schemas-microsoft-com:office:office&quot;
xmlns:w=&quot;urn:schemas-microsoft-com:office:word&quot;
xmlns=&quot;[URL unfurl="true"]http://www.w3.org/TR/REC-html40&quot;>[/URL]

<head>
<meta http-equiv=Content-Type content=&quot;text/html; charset=windows-1252&quot;>
<meta name=ProgId content=Word.Document>
<meta name=Generator content=&quot;Microsoft Word 9&quot;>
<meta name=Originator content=&quot;Microsoft Word 9&quot;>
<link rel=File-List href=&quot;./Doc1_files/filelist.xml&quot;>
<link rel=Edit-Time-Data href=&quot;./Doc1_files/editdata.mso&quot;>
<!--[if !mso]>
<style>
v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style>
<![endif]--><!--[if gte mso 9]><xml>
 <o:DocumentProperties>
  <o:Author>jonny</o:Author>
  <o:LastAuthor>jonny</o:LastAuthor>
  <o:Revision>1</o:Revision>
  <o:TotalTime>1</o:TotalTime>
  <o:Created>2003-08-04T14:34:00Z</o:Created>
  <o:LastSaved>2003-08-04T14:35:00Z</o:LastSaved>
  <o:Pages>1</o:Pages>
  <o:Lines>1</o:Lines>
  <o:Paragraphs>1</o:Paragraphs>
  <o:Version>9.3821</o:Version>
 </o:DocumentProperties>
</xml><![endif]--><!--[if gte mso 9]><xml>
 <w:WordDocument>
  <w:DrawingGridHorizontalSpacing>9.35 pt</w:DrawingGridHorizontalSpacing>
  <w:DisplayVerticalDrawingGridEvery>2</w:DisplayVerticalDrawingGridEvery>
 </w:WordDocument>
</xml><![endif]-->
<style>
<!--
 /* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
	{mso-style-parent:&quot;&quot;;
	margin:0in;
	margin-bottom:.0001pt;
	mso-pagination:widow-orphan;
	font-size:12.0pt;
	font-family:&quot;Times New Roman&quot;;
	mso-fareast-font-family:&quot;Times New Roman&quot;;}
@page Section1
	{size:595.45pt 841.7pt;
	margin:1.0in 1.25in 1.0in 1.25in;
	mso-header-margin:.5in;
	mso-footer-margin:.5in;
	mso-paper-source:0;}
div.Section1
	{page:Section1;}
-->
</style>
<!--[if gte mso 9]><xml>
 <o:shapedefaults v:ext=&quot;edit&quot; spidmax=&quot;1027&quot;/>
</xml><![endif]--><!--[if gte mso 9]><xml>
 <o:shapelayout v:ext=&quot;edit&quot;>
  <o:idmap v:ext=&quot;edit&quot; data=&quot;1&quot;/>
 </o:shapelayout></xml><![endif]-->
</head>

<body lang=EN-US style='tab-interval:.5in'>

<div class=Section1>

<p class=MsoNormal><!--[if gte vml 1]><v:line id=&quot;_x0000_s1026&quot; style='position:absolute;
 z-index:1' from=&quot;28.05pt,-18pt&quot; to=&quot;74.8pt,99pt&quot; coordsize=&quot;21600,21600&quot;>
 <v:stroke endarrow=&quot;block&quot;/>
</v:line><![endif]--><![if !vml]><span style='mso-ignore:vglayout;position:
relative;z-index:0'><span style='position:absolute;left:36px;top:-25px;
width:67px;height:160px'><img width=67 height=160
src=&quot;./Doc1_files/image001.gif&quot; v:shapes=&quot;_x0000_s1026&quot;></span></span><![endif]><![if !supportEmptyParas]>&nbsp;<![endif]><o:p></o:p></p>

</div>

</body>

</html>

________
George, M
 
Upvote 0 Downvote
I do not have enough knowledge for XML and VML. But I tried your code in IE. It works. Could you give me more explanatioin for your code?

thanks

longmatch
 
Upvote 0 Downvote
Well you can use this or some images instead but i cant help you more then this
Code: 
<!--[if gte vml 1]><v:line 
id=_x0000_s1026 style=&quot;Z-INDEX: 1; POSITION: absolute&quot; from = &quot;28pt,-18pt&quot; to = 
&quot;74.75pt,99pt&quot;><v:stroke endarrow = &quot;block&quot;></v:stroke></v:line><![endif]-->

And you can see there some parameters that you can change.

________
George, M
 
Upvote 0 Downvote
Could you just use javascript to turn an image on or off?

e.g.

Answer1 Arrow1 Image1
Answer2 Arrow2 Image2
Answer3 Arrow3 Image3
Answer4 Arrow4 Image4
Answer5 Arrow5 Image5

All the arrows would be set as invisible until a user selects an answer. This then turns on the corresponding arrow image. Is this possible for you?

----------------------------------------------------------------------

Need help finding an answer?

Try the search facilty ( or read FAQ222-2244 on how to get better results.
 
Upvote 0 Downvote
Yes you can turn an image off or on.
You can write the code using IE or NS style i'm using IE style for now, also as i remember there is a common way to hide or show an layer.(IE6, NS6+)
Code: 
<html>
<script language=javascript>
function changeImage(obj)
{
	
	var layer=document.all[&quot;layer1&quot;];
	layer.style.visibility=layer.style.visibility==&quot;&quot;?&quot;hidden&quot;:&quot;&quot;;
	obj.value= obj.value==&quot;Turn off&quot;?&quot;Turn on&quot;:&quot;Turn off&quot;;
}
</script>
<body>
<input type=button value=&quot;Turn off&quot; onclick=&quot;changeImage(this)&quot;>
<br>
<br>
<div name=layer1 id=layer1>
	A layer with an Text or an Image here
</div>
</body>
</html>

________
George, M
 
Upvote 0 Downvote
Dear Shaddow:
Thank you for your help.
The layer may be the better solution to my problem. There is also better solution than this. My question is that the question in a test ask users to match 5 pictures with 5 answers. For example,
question 1:
Choice A: mountain
Choice B: Lake
Choice C: Sea
Choice D: City
Choice E: Building
The 5 pictures are listed here
Picture1 Picture2 picture3 picture4 Picture5

We need find a way to allow users to match all the 5 choices with 5 pictures. My first thought is ask user to type a number (1-5) into the textbox, a arrow image will connect this choice to correponding pictures. The second choice may be change the location of the pictures. For example, if the users' choices are 1, 3, 5, 4, 2 for choice A,B,C,D,E. the pictures will be rearranged to 1, 3, 5, 4, 2. I know there may be other solution for this. Maybe you can find for me.

thanks

Longmatch
 
Upvote 0 Downvote
You can also change the &quot;src&quot; property of an image.

________
George, M
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

leifoet
  • Locked
  • Question
How to send HTML emails with ASP classic?
Replies
0
Views
805
leifoet
leifoet
leifoet
  • Locked
  • Question
How to check if a datatable is empty ?
Replies
0
Views
576
leifoet
leifoet
penguinspeaks
  • Locked
  • Question
Return to current location on page after asp processes.
Replies
2
Views
711
penguinspeaks
penguinspeaks
penguinspeaks
  • Locked
  • Question
Parse a database field that is comma delimited and input the results into another table
Replies
0
Views
554
penguinspeaks
penguinspeaks
leifoet
  • Locked
  • Question
How to link a condition to a session(&quot;UID&quot;) ?
Replies
14
Views
809
leifoet
leifoet

Part and Inventory Search

Sponsor

Back
Top