Jump to content
Science Forums

Html radio buttons

ozi-rock

By ozi-rock
in Computer Science and Technology

 Share

Recommended Posts

ozi-rock Newbie

ozi-rock

Posted
Posted

Hi

I would like to know how to create radio buttons on my weebly website: Amazing Men and their Magical Machines - Home. I want to use them as answers to the Einstein's puzzle section.

 

I would like to have the five radio buttons setup so that when one is chosen they disappear and a message saying correct or wrong appears.

 

Is this possible?

 

I got the button to appear before but i didnt know how to make them do anything:doh:

 

Thanks in advance,

Link to comment
Share on other sites
alexander Newbie

alexander

Posted
Posted

cant do it with straight html... but you can with a little JS...

 

here's an example

 

<!-- This is in the head -->

function showHide (obj) {
if (obj.style.visibility == "hidden") {
obj.style.visibility = "visible";
} else {
obj.style.visibility = "hidden";
}
}

<!-- This is on the checkbox -->

<input type="checkbox" onPropertyChange="showHide(whatever);" />

<!-- This is on the table row I want to show/hide -->

<tr id="whatever" style="visibility: hidden;">
<td> </td>
<td align="right"><label for="64bitxref">64-bit Xref</label></td>
<td><input name="64bitxref" type="text" value="" id="64bitxref"
size="32" maxlength="32"> </td>
<td> </td>
</tr>

 

(wont claim responsibility for this, this is from a post on webmansterworld.com)

 

but it shows the point of what you need to do to make that work.

 

there is an easier way... you could always use a service like Wufoo - HTML Form Builder - Free Contact Forms & Online Surveys

Link to comment
Share on other sites
alexander Newbie

alexander

Posted
Posted

screw flash, its such a blown out concept that it bewilders me how often and where it gets used.... i block flash personally, because whoever creates websites that are flash only, is a failed creator... not even developer...

 

ozi, here is an example:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Hide Test</title>
</head>
<body>
<script type="text/javascript">
/*****************************************/
/** Usable Forms 2.0, November 2005     **/
/** Written by ppk, www.quirksmode.org  **/
/** Instructions for use on my site     **/
/**                                     **/
/** You may use or change this script   **/
/** only when this copyright notice     **/
/** is intact.                          **/
/**                                     **/
/** If you extend the script, please    **/
/** add a short description and your    **/
/** name below.                         **/
/*****************************************/

var containerTag = 'TR';

var compatible = (
document.getElementById && document.getElementsByTagName && document.createElement
&&
!(navigator.userAgent.indexOf('MSIE 5') != -1 && navigator.userAgent.indexOf('Mac') != -1)
);

if (compatible)
{
document.write('<style>.accessibility{display: none}</style>');
var waitingRoom = document.createElement('div');
}

var hiddenFormFieldsPointers = new Object();

function prepareForm()
{
if (!compatible) return;
var marker = document.createElement(containerTag);
marker.style.display = 'none';

var x = document.getElementsByTagName('select');
for (var i=0;i<x.length;i++)
	addEvent(x[i],'change',showHideFields)

var x = document.getElementsByTagName(containerTag);
var hiddenFields = new Array;
for (var i=0;i<x.length;i++)
{
	if (x[i].getAttribute('rel'))
	{
		var y = getAllFormFields(x[i]);
		x[i].nestedRels = new Array();
		for (var j=0;j<y.length;j++)
		{
			var rel = y[j].getAttribute('rel');
			if (!rel || rel == 'none') continue;
			x[i].nestedRels.push(rel);
		}
		if (!x[i].nestedRels.length) x[i].nestedRels = null;
		hiddenFields.push(x[i]);
	}
}

while (hiddenFields.length)
{
	var rel = hiddenFields[0].getAttribute('rel');
	if (!hiddenFormFieldsPointers[rel])
		hiddenFormFieldsPointers[rel] = new Array();
	var relIndex = hiddenFormFieldsPointers[rel].length;
	hiddenFormFieldsPointers[rel][relIndex] = hiddenFields[0];
	var newMarker = marker.cloneNode(true);
	newMarker.id = rel + relIndex;
	hiddenFields[0].parentNode.replaceChild(newMarker,hiddenFields[0]);
	waitingRoom.appendChild(hiddenFields.shift());
}

setDefaults();
addEvent(document,'click',showHideFields);
}

function setDefaults()
{
var y = document.getElementsByTagName('input');
for (var i=0;i<y.length;i++)
{
	if (y[i].checked && y[i].getAttribute('rel'))
		intoMainForm(y[i].getAttribute('rel'))
}

var z = document.getElementsByTagName('select');
for (var i=0;i<z.length;i++)
{
	if (z[i].options[z[i].selectedIndex].getAttribute('rel'))
		intoMainForm(z[i].options[z[i].selectedIndex].getAttribute('rel'))
}

}

function showHideFields(e)
{
if (!e) var e = window.event;
var tg = e.target || e.srcElement;

if (tg.nodeName == 'LABEL')
{
	var relatedFieldName = tg.getAttribute('for') || tg.getAttribute('htmlFor');
	tg = document.getElementById(relatedFieldName);
}
	
if (
	!(tg.nodeName == 'SELECT' && e.type == 'change')
	&&
	!(tg.nodeName == 'INPUT' && tg.getAttribute('rel'))
   ) return;

var fieldsToBeInserted = tg.getAttribute('rel');

if (tg.type == 'checkbox')
{
	if (tg.checked)
		intoMainForm(fieldsToBeInserted);
	else
		intoWaitingRoom(fieldsToBeInserted);
}
else if (tg.type == 'radio')
{
	removeOthers(tg.form[tg.name],fieldsToBeInserted)
	intoMainForm(fieldsToBeInserted);
}
else if (tg.type == 'select-one')
{
	fieldsToBeInserted = tg.options[tg.selectedIndex].getAttribute('rel');
	removeOthers(tg.options,fieldsToBeInserted);
	intoMainForm(fieldsToBeInserted);
}
}

function removeOthers(others,fieldsToBeInserted)
{
for (var i=0;i<others.length;i++)
{
	var show = others[i].getAttribute('rel');
	if (show == fieldsToBeInserted) continue;
	intoWaitingRoom(show);
}
}

function intoWaitingRoom(relation)
{
if (relation == 'none') return;
var Elements = hiddenFormFieldsPointers[relation];
for (var i=0;i<Elements.length;i++)
{
	waitingRoom.appendChild(Elements[i]);
	if (Elements[i].nestedRels)
		for (var j=0;j<Elements[i].nestedRels.length;j++)
			intoWaitingRoom(Elements[i].nestedRels[j]);
}
}

function intoMainForm(relation)
{
if (relation == 'none') return;
var Elements = hiddenFormFieldsPointers[relation];
for (var i=0;i<Elements.length;i++)
{
	var insertPoint = document.getElementById(relation+i);
	insertPoint.parentNode.insertBefore(Elements[i],insertPoint);
	if (Elements[i].nestedRels)
	{
		var fields = getAllFormFields(Elements[i]);
		for (var j=0;j<fields.length;j++)
		{
			if (!fields[j].getAttribute('rel')) continue;
			if (fields[j].checked || fields[j].selected) 
				intoMainForm(fields[j].getAttribute('rel'));
		}
	}
}
}

function getAllFormFields(node)
{
var allFormFields = new Array;
var x = node.getElementsByTagName('input');
for (var i=0;i<x.length;i++)
	allFormFields.push(x[i]);
var y = node.getElementsByTagName('option');
for (var i=0;i<y.length;i++)
	allFormFields.push(y[i]);
return allFormFields;
}

/** ULTRA-SIMPLE EVENT ADDING **/

function addEvent(obj,type,fn)
{
if (obj.addEventListener)
	obj.addEventListener(type,fn,false);
else if (obj.attachEvent)
	obj.attachEvent("on"+type,fn);
}

addEvent(window,"load",prepareForm);


/** PUSH AND SHIFT FOR IE5 **/

function Array_push() {
var A_p = 0
for (A_p = 0; A_p < arguments.length; A_p++) {
	this[this.length] = arguments[A_p]
}
return this.length
}

if (typeof Array.prototype.push == "undefined") {
Array.prototype.push = Array_push
}

function Array_shift() {
var A_s = 0
var response = this[0]
for (A_s = 0; A_s < this.length-1; A_s++) {
	this[A_s] = this[A_s + 1]
}
this.length--
return response
}

if (typeof Array.prototype.shift == "undefined") {
Array.prototype.shift = Array_shift
}
</script>

Is there any case when 2+5=21?
<table>
<tr class="questions">
<td>
<input type="checkbox" id="yes" rel="correct" />  Yes
</td>
<td>
<input type="checkbox" id="no" rel="wrong" />  No
</td>
</tr>
<tr rel="wrong" >
<td> </td>
<td align="right">Learn bases please</td>
<td> </td>
</tr> 
<tr rel="correct" >
<td> </td>
<td align="right">Wee, you know bases</td>
<td> </td>
</tr> 
</table>
</body></html>

 

its a quick and simple one... js code documentation and examples can be found here: Javascript - Usable forms

Link to comment
Share on other sites
ozi-rock Newbie

ozi-rock

Posted
  • Author
Posted

Hi I've just another small question about websites, i have a Google webmaster account and it says my site hasn't been indexed yet but that takes weeks right?

 

Also it says i have no site map, i have a weebly.com website and i asked the support there if i needed one but i got no reply. Does anyone know if you need to make one for a weebly site and if you do, how? Do you put a list the urls in the footer section in the settings menu?

Link to comment
Share on other sites
Tormod Newbie

Tormod

Posted
Posted

I don't know weebly.com that well but if I'm not mistaken it does not offer sitemap support. One way to solve it would be to host the sitemap elsewhere but your site probably doesn't need a sitemap to be included in Google. Only really large sites benefit from that in my experience.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
 Share
Go to topic listing
×
×
  • Create New...