Results
Hype Dynamic form Example
Reset
Your choices
//-- 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; }
//-- We set up the text Title for the Answersfor (i = 0; i < window.questions.length; i++) {
var thisAnswerTitle = hypeDocument.getElementById( "tanswer" + [i + 1]);
thisAnswerTitle.innerHTML = window.questions[i].radioName; }
X
Answers
Get Values
//-- we get the radio input's value of the checked itemvar radioName = element.querySelector('input').name;
var inputValue = element.querySelector('input[name="' + radioName + '"]: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].radioName.indexOf(radioName) == 0){
window.answers[i].value = inputValue; return;
} }
//-- not exits yet let s add the answer.window.answers.push({ radioName: radioName, name: "a" + element.parentNode.id,
value: inputValue });
/*your would have your window.questions in an exernal .js file that you would access by including alink to it in the head 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 questionvar question;
var thisTitle;
var theInput;
for (i = 0; i < window.questions.length; i++) {
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 set up the text Title for the question
var thisQuestionTitle = hypeDocument.getElementById( "tquestion" + [i + 1]);
thisQuestionTitle.innerHTML = "Q"+ [i + 1] + " " + thisQuestion.radioName;
//-- 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 += " " + theValues[q] + "
";
//--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); }
Make Forms
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"]},
{questionId:"question4", formName:"form4",radioName:"Entertainment",values:[ "Movies", "Tv-Shows" , "Reading"]},
{questionId:"question5", formName:"form5",radioName:"Food",values:[ "Omnivore", "Herbivore" , "Carnivore"]},
{questionId:"question6", formName:"form6",radioName:"Clothes",values:[ "Retro", "Contemporary" , "Any"]}
];
window.answers = [];
External File
< code