Interactive test via HTML?

Forum Options:	my.neoforum register members prefs search faq

Topic: Interactive test via HTML? Options: Print subscribe remove NeoPM
Threads List « Next Newest Next Oldest »
Freeze (╮°-°)╮┳━┳ ( ╯°□°)╯ ┻━┻ NeoXtreme total posts: 8641 neopoints: 325 since: Jan 2003	Apr 02, 12 at 6:25am ^ Interactive test via HTML?
	Log in to remove this sponsored message Hi guys, I am looking to create something similar to this, where a few questions will fill up the meter. It would be nice if the bar would rise while doing the questions, but it's optional. At the end of the test you'd get the result, depending how high on the meter you score. I was wondering, is there an easy way to achieve this with HTML or via a free tool? -------------------
	quote quick quote edit quick edit del posts in thread report
Advertisement Neoseeker	^ Sponsored message

	Log in or register to remove this sponsored message
Fluroclad Flowers are my thing :) Seeketh Maximus total posts: 5168 GameGrep pts: 2157 since: Feb 2010	Apr 02, 12 at 6:47am ^ re: Interactive test via HTML?
	Freeze doing an interactive test in HTML is not possible without the use of JavaScript or something external such as Adobe Flash Player ------------------- Support the League of Legends Wiki on Neoseeker Sign Up to play League of Legends for free
	quote quick quote edit quick edit del posts in thread report
Freeze (╮°-°)╮┳━┳ ( ╯°□°)╯ ┻━┻ NeoXtreme total posts: 8641 neopoints: 325 since: Jan 2003	Apr 02, 12 at 10:19am ^ re: Interactive test via HTML?
	Alright, thanks for the clearance DreamCrafter, so how hard would it be to code such a thing in Javascript? I'm not a fan of Flash at all... Or do you know a good template which would do similar to the link I provided? -------------------
	quote quick quote edit quick edit del posts in thread report
tekmosis neostaff total posts: 5014 since: Jul 2006	Apr 02, 12 at 5:18pm ^ re: Interactive test via HTML?
	This can probably be accomplished with HTML and JS and/or HTML5 / JS. It's def not something for a beginner though. -------------------
	quote quick quote edit quick edit del posts in thread report
BeZ The World Is Quiet Here Still Seekin' total posts: 3753 since: Jan 2005	Apr 03, 12 at 11:52am ^ re: Interactive test via HTML?
	Freeze since I believe in teaching by example, here's how I'd do it. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"/> <title></title> <style type="text/css"> .progressBar { width: 50px; height: 300px; background-color: #c9c9c9; position: relative; } .progressMeter { position: absolute; bottom: 0; width: 50px; background-color: red; } </style> <script type="text/javascript"> //wait for page to finish loading document.addEventListener("DOMContentLoaded",function() { //get the progress meter var progressMeter = document.getElementsByClassName('progressMeter')[0]; //listen for the submit button to be pressed document.getElementById('form1-submit').addEventListener('click',function(event) { //total will be how much is added to the progress bar var total = 0; //get all the checkboxes var checkboxes = document.getElementsByClassName('form1'); //loop through all the checkboxes for(j = 0; j < checkboxes.length; j++) { //if the current checkbox is ticked then add its value to the total if(checkboxes[j].checked){ total += parseInt(checkboxes[j].value); } } //finally add the total to the height of the progress meter (the old height + total) progressMeter.style.height = parseInt(progressMeter.style.height)+total+"%"; //stop the form from submitting event.preventDefault(); return false; }) }); </script> </head> <body> <div class="progressBar"> <div style="height: 0;" class="progressMeter"> </div> </div> <form> <label>Question 1</label> <input type="checkbox" class="form1" value="-5"/><br/> <label>Question 2</label> <input type="checkbox" class="form1" value="9"/><br /> <label>Question 3</label> <input type="checkbox" class="form1" value="10"/><br /> <label>Question 4</label> <input type="checkbox" class="form1" value="10"/><br /> <label>Question 5</label> <input type="checkbox" class="form1" value="11"/><br /> <input type="submit" id="form1-submit" value="Continue" /> </form> </body> </html> It simply uses the value of the checkboxes to add a percentage to the height of the progress bar, you could set some of the values to negative numbers to make the progress bar go down, you just have to make sure that the positive answers don't go beyond 100. You can add more forms to make 'pages' similar to the Flash example up there, you'd have to mess around with more JavaScript and styling to make each form appear and disappear as you progress through it but this is a proof of concept, it can be done! ------------------- Gamertag/PSN: iBeZi
	quote quick quote edit quick edit del posts in thread report
Freeze (╮°-°)╮┳━┳ ( ╯°□°)╯ ┻━┻ NeoXtreme total posts: 8641 neopoints: 325 since: Jan 2003	Apr 03, 12 at 12:21pm ^ re: Interactive test via HTML?
	BeZ thank you, that looks promising enough! I noticed that upon checking box 2 and clicking 'continue' two times it adds 9 twice to the total. Is there a way to prevent it, so that each value will only be added / subtracted once and also, the continue will give an error upon not answering one of the questions? Also, is it possible to automatically progress the meter upon checking or unchecking the checkbox? -------------------
	quote quick quote edit quick edit del posts in thread report
BeZ The World Is Quiet Here Still Seekin' total posts: 3753 since: Jan 2005	Apr 03, 12 at 1:16pm ^ re: Interactive test via HTML?
	Freeze, I imagined that there would be more than one form of questions which was why it added to the progress bar every time you pressed continue, I figured that eventually that form would disappear and another one would take it's place. Yes you can make it update when you click on a checkbox, this example has the above method replaced with that method. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"/> <title></title> <style type="text/css"> .progressBar { width: 50px; height: 300px; background-color: #c9c9c9; position: relative; } .progressMeter { position: absolute; bottom: 0; width: 50px; background-color: red; } </style> <script type="text/javascript"> //wait for page to finish loading document.addEventListener("DOMContentLoaded",function() { //get the progress meter var progressMeter = document.getElementsByClassName('progressMeter')[0]; //get the checkboxes var checkboxes = document.getElementsByClassName('form1'); //loop through all the checkboxes for(i = 0; i < checkboxes.length; i++) { //add an event listener to each checkbox listening for a click checkboxes[i].addEventListener('click',function() { //get the value of the clicked checkbox var value = this.value; //if the checkbox is checked then add height, if not take it away if(this.checked) { progressMeter.style.height = parseInt(progressMeter.style.height)+parseInt(value)+"%"; } else { progressMeter.style.height = parseInt(progressMeter.style.height)-parseInt(value)+"%"; } }); } //start function when the submit button is pressed document.getElementById('form1-submit').addEventListener('click',function(event) { var answered = false; var checkboxes = document.getElementsByClassName('form1'); for(i = 0; i < checkboxes.length; i++) { if(checkboxes[i].checked) { answered = true; } } if(!answered) { alert('you must answer at least one question'); } //stop the form from submitting event.preventDefault(); return false; }) }); </script> </head> <body> <div class="progressBar"> <div style="height: 0;" class="progressMeter"> </div> </div> <form> <label>Question 1</label> <input type="checkbox" class="form1" value="5"/><br/> <label>Question 2</label> <input type="checkbox" class="form1" value="9"/><br /> <label>Question 3</label> <input type="checkbox" class="form1" value="10"/><br /> <label>Question 4</label> <input type="checkbox" class="form1" value="10"/><br /> <label>Question 5</label> <input type="checkbox" class="form1" value="11"/><br /> <input type="submit" id="form1-submit" value="Continue" /> </form> </body> </html> This also makes sure that at least one of the boxes is checked when the submit button is pressed. ------------------- Gamertag/PSN: iBeZi
	quote quick quote edit quick edit del posts in thread report
[All dates in (PST) time]	Threads List « Next Newest Next Oldest »

Thread title	From	Last replied
Now searching...

Hobbies

Sports

Skills

Chat and Lounges

Game Platforms

Mobile Platforms

Top Core Games

Top Portable Games

Top Communities