How create radio button with js?


(C.) #1

Hi,

Beginning with Hype, I wish to carry out a multiple-choice questionnaire and to analyze the result.
I have Study “Achieve Online Learning English Sample” but the part which interests to me is closed in a symbol !

How create can I create radio button with js ?

Tanks in advance.


#2

Hi Jean-Pierre!

Is there a particular reason you want to create radio buttons with JavaScript?

It is far easier to use the HTML “form” tag:

<form name="form1" action="">
  <input type="radio" name="gender" value="male"> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>

In Hype this code could go inside a rectangle’s “innerHTML”. When a user clicks on a radio-button, it becomes selected, and all other radio-buttons with equal name become unselected.

Example project:RadioBtns.hype.zip (20.8 KB)


(C.) #3

Hi Jim,

Thanks for your quick reply,

Is there a particular reason you want to create radio buttons with JavaScript?

Yes, because if I have a lot of page, I will prefer modify questions and results with an unique file if is possible, and it is easy to correct or modify.

I will like to try to build one or two or… script model, not to have to modify more “innerHTML” but it is perhaps too difficult for me !

I think an array with question, reply, count result for evaluation…

Thanks a lot for your assistance.
jp


(Mark Hunte) #4

Have a look at this. But be warned it is a bit beyond a beginner…

The example shows how to create the forms by reading the information from arrays of information.
I have put the info in the code of the example but it can easily be read from an external file.

This is the js code used

 //-- your would have your questions in an exernal .js file  that you would access by including a link to it.
 //-- But to simplfy this example I have the questions inline here showing how to structure the external file.

var questions =  [ 	
{questionId:"question1", formName:"form1",radioName:"gender",values:[  "Male", "Female" , "Other"]},
{questionId:"question2", formName:"form2",radioName:"abode",values:[  "House", "Flat" , "Studio"]}

      ];



//-- we iterate over each question

for (i = 0; i < questions.length; i++) { 
   var question;
   var theInput;
   
   var thisQuestion = questions[i];
   
   //-- we get the values arrary for the question
   var theValues =   thisQuestion.values;
   
   //-- we creat a label element for the text label.
   var label = document.createElement( 'label');
   
   //-- we create the form element 
   var theForm = document.createElement("form");
   //-- we set the forms name
   theForm.setAttribute('name',thisQuestion.formName);
 
  //-- we iterate over each value and create a input for it and we add the value
  for (q = 0; q < theValues.length; q++) { 
  
  theInput = document.createElement("input");

  theInput.setAttribute('type',"radio");
  
  theInput.setAttribute('name',thisQuestion.radioName);
  theInput.setAttribute('value',theValues[q]);
 
  
  //-- we add the input to its text label.  ( put it insdie of it )
  label.appendChild(theInput);
  label.innerHTML += "<span> " + theValues[q] + "</span><br>";
  //--we add the label to the form.
  theForm.appendChild( label);
  }
 
   //-- we get the correct Hype element to append to.
 question = hypeDocument.getElementById(thisQuestion.questionId);
 question.appendChild(theForm);
  

}

.RadioBtns_MH_v1.hype.zip (19.5 KB)


(Mark Hunte) #5

Here is a more rounded version.

This uses an external file for the questions.

The number of questions match the number of question elements we have on the scene. And each element will be changed dynamically by the data in it’s question in the external file.

More questions will require new elements on the scene.
But I have written this so you simply just need to add them and follow the id naming convention of the question elements and the answer elements.(scene 2)

As you see above we now have a second scene which shows the results.
The results are collected at the the time the users clicks a radio button and the details are set into an associative array ( window.answers)

The code used. ( putting here as it makes for future searches easier)

Code run on the first scene load. The Questions scene has 3 elements with id’s we use later.

In the external js file.

window.questions =  [ 	
{questionId:"question1", formName:"form1",radioName:"gender",values:[  "Male", "Female" , "Other"]},
{questionId:"question2", formName:"form2",radioName:"abode",values:[  "House", "Flat" , "Studio"]},
{questionId:"question3", formName:"form3",radioName:"wages",values:[  "£25.000", "£45.000" , "£75.000"]}

      ];


window.answers = [];

in the Head file.

<script type="text/javascript" src="./questionLists.js"></script>


makeForm() code:

/*
 your would have your window.questions in an exernal .js file  that you would access by including a link to it in the head
  

<script type="text/javascript" src="./questionLists.js"></script>

 The js in the file has a global var name:  window.questions
And a window.answers  global for the answers Function
*/
 

//-- we iterate over each question

for (i = 0; i < window.questions.length; i++) { 
   var question;
   var theInput;
   
   var thisQuestion = window.questions[i];
   
   //-- we get the values arrary for the question
   var theValues =   thisQuestion.values;
   
   //-- we creat a label element for the text label.
   var label = document.createElement( 'label');
   
   //-- we create the form element 
   var theForm = document.createElement("form");
   //-- we set the forms name
   theForm.setAttribute('name',thisQuestion.formName);
  
  //-- we iterate over each value and create a input for it and we add the value
  for (q = 0; q < theValues.length; q++) { 
  
  theInput = document.createElement("input");
  
 
 
 theForm.onclick = function(){hypeDocument.functions().getValues(hypeDocument, this, event)};
 
   theInput.setAttribute('type',"radio");
  
  theInput.setAttribute('name',thisQuestion.radioName);
  theInput.setAttribute('value',theValues[q]);
 
  
  //-- we add the input to its text label.  ( put it insdie of it )
  label.appendChild(theInput);
  label.innerHTML += "<span> " + theValues[q] + "</span><br>";
  //--we add the label to the form.
  theForm.appendChild( label);
  }
 
   //-- we get the correct Hype element to append to.
 question = hypeDocument.getElementById(thisQuestion.questionId);
 question.appendChild(theForm);
  

}

getValues() code. Run when a radio input is clicked.

 //-- we get the radio input's value of the checked item
var inputName = element.querySelector('input').name;
var inputValue = element.querySelector('input[name="' + inputName + '"]:checked').value
 

var thisAnswer = hypeDocument.getElementById( "a" + element.parentNode.id)

 //--  we check to see if the answer name already exists if so we change the value. This counters someone clicking a radio button in the same group to change their mind.
for (i = 0; i < window.answers.length; i++) { 
 
if (window.answers[i].inputName.indexOf(inputName) == 0){
 
window.answers[i].value = inputValue;
return;
} 

 

}

//-- not exits yet let s add the answer.
window.answers.push({
		inputName: inputName,
        name: "a" + element.parentNode.id,
        value: inputValue
    });  

answers() code. Run when a the results button is clicked.

	//-- we go to next scene and update the answer summery.
	//-- the summery is built up in the getVlaues code when the user clicks a radio button. It data is place in an associative array we use here ( window.answers)
	
for (i = 0; i < window.answers.length; i++) { 
 
 hypeDocument.getElementById(window.answers[i].name).innerHTML = window.answers[i].value;


 }

Scene 1.

Three rectangle elements with ids

question1
question2
question3


Scene 2.

Three text elements with ids
aquestion1
aquestion2
aquestion3


To test you will need to export the html. You cannot test it in Preview.

RadioBtns_MH_v2.zip (135.4 KB)


v3

A slight updated version where the radio button input names are also used to populate the Question and Answer Titles.

Working example page


RadioBtns_MH_v3.zip (153.6 KB)


#6

Thank You again Mark for being such a great resource for this Forum!